Laravel開発におけるJavaScriptコードのコンパイルについて

Question

vue.jsとLaravelを使用した開発において、JavascriptファイルをLaravelMixによってコンパイルしなければならない理由は何故でしょうか?
javascriptのみを使用した開発の場合は、mix.js('resources/js/app.js', 'public/js')このようなコンパイルするコードは記載せずともブラウザで実行されましたが、Laravelを使用した場合は何故、必要になってくるのでしょうか。
ご助言頂けましたら、幸いです。

Comments

[maisumakun]

> javascriptのみを使用した開発の場合

どのように開発していましたか？

[ruuuu]

「 https://techacademy.jp/magazine/5486 」こちらのような形で、ファイルをブラウザで読み込む形です。

[maisumakun]

えっと、Vue.jsはどのように組み入れていたのですか？

[ruuuu]

Vue.jsに関しましては、「 https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project 」こちら記事に記載がありました、「 npm install -D vue　」を実行しインストールしました。

[maisumakun]

「Lalavel+Vue」と「LaravelなしのVue」の比較ではない、ということで間違いないですか？

[ruuuu]

>「Lalavel+Vue」と「LaravelなしのVue」の比較ではない、ということで間違いないですか？
はい。現状、jsファイルのコンパイルの理由が分からないといった状況です

[hentaiman]

bladeを使わずlaravel側がAPIの提供だけをするのならlaravelmix自体不要です

[ruuuu]

>bladeを使わずlaravel側がAPIの提供だけをするのならlaravelmix自体不要です
こちら、bladeなどのhtmlに反映させる為、SCSSなどをコンパイルが必要になってくるということでしょうか...?

[hentaiman]

そうですね、blade使うって事はblade独自の記述使いますよね？
逆に言うと使わないのならlaravelとは完全に分離してフロント部分だけ作ってvueのためのbuildをすればいいだけです（＝laravelmix不要）

[ruuuu]

ありがとうございます。
laravelのテンプレート(blade)に組み込む為に必要だったということですね。

Answer 1

LaravelMixはvueファイルやSCSSなどのファイルをコンパイルし、Laravel側(Blade)に適用させる為に必要な機能であることが、分かりました。

Answer 2

JavaScriptのコンパイルが必要になるのは、Vue.jsの方の事情です。「Laravelだから」ではありません。

Comments

[ruuuu]

ご回答ありがとうございます。
>Vue.jsの方の事情です。
こちらですが、vue側でSCSSなど使用していた場合に、CSSへ変換する必要があるからでしょうか？
またそうなった場合仮にvue.jsを使用していなかった場合でもSCSSなど使用していた場合は、laravelmixなどのコンパイルツールを使用しコンパイルする必要があるということでしょうか？

Answer 3

Laravelを本当に使いこなすために必要な知識は実はPHPよりもその辺りのフロントの知識。
先にLaravelから離れて現代のJavaScriptとCSSのことを覚える。
webpackでビルドして使うってことがもはや常識。
Laravel mixはwebpackのラッパーでしかないので↑が分かっていれば疑問なく使える。

なお、現実的にはLaravel以前の別のPHPフレームワークを使ってきたベテランほどこのフロントの知識がごっそり抜けてるのでmixを使ってないことが多い。
public/にjquery.min.js置いてbladeに直接JS書いてるLaravelプロジェクトに出会ったらすぐに逃げたほうがいい。

Laravelのドキュメントでは別にmixの使用は強制してない。
でも現代でwebに関わるならこのフロントの学習からは逃げられない。