今回やること 　ダイアログボックスの「鑑賞日」の入力項目を、Datepickerに変更します。 Datepickerの導入 　使用するDatepickerは、「vuejs-datepicker」です。 　◆参考サイト Vue.jsのdatepickerは「vuejs-datepicker」がおすすめ！ Index.html 　ライブラリをCDNで取得します。 <!-- vuejs-datepicker --> <script src="https://unpkg.com/vuejs-datepicker"></script> Vuejs.html 　子コンポーネント（ダイアログボックス）に、componentsを追加します。 Vue.component("modal", { template: "#modal-template", props: { ： }, methods: { ： }, components: { "vuejs-datepicker": vuejsDatepicker } }); ダイアログボックスの「鑑賞日」を変更 modalScript.html 　<input type="text">タグを<vuejs-datepicker>タグに変更する。 <!-- <input type="text" class="form-control" id="viewing-date" v-model="cond.viewingDate"> --> <vuejs-datepicker input-class="form-control" id="viewing-date" v-model="cond.viewingDate" :format="datepicker.format"></vuejs-datepicker> Vuejs.html 　子コンポーネント（ダイアログボックス）に、「vuejs-datepicker」で使用する変数（datepicker.format）を追加する。 　この変数は、日付の書式の設定で使用します。 　データの連携は、<vuejs-datepicker>タグ（modalScript.html ファイル）の:format="datepicker.format"で行います。 　親コンポーネントにも、datepicker.formatを追加して書式（'yyyy-MM-dd'）を指定します。 Vue.component("modal", { template: "#modal-template", props: { message: String, ： datepicker: { format: String } }, ： }); var app = new Vue({ el: '#app', data: { processingType: '記録追加', ： datepicker: { format: 'yyyy-MM-dd' }, selectedYear: '2021年', optionYear: [] }, ： }); 　親コンポーネントの処理（methods:）を変更します。 　従来は、月日のみの指定でしたが、年の指定も追加します。（doShowModalとconvertDateを修正する） var app = new Vue({ el: '#app', data: { ： }, ： methods: { ： }, doShowModal: function() { this.processingType = '記録追加'; this.subject = '　追　加　'; this.cond.id = 0; let today = moment(new Date()); //this.cond.viewingDate = (today.month() + 1) + '/' + today.date(); this.cond.viewingDate = today.year() + '-' + (today.month() + 1) + '-' + today.date(); this.cond.movieName = ''; this.cond.theaterName = ''; this.cond.firstLook = 1; this.cond.viewingType = 1; this.cond.year = this.selectedYear; this.showModal = true; }, doShowModalUpdate: function(index) { this.processingType = '記録更新'; this.subject = '　更　新　'; this.cond.id = this.records[index][0]; this.cond.viewingDate = this.convertDate(this.records[index][1]); this.cond.movieName = this.records[index][2]; this.cond.firstLook = this.records[index][3]; this.cond.viewingType = this.records[index][4]; this.cond.theaterName = this.records[index][5]; this.cond.year = this.selectedYear; this.showModal = true; }, convertDate: function(date) { let day = moment(date); //let res = (day.month() + 1) + '/' + day.date(); let res = new Date(day.year(), day.month(), day.date()); return res; }, ： } }); 　上記の修正だけで良いと思うのですが、このままではダイアログボックスから処理が戻る際に、cond.viewingDateで型エラー（Vue.js）が発生します。 　値をDate型からString型に変換して、cond.viewingDate（「鑑賞日」）にセットし直すとエラーが解消されます。 var app = new Vue({ el: '#app', data: { ： }, ： methods: { doAddData: function(cond) { this.showModal = false; const day = cond.viewingDate.getFullYear() + '-' + (cond.viewingDate.getMonth() + 1) + '-' + cond.viewingDate.getDate(); this.cond.viewingDate = day; addData(cond); }, 結果 　「鑑賞日」にDatepickerが適用されました。 ◆前の記事 GASでWebアプリ｢映画鑑賞記録｣を作る⑧ ◆索引 GASでWebアプリ｢映画鑑賞記録｣を作る《索引》

はじめに Vue.jsでソートはどうやるのか気になったので備忘録として。 環境設定 今回はCodePenを使って実装します。またテーブルのデータはjsonplaceholderからaxiosを使って取得して使用します。 Vue.jsは2.6.11を使用しています。 CodePenのセッティングでvue.jsとaxiosを読み込みます。 See the Pen Vue.js vue-sort by morioka (@rm5912) on CodePen. HTML <div id="app"> <h1>{{ message }}</h1> <h2> {{ sort_key }}: {{ sort_asc ? '昇順' : '降順'}}</h2> <table> <thead> <tr> #v-onディレクティブのクリックイベントでv-bindディレクティブのaddClassを発火してます。 <th @click="sortBy('name') " :class="addClass('name')">Name</th> <th @click="sortBy('email')" :class="addClass('email')">Email</th> <th @click="sortBy('website')" :class="addClass('website')">Website</th> </tr> </thead> <tbody> <tr v-for="user in sort_users" :key="user.id"> <td>{{ user.name }}</td> <td>{{ user.email}}</td> <td>{{ user.website }}</td> </tr> </tbody> </table> </div> CSS table { border-collapse: collapse; width: 100% } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } th { color:white; background-color: #1E90EF; } .asc::after { content: "↓" } .desc::after { content: "↑" } JavaScript new Vue({ el: '#app', data: { message: 'Sort Column IN Table', users: [], sort_key: "", sort_asc: true }, mounted(){ axios.get('https://jsonplaceholder.typicode.com/users') .then(response => this.users = response.data) }, methods: { sortBy(key) { this.sort_key === key ? (this.sort_asc = !this.sort_asc) : (this.sort_asc = true) this.sort_key = key }, addClass(key) { return { asc: this.sort_key === key && this.sort_asc, desc: this.sort_key === key && !this.sort_asc } } }, computed: { sort_users() { if(this.sort_key != "") { let set = 1; this.sort_asc ? (set = 1) : (set = -1) this.users.sort((a, b) => { if (a[this.sort_key] < b[this.sort_key]) return -1 * set; if (a[this.sort_key] > b[this.sort_key]) return 1 * set; return 0; }) return this.users } else { return this.users } } } }) 参考サイト vue.jsでテーブルの列をソート(並べ替え)する方法

概要 この記事は、Laravel8でVue.jsを連携利用しようとするも、事前準備段階で早々につまづいてしまった1人の少女の数奇な運命を綴る冒険談トラブルシューティング談です。基本的にポエムです。ご了承ください。なお、Node.jsの環境構築方法や「そもそもVue.jsって何？」の部分にはほとんど触れていません。ご承知おきください。 おいおいおい、おいおいおいおい、Vueなんて、どこにも書いていないじゃあないか より良いアプリケーションにはより良いUI/UXが必要。より良いUI/UXを実装するためにはモダンなフロントエンドフレームワークとの連携が不可欠だッ！ということでLaravelの入門書を参考にVue.jsのセットアップをしようとしていた時に、事件は起こりました。 入門書によると、セットアップの手順は以下の通り。 createしたLaravelアプリにはpackage.jsonファイルが標準で用意されている $ npm installコマンドでpackage.json内に記述されたパッケージ類を全てインストールする $ npm run devコマンドでLaravelアプリをビルドし、インストールしたVue.jsを実際に使えるようにする あーそーゆーことね、完全に理解した。「言葉」でなく「心」で理解できたよッ！これなら私にもできりゅっ！とトゥインクルトゥインクルしていたのも束の間、次の文を読んだ瞬間、私は身の毛もよ立つような恐怖の渦きを味わうのであった。 package.jsonのdevDependenciesに、使用されるパッケージがまとめられています。ここで、"vue"と"vue-template-compiler"が見えるでしょう。これらがvue.js利用のパッケージです。 ここで、私のpacakege.jsonを見てみましょう。こちらが私のpackage.jsonです。 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } ここで、"vue"と"vue-template-compiler"が見えるでしょう。 あれ…見えないな…。 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } "vue"と"vue-template-compiler"が見えるでしょう。 いいえ、見えません。 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } 見えるでしょう。（n回目） おいおいおい、おいおいおいおい、 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } Vueなんて、ましてやvue-template-compilerなんて、 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } どこにも書いていないじゃあないか！！ これはまさか…スタンドの仕業ッ！？ いやいやっ、落ち着け私。私はそんなにヤワな女じゃないわ。 1人海外旅行中にトイレ詰まらせた時だって、親にソシャゲへの多額の課金がバレた時だって冷静に対処したじゃない…！！ それに比べたらこんなの屁のカッパ、ちゃーら、へっちゃらなんだからッ…！！ 今回だって乗り越えるわ、登り切ってやるッ！！！！！ そもそも、npmとpackage.jsonでなにをしようとしてるのか npmとは npmとは、パッケージ管理システムの一種。Node Package Managerの意。 Node.jsは、サーバ上で動作するJavaScriptであるが、Node.jsを使ったツールが開発されるようになると、これらを管理するバージョン管理システムの必要性が生まれた。 npmは、Node.jsのツールやパッケージ(モジュール)をインストールしたり管理したりするだけでなく、パッケージを扱うためにインターフェイスを備えている。リポジトリ機能も備えており、必要とするパッケージ(モジュール)の検索、ダウンロード、インストール、アップデートを行えたり、開発したパッケージ(モジュール)を他者に公開できたりする。 フリー百科事典『ウィキペディア（Wikipedia）』より クッ…長い…これもスタンドの仕業か…？ということで、自分の言葉でまとめてみます。 Node.jsはそもそも、「サーバサイドもクライアントサイドも同じ言語で書けたらみんなハッピーだよね」っていう発想から生まれたサーバサイドのJavaScript実行環境のことでした。 npmは、このNode.jsのライブラリやフレームワークを一括管理してくれる便利ツールです。PHPでいうcomposer、Rubyでいうgem、Pythonでいうpip、Goでいうglideなどと一緒ですね。 これらを踏まえて整理すると、手順1~3で私がやろうとしていたことはすなわち 「Node.jsのnpmを使ってJavaScriptのフロントエンドフレームワーク(の一種)であるVue.jsを、開発中のLaravelアプリに組み込むこと」 ということになります。一文でまとめると「なんだ当たり前じゃん」感が出ちゃうんですけど、フロントエンドのフレームワークであるVue.jsを、サーバサイド側から取り込んじゃうって、結構画期的なんですよね。わざわざ<script>...</script>タグ使ってフロントエンド側でCDN呼び出さなくてよかったり、したがってリクエスト数が減らせるといったメリットがあるからです。 ここで、見落としていたロジックに気付く 先ほど、Node.jsは「サーバサイドもクライアントサイドも同じ言語で書けたらみんなハッピーだよね」という発想から生まれたサーバサイドのJavaScript実行環境のことである、と書きました。そう、まさにこのNode.js発祥の原点こそが、私を混乱の渦へと引きずり込んだ犯人だったのです。 調べたところ、今回の文脈では、Node.jsは「サーバサイドJavaScriptの実行環境」ではなく、「クライアントサイドJavaScriptの開発環境」と考えるのが正しかったようです。 だって、よくよく考えてみたら私、サーバサイドの処理はJavaScriptじゃなくてPHPで書いてるもん。Vue.jsはフロントエンド開発のフレームワーク、Laravelはサーバサイド開発のフレームワークだもん。 サーバサイドJavaScriptの高速処理が実現したことによって、サーバサイドJavaScript自体のパッケージ(Node.jsフレームワークExpressなど)だけじゃなく、クライアントサイドJavaScript開発にも便利なパッケージが次々と誕生した、というのは確かに自然な流れですね。 この「自然な流れ」の部分がすっぽり抜けてしまうと、サーバサイドでJavaScript以外の言語を使用してる状況で「え、なんでNode.jsインストールしなきゃならんの？、npm？え？え？」みたいなことになってしまいます。 つまり、LaravelとVue.js連携において、サーバサイドにおけるNode.jsの役割はnpmを使えるようにするというただそれだけにあって、サーバサイドとフロントエンドではなお別々の言語、別々のロジックが働いている。ということが、Node.jsが一枚噛んだことによって見えなくなっていたんですね。 では、どうすればいいか Node.jsはクライアントサイドJavaScriptの「開発環境」であり、Vue.jsはフロントエンド開発のフレームワークである。ということは、必要なのはVue.jsの「実行環境」じゃあないか！！！ JavaScriptで動くものを「作る」ための「開発環境」と、「作る」作業を効率的にする「枠組み」が揃っていても、それを実際に「動かす」ための「実行環境」がないと動くものも動かないからです。 で、その実行環境を構築してくれるのが、かのLaravel/uiだったんですね！！ すげー爽やかな気分だぜ！！新しいパンツを履いたばかりの正月元旦の朝のように！！ こちらはLaravelのパッケージなのでcomposerでインストールします。 $ composer require laravel/ui フロントエンドスカフォールドが生成されたので、Vueのスカフォールドをセットアップします。 $ php artisan ui vue --auth Vue scaffolding installed successfully. Please run "npm install && npm run dev" to compile your fresh scaffolding. Authentication scaffolding generated successfully. ついに… package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "bootstrap": "^4.0.0", "jquery": "^3.2", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "popper.js": "^1.12", "postcss": "^8.1.14", "resolve-url-loader": "^3.1.2", "sass": "^1.20.1", "sass-loader": "^8.0.0", "vue": "^2.5.17", "vue-template-compiler": "^2.6.10" } } ついに現れたああああああああああああ！！！ 見える…見えるよお兄ちゃん…僕にもvueとvue-template-compilerという文字が… これでやっとVue.jsがインストールできるね… $ npm install フッ、ここまできたらどんなエラーも貧弱、貧弱ゥ！！ 頑張れ！私はここまでよくやってきた！私はできる子！そして今日もこれからも！私が挫けることは絶対にないんだ！モード に突入しました。 ここまできたらどんなエラーが返ってこようが恐れることはありません。 RunとかRunning以下のコマンドをそのまま打ち込めばいいだけです。 # Run npm install --save-dev resolve-url-loader@3.1.2 to resolve 1 vulnerability Additional dependencies must be installed. This will only take a moment. Running: npm install vue-loader@^15.9.5 --save-dev --legacy-peer-deps 準備が整ったら、最後にビルドします。 $ npm run dev VueのExampleComponentsも用意されました。 勝った…。 勝ったんだ…この戦いに…。 終わりに 今回はLaravelとVue.jsの連携にlaravel/uiを利用しました。が、Laravel8では2021/4/26現在、認証系の処理に関しては推奨ライブラリがlaravel/jetstremあるいはlaravel/breezeに変更になっています。1年前の情報はもう既に古くなってる、みたいな変化の激しい世界ですが、この目まぐるしさもまたモダンフレームワークの妙だなあと感じます。 終始ふざけてしまって恐縮ですが、この記事を読んでLaravelないしNode.js、npm、Vue.jsの理解が少しでも深まったよ！という方が一人でもいたなら幸いです。ここまでお付き合いいただいた方、ありがとうございました！ 参考 JavaScriptとCSSの足場：Laravel公式ドキュメント laravel/ui：GitHub npmのpackage.jsonと依存関係を理解しよう：bagelee Node.jsとはなにか？なぜみんな使っているのか？：Qiita Awesome Node.js : 素晴しい Node.js フレームワーク・ライブラリ・ソフトウェア・リソースの数々：Qiita npm入門：Qiita 「実行環境」と「開発環境」の違い：「分かりそう」で「分からない」でも「分かった」気になれるIT用語

