React入門 | ECMAScript

モジュールバンドラー、トランスパイラ

モダンJavaScriptの開発においては、モジュールバンドラーやトランスパイラと呼ばれる仕組みが必須になる。
ただ、creat-react-appを使用すればモジュールバンドラーやトランスパイラを意識しなくても開発が可能。

モジュールバンドラー

「開発はファイルを分けて行い、本番用にビルドする時に、1つのファイルにまとめよう」という思想を実現するために、jsファイルやcssファイル等をまとめてくれるモジュールバンドラーがつくられた。
モジュールバンドラーもまたパッケージマネージャー同様ファイルを一つにまとめる際に依存関係を解決してくれる優れもの。
あらかじめ設定ファイルを記述しておくことで、開発者は何も意識することなく開発を行い、ビルドを実行するとモジュールバンドラーがいい感じにファイルをまとめてバンドル後のファイルを生成してくれるので、そのファイルを本番環境に反映することでプログラムを実行できる。
ちなみに、現在主流のモジュールバンドラーはwebpackと呼ばれるものとなる。

トランスパイラ

モジュールバンドラーが複数のファイルを1つにまとめてくれるものだとしたら、トランスパイラはJavaScriptの記法をブラウザで実行できる形に変換してくれるもの。
どういうことかというと、ECMAScriptで毎年仕様がどんどん追加されていくが、ブラウザによってはまだ新しい記法が対応していないといったことがある。
そこでトランスパイラを使用すると新しい記法で書かれたJavaScriptを古い記法（多くのブラウザで実行できる形）に変換してくれるというわけだ。
その他にもReactだとjsファイルにjsx記法と呼ばれる特殊なルールの書き方でコードを記述していくのですが、そういったものもブラウザが認識できる形に自動で変換してくれる。
ちなみに現在主流になっているトランスパイラはBabelと呼ばれるものとなる。

まとめ

それぞれに共通して言えることは、
「開発は効率良く、実行時は上手く変換」
ということなのだ。