以前の記事で、「次回はさらにフロントエンド開発に寄せて、モジュールバンドラやタスクランナーについてご紹介できたら」と予告していましたが脱線してしまいましたので、今回はビルドツールにスポットを当てたいと思います。 tech.arms-soft.co.jp
ビルドツールとは
今ではフロントエンドの開発環境にはなくてはならないと言っても良いほどのツールです。
主に下記の処理を行なってくれます。
- pug、EJSなどのテンプレートエンジン
- SASS、PostCSSなどのCSSプリプロセッサ
- モジュールの依存関係の解決
- BabelなどのJavascriptトランスパイラ
- Vue、Reactなどのフレームワーク
- stylelint、eslintなどの構文チェッカー
さらに、画像の圧縮やブラウザのオートリロードなど、様々な動作を行なってくれます。
ただ便利な反面、様々なツールが登場し続けていて、そのツール達が多くのフロントエンジニアを苦しめているのです。
似たような問題はこのようなところにも。
www.fendo181.me
これまで使用してきたビルドツールの傾向
僕が導入した順番です。
- Grunt
- Gulp
- npm script
- Webpack
- Laravel Mix ← 現在ココ
2013年〜2019年までの推移
上記はこれから紹介するツールの推移です。npm scriptは思ったよりも少ないですが、npmでも検索すると思いますので実際にはもう少し多いと思います。
それにしても、やはり変動が激しいですね。
GitHub Star数
| 名前 | スター数 | |
|---|---|---|
| 1 | webpack | 52,953 |
| 2 | parcel | 34,820 |
| 3 | gulp | 31,633 |
| 4 | rollup | 17,496 |
| 5 | npm | 17,177 |
予想通りwebpackが1位ですね。続いてparcelでした。
1. Grunt
2013年、タスクランナーとして主流だったGruntを使用し始めました。それまではPreprosというGUIツールを使用していましたが、GUIからの脱却をしたく導入しました。
はじめは設定ファイルを作るのに戸惑いました。懐かしいですね。
2. Gulp
Node.jsをベースに作られたタスクランナー。Gruntと比較すると実行速度が早くなり、設定ファイルの記述がシンプルになりました。
この時にはGruntへ不満を感じてはいませんでしたが、設定ファイルがシンプルになるならと、2014年にGulpへ乗り換えました。
そういえば、この頃はまだCoffeeScriptを書いていましたね。
3. npm script
Node Package Manager の略で、Node.jsのパッケージを管理するツールですが、タスクランナーとしても使用できます。
Grunt→Gulpと乗り換えて満足していた訳ですが、ある日バージョンアップを行なった時、うんともすんとも動かなくなってしまい「タスクランナーを動くようにする」ことに時間を費やす始末。
大量のgulpプラグインを使用し依存しなければいけないこと、凄まじい行数になってしまう設定ファイルに嫌気がさしていた最中、予期せぬ自体に遭遇したことで2016年にnpmに乗り換えました。
4. Webpack
JSファイルをひとつにまとめるモジュールバンドラーで、Gulp、npmの時からJSにはWebpackを使用していました。
SCSSのコンパイルも画像のバンドルも（もちろんそれ以外にも）行えるWebpackですが、JSのバンドルだけに使用していたのには理由があります。
gulpでも感じていた設定ファイルの行数、ビルドの速度への不満です。Webpackはできることが多いのですが、何をするにしても設定ファイルへの記述が多く、やることが増えればそれだけ処理に時間がかかってしまうので、JSのバンドルだけに使用することにしていました。
［番外］Rollup
ビルドのスピードは若干遅めだけど、生成ファイルの圧縮率が非常に高いのが特徴。
JavaScriptに特化したツールで、JSライブラリを開発する際に現在使用中です。
［番外］Parcel
とにかくパッケージングが高速、設定ファイルが不要でシンプルが売りのビルドツール。
ただし複数のページで構成するサイトに不向きだったり、PHPを使用する案件で導入できなかったりするので、業務ではまだ使用していません。
現状は汎用性が高くないですが、将来的にはWebpackの代替になるかもしれないため定期的にチェックをしています。
そして行き着いたのがLaravel Mix
「Laravel Mix」は弊社で主に使用しているPHPフレームワーク「Laravel」に同梱されているビルドツール。
現在主流のWebpackがベースになっており、Laravelを使用しなくても使うことができます。とにかく設定ファイルがシンプルで、ビルドのスピードも申し分ありません。
Laravel Mixについては、次回詳しくご紹介したいと思います。
まとめ
Web制作の中でも、とりわけフロントエンドは非常に速いスピードで変化しています。
流行りに流されず息の長そうなツールを選択すること、できるかぎりプラグインに依存しすぎないことが重要ではないかと思います。