概要 この記事は、Laravel8でVue.jsを連携利用しようとするも、事前準備段階で早々につまづいてしまった1人の少女の数奇な運命を綴る冒険談トラブルシューティング談です。基本的にポエムです。ご了承ください。なお、Node.jsの環境構築方法や「そもそもVue.jsって何？」の部分にはほとんど触れていません。ご承知おきください。 おいおいおい、おいおいおいおい、Vueなんて、どこにも書いていないじゃあないか より良いアプリケーションにはより良いUI/UXが必要。より良いUI/UXを実装するためにはモダンなフロントエンドフレームワークとの連携が不可欠だッ！ということでLaravelの技術書を参考にVue.jsのセットアップをしようとしていた時に、事件は起こりました。 技術書によると、セットアップの手順は以下の通り。 createしたLaravelアプリにはpackage.jsonファイルが標準で用意されている $ npm installコマンドでpackage.json内に記述されたパッケージ類を全てインストールする $ npm run devコマンドでLaravelアプリをビルドし、インストールしたVue.jsを実際に使えるようにする あーそーゆーことね、完全に理解した。「言葉」でなく「心」で理解できたよッ！これなら私にもできりゅっ！とトゥインクルトゥインクルしていたのも束の間、次の文を読んだ瞬間、私は身の毛もよ立つような恐怖の渦きを味わうのであった。 package.jsonのdevDependenciesに、使用されるパッケージがまとめられています。ここで、"vue"と"vue-template-compiler"が見えるでしょう。これらがvue.js利用のパッケージです。 ここで、私のpacakege.jsonを見てみましょう。こちらが私のpackage.jsonです。 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } ここで、"vue"と"vue-template-compiler"が見えるでしょう。 あれ…見えないな…。 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } "vue"と"vue-template-compiler"が見えるでしょう。 いいえ、見えません。 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } 見えるでしょう。（n回目） おいおいおい、おいおいおいおい、 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } Vueなんて、ましてやvue-template-compilerなんて、 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } どこにも書いていないじゃあないか！！ これはまさか…スタンドの仕業ッ！？ いやいやっ、落ち着け私。私はそんなにヤワな女じゃないわ。 1人海外旅行中にトイレ詰まらせた時だって、親にソシャゲへの多額の課金がバレた時だって冷静に対処したじゃない…！！ それに比べたらこんなの屁のカッパ、ちゃーら、へっちゃらなんだからッ…！！ 今回だって乗り越えるわ、登り切ってやるッ！！！！！ そもそも、npmとpackage.jsonでなにをしようとしてるのか npmとは npmとは、パッケージ管理システムの一種。Node Package Managerの意。 Node.jsは、サーバ上で動作するJavaScriptであるが、Node.jsを使ったツールが開発されるようになると、これらを管理するバージョン管理システムの必要性が生まれた。 npmは、Node.jsのツールやパッケージ(モジュール)をインストールしたり管理したりするだけでなく、パッケージを扱うためにインターフェイスを備えている。リポジトリ機能も備えており、必要とするパッケージ(モジュール)の検索、ダウンロード、インストール、アップデートを行えたり、開発したパッケージ(モジュール)を他者に公開できたりする。 フリー百科事典『ウィキペディア（Wikipedia）』より クッ…長い…これもスタンドの仕業か…？ということで、自分の言葉でまとめてみます。 Node.jsはそもそも、「サーバサイドもクライアントサイドも同じ言語で書けたらみんなハッピーだよね」っていう発想から生まれたサーバサイドのJavaScript実行環境のことでした。 npmは、このNode.jsのライブラリやフレームワークを一括管理してくれる便利ツールです。PHPでいうcomposer、Rubyでいうgem、Pythonでいうpip、Goでいうglideなどと一緒ですね。 これらを踏まえて整理すると、手順1~3で私がやろうとしていたことはすなわち 「Node.jsのnpmを使ってJavaScriptのフロントエンドフレームワーク(の一種)であるVue.jsを、開発中のLaravelアプリに組み込むこと」 ということになります。一文でまとめると「なんだ当たり前じゃん」感が出ちゃうんですけど、フロントエンドのフレームワークであるVue.jsを、サーバサイド側から取り込んじゃうって、結構画期的なんですよね。わざわざ<script>...</script>タグ使ってフロントエンド側でCDN呼び出さなくてよかったり、したがってリクエスト数が減らせるといったメリットがあるからです。 ここで、見落としていたロジックに気付く 先ほど、Node.jsは「サーバサイドもクライアントサイドも同じ言語で書けたらみんなハッピーだよね」という発想から生まれたサーバサイドのJavaScript実行環境のことである、と書きました。そう、まさにこのNode.js発祥の原点こそが、私を混乱の渦へと引きずり込んだ犯人だったのです。 調べたところ、今回の文脈では、Node.jsは「サーバサイドJavaScriptの実行環境」ではなく、「クライアントサイドJavaScriptの開発環境」と考えるのが正しかったようです。 だって、よくよく考えてみたら私、サーバサイドの処理はJavaScriptじゃなくてPHPで書いてるもん。Vue.jsはフロントエンド開発のフレームワーク、Laravelはサーバサイド開発のフレームワークだもん。 サーバサイドJavaScriptの高速処理が実現したことによって、サーバサイドJavaScript自体のパッケージ(Node.jsフレームワークExpressなど)だけじゃなく、クライアントサイドJavaScript開発にも便利なパッケージが次々と誕生した、というのは確かに自然な流れですね。 この「自然な流れ」の部分がすっぽり抜けてしまうと、サーバサイドでJavaScript以外の言語を使用してる状況で「え、なんでNode.jsインストールしなきゃならんの？、npm？え？え？」てなことになってしまいます。 つまり、LaravelとVue.js連携において、サーバサイドにおけるNode.jsの役割はnpmを使えるようにするというただそれだけにあって、サーバサイドとフロントエンドではなお別々の言語、別々のロジックが働いている。ということが、Node.jsが一枚噛んだことによって見えなくなっていたんですね。 では、どうすればいいか Node.jsはクライアントサイドJavaScriptの「開発環境」であり、Vue.jsはフロントエンド開発のフレームワークである。ということは、必要なのはVue.jsの「実行環境」じゃあないか！！！ JavaScriptで動くものを「作る」ための「開発環境」と、「作る」作業を効率的にする「枠組み」が揃っていても、それを実際に「動かす」ための「実行環境」がないと動くものも動かないからです。 で、その実行環境を構築してくれるのが、かのLaravel/uiだったんですね！！ すげー爽やかな気分だぜ！！新しいパンツを履いたばかりの正月元旦の朝のように！！ こちらはLaravelのパッケージなのでcomposerでインストールします。 $ composer require laravel/ui フロントエンドスカフォールドが生成されたので、Vueのスカフォールドをセットアップします。 $ php artisan ui vue --auth Vue scaffolding installed successfully. Please run "npm install && npm run dev" to compile your fresh scaffolding. Authentication scaffolding generated successfully. ついに… package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "bootstrap": "^4.0.0", "jquery": "^3.2", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "popper.js": "^1.12", "postcss": "^8.1.14", "resolve-url-loader": "^3.1.2", "sass": "^1.20.1", "sass-loader": "^8.0.0", "vue": "^2.5.17", "vue-template-compiler": "^2.6.10" } } ついに現れたああああああああああああ！！！ 見える…見えるよお兄ちゃん…僕にもvueとvue-template-compilerという文字が… これでやっとnpmコマンドが使えるようになったね… $ npm install フッ、ここまできたらどんなエラーも貧弱、貧弱ゥ！！ 頑張れ！私はここまでよくやってきた！私はできる子！そして今日もこれからも！私が挫けることは絶対にないんだ！モード に突入しました。 ここまできたらどんなエラーが返ってこようが恐れることはありません。 RunとかRunning以下のコマンドをそのまま打ち込めばいいだけです。 # Run npm install --save-dev resolve-url-loader@3.1.2 to resolve 1 vulnerability Additional dependencies must be installed. This will only take a moment. Running: npm install vue-loader@^15.9.5 --save-dev --legacy-peer-deps 準備が整ったら、最後にビルドします。 $ npm run dev VueのExampleComponentsも用意されました。 勝った…。 勝ったんだ…この戦いに…。 終わりに 今回はLaravelとVue.jsの連携にlaravel/uiを利用しました。が、Laravel8では2021/4/26現在、認証系推奨ライブラリがlaravel/jetstremあるいはlaravel/breezeに変更になっています。1年前の情報はもう既に古くなってる、みたいな変化の激しい世界ですが、この目まぐるしさもまたモダンフレームワークの妙だなあと感じます。 終始ふざけてしまって恐縮ですが、この記事を読んでLaravelないしNode.js、npm、Vue.jsの理解が少しでも深まったよ！という方が一人でもいたなら幸いです。ここまでお付き合いいただいた方、ありがとうございました！ 参考 JavaScriptとCSSの足場：Laravel公式ドキュメント laravel/ui：GitHub npmのpackage.jsonと依存関係を理解しよう：bagelee Node.jsとはなにか？なぜみんな使っているのか？：Qiita Awesome Node.js : 素晴しい Node.js フレームワーク・ライブラリ・ソフトウェア・リソースの数々：Qiita npm入門：Qiita 「実行環境」と「開発環境」の違い：「分かりそう」で「分からない」でも「分かった」気になれるIT用語

