[Laravel 5.6] Laravel 開発で Javascript を書きたいとき（Laravel Mix の使い方とか）

Last updated at 2018-12-17Posted at 2018-07-31

Laravel 開発で Javascript を書きたいけど...

Laravel 初心者としては Javasctipt を書きたいと思ったとき、どこにどうやって書いて管理していけばいいかわからないですよね。。（自分だけかもしれませんが。。）

決まった方法はないみたいですが、会社の先輩からのアドバイスなどを基に自分なりにまとめてみました。

#おおまかな流れ

#npm のインストール

Laravel Mix（ js ファイルをコンパイルしてくれるやつ）を使えるようにするために npm をインストールします。

ターミナルでプロジェクトのディレクトリに移動して以下のコマンドを実行。

$ npm install

ちなみに package.json が npm の設定ファイルになっています。

Laravel の一番上の階層ディレクトリに入ってます。

#resources/assets/js 内に js ファイルを作成

resources/assets/js に好きなファイル名の js ファイルを作成し、中身を書いていきます。

今回は以下のような簡単なサンプルを作成してみました。

sample.js

$(function() {
    alert('sample');
});

#resources/assets/js/app.js を編集

Laravel の一番上の階層ディレクトリに入っている webpack.mix.js を見てみると、以下のようになっています。

webpack.mix.js

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

Laravel Mix はこのファイルの中身を見てコンパイルを行ってます。

この場合 app.js と app.scss をコンパイルして、それぞれ public/js と pulic/css 内に保存するとの指示になっています。

ここに先ほど作った sample.js の項目を追加すればコンパイルしてくれます。

ただ、その場合 public/js に sample.js というファイルが作成されるため、これをビュー側で読み込ませる必要が出てきます。

作成する js ファイルが１つ２つなら問題ありませんが、数が多くなってくるとちょっとめんどくさいです。

なので app.js の中身を編集して、作成した js ファイルを require すれば、わざわざビュー側で js ファイルを読み込む必要がなくなります。

resources/assets/js/app.js

require('./sample');  // 好きなところに行を追加

require でファイルを指定するときは、頭に ./ を付けた相対パスで、拡張子は付けません。

#npm run dev コマンドで js ファイルをコンパイル

これで用意は整いました。

ターミナルで以下のコマンドを実行します。

$ npm run dev

これで自分が作成した js ファイルがコンパイルされ、その内容が public/js/app.js 内に確認できるかと思います。

sample.js もちゃんと実行されてます。

なお、上記は開発環境用のコンパイルです。

本番環境用のコンパイルは npm run prod になります。

以上！