Laravel と Vue.js の連携（第1回/全3回）

2018/10/31

Laravel は公式で Vue.js を推奨していますので、ぜひ活用してみましょう。
第1回目は Vue.js と Webpack についてです。

Vue.js について

Vue.js は、表示側（フロントエンド）で動的な変化などを手軽に行える JavaScript のライブラリです。
読み方は「ビュー」や、「ビュージェーエス」などと呼ばれることが多いようです。
これまで jQuery などで行っていたようなこともこなせるので、置き換えることもできます。

リアクティブ

Vue.js の大きな特徴としては、JavaScript 側のデータと表示側（HTML）でのデータが双方向に同期する処理を行える点で、こういった動作は「リアクティブ」と呼ばれます。
競合ライブラリとして React（リアクト）や Angular（アングラー）といったものがあり、似た特徴を持っています。

仮想DOM

リアクティブな動作を実現するために、「仮想DOM（「バーチャルDOM」とも）」というものを生成する仕組みになっており、JavaScript で DOM（ディーオーエム/簡単に言えばHTMLタグの構造）を構築するものです。
ですので、HTMLソースを見ると何もないように見えますが、Vue が動作したタイミングでDOMが組み立てられ、ブラウザに表示されるようになっています。

これにより、例えば HTML のフォームになにか入力すると、リアルアイムに JavaScript 側にデータが同期されます。
双方向ですので逆も可能で、JavaScript 側でデータが更新されれば HTML の方も変化します。

Webpack によるコンパイル

Vue.js は javaScript で記述していきますが、Laravel では記述した JavaScript ファイルを Webpack（ウェブパック）というツールで変換する機能が備わっています。
この変換処理を「コンパイル」または「トランスパイル」と呼び、こういった処理をするツールを「タスクランナー」とも呼びます。

JavaScript のコードは基本的に resources/js フォルダ内のファイルに記述するのですが、表示側で使用するのは public/js フォルダ内のファイルです。
resources/js　フォルダの .js ファイルを Webpack により変換し、 public/js に出力する、という流れが推奨されています。

※ Laravel 5.7 でのフォルダ構成で説明しています。
5.6 以前では resources/assets/js となります。

Webpack を使用するメリット

わざわざ別フォルダでコードを書かず public/js 内に直接ファイルを作成しても構わないのですが、 Webpack を利用すると以下のような便利なことがあります。

JavaScript 内で別の JavaScript ファイルをインクルードできる
変換後のファイルが自動で圧縮される
ES2015（ES6）や TypeScript 対応の記述ができる
画像も同様に合成・圧縮などが可能
CSS も同様にインクルード・圧縮などが可能

「1」に関しては、長い記述を別ファイルにしたち、同じファイルを使いまわしたりでき、コードの管理効率が上がります。
「2」はファイルを圧縮することで容量を減らし、サイトの高速化に繋がります。SEOへの影響も良いでしょう。
「3」は比較的新しい言語の記述方法に対応しているということで、言語それぞれのメリットがあります。
「4」は、例えば複数の画像を1つにして表示する「CSSスプライト」などを実現したい場合に便利です。
「5」の CSS に関しては、 Sass（サース / サス）や Less（レス）といった言語で記述することで可能になります。

Webpack の使用方法

ターミナルを開き、Laravel インストールフォルダの直下（webpack.mix.js というファイルがあるフォルダ）へ移動して以下のコマンドを実行します。

npm run dev

これにより、 resources/js 内の JavaScript ファイルと、resources/sass 内の Sass ファイルが Webpack を通して public フォルダ内に出力されます。
npm run XXXX の「XXXX」部分にはいくつか処理方法が指定できます。
主なものとして以下のようなコマンドがあり、おおまかな機能説明を添えます。

npm run dev
ファイル圧縮せずコンパイル（出力）
npm run watch
ファイルを監視し、保存されたら「dev」を実行
npm run prod
ファイル圧縮しつつコンパイル（出力）

使いどころとしては、作業中は npm run watch で監視し、本番公開の際は npm run prod を実行して公開、といった感じだと思います。
npm run dev は監視するほどでもなくコンパイルしたい場合などに使ったりします。

「npm」というのは Node.js という JavaScript の開発環境のパッケージ（ライブラリ）管理ツールのことです。
パッケージ管理ツールではありますがコマンドの実行も可能です。

npm への指示や設定は package.json というファイルで管理する仕様になっており、 Laravel のインストールフォルダ直下に、必要な設定が書かれた状態で入っています。
「npm」コマンドを実行すると、その実行フォルダ直下にある package.json ファイルを自動で読み取り、実行されます。
package.json ファイルの中身を見ると scripts というセクションがあり、 npm run XXXX でその部分の処理を呼び出しています。

例として npm run dev は以下の記述となっています。

{
  ...
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    ...
  }
}

これを見ると、実は npm run dev は npm run development を呼び出しているという状態です。
さらにその npm run development は cross-env NODE_ENV=development .... という長いコマンドを呼び出しています。
長いコマンドを毎回実行するのは手間ですので、上記のように package.json に簡略化したコマンドを設定している、というわけです。

Webpack の設定

Laravel での Webpack のコンパイルは Laravel Mix というライブラリ（ラッパーライブラリ）を通して実行します。

Laravel Mix の動作に関する設定は、 Laravel インストールフォルダ直下の webpack.mix.js に記述されています。
標準では以下のようになっています。（一部抜粋）
参考：GitHub で webpack.mix.js ファイルを見る

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

これは、

resources/js/app.js を public/js 内に出力する
resources/sass/app.scss を public/css 内に出力する

という意味です。
他にコンパイルしたいファイルがあれば追記します。

また、 Laravel Mix は Laravel プロジェクトでしか使えないわけではなく、npm でインストールすれば Laravel に関係のないプロジェクトでも使用できます。
その際は webpack.mix.js に公開フォルダパスなどを指定する必要があります。
例としては以下のような記述です。

mix.setPublicPath('dist/docs') // ←公開フォルダパス
   .js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

他にも Webpack のさまざまなオプションを設定したりもできますので、興味のある方は Laravel Mix 公式ドキュメントをご覧ください。

今回は以上です。
次回は Laravel 側の処理を書きたいと思います。