概要 この記事は、Laravel8でVue.jsを連携利用しようとするも、事前準備段階で早々につまづいてしまった1人の少女の数奇な運命を綴る冒険談トラブルシューティング談です。基本的にポエムです。ご了承ください。なお、Node.jsの環境構築方法や「そもそもVue.jsって何？」の部分にはほとんど触れていません。ご承知おきください。 おいおいおい、おいおいおいおい、Vueなんて、どこにも書いていないじゃあないか より良いアプリケーションにはより良いUI/UXが必要。より良いUI/UXを実装するためにはモダンなフロントエンドフレームワークとの連携が不可欠だッ！ということでLaravelの技術書を参考にVue.jsのセットアップをしようとしていた時に、事件は起こりました。 技術書によると、セットアップの手順は以下の通り。 createしたLaravelアプリにはpackage.jsonファイルが標準で用意されている $ npm installコマンドでpackage.json内に記述されたパッケージ類を全てインストールする $ npm run devコマンドでLaravelアプリをビルドし、インストールしたVue.jsを実際に使えるようにする あーそーゆーことね、完全に理解した。「言葉」でなく「心」で理解できたよッ！これなら私にもできりゅっ！とトゥインクルトゥインクルしていたのも束の間、次の文を読んだ瞬間、私は身の毛もよ立つような恐怖の渦きを味わうのであった。 package.jsonのdevDependenciesに、使用されるパッケージがまとめられています。ここで、"vue"と"vue-template-compiler"が見えるでしょう。これらがvue.js利用のパッケージです。 ここで、私のpacakege.jsonを見てみましょう。こちらが私のpackage.jsonです。 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } ここで、"vue"と"vue-template-compiler"が見えるでしょう。 あれ…見えないな…。 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } "vue"と"vue-template-compiler"が見えるでしょう。 いいえ、見えません。 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } 見えるでしょう。（n回目） おいおいおい、おいおいおいおい、 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } Vueなんて、ましてやvue-template-compilerなんて、 package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14" } } どこにも書いていないじゃあないか！！ これはまさか…スタンドの仕業ッ！？ いやいやっ、落ち着け私。私はそんなにヤワな女じゃないわ。 1人海外旅行中にトイレ詰まらせた時だって、親にソシャゲへの多額の課金がバレた時だって冷静に対処したじゃない…！！ それに比べたらこんなの屁のカッパ、ちゃーら、へっちゃらなんだからッ…！！ 今回だって乗り越えるわ、登り切ってやるッ！！！！！ そもそも、npmとpackage.jsonでなにをしようとしてるのか npmとは npmとは、パッケージ管理システムの一種。Node Package Managerの意。 Node.jsは、サーバ上で動作するJavaScriptであるが、Node.jsを使ったツールが開発されるようになると、これらを管理するバージョン管理システムの必要性が生まれた。 npmは、Node.jsのツールやパッケージ(モジュール)をインストールしたり管理したりするだけでなく、パッケージを扱うためにインターフェイスを備えている。リポジトリ機能も備えており、必要とするパッケージ(モジュール)の検索、ダウンロード、インストール、アップデートを行えたり、開発したパッケージ(モジュール)を他者に公開できたりする。 フリー百科事典『ウィキペディア（Wikipedia）』より クッ…長い…これもスタンドの仕業か…？ということで、自分の言葉でまとめてみます。 Node.jsはそもそも、「サーバサイドもクライアントサイドも同じ言語で書けたらみんなハッピーだよね」っていう発想から生まれたサーバサイドのJavaScript実行環境のことでした。 npmは、このNode.jsのライブラリやフレームワークを一括管理してくれる便利ツールです。PHPでいうcomposer、Rubyでいうgem、Pythonでいうpip、Goでいうglideなどと一緒ですね。 これらを踏まえて整理すると、手順1~3で私がやろうとしていたことはすなわち 「Node.jsのnpmを使ってJavaScriptのフロントエンドフレームワーク(の一種)であるVue.jsを、開発中のLaravelアプリに組み込むこと」 ということになります。一文でまとめると「なんだ当たり前じゃん」感が出ちゃうんですけど、フロントエンドのフレームワークであるVue.jsを、サーバサイド側から取り込んじゃうって、結構画期的なんですよね。わざわざ<script>...</script>タグ使ってフロントエンド側でCDN呼び出さなくてよかったり、したがってリクエスト数が減らせるといったメリットがあるからです。 ここで、見落としていたロジックに気付く 先ほど、Node.jsは「サーバサイドもクライアントサイドも同じ言語で書けたらみんなハッピーだよね」という発想から生まれたサーバサイドのJavaScript実行環境のことである、と書きました。そう、まさにこのNode.js発祥の原点こそが、私を混乱の渦へと引きずり込んだ犯人だったのです。 調べたところ、今回の文脈では、Node.jsは「サーバサイドJavaScriptの実行環境」ではなく、「クライアントサイドJavaScriptの開発環境」と考えるのが正しかったようです。 だって、よくよく考えてみたら私、サーバサイドの処理はJavaScriptじゃなくてPHPで書いてるもん。Vue.jsはフロントエンド開発のフレームワーク、Laravelはサーバサイド開発のフレームワークだもん。 サーバサイドJavaScriptの高速処理が実現したことによって、サーバサイドJavaScript自体のパッケージ(Node.jsフレームワークExpressなど)だけじゃなく、クライアントサイドJavaScript開発にも便利なパッケージが次々と誕生した、というのは確かに自然な流れですね。 この「自然な流れ」の部分がすっぽり抜けてしまうと、サーバサイドでJavaScript以外の言語を使用してる状況で「え、なんでNode.jsインストールしなきゃならんの？、npm？え？え？」てなことになってしまいます。 つまり、LaravelとVue.js連携において、サーバサイドにおけるNode.jsの役割はnpmを使えるようにするというただそれだけにあって、サーバサイドとフロントエンドではなお別々の言語、別々のロジックが働いている。ということが、Node.jsが一枚噛んだことによって見えなくなっていたんですね。 では、どうすればいいか Node.jsはクライアントサイドJavaScriptの「開発環境」であり、Vue.jsはフロントエンド開発のフレームワークである。ということは、必要なのはVue.jsの「実行環境」じゃあないか！！！ JavaScriptで動くものを「作る」ための「開発環境」と、「作る」作業を効率的にする「枠組み」が揃っていても、それを実際に「動かす」ための「実行環境」がないと動くものも動かないからです。 で、その実行環境を構築してくれるのが、かのLaravel/uiだったんですね！！ すげー爽やかな気分だぜ！！新しいパンツを履いたばかりの正月元旦の朝のように！！ こちらはLaravelのパッケージなのでcomposerでインストールします。 $ composer require laravel/ui フロントエンドスカフォールドが生成されたので、Vueのスカフォールドをセットアップします。 $ php artisan ui vue --auth Vue scaffolding installed successfully. Please run "npm install && npm run dev" to compile your fresh scaffolding. Authentication scaffolding generated successfully. ついに… package.json { "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "axios": "^0.21", "bootstrap": "^4.0.0", "jquery": "^3.2", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "popper.js": "^1.12", "postcss": "^8.1.14", "resolve-url-loader": "^3.1.2", "sass": "^1.20.1", "sass-loader": "^8.0.0", "vue": "^2.5.17", "vue-template-compiler": "^2.6.10" } } ついに現れたああああああああああああ！！！ 見える…見えるよお兄ちゃん…僕にもvueとvue-template-compilerという文字が… これでやっとnpmコマンドが使えるようになったね… $ npm install フッ、ここまできたらどんなエラーも貧弱、貧弱ゥ！！ 頑張れ！私はここまでよくやってきた！私はできる子！そして今日もこれからも！私が挫けることは絶対にないんだ！モード に突入しました。 ここまできたらどんなエラーが返ってこようが恐れることはありません。 RunとかRunning以下のコマンドをそのまま打ち込めばいいだけです。 # Run npm install --save-dev resolve-url-loader@3.1.2 to resolve 1 vulnerability Additional dependencies must be installed. This will only take a moment. Running: npm install vue-loader@^15.9.5 --save-dev --legacy-peer-deps 準備が整ったら、最後にビルドします。 $ npm run dev VueのExampleComponentsも用意されました。 勝った…。 勝ったんだ…この戦いに…。 終わりに 今回はLaravelとVue.jsの連携にlaravel/uiを利用しました。が、Laravel8では2021/4/26現在、認証系推奨ライブラリがlaravel/jetstremあるいはlaravel/breezeに変更になっています。1年前の情報はもう既に古くなってる、みたいな変化の激しい世界ですが、この目まぐるしさもまたモダンフレームワークの妙だなあと感じます。 終始ふざけてしまって恐縮ですが、この記事を読んでLaravelないしNode.js、npm、Vue.jsの理解が少しでも深まったよ！という方が一人でもいたなら幸いです。ここまでお付き合いいただいた方、ありがとうございました！ 参考 JavaScriptとCSSの足場：Laravel公式ドキュメント laravel/ui：GitHub npmのpackage.jsonと依存関係を理解しよう：bagelee Node.jsとはなにか？なぜみんな使っているのか？：Qiita Awesome Node.js : 素晴しい Node.js フレームワーク・ライブラリ・ソフトウェア・リソースの数々：Qiita npm入門：Qiita 「実行環境」と「開発環境」の違い：「分かりそう」で「分からない」でも「分かった」気になれるIT用語

