Laravel Mixとは?スッキリ分かる解説とインストールの手順

Laravel 入門講座

Laravel Mixとは、WebPackを便利に使うためのツール。

「一体、何の役にたつの?」

「どうやってインストールするの?」

「できるだけ分かりやすく知りたい」

という方のために、解説していきます。

じゅんこ
じゅんこ

分かりやすく解説、よろしく

ひつじプログラマ
ひつじプログラマ

了解!

Laravel Mixとは

Laravel公式マニュアルによると、Laravel Mixは次のようなものです。

Laravel Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をwebpackでスラスラと定義できるAPIを提供しています。

引用元:https://readouble.com/laravel/8.x/ja/mix.html

じゅんこ
じゅんこ

うーん??

ひつじプログラマ
ひつじプログラマ

ちょっと待って!

分かりやすく言うから。

もっと分かりやすく言うと、Laravel Mixは、webpackのAPIラッパー。

ひつじプログラマ
ひつじプログラマ

ラッパーは、包み込んで、使いやすくしてくれる存在、かな。

じゅんこ
じゅんこ

ラッピングしてくれる感じだね。

ひつじプログラマ
ひつじプログラマ

うん。

ラッパーとは、本来の機能を包み込み、使いやすくしてくれる存在のこと。

ユーザーからすると、webpackの存在は見えません。Laravel Mixがその機能を持っているように見えるのです。

じゅんこ
じゅんこ

なんだか影武者っぽい!

ひつじプログラマ
ひつじプログラマ

だね。

webpackには、JavaScriptやCSSといったファイルをまとめたり、コンパイルする役割があります。

コンパイルは、コンピュータ上で実行可能なように変換すること。

Webアプリの場合は、ブラウザで表示できるようにするってことです。

Laravel Mixは、このwebpackを使いやすくしてくれるのです。

じゅんこ
じゅんこ

Laravel Mixの役割は分かったけど、これって、絶対必要?

なくても良い気もするけど。

ひつじプログラマ
ひつじプログラマ

絶対ってわけじゃないけど、ほぼ、必要かな。

Laravel Mixは必須なのか?

結論から言うと、絶対に必要というわけではありませんが、ほぼ必要、です。

公式マニュアルでも、このように書かれています。

しかし、アプリケーションの開発時に必要だというわけではありません。どんなアセットパイプラインツールを使用してもかまいませんし、使わなくても良いのです。

引用元:https://readouble.com/laravel/8.x/ja/mix.html

ただ実際問題、Laravelにbootstrapやvue, Reactなどをインストールすると、もれなく必要になってきます。

こういったフレームワークやライブラリのファイルは、webpackによってコンパイルをする必要があるからです。

たとえば、bootstrapではscssファイルが使われていますが、このままでは、ブラウザに表示できません。

そこでコンパイルしてcss形式に変換します。

ひつじプログラマ
ひつじプログラマ

色々な新しい方法が誕生しているけど、ブラウザで表示できる形式は限られているんだ。

だから、新しい形式のファイルは、コンパイルしてあげなきゃいけない。

じゅんこ
じゅんこ

そうしないと、ブラウザで表示されないってことだね。

Laravel Mix、大事だね。

Laravel Mixのインストール

最後にLaravel Mixのインストール手順を解説します。
Laravel公式マニュアルによると、次の3ステップ。

node.js をインストール

まずはnode.jsのインストールが必要です。

こちらのサイトより、環境にあったものをダウンロード・インストールしてください。

 

必要なフレームワーク・ライブラリをインストール。

たとえば vue を追加する場合は、 php artisan ui vue を実行します。

プロジェクト内のpackage.jsonファイルが書き変わります。

 

Laravel Mixのインストール。下記を実行します。

プロジェクト内のpackage.jsonファイルに記載されたライブラリが読み込まれます。

 

 コンパイルを実行。下記を行います。

 

②~④は、新しいフレームワークやライブラリをいれた後に、都度、実行します。

ひつじプログラマ
ひつじプログラマ

node.jsのインストールは面倒だけど、最初だけでOKだよ。

じゅんこ
じゅんこ

なるほど。

さいごに

今回はLaravel Mixについて解説しました。

今回のまとめ

  • Laravel Mixとは、webpackを使いやすくしてくれるもの
  • これによってJavaScriptやCSSをコンパイルし、ブラウザに表示できる
  • BootstrapやVue, React などをLaravelで使うときに必要

何となくわかってきた! と思っていただけると嬉しいです。

なお、vueのインストールは、別記事にまとめています。

Laravel 入門講座

【Laravelの教科書・無料プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック
Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました