はじめに
Railsでフロントの構築をする際今まではベストプラクティスがわからずとりあえずSPAを採用していたが、今回はSPAを用いないフロント構成をしようと思った。現在フロントの主流といったらReact,Vueだと思うがこれらをRailsで採用するにあたりWebpackerが必要になってくる。では、なぜWebpackを使わずWebpackerが必要なのか？そういった理由を深掘りしていくためにまずはWebpackについて調べていきたいと思う。
自分の考えをまとめるために疑問形式で深掘りしていきたいと思う。
Webpackって何？
javascpritモジュールバンドラー
モジュールの歴史
元々、javascriptにはファイル分割をしてまとめるという機能がなかった。しかし、javascriptの人気に伴いモジュール機能を加えようと動きが出てきた。そこに様々なモジュール仕様を定めたものが出てきた。
※javascriptでいうモジュールとは単に仕様のことを指す。
実際にモジュールを機能として使うためにはそれ用のツールが必要になる。
- CommonJS
- AMD
- ESModule(ECMAScript Module)
CommonJS
Node.jsで採用されていて最初の誕生したモジュール仕様。Node.js環境では実行可能であるが、ブラウザでは実行できないため、Browserifyを利用してバンドリングする必要があった。
// Import
const sample = require('./sample.js');
// Export
module.exports = function example() {
return "example"
}
AMD
ブラウザでも動作できるようにする仕様。AMDという仕様に準拠したツールがRequireJSである。
ESModule
ES6で策定された仕様。主要なブラウザで対応しているのでトランスパイルなどが不要。
現在で主流の仕様であり、Node.js v13.2.0でサポートが開始されている。
// Import
import sample from "./sample.js"
// Export
export function example1(){
return "example1"
}
ちなみにECMAScriptとはjavascriptの標準規格のこと。javascriptが誕生した初期では、ブラウザごとで独自に拡張を行っていたため、標準化するために作られた。
モジュールバンドラーは何をするの？
上記の通りモジュール機能ツールが誕生したことによりファイル分割が可能になった。しかし、分割されたファイルをそのままブラウザに送るとファイル転送回数が多くなる。そこでモジュールバンドラーにより分割されたファイルを依存関係を解決しつつ１つのファイルにまとめることでファイル転送回数を増加を解決した。
※ファイル転送回数についてはHTTP/2の登場で解決され得る
モジュールバンドラーには主に３つある。
- Browserify
- rollup.js
- Webpack
Browserify
CommonJSで書かれたjavascriptファイルをブラウザ用にバンドリングする。
CommonJSはブラウザでは機能しないのでjsファイルをまとめてから配信する。
rollup.js
ES6に一旦変換することで静的解析できるようにした。
commonjsは標準ではサポートされていない
Webpack
標準でCommonJSとES Moduleに対応している。
js以外にもcssなどの静的ファイルをバンドルする。
モジュールバンドラーはファイルをまとめるだけ？
モダンなブラウザではES6に対応しているものがあるので、モジュールバンドラーはもはや必要ないのではないか？と思われるが現在のモジュールバンドラーは様々な機能を取り揃えている
- 複数に分割されたファイルを依存関係を解決してまとめる
- トランスパイル(babel)
- cssのプリプロセッサー(postcss, sass)
- linterでの構文チェック
- ファイルにprefixを付与
- js,cssファイルの圧縮
Webpackではこれらの機能を兼ね備えているため今後も重要なツールになっていくと思う。
参考記事
ES6のexportについて https://qiita.com/senou/items/a2f7a0f717d8aadabbf7
https://note.com/billion_dollars/n/n596fecfdeb2e
https://zenn.dev/arei/scraps/47abc4f7052ff7