Babel についてメモっていく
shimotsu普段のフロントエンド開発では Next.js や Nuxt.js などのフレームワークを使うことが多いが、そこで必ず使われている Babel について、そこまで深く理解してない自覚があった。
そこで、モダンなフロントエンド開発において切っても切れない Babel について、学んだことをメモっていく。
参考
shimotsuBabel とは
そもそも Babel とは、javascript の変換を行うコンパイラである。
例えば、ES2015 以降の文法で書かれた javascript のコードを、IE11 などのブラウザでは正しく実行することができない。そこで、新しい文法から古い文法（ES5）に変換する必要がある。そこで Babel の出番となる。
参考
shimotsuReact アプリケーションでの例
React アプリケーションをゼロから構築した場合における、babel の使い方を見てみる。
package.json
package.json 内を見ると、以下のそれぞれの babel 関連の依存モジュールが含まれていることがわかる。
"@babel/cli": "^7.13.16",
"@babel/core": "^7.14.2",
"@babel/preset-env": "^7.14.2",
"@babel/preset-react": "^7.13.13",
"@babel/preset-typescript": "^7.13.0",
@babel/core は本体、@babel/cli は CLI で操作するためのモジュール、その他は preset 用のモジュールである。
.babelrc
続いて、 .babelrc を見てみる。この例では非常にシンプルな設定のように見える。
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}
presets とは
babelrc 内で設定されている、 presets とは、簡単にいうとプラグインのコレクションである。
例えば、オーディオ系のソフトウェアなどでは preset はよく見る単語だが、それには「前もって準備しておく」という意味がある。つまり、ここでの presets は、「前もって用意してある設定情報群」みたいな解釈が適当かもしれない。
上記の例では、ECMAScript用、React用、TypeScript用の3つの preset が用意されている。
@babel/preset-env
最新の ECMAScript を使用するためのプリセット。サポートしたいターゲット（ ブラウザのバージョンやシェアなど）を指定することができ、ターゲットに最適な js に変換してくれる。
@babel/preset-react
React を使用するためのプリセット。@babel/plugin-syntax-jsx, @babel/plugin-transform-react-jsx, @babel/plugin-transform-react-display-name が含まれている。主に jsx を js に変換する目的か。
@babel/preset-typescript
TypeScript を使用するためのプリセット。@babel/plugin-transform-typescript を含んでいる。
参考
shimotsuPolyfill について
Babel を使っても、そもそも ES5 に存在しない構文（Promise や Array.from など）がある場合は正しく実行できない。それらを使えるようにするために、Polyfill が存在する。
使い方としては、
npm install --save @babel/polyfill
でインストールし、エントリポイントの先頭で読み込む。
import "@babel/polyfill";
shimotsunext/babel について
Next.js では React アプリケーションやサーバーサイドのコードをコンパイルするために必要なものがすべて含まれている next/babel プリセットがアプリに含まれている。
基本的には .babelrc に以下のように定義して使うだけ。
{
"presets": ["next/babel"],
"plugins": []
}
また、 next/babel には以下のプリセットが含まれている。いろいろ込みのお得セット。
- preset-env
- preset-react
- preset-typescript
- plugin-proposal-class-properties
- plugin-proposal-object-rest-spread
- plugin-transform-runtime
- styled-jsx
shimotsu変換の例
Babel は公式サイトに playground が用意されているので、変換の様子を確認できる。以下はアロー関数の変換の例。
変換前
const squared = num => num * num;
let result = squared(5);
console.log(result); // 25
変換後
"use strict";
var squared = function squared(num) {
return num * num;
};
var result = squared(5);
console.log(result); // 25