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の教科書の詳細を見る

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【無料プレゼント】

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

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

詳細はこちらをクリック

最新のLaravel11版テキストに加え、Laravel8版・Laravel9版・Laravel10版もご用意しています♪

【AWS関連・Webアプリ開発・生成AIのAPI活用のご相談承ってます】
お気軽にお声がけください。
御社にとって、最善の方法をご一緒に考えてまいります。
Zoomミーティング実施中。サンプルアプリご利用可能です。

お問合せフォーム

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

最新版Laravel11用のサポートガイドご用意しています。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!
タイトルとURLをコピーしました