仕組みをさらっと理解する
Reactを学ぶにあたって避けては通れない用語や仕組みについて紐解きます。
単なる知識なので知ってるという方はこの＃9は読み飛ばしていただいてOKです。
Node.jsとBabelとwebpackって？
3つを特徴を簡単にまとめると以下の表の通りになります。
| ツール名 | 役割 |
|---|---|
| Node.js | JavaScriptの実行環境を作るJavaScriptエンジン |
| Babel | JavaScriptを変換してくれるトランスパイラ |
| webpack | JavaScriptファイルなどを1つのファイルにまとめてくれるモジュールハンドラ |
詳細に説明していきます。
Node.js
ブラウザでしか動作しなかったJavaScriptをサーバーサイドやOS上などブラウザ以外でも実行できるようにしてくれるものです。
Node.jsのバージョン管理にはnpmを利用しています。
Babelを動かすための環境を作る役割も担っています。
Babel
ReactのようにJSXで書かれた構文はそのままだとブラウザでは実行されません。
JSXで書かれたコードをブラウザの解釈できる状態に変換してくれます。
また、ES2015以降で登場した記述なども古いブラウザで動作するように変換してくれます。
webpack
複数のJavaScriptファイルをまとめてくれるモジュールハンドラです。
ファイルをまとめることでサイトパフォーマンス、つまり読み込み速度がUPすることが期待できます。
モジュールとは、webpackがまとめたファイルのことで、CSSもそのうちのひとつです。
BabelにはJavaScriptファイルをまとめる機能はないのでwebpackとBabelを組み合わせて利用します。
webpackはSassのコンパイルや画像の圧縮などフロントエンド開発環境を構築することができます。