Laravelでviteのビルドに苦戦した話。

2024.02.29

Logging

おはようございます。laravel-mixからviteに変わっていたのは知っていたのですがビルドしたvue3をbladeファイルで呼び出しても動かなかった事で一日かかった馬しかです。 結論から言えば、vueを参照するじゃなくてvue/dist/vue.esm-bundler.jsで参照する。 これで@vite(‘resources/js/app.js’)呼び出せばビルドした先の参照ファイルを呼び出せる。 尚、ビルドしたファイルはパブリックディレクトリの中にあります😅。

import { createApp } from "vue";//ビルドしてもLaravel側で動かない
import { createApp } from "vue/dist/vue.esm-bundler.js";//こうするとビルドすると動く。
//ブレイド側の呼び出しは@vite('ビルドしたファイル名')
//ビルドするファイルの設定はルートディレクトリにあるvite.config.jsを変更すると良い。

知っている人に取っては簡単な話ですが、そこまでたどり着くのにかなりググりました、因みにchatGPTもGeminiもあまり良いヒントは与えてくれなかったです。

明日へ続く。

タグ

app.js, bladeファイル, chatGPTもGemini, createApp, dist, import, Laravel-Mix, Laravel側, quot;vue, quot;vue&quot, resources, vite, vite.config.js, vue, vue.esm-bundler.js, vue.esm-bundler.js&quot, vue3, パブリックディレクトリ, ルートディレクトリ, 馬しか,

計算をリアルタイム。

2024.02.27

Logging

おはようございます、vue3.jsの一貫として時給計算するちょっとしたWEBサービスを作ってみました。vue.jsを触っていてわかったことはリアルタイム反映みたいなものが簡単にできるところ。これは便利ですね。JQueryから皆さんが移行する意味がいまごろ分かりました。

これからはvue.jsやReact.jsなどを使用していきたいですね。因みに自分はバニラばかりでした、バニラの良い所は慣れているせいか書きやすいところにあります。vueやReactにもバニラが入っていても問題ないので、そういう意味では今までの事が活かせるかもなって思います。

最後にサービスのリンクを貼ってこの記事は〆とします。

https://zip358.com/tool/payroll-calculation/

明日へ続く。

タグ

jquery, react, React.js, vue, vue.js, vue3.js, Webサービス, サービス, ところ, バニラ, リアルタイム反映, リンク, 一貫, 問題, 意味, 時給, 最後, 皆さん, 自分, 良い所,

Next.jsやNuxt.js.コレやアレやでport80は使えない。

2022.10.15

Logging

おはようございます、土日は雨が降るとか降らないとか🥕。

さて、Node.jsを飛び越えRact.js、Vue.jsを飛び越えてNext.jsやNuxt.jsの事を調べてたりデモページを起動してみたりして、わかったこと。コレはアプリ開発の為の道具なんだという事を改めて認識。

オープンなWebサーバーで動くように設計されていない。ポート８０番上で動くように設計されていないのだから、この理由はnode.jsのインストール仕様や動作仕様が関係しているような気がします。

Next.jsやNuxt.jsが出来た背景はHTMLコードを記入したりするのが面倒くさいからだと…w。だからこういうフレームワークが出来たんだろう。フレームワークの概念はLaravel等と概念的にはあまり変わりないので、まぁそんなにって思うけど、初学者はVue.jsを勉強してNode.jsを触った後にRact.js、Next.jsが良いと思います。因みにVue.jsのフレームワークがNuxt.jsです。

Next.jsでlocalhost:3000で表示させるのは簡単なだけど、独自ドメインで表示する方法はドキュメント以外に表示されていなかった。ググっても出てこない事もあるのだなと・・・。

ツイッターにメモとして呟いて置きましたので、そちらを参照ください。この独自ドメインを使う調査に数十分使用してしまった。この時間、とても勿体無いメンターが欲しいなって思います。

タグ

80, html, JS, Laravel, NEXT, node, nuxt, port, Ract, vue, web, アプリ, アレ, インストール, コード, こと, コレ, サーバー, デモ, フレームワーク, ページ, ポート, 事, 仕様, 初学者, 勉強, 動作, 土日, 後, 概念, 気, 為, 理由, 背景, 記入, 設計, 認識, 起動, 道具, 開発, 関係, 雨,

