Laravel関連のドキュメントやメルマガを読んでるとちょいちょい出てくるLaravel MixとLaravel Vite
なんだか分からないけど、放置しておくと面倒になりそうなのでまとめておくことにします。
Laravel Mixとは？スッキリ分かる解説とインストールの手順
- Laravel Mix: webpackのAPIラッパーで使いやすくするもの
- Laravel Vite: Laravel Mixの代わりのツールで2022年6月29日から、LaravelがViteをデフォルトでいれるようになったそうです。詳細は上記参照
webpackとは
webpackには、JavaScriptやCSSといったファイルをまとめたり、コンパイルする役割があります。
コンパイルは、コンピュータ上で実行可能なように変換すること。
Webアプリの場合は、ブラウザで表示できるようにするってことです。
Laravel Mixは、このwebpackを使いやすくしてくれるのです。
シンプルなWebサイトであればHTML, CSS, JavaScriptもシンプルで数も少ないでしょうね。
ただ大規模な開発するようになってCSSもJavaScriptも機能が追加になってくるとファイル分割して開発、そして最後はまとめるような機能が別途必要となるということでしょう。
JavaScriptに関して
WebブラウザNetscape Navigatorに起源を持つようですが、Internet Explorer 3.0に搭載されたことで広まったようですね。
もともとLiveScriptという名前だったようですが、色んな思惑でJavaScriptに改名したようです。
Javaとは1mmも関係ないですが、初心者などは勘違いすることもあるとかないとか。
その起源から”ブラウザ”上で動作するものですが、最近はOS上でも動作するようになりました。
なぜかそれを”サーバサイド”JavaScriptと呼ぶことが多いのですが、もやっとしますね。
別にクライアント（PC）でも動きますが？
多分、クライアントサイドでブラウザが動作し、サーバサイドでサーバが動いている、クライアント・サーバモデルをイメージしてるんですかね？
そのためクライアント＝ブラウザということかな？
OS上でもJavaScriptを動かすための環境として有名なのがNode.jsです。
私の理解だと
Node.jsはブラウザ(Google Chrome)上でJavaScriptを実行するためのエンジン(V8)をOSで動くように移植したJavaScriptの実行環境が正しいと思います。
https://www.kwbtblog.com/entry/2019/03/11/071635
JavaScriptは、ブラウザ上でちょっとした動きを付けたり、イベント処理するくらいの小さなプログラム用だったのがOS上でも動作するようになり飛躍的に複雑化したという印象です。
JavaScriptの標準化
ECMAとか出てくるのでややこしいですね。
JavaScript って何？
上記が詳しいです。ECMA(European Computer Manufacturers Association)という組織がJavaScriptの標準化を行うことになったのでECMAScriptとも呼ばれることになったと。
ESMAはエクマって読むらしいです。
標準化は1997年6月は始まってますね、以外と早くから進んでいたんですね。
ECMAScript 2015、この辺からですね、私がJavaScriptがかなり機能を詰め込んで変わったきたと何となく思い出したのは。
JavaScriptの仕様ES5以前とES2015(ES6)以降の違いの抑えるべき項目
色々変わった点が書いてあるけど一番の目玉はクラス化ですかね。
ECMAScript 2015以前
function Profile() {
this.name = '太郎'; // プロパティ
}
Profile.prototype.desc = function() { // メソッド
console.log(this.name + 'はお人好しでカワイイです。');
};
var person = new Profile();
person.desc();
ECMAScript 2015から
class Profile {
constructor() {
this.name = '太郎';
}
desc() {
console.log(`${this.name}はお人好しでカワイイです。`);
}
}
let person = new Profile();
console.log(person.name); // 太郎
person.desc(); // 太郎はお人好しでカワイイです。
これはヒドイ、ECMAScript 2015以前はオブジェクト指向風に無理くり書いてる感じがします。
あとはモジュール化
ES6 moduleとは？なぜ必要？
JavaScriptには、長い間moduleシステムがありませんでした。
アプリケーションが改善されて肥大化するにつれて、コードも大きくなり、それらを管理して 1つのファイルに保持することが困難になっていきました。
それを解決する為、モジュールの概念が生まれました。
これは、ほとんどのプログラミング言語では基本的な部分ですが、JavaScriptではそうではありませんでした。
これもヒドイ、普通のプログラム言語の経験があれば機能を適度にモジュール分割して、ファイルも分けるのが基本だけどJavaScriptではできなかったのか、まあ出自を考えるとそこまで肥大化するとは思ってなかったんでしょうね。
moduleの背後にある基本的な考え方は、コードの一部をexportして、それを他のファイルにimportして使用できるというものです。
moduleを使用すると、大きなスクリプトを小さなmoduleに分割して、他のファイルでも使用できます。
なるほど、 ECMAScript 2015からようやくオブジェクト指向やモジュール化して大規模な開発ができるようになった感じです。
えっと長かったけど、最初のwebpackとはに戻って
【webpack】をサクッとまとめる
webpackはモジュールバンドラと呼ばれており、ソースコードを束ねて、ブラウザで実行できる静的なJavaScriptファイルを出力するものです。Webアプリの開発において様々なnpmパッケージを使う人にとっては必須のツールといっても過言でもないでしょう！
モジュール化によって機能を複数のJavaScriptファイルに分けて開発することができるようになりました。
ただ実行時は１つのファイルにまとめた方がHTMLファイルからも参照し易いでしょうね。
なのでモジュールバンドラとしてwebpackが登場するということでしょう。
モジュールバンドラーとトランスパイラ
モジュールバンドラー
JavaScriptは細かく分けて開発を進めた方が効率的で生産性も上がる。
ただ、本番環境で実行するときはファイルを細分化する必要はない。
むしろ、読み込み回数が増えてパフォーマンスが悪くなる。
そこで、 開発はファイルを分けて行い、本番用にビルドするときに１つのファイルにまとめるという思想を実現するため、
jsファイルやcssファイル等をまとめてくれるモジュールバンドラーが作られた。
現在主流のモジュールバンドラーはWebpack
トランスパイラ(コンパイラ)
モジュールバンドラーが複数のファイルを一つにまとめてくれるものならば、
トランスパイラはJavaScriptの記法をブラウザで実行できる形に変化してくれるもの。
ECMAScriptは毎年仕様が変わり、バージョンが変わりますが、それに全てのブラウザが対応しているわけではない。
ex)ES6はIE(InternetExplore)でエラーが出て全然動かない。。。
そこで、トランスパイラを使用すると、新しい記法で書かれたJavaScriptを古い記法（多くのブラウザで実行できる形）に変換してくれます。
現在主流のトランスパイラはBabel（旧 6to5）
モジュールハンドラについては既出だけど良くまとまってる。
トランスパイラについてもわかりやすい、ブラウザのサポートについては悩ましい、サポートの状況もブラウザによって異なるから古い形式にトランスパイルしないといけないわけか、いろいろめんどくさいけどしょうがいない。
webpackはバンドラー、Babelはトランスパイラ
余談
これから主流になるであろうビルドツール Vite
これからフロントエンドで主流となると言われているビルドツールにViteというものがある
Vue.jsの開発者であるEvan You氏が中心となって開発
Webpackよりも圧倒的に高速である
Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートと読むらしい、 Vue.jsの開発者のEvan You氏が中心になって開発してるらしいですね。
Laravelでも既にLaravel Mix(webpack)からLaravel Viteに移行しているらしい。
Laravel Mixすら使ったことないのにもうLaravel Viteに移行しているとかスピードが速すぎる。
Laravel Viteを使うことにします。
CSSに関して
CSSはCascading Style Sheets（カスケーディング・スタイル・シート）の略です。
CSSの歴史。誕生の背景やLevel別の特長を学ぼう。
CSSの基本的な書き方・CSSとは？
CSSでできること
- デザイン（装飾）
- レイアウト・サイズ調整（HTMLの表示位置調節や整列）
- アニメーション
HTMLが構造をタグで規定するに対して、見た目を整えるのがCSSになります。
SCSSとSassとSASS
CSSも古いので最近の事情に合わせて拡張しているようです。
ただ、ネーミングがダメですね。わざと混乱させてるとしか思えない。
https://and-engineer.com/articles/Yw7uwBAAACMA7ZUr
Sass：Syntactically Awesome StyleSheet、CSSを拡張して扱いやすくしたスタイルシートです。
記法が２つあり
(1) SASS形式：最初に作られたもの。拡張子は「.sass」
(2) SCSS形式：こちらの方が普及している。拡張子は「.scss」
SCSS形式のファイルはそのままではWebブラウザは認識できないので、CSSに変換するためのコンパイル作業が必要となる。
webpackなどを使ってコンパイル（CSSへ変換）するのでしょう。
SCSSの方が普及してるらしいので、これからSassを学習するならSCSS一択でしょうね。
webpack を使って Sass をコンパイルする方法
ということで
Laravel MixとLaravel ViteはLaravelのフロントエンド(JavaScript, CSS)のビルドツールだということですね。
今はLaravel Viteに移行したらしいのでLaravel Viteを学習するのが良いでしょう。
