普段のフロントエンド開発では Next.js や Nuxt.js などのフレームワークを使うことが多いが、そこで必ず使われている Babel について、そこまで深く理解してない自覚があった。

そこで、モダンなフロントエンド開発において切っても切れない Babel について、学んだことをメモっていく。

参考

https://mae.chab.in/archives/2845

shimotsu

Babel とは

そもそも Babel とは、javascript の変換を行うコンパイラである。

例えば、ES2015 以降の文法で書かれた javascript のコードを、IE11 などのブラウザでは正しく実行することができない。そこで、新しい文法から古い文法（ES5）に変換する必要がある。そこで Babel の出番となる。

参考

https://babeljs.io/

shimotsu

React アプリケーションでの例

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"
  ]
}

shimotsu

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 を含んでいる。

参考

shimotsu

Polyfill について

Babel を使っても、そもそも ES5 に存在しない構文（Promise や Array.from など）がある場合は正しく実行できない。それらを使えるようにするために、Polyfill が存在する。

使い方としては、

npm install --save @babel/polyfill

でインストールし、エントリポイントの先頭で読み込む。

import "@babel/polyfill";

shimotsu

next/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