プログラミング

Babel とは?

投稿日:2017年7月3日 更新日:

1. Babel とは?

Babel とは、新しい機能を使って書いた JavaScript のコードを、以前のバージョンの書き方に変換してくれるツールです。

近年、JavaScript には便利な文法が数多く導入されており、コードが書きやすくなっています。しかし、古いウェブブラウザではこれらに対応していません。ですので、プログラムの動作対象となるウェブブラウザの範囲を広げようと思うと、昔の面倒な書き方をしなければいけないということになり不便です。
こんなとき Babel を使うと、新しい文法を使って書いたコードを、古い書き方に変換することができるので、古いウェブブラウザでも動作させることができるのです。

ということで、以下のように使います。

  1. 新機能を使って JavaScriptのコードを書く
  2. そのファイルを Babel に読み込ませ、以前の書き方に変換したファイルを出力させる
  3. 2で出力されたファイルを Webサーバーに配置する

スポンサードリンク

2. JavaScript のバージョン

現在の JavaScript は ECMAScript という仕様として定義されています。

ECMAScript の主なバージョンの変遷は以下になります。

ES5 --> ES2015 (ES6) --> ES2016 (ES7) --> ES2017 (ES8)

参考

3. プラグイン (plugins)

Babel の変換機能は、変換する機能毎にプラグインとして実装されています。

4. プリセット (preset)

プラグインを特定のカテゴリでまとめたものをプリセットと言います。

ECMAScript のバージョンで分類したプリセットには以下があります。

ES2015

ES2016

ES2017

実際に利用したいのは、Env というプリセットです。

Env

  • targetsオプションで指定した環境(ブラウザや Node.js のバージョン)に必要なプラグインだけを使用することができるプリセットです。対象とする環境で既に実装されている機能については変換処理を行わないため、生成されるコードに無駄がありません。
  • ブラウザのバージョンを指定する場合(Node.jsではなく)は、browserl.ist を使って記述することができます。(記述例はこちらでも説明されています –> ai/browserslist
  • 参照: Env preset · Babel

以下は非推奨となったプリセットです。

Latest (非推奨)

  • 現在はこのプリセットを使用することは推奨されていません。
  • es2015, es2016, es2017 の全ての変換を行います。
  • ブラウザを指定するようなことはできず、どんなコードも ES5 に変換されます。

使用するプリセットが決まったら、該当する npm モジュールをインストールして使用します。

その他にもプリセットはありますが、詳細は以下のリンク先をご覧ください。

参考

5. 基本的な使い方

お勧めのプリセットは Env です。なるべく targets オプションで、対象とする環境を指定しましょう。

開発用のプロジェクトディレクトリ直下に、設定ファイル .babelrc を作る際は、例えば、以下のような記述を行うことになります。

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

6. Babel のイメージ

以下の関係を図にしてみました。

  • JavaScriptコード
  • プラグイン (Plugins)
  • プリセット (Presets)
  • ブラウザ

※ babel-core v6.25.0

Babelのイメージ(クリックすると拡大できます)
  • 実際は「ES2015までサポートしているブラウザ」というように、サポートしている機能がECMAScriptのバージョンによってきっちりと分類できるブラウザはありません。機能毎にサポートしていたり、サポートしていなかったりします。

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

web development

User Timing API を使って、特定の処理に掛かった時間を計測する

目次1. User Timing API について2. サンプルコード3. デモページ4. 参考仕様MDNブラウザの対応状況 1. User Timing API について User Timing L …

Bootstrap

ボタンを押した直後に BootstrapのTooltipを数秒間表示する方法

ウェブページ上のボタンを押した直後に、Bootstrap の Tooltip を一定時間だけ表示する方法を紹介します。 スポンサードリンク 目次1. はじめに2. 参考になる情報3. プログラムの書き …

Web Storage を使ったサンプルページを作りました

Web Storage を使ったサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 動作4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

Web

WSL (Ubuntu16.04.4 LTS) 上の Python から、Selenium を利用して Windows側のウェブブラウザを操作する

WSL (Windows Subsystem for Linux) の環境 (Ubuntu 16.04.4 LTS) にインストールされている Python を使い、Windows 側のウェブブラウザ …

webpack 3 を使ったウェブページ開発手順

webpack 3 を使って、簡単なウェブページを開発する手順を紹介します。あくまで一つの例です。 1つ1つ細かい説明はできていませんが、「だいたいこんなふうにして作ることができますよ」ということが伝 …