JavaScriptのdocumentがドキュメントな訳。

2022.06.07

Logging

おはようございます。そろそろ梅雨入りなのかもなって。

さて、タイトル通りドキュメントな訳を知りたい方もいると思います、自分も何故、document（資料）なのかなって数秒間考えた結果、インターネットやHTMLの歴史を調べれば分かると思いますが、もともと研究者同士の情報交換（資料共有）に使用されていたのがモノがあるきっかけで注目を浴びた結果、今日では世界中で使用されるようになったのだと考えるとdocumentの意味がわかる。

因みにJavaScript（JS）はプログラミング学習、初学者には最適な言語だと思います、何故ならブラウザの開けるパソコンが一台有れば学習できる言語だからです。尚、JavaScriptを学んでVue.jsなどのフレームワークを学ぶのが定石だと思います。JavaScriptで独自プラグインを作ることが出来ればフレームワークの勉強に進んでも挫折しないと思います。

タグ

document, html, javascript, JS, vue, インターネット, きっかけ, こと, タイトル, ドキュメント, パソコン, ブラウザ, プラグイン, フレームワーク, プログラミング, もの, 一, 世界, 交換, 今日, 使用, 共有, 初学者, 勉強, 同士, 学習, 定石, 情報, 意味, 挫折, 数秒, 方, 最適, 梅雨入り, 歴史, 注目, 研究者, 結果, 自分, 言語, 訳, 資料,

JSのPromiseとawaitってこういう事なんだよね。理解した！！( ･ิω･ิ)

2022.04.29

Logging

おはよう御座います。

この頃、JSを使う機会が増えてきています。巷ではReact.jsなどやVue.jsなんかが人気ですよね。またnext.jsなんかも出来れば転職活動に有利です。でもそんなフレームワークを勉強するまえにJavaScriptの基礎が出来ていないといけないと思っています。ネイティブでゴリゴリ書ける人であれば、何処へ行ってもやってけると思っています。

"use strict";
const main = (a,b,c)=>{
    return new Promise ((resolve)=>{
        console.log(a,b,c);
        b++;
        resolve({a:a,b:b,c:c}); 
    });
}
(async()=>{
    await main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
    // main("A1",1,"C1").then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c)).then((val)=>main(val.a,val.b,val.c));
    console.log("fin");
})();

Promiseとawaitとかの使い方はこんな感じです😀、このコードでは重たい処理を書いているわけではないけど、非同期通信処理チェーンで繋ぐとどんな所で使えば良いのか分かるかなって思います。要するに順番に非同期通信処理をしたい時に役に立ちます。このソースコードの場合、awaitしなくても良いですがね・・・。awaitを付けると処理後に次のコードが処理されます。付けない場合は同時並行的に処理されます。

サンプルコードはこちらから閲覧ください（検証）ませ！！

タグ

１, async, await, console, const, gt, javascript, JS, log, main, new, NEXT, Promise, quo, quot, react, resolve, return, strict, use, vue, なん, なんか, ネイティブ, フレームワーク, まえ, 事, 人, 人気, 何処, 勉強, 基礎, 巷, 有利, 機会, 活動, 理解, 転職, 頃,

彼のVue.jsの入門解説動画が分かりやすいかも。超入門は理解しました。

2021.07.12

Logging

vue.jsを勉強したい方はよしぴーのYouTubeプログラミングスクールの超Vue.jsの入門解説動画が分かりやすいかも。自分は入門版は理解しました。尚、bodyにID付けて試すのは辞めとけよ。bodyにIDを付けて動かないなぁとかしないように！！ドキュメントにもbodyにIDを付けるのは推奨しないと記載しております。動画を見て背景の色を動的に変えるvue.jsの簡単なサンプルプログラム作りました。コード書いていてjavascriptで書くよりもvue.jsなどのライブラリ？を使用して書くほうが短いコードで書けるので良いなと実感。

