バンドラとは何か
- Webアプリにおけるフロントエンド用のツール
- いろんなアセット（資産）をひとまとめにしてくれる
バンドラが必要な背景
- Webアプリの複雑化に伴い、様々なフロントエンド技術が発達
CSSメタ言語／AltJS／Reactに代表される仮想DOMをベース技術とするフレームワーク など - しかしブラウザが理解する言語は相変わらずHTML/JS/CSSの３つ！
バンドラの機能
- コンパイル：CSSメタ言語→CSS、やAltJS→JS、などの変換を実行
- HTMLの書き換え：コンパイルしたCSSやJSを参照すようにHTMLを書き換える
- 最適化：minify（最小化）／画像最適化 など
- 開発用サーバ
HMR(Hot Module Replacement)
- 開発中にいちいち ビルド→Webサーバ再起動 という操作をしないといけないのは非効率極まれる
- そこでバンドラには、モジュールの変更を検知したら勝手にビルドしてHTML/JS/CSSを最新化してくれる機能が備わっているものが多い
node.js/npm[or yarn]は必須
- バンドラを始め、フロントエンド開発に必要なツールの多くはnpmで提供される
- npmとは、node.jsのパッケージマネージャ
- npmはyarnに置き換えられつつある
具体的なバンドラは？
- Parcelがいちおし：とにかくお手軽
最後に
- フロントエンド開発にバンドラを導入し、堅牢なWebアプリを爆速で開発しましょう！