【Reactが動く仕組み】シリーズ
Reactでコードを書いて、アプリは作れる。
でも、「どうやって動いているのか？」と聞かれると、言葉にできない…。
一歩踏み出して、「裏側の仕組みを理解して説明できる」を目指したシリーズです。
全７弾で以下の内容を記載予定です。
１．Node.js（実行環境）
２．ビルド（構築の流れ）
３．Babel / polyfill（変換）
４．DOM / 仮想DOM（仕組み）
５．レンダリング（動き）
６．再レンダリング（なぜ起きる？）
７．最適化（どう見極める？）
今回はその第3弾として、「Babel / polyfill」について整理していきます。
はじめに
第2弾では「ビルド」について整理しました。
👉 Reactのコードは、そのままではブラウザで動かない
👉 そのため、ビルドによって"動かせる状態"にしている
という話でした。
では次に 「"動かせる状態"にするために、何をしているのか？」 を見ていきます。
この記事でわかること
- Babelとは何か
- polyfillとは何か
- この2つの違い
よくある混乱
Reactの学習をしていると、こんな言葉を見かけます。
- Babel
- polyfill
どちらも「変換」に関係していそうですが
似ているようで違うのです
結論
👉 Babelとpolyfillは役割が違う
- Babel → コードを書き換える
- polyfill → 足りない機能を追加する
Babelとは何か
Babelとは一言でいうと、
👉 新しいJavaScriptを、古い環境でも動くように書き換えるツール
例えば
const add = (a, b) => a + b;
これはアロー関数ですが、古いブラウザでは動かない場合があります。
Babelを通すと
var add = function(a, b) {
return a + b;
};
👉 このように書き換えられます
つまり、
👉 「構文（書き方）」を変換しています
JSXもBabelが変換している
Reactでよく使うJSX ↓
<h1>Hello</h1>
これもそのままでは、ブラウザがこの記法を理解できません
Babelによって ↓
React.createElement("h1", null, "Hello");
に変換されます。
👉 Reactが動くのは、この変換があるからです！
polyfillとは何か
では次にpolyfillです。
polyfillとは一言でいうと、
👉 古いブラウザに「足りない機能」を追加する仕組み
例えば
[1, 2, 3].includes(2);
この includes は、古いブラウザでは使えません。
このときpolyfillを使うと
👉 その機能をJavaScriptで実装して補います
if (!Array.prototype.includes) {
Array.prototype.includes = function(...) {
// 代替処理
};
}
👉 「機能そのもの」を追加しているということです
Babelとpolyfillの違い
ここまでを整理すると
■Babel
- コードを書き換える
- 構文（書き方）を変換する
例：アロー関数、JSX
■polyfill
- 機能を追加する
- 存在しないAPIを補う
例：includes、Promise など
👉 書き方を変えるのがBabel、機能を足すのがpolyfill
なぜ両方必要なのか？
☆ここが重要☆
例えば
const result = [1, 2, 3].includes(2);
Babelで変換すると ↓
var result = [1, 2, 3].includes(2);
👉 書き方は変わりますが、includes はそのままです
つまり
👉 機能がない問題は解決されていない
ここでpolyfillの出番です。
👉 Babelだけでは不十分で、polyfillと組み合わせる必要があります
Node.jsとの関係
第1弾・第2弾の話ともつながります。
これらの処理は、
- コード変換
- ファイル処理
を含みます。
そのため
👉 ブラウザでは実行できません
↓ ということは！
👉 【Node.js上で】Babelやpolyfillが動き、ビルド処理の一部として実行されています
まとめ
-
Babelは、コードの書き方を変換するツール
-
polyfillは、不足している機能を補う仕組み
-
Reactのコードは、これらによってブラウザで動く形に変換されている
👉 Reactはそのまま動いているのではなく、
👉 変換（Babel）と補完（polyfill）によって動ける形にされている
第4弾に向けて
ここまでで、「コードがどう変換されるか」が見えてきました。
では、その結果として、
👉 ブラウザはどのように画面を表示しているのか？
次回は「DOM / 仮想DOM」をテーマに、
表示の仕組みを整理していきます。