Laravel Mixとは?Node.jsはなぜ必要?絵で初心者向けに分かりやすく解説

Laravel Viteの使い方とエラー対策

Laravel Mixとは、効率的な書き方をしたcssやjavascriptのコードを、ブラウザが読み込める従来のcssやjavaScriptに書き換えるツールです。

このあたりのことって、説明を読んでも、イマイチ分かりにくいですよね。

じゅんこ
じゅんこ

わたしは最初、サッパリ分かりませんでした。

そこで絵を使って、Laravel Mixや Node.js、npmコマンドを分かりやすく解説しました。

「Laravel Mixとか、Node.jsとかNPMって、一体何なの?」と思ったら、ご覧ください^^

Laravel Mixとは?Node.jsはなぜ必要?絵で分かりやすく解説

Webサイトに表示するとき、ブラウザ上の装飾や動作は、cssやjavaScriptファイルに記述します。

最初のうちはこれで良かったのですが、ちょっと問題が発生しました。

SCSSという書き方が誕生したり、フロントエンドのフレームワークや、JavaScriptをもっと使いやすく改良したフレームワークが登場したのです。

Laravelでも使えるBooststrap, Vue.js, React, Tailwind CSS などです。

ひとことメモ
SCSSとはSass構文のひとつで、cssを効率よく記述するものです。

ブラウザ側では変換に対応するのは大変ですし、また表示がおかしくなるとユーザーに迷惑がかかってしまいます。

そのため、こういった新参者を簡単に受け入れられません。

ここで役立つのが、Laravel Mixです。

Laravel Mixは、Node.js 上で動くツール。

プログラミングをブラウザで動作可能な従来のcssやjavaScriptに作り変えたり、効率よく使えるようにしてくれます。

作り変えるときのコマンドは、npm run devです。

こうして従来のcssやjavaScriptに変換することで、BootstrapやVue.js, React, Tailwind CSS で作られたプロジェクトも、ブラウザで動作するようになります。

Laravel Mixについて、もう少し解説

といった感じですが、何となく、イメージつかんで頂けたでしょうか?

最近は色々と新しいフレームワークや、scssという効率的なcssの書き方が広がっています。ですが全てのブラウザが、新しいcssやjavascriptに対応するのは大変です。

Laravelでは、Laravel Mixによって、ブラウザ上で手間なく使えるように、ファイルを準備してくれます。

Laravel Mixを使うには、先にNode.jsをインストールする必要があります。この時、管理ツールのNPMも一緒に入ってきます。

Laravel Mixのインストール

Laravel Mixをインストールするのは、すごく簡単です。というのも、必要なものは、デフォルトでpackage.jsonファイルの中に書かれているからです。

Node.jsをインストールした後、npm install と npm run devを実行するだけでOKです。

【Laravel Mixのインストール】

  1. Node.jsをインストール 
  2. npm install を実行。package.jsonから必要なものをインストール
  3. npm run dev を実行。ファイルを変換(コンパイル)

おまけ:BootstrapやVue.jsをいれるときの手順

なお、BootstrapやVues.jsなどをインストールする手順は、ざっくりいうと次のとおりです。

  1. Node.jsをインストール
  2.  laravel/uiインストール
  3. Bootstrap/Vue.js/Reactの中から、入れたいものをインストール
  4. npm install を実行。package.jsonから必要なものをインストール
  5. npm run dev を実行。ファイルを変換(コンパイル)
じゅんこ
じゅんこ

Laravel Breezeの場合も、似たような手順です。

インストールについて詳しく知りたい場合は、別の記事を参照してください。

Laravelインストールについてはこちら。

まとめ & さいごに

ここまでお伝えしたことをザクッとまとめると、次のとおりです。

  • 最近のフロントエンドやJavaScriptフレームワークは、ブラウザで動作するために、従来のcss・javaScriptにする必要がある
  • Laravel Mixを使えば、そのためのファイルを準備してくれる

Laravel MixやNode.jsの役割がご理解いただけたら嬉しいです。

なおLaravelを初めて使う場合、今回ご紹介したような理解しにくいポイントがあって、意外と難しいと感じるかもしれません。

わたしは最初「Laravelって簡単だよ」と聞いていましたが、実際に学習し始めると思いのほか難しく「聞いていたのと違う~!!」と、心の中で叫びました。

わたしと同じように「Laravelって、意外とむずかしいな」と思う人のために、Laravelを分かりやすく学べる学習サイト「初心者のためのLaravelの教科書」を作りました。

 

Junko
Junko

基礎編部分は無料です。

ご興味があれば、クリックして、詳細を見てみてくださいね。

 

Laravelの教科書について、詳しく見てみる

Laravel Viteの使い方とエラー対策 Laravel入門講座

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

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

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

【無料プレゼント】

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

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

詳細はこちらをクリック

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

Laravelの本を書きました。


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

Laravel10対応

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

書籍の詳細を見てみる

Laravelの本を書きました。


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

Laravel10対応

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

書籍の詳細を見てみる


Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。
セミナーで、StripeやChatGPT連携、デバックなど実践スキルを分かりやすく学べます。

ラボの案内を見てみる

Twitter始めました。
40代からプログラミング!

コメント

  1. より:

    イラストめっちゃかわいいですね

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