htmlコードとvue.jsのコードは下記になります、最終的にはvue.jsでアプリ作りたいな（時間がない？^^;）。SPAに関して難しいという意識がある人も触っていくうちに慣れると思います。因みに学習能力が高い人はこんなの作れちゃうみたいですね、学習してまだ二週間しか経過していなくてゴニョゴニョ作れている所がへぷさん（@HEP1147）、凄いところ！！ですね。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<style>
    #el{
        width: 100vw;
        height: 100vh;
    }
</style>
<title>背景の色を変える</title>
</head>
<body>
<div id="el" v-on:mousemove="mouseXY($event)">
    <span v-on:click="colorclick('#000')"style="color:#000">■</span>
    <span v-on:click="colorclick('#fff')"style="color:#fff">■</span>
    <span v-on:click="colorclick('#4eaeec')"style="color:#4eaeec">■</span>
    <span v-on:click="colorclick('#4eeccc')"style="color:#4eeccc">■</span>
    ---{{ color }}---
    X={{x}},Y={{y}}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="./main.js?<?=time()?>"></script>
</body>
</html>

var vm = new Vue({
    el:"#el",
    data:{
        color:"#fff",
        x:0,
        y:0
    },
    methods:{
        colorclick:function(c){
            this.color = c;
            document.body.style.backgroundColor = c;
            return true;
        },
        mouseXY:function(event){
            this.x = event.clientX;
            this.y = event.clientY;
        }
    }    
});
  

タグ

body, html, ID, javascript, JS, SPA, vue, youtube, アプリ, うち, コード, サンプル, スクール, ドキュメント, プログラミング, プログラム, よし, ライブラリ, 下記, 人, 使用, 入門, 勉強, 動画, 学習, 実感, 彼, 意識, 推奨, 方, 時間, 理解, 簡単, 背景, 能力, 自分, 色, 解説, 記載, 超,

プログラム講師YOUTUBER、たにぐち まことさん。

2020.04.25

Logging

たにぐち まことさんという方がYOUTUBEでフロントエンドエンジニアやバックエンドエンジニアに対して有益な情報を公開しています。wordpressやvue.jsなどをわかりやすく解説しています。近々、kintoneの高知県講演（ライブ放送）で登壇される予定です。これからWEBのプログラマーやコーダーになりたい人は視聴して損はないと思います。自分が昔、HTMLなどを学んだときにはあまり本も買わずソースコード（HTMLコード）から勉強をしていましたが、いまはYOUTUBEという便利なツールがあるので、教育系YOUTUBERの動画を見て学習し手を動かして実践することにより短時間で学習することが出来ると思います。

自分がいまプログラミング初心者だったら、下記のようなプログラミング学習方法を取ると思います。YOUTUBEで教育系動画を視聴して動画で説明された物と同じ物を作成します。作成途中に分からない事があればググります、そして再度動画を観る。進まない時はSNSで質問をするなどを行いながら徐々に知識を身に着けていきます。知識がつくと基本を知ることが出来るので、次に違うプログラミング言語を学ぶ時の応用が付きます。尚、違う言語を学ぶときは以前まで使用していたプログラミング言語をいま勉強している言語で同じことを試してみるという事を行います。そうすることで比較的短時間で違う言語の勉強がスムーズになります。

最後にYOUTUBEチャンネル登録はこちら
たにぐち まことのともすたチャンネル
https://www.youtube.com/channel/UCphTq6mefx_15CjD35qgXgA

タグ

html, JS, kintone, vue, web, WordPress, youtube, YOUTUBER, いま, エンジニア, エンド, コーダー, コード, こと, これ, ソース, たにぐち, ツール, とき, バック, プログラマー, プログラミング, プログラム, フロント, まこと, ライブ, 下記, 予定, 事, 人, 作成, 便利, 公開, 初心者, 勉強, 動画, 学習, 実践, 情報, 手, 損, 放送, 教育, 方, 方法, 昔, 有益, 本, 物, 登壇, 短時間, 自分, 視聴, 解説, 説明, 講師, 講演, 途中, 高知県,

アロー演算子の数珠繋ぎの作り方?

2020.03.17

Logging

