LaravelでのJSの書き方が色々出来てしまうので、纏めました。
独断と偏見でおすすめ度をつけているので指標程度によろしくおねがいします。
ミスやより良い方法がございましたらご指摘お願いいたします。
JS用のBladeに直接記述 オススメ度0
js-app.blade.phpのようなBladeをファイルを作成し、そこにJSを記述し、必要なBladeファイルでincludeする手法
slotを使えば色々渡して使えるかも
これをやるなら、Bladeはテンプレートエンジンなので
同一ファイルに書くか、JSファイルを切り出すべき。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
~何らかの記述~
@include('js-hoge')
</body>
</html>
<script>
~何らかの記述~
</script>
Bladeに直接記述 オススメ度★
一つのHTMLファイルにJavaScriptを書くのと同等だと思います。
記述量が少量の場合、PHPから変数を渡してJSで使いたい場合は簡単なので良いかも
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
~何らかの記述~
<script>
var app = @json($array);
</script>
</body>
</html>
JSファイルを作成して読み込む オススメ度★★
'public/js'内に.jsのファイルを作成し、Bladeファイルでヘルパメソッドのasset()を使って読み込む。
お手軽にできるし、ファイルを分割できるので悪くはない
!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
~何らかの記述~
<script src="{{ asset('/js/hoge.js') }}"></script>
</body>
</html>
JSファイルを作成し、Laravel Mixでコンパイルして読み込む オススメ度★★★
resources/js/内に.jsのファイルを作成し、
npm run dev(開発用)やnpm run production(デプロイ用)でコンパイルされpublic/jsにjsファイルが作成されます。
MixはECMAScript 2015のコンパイル、モジュール結合、圧縮やJavaScriptファイルの結合などの操作を手助けする、多くの機能を提供しています。
用いるにはnodeが必要となります。
ここでは、hoge.jsをresources作成し、public/js/hoge.jsとしてコンパイルする想定で行ってみます。
ディレクトリは下記のようになります。
-resources
-js
-components/
-app.js
-bootstrap.js
-hoge.js ※
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/hoge.js', 'public/js') //←追加 出力元、先（出力名は元のが引き継がれる）
.sass('resources/sass/app.scss', 'public/css');
もしも、app.jsにまとめたい場合、resources/js/app.jsにて
import "hoge.js"を記載してください。(その場合上記の追加は不要)
!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
~何らかの記述~
<script src="{{ mix('js/hoge.js') }}"></script>
</body>
</html>
npm run dev
上記でコンパイルしています。
scssの使用、ベンダープレフィックスの付与など他にも使えるのでおすすめです。
以上ですが、他におすすめがありました教えていただけますと幸いです
ブログ始めました