BABELプラグインについて調べてみた

今までフロントエンドの開発をしたことがなかったので、個人的に学習をしようと始めました。
その中でBABELというコンパイラの存在を知ったので自分のためのメモ・これからフロントエンドエンジニアを目指す人のために記録として残しておこうと思います。

コンパイラとは

そもそもコンパイラについて理解していない人向け

コンパイラとはjsで我々にもわかるように書かれているソースコードを機械が処理を実行するための機械語に翻訳してくれる機能のことを言います。

Babelが行ってくれる処理

コンパイラについて理解したら次はBabelがどのような処理をしているのかを理解します
babelは最新のJavascriptで書かれたコードを古いJavascriptに変換するツールチェーンです
これによりまだ最新のjavascriptをサポートしていないブラウザでも実行することが可能になります。

Babelは基本的に以下の処理を実行しています
・ECMAScript の最新文法をブラウザがサポートする記述に変換する
・実行環境に足りない機能の Polyfill を提供する
・ソースコードの変換を行う

聞きなれない単語があるのでそれを踏まえて解説します

ECMAScript の最新文法をブラウザがサポートする記述に変換する

ECMAスクリプトとは

そもそもJavascriptはNetscape社のブラウザで処理が実行できるように作られた言語でした。
なので、普段皆さんが使用しているGoogleやfireFoxなどのブラウザでは実行がきませんでした。そこで国際標準化団体のECMAに全てのブラウザでも使用できるjsを作るように依頼してできたのがECMAScriptです(最新はES6)

つまり、Babelがやってくれている処理１つ目は全てのブラウザでjsが実行できるようにしてくれるということですね

実行環境に足りない機能の Polyfill を提供する

Polyfillとは

先ほど説明したECMAScriptはあくまで全てのブラウザで共通して使用できるようにしたものなので、Javascriptのすべての関数を網羅しているわけではありません。
そこで、不足している関数やライブラリを代替してくれるのがこのPolyfillになります。

つまり、完全にブラウザでJavascriptが実行できる環境を構築してくれるのがPolyfillということですね

ソースコードの変換を行う

最後にソースコードの変換を行ってくれるとありますが、これはBabelはもともとコンパイラということもあるのでコンパイルをしてくれるということです(そのままですね)

Babelの処理内容

では実際にどのようにして処理が行われているのか

まず初めに簡単に説明すると
　　　@babel/parser　（コード解析）
　　　　　　　　↓
　　　　　　　AST変換
　　　　　　　　↓
　　@babel/generator　（コード生成）
という流れで処理が実行されていきます

babelで使用されているツール

babelの処理を理解するには避けては通れないツール理解です
最低限の解説なので、詳細については他の記事に任せます

AST

そもそもASTという言葉が聞きなれない方のための説明です
Babel以外にもESLingなどでも使用されています

これはソースコードを構造体で表現したものです

言葉で説明するとわかりにくいで実際に見た方が早いと思うのでサンプルを載せておきます

const a = 1

　　　　　↓ (AST化)

{
  "type": "Program",
  "start": 0,
  "end": 12,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 11,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 6,
          "end": 11,
          "id": {
            "type": "Identifier",
            "start": 6,
            "end": 7,
            "name": "a"
          },
          "init": {
            "type": "Literal",
            "start": 10,
            "end": 11,
            "value": 1,
            "raw": "1"
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}

このほかにもどのように変換されるのか気になる方は以下のサイトで確認することができるので、興味のある人は遊んでみてください！

@babel/core

babel/coreはbabelが処理を実行するための関数群を提供するAPIになります
なので、このbabel/coreと連携しながら他のツールが処理を行います

これを一番最初にインストールしないと、他のbabelツールのバージョンが古くなったりするらしいので注意が必要らしいです

@babel/preset

babelにどのような変換処理をさせたいかを設定することができるコレクションに当たるのが@babel/presetです

設定方法としては.babelrcに設定を書いていきます

{
 "presets": ["@babel/preset-env(3番目)", "@babel/preset-react(2番目)", "@babel/preset-typescript(1番目)"]
}

このようにプラグインを指定して配列の後ろから順番に変換処理がされていきます
ここでの簡単な処理の流れとして
@babel/presetでどのプラグインを使用して変換を行うか確認
　　　　　　　　　　　　↓
AST変換を行い指定したプラグインに変換をさせる(プラグインはASTでしか変換ができないため)

という感じ

さらにこの段階で@babel/preset-envで変換したいECMAScriptバージョンを指定します

例)
Chrome40以上・iOS10以上をサポート対象

package.jsonに記述
~~ 省略
"babel" : {
  "presets": [
    ["@babel/preset-env", {
        "targets": [
          "chrome 40",
          "iOS 10"
        ]
      }
    ]
  ]
}

先ほども説明したようにECMAScriptでカバーしきれない関数などはPolyfillをインストールしてカバーします

@babel/generator

最後になりますが、これはbabel/presetで指定したプラグインがASTを受け取り変換処理が完了した後にASTで結果を返してくれます
その帰ってきたASTをコードに直してくれるのがこの@babel/generatorです

最後に

簡単ではありましたがこれがbabelが行っている処理になります。

また、今回presetについてめっちゃ簡単に説明しましたが正直presetがbabelの一番重要なことなので、今回の記事で概要を把握できた方は次はどういうpresetがあるのか調べるのもいいかもしれないですね！

初めてこのような記事を書いたので何かアドバイスをいただけると嬉しいです！

また、弊社株式会社パーソンリンクではエンジニアを募集中です。ご応募お待ちしております！