コロナウィルス対策の一環として東京都が“GitHub”に開設した新型コロナウイルス対策サイトがすごいと話題になっているらしいので自分も見てみました。ソースコードはVue.js,TypeScript,React.js,PHPなどなどいろいろな言語が使用されていました。PHPはLaravelの機能が使われてたりして、書き方が綺麗で勉強になるなぁと思ったわけです。参考になりますよね、きれいな書き方のコードを見るとやはり参考になります。

もともと、書き方が古いと自分は古い書き方に合わせます。特に上がプライドが高い人だと出る杭は打たれるみたいな状態になりますので要注意ですね…。そういう人が上にいると徐々にコードを書くのが面白くなくなります。そういうのは大いにあるなと思います。名も知らないひとのコード書きが自分の上司だったらなと思うときがあります。

そう愚痴ってもしょうが無い、その環境を選んだのは自分自身な訳ですからね。
ただ技術力を伸ばしたければやはり環境は大事、辞めたいなら辞めて自分の力を表現できる環境に身をおいた方が断然良い。

前置き長くなりました、、アロー演算子を数珠繋ぎする考え方はこんな感じです。考え方を知っとくと応用が出来るようになります、やはり基準を知るが大事かなといつも思います。

追記：これを応用するとこんな感じになります。追記のソースコードを記載しました（2021.07.05）

<?php
class testA{
    public $a = "";
    public function __construct($a)
    {
        $this->a = $a;
    }
    public function test1($a=""):string{
        return (string)$this->a." ".$a."<br>\n";
    }
    public function test2($a=""):string{
        return (string)$this->a." ".$a."<br>\n";
    }
}
class test{
    public function main($a="Hello"):object
    {
        $this->a = $a;
        return new testA($this->a);
    }
}
$test = new test();
print $test->main()->test1("PHP");
print $test->main("by")->test2("C");

<?php
    class test{
        function main(){
            return new class{
                function testA(){
                    return "testA";
                }
                function testB(){
                    return "testB";
                }
            };
        }
    }
    $test = new test();
    print $test->main()->testA();
    print $test->main()->testB();

タグ

github, JS, Laravel, php, react, TypeScript, vue, アロー, いろいろ, ウィルス, きれい, コード, コロナ, コロナウイルス, サイト, しょう, ソース, とき, ひと, プライド, もともと, わけ, 一環, 上, 上司, 人, 作り方, 使用, 勉強, 参考, 名, 対策, 技術力, 数珠繋ぎ, 新型, 書き方, 杭, 東京都, 機能, 注意, 演算子, 状態, 環, 環境, 綺麗, 自分, 自身, 言語, 訳, 話題, 開設,

vue.jsとreact.jsをお触りしているのですが?。

2020.02.13

Logging

vue.jsとreact.jsをお触りしてみて、どちらが難しいかといえばreact.jsかなと思いますが、すごく難しいわけでもない。vue.jsはjqueryがサクサク使えていて概念も大体把握していて、オリジナルプラグインも作れるよという方にはそれほど難しいとは感じないと思います。vue.jsの概念さえ理解できればあとは、vue.jsの仕様やドキュメントみれば、慣れれば使いこなす事は簡単だと思います。

react.jsは、JSXの事をちゃんと理解すれば使いこなす事はまぁ可能かなと思います。いま、web業界ではreact.jsとかゴニョゴニョ使える人が重宝されるみたいですよ。というか、もうjqueryとかオワコンと都会では業界人が言ってそうですね。ただ、そんな古いコードが田舎では動いてますし田舎の零細企業では、未だにIEの事をいう人がいる。そろそろIEの呪いから解き放たれたいですね…。マイクロソフトはいまの社長さんになってかなりマイクロソフト変わったのでWEB業界では、有り難い存在だと自分は勝手に思ってます。

タグ

IE, jquery, JS, JSX, react, vue, web, あと, いま, オリジナル, オワコン, かな, コード, ゴニョゴニョ, ドキュメント, どちら, プラグイン, マイクロソフト, わけ, 事, 人, 仕様, 企業, 可能, 呪い, 大体, 把握, 方, 業界, 業界人, 概念, 理解, 田舎, 社長, 簡単, 都会, 重宝, 零細,