はじめに とあるシステムのプロトタイプを作成した時のメモとなります。Vue+Flaskで構成されたDocker環境で動くSPAのアプリを作成し、WebアプリケーションをAzure App Serviceとしてデプロイしました。特にAzure関係の参考記事が少なく苦労したので紹介したいと思います。また、自分はM1のMacを使用していてDockerがpreview版だったのでそこでも躓きました笑(※今は正式版がでました） 環境 Mac OS : 11.1 docker desktop : 3.3.1 yarn : 1.10.1 node : v10.13.0 python : 3.6.13 ローカルにデプロイ まずVue+Flaskのアプリケーションをローカルで実装します。 参考記事の記事を参考にさせていただきました。 サンプルプログラムはここにあげました。 主なファイルの構成は以下の通りです(一部省略）。 Vue_Flask_App_Template/ ┝ backend/ ┝ app.py ┝ Dockerfile └ requirements.txt ┝ frontend/ ┝ src/ └ main.js ┝ util ┝ Dockerfile └ vue.config.js ┝ docker-compose.yml フロントエンドのvueコンテナとバックエンドのFlaskをそれぞれ作成しています。 ローカルではdocker-composeを使ってデプロイしました。 docker-compose.yml version: '3' services: vue: build: ./frontend ports: - "8080:8080" volumes: - .:/shared working_dir: /shared/frontend stdin_open: true tty: true depends_on: - flask command: yarn run serve flask: build: ./backend ports: - "5000:5000" volumes: - .:/shared working_dir: /shared/backend environment: FLASK_DEBUG: 1 FLASK_APP: ./app.py tty: true command: python app.py 以下のコマンドでデプロイします。 docker-compose run vue yarn docker-compose build docker-compose up vue デプロイが成功すると簡単ですが以下のようなWebアプリケーションができます。 簡単なアプリケーションですが、backend側で作成したランダムな数をフロントエンド側で描写するというものが完成しました。 Azureにデプロイ 課題にも書きますが、複数コンテナーが現在プレビュー段階のため試行錯誤しましたがうまくいきませんでした。そのため、今回はbackend側とfrontend側で二つのWebアプリケーションを作成し通信するという方法を取りました。 Dockerfile作成 frontend側とbackend側のDockerfileはそれぞれ以下の通りです。 # backend/Dockerfile FROM python:3.6 WORKDIR /app ADD . /app RUN pip install --trusted-host pypi.python.org -r requirements.txt EXPOSE 80 CMD ["python", "app.py"] # frontend/Dockerfile FROM node:10.13.0 WORKDIR /frontend COPY . /frontend RUN yarn install EXPOSE 80 CMD ["yarn", "run", "serve"] Portの変更 Azure App Serviceではカスタムコンテナーがポート80で立ち上がるのを前提としているため、backendとfrontendのポートをどちらも80に設定し直します。具体的には、app.py内のport、vue.config.js内のportを現状のものから変更します。 backend/app.py if __name__ == '__main__': app.run(host='0.0.0.0', port=80, debug=True) frontend/vue.config.js module.exports = { assetsDir: 'static', devServer: { port: 80, host: '0.0.0.0', disableHostCheck: true, }, }; イメージのビルドと格納を行う 公式のドキュメントを参考に、Azure Container Registryを使用してイメージのビルドと格納を行います。 まずAzureのポータルでAzure Container Registryをよしなに作成します。 その後、backendのディレクトリに入り、次のコマンドを実行します。container_registry_nameはレジストリの[ログインサーバー]から取得できます。 このコマンドにより、フォルダーの内容がAzure Container Registryに送信され、Dockerファイルの手順に従ってイメージがビルドされ格納されるらしいです。 az acr build --registry <container_registry_name> --image <image_name> . frontend側も同様ですが、APIのURLにbackendで出来上がったURLを指定しなくてはいけないため、後ほど行います。 Webアプリを作成してデプロイ 同じく公式のドキュメントを参考にします。 Azureのポータルから [リソースの作成]＞[Webアプリ]＞[作成] でWebアプリを作成します。 設定の一部を記載します。 公開:Dockerコンテナー オプション:単一コンテナー イメージソース:Azure Container Registry レジストリ:container_registry_name（先ほど作成したレジストリ） イメージ:image_name（先ほど作成したイメージ） 最後に[確認と作成]を選択し、[作成]します。Webアプリがデプロイするまでしばらくかかります。 できたら[参照]からデプロイされているのを確認します。 frontend側のデプロイ まず、先ほどはAPI通信にlocalhostのURLをしていしていたので変更します。 ~~~の部分には先ほど作成したbackendのURLを指定します。 frontend/const/util.py export const API_BASE_URI= "<~~~.azurewebsites.net>" 後は同様の手順でfrontend側のWebアプリケーションも作成します。 frontendのディレクトリに移動し、以下のコマンドを叩きレジストリに格納後、Azure App Serviceでデプロイします。 az acr build --registry <container_registry_name> --image <image_name> . 完成！ 躓いたポイント 兎に角ポートの設定がめんどうでした。ポート番号を80以外で設定してしまうと簡単にはいかないみたいです。 また、以前使っていたdocker pushを使用する方法(参考)がプレビュー版を使っているせいか使えなくなっていたため、今回別の手段を使用しました。 課題 複数コンテナー(docker-compose)でデプロイできなかったのが今回の課題です。二つのWebアプリケーション間で通信を行なっているため、規模が大きくなるとどうしても重くなってしまいます。 NginxコンテナーやWeb App for Containersを使えばうまくできそうなので次は試してみようと思います。ご存知の方は教えていただければ幸いです。 最後に 今回は、VueとFlaskで作ったDockerのアプリケーションをAzureでデプロイをしました。 公式のドキュメンテーションも充実していますが、抽象的だったり、カスタムに対応していなかったりして苦労しました。 少しでも参考になれば幸いです。 手探りで行っていたため、足りないところがあると思います。間違っている点などがあれば教えていただければと思います。 参考記事 ローカルを汚さずdockerを使ってvue.jsの開発環境を作る[vuecli4] Vue.jsとFlaskのDocker環境を構築してみた Vue.js+Flaskで画像のアップロード機能

dev起動時にエラー 以前つくったNuxtプロジェクトのライブラリを更新したところ、 devでの起動時に、ForkTsCheckerWebpackPluginのエラーで止まってしまった。 Invalid configuration object. ForkTsCheckerWebpackPlugin has been initialized using a configuration object that does not match the API schema. - configuration.eslint should be an object: object { files, enabled?, memoryLimit?, options?, … } - configuration.eslint should be an object: object { files, enabled?, memoryLimit?, options?, … } at Object.validate [as default] (node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils/dist/validate.js:96:11) at new ForkTsCheckerWebpackPlugin (node_modules/fork-ts-checker-webpack-plugin/lib/ForkTsCheckerWebpackPlugin.js:31:31) at WebpackBundler.<anonymous> (node_modules/@nuxt/typescript-build/dist/index.js:41:27) at next (node_modules/@nuxt/utils/dist/utils.js:659:27) ... 原因と解決方法 調べてみると、nuxt.config.jsの中で、typescript部分の記述方法が変わっていたことが原因だった。 古い指定 export default { typescript: { typeCheck: { eslint: true } } } 現在の指定 export default { typescript: { typeCheck: { eslint: { files: './src/**/*.{ts,js,vue}' } } } } 新しい指定方法に記述を変更すると解決。 破壊的な変更はちゃんとチェックしてね 「バージョンアップする時は破壊的な変更をちゃんとチェックしろ」ということだそうです。 そりゃそうなんですけどね。 マニュアルに「ここの指定、前と変わったよ」と一言書いといてくれてもいいのに。

今回はDjangoプロジェクトにVueプロジェクトをインストールします。 前回の記事 Vue CLIのインストール npm install -g @vue/cli ※ -gオプションは全体に適用するという意味。 インストールの確認 vue --version # @vue/cli 4.5.12 Vue プロジェクトの作成 vue create <プロジェクト名> 以下の選択が必要 Default 自動で設定ファイルをcreateしてくれる。 Manually 手動で設定ファイルをcreateする。 起動する defaultで作成するとvueプロジェクトが作成されるので、そのディレクトリに移動して以下コマンドで、サーバーを立ち上げる。 npm run serve 今回はここまで。 次回はvue routerをインストールして、url毎に表示内容を変更できるようにします。 ありがとうございました。