215
198

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Laravel で JavaScriptをやるときの手法

Last updated at Posted at 2019-10-27

LaravelでのJSの書き方が色々出来てしまうので、纏めました。
独断と偏見でおすすめ度をつけているので指標程度によろしくおねがいします。

ミスやより良い方法がございましたらご指摘お願いいたします。

変数を渡したい場合はこちら

#JS用のBladeに直接記述 オススメ度0
js-app.blade.phpのようなBladeをファイルを作成し、そこにJSを記述し、必要なBladeファイルでincludeする手法
slotを使えば色々渡して使えるかも

これをやるなら、Bladeはテンプレートエンジンなので
同一ファイルに書くか、JSファイルを切り出すべき。

hoge.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
~何らかの記述~
@include('js-hoge')
</body>
</html>

js-hoge,blade.php
<script>
~何らかの記述~
</script>

#Bladeに直接記述 オススメ度★
一つのHTMLファイルにJavaScriptを書くのと同等だと思います。
記述量が少量の場合、PHPから変数を渡してJSで使いたい場合は簡単なので良いかも

hoge.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
~何らかの記述~
<script>
    var app = @json($array);
</script>
</body>
</html>

#JSファイルを作成して読み込む オススメ度★★
'public/js'内に.jsのファイルを作成し、Bladeファイルでヘルパメソッドのasset()を使って読み込む。
お手軽にできるし、ファイルを分割できるので悪くはない

hoge.blade.php

!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.jsresources作成し、public/js/hoge.jsとしてコンパイルする想定で行ってみます。
ディレクトリは下記のようになります。

-resources
 -js
  -components/
  -app.js
  -bootstrap.js
  -hoge.js ※
webpack.mix.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"を記載してください。(その場合上記の追加は不要)

hoge.blade.php

!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
~何らかの記述~
<script src="{{ mix('js/hoge.js') }}"></script>
</body>
</html>
npm run dev

上記でコンパイルしています。

scssの使用、ベンダープレフィックスの付与など他にも使えるのでおすすめです。

以上ですが、他におすすめがありました教えていただけますと幸いです


ブログ始めました

215
198
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
215
198

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?