[Javascript] babelってなに？

これまでバックエンド系の業務がメインだった筆者なのですが、最近フロントエンドの業務増えてきており、止むに止まれず最近Reactなどの勉強をしています。
(なぜかバックエンドを中心にやってきた人間にはフロントエンドに手を出すのは大変そうで気が重いのですよね。。。)

言い訳は置いておいて、本日は表題の通りbabel(バベルと読む)を学んだので、備忘録としてまとめてみたいと思います。

対象読者

• babelというワードは聞いたことがあるけど、いまいち何者かわかっていない
• 深い知識までは必要なく、bableの概要をサクッと知りたい

本記事で書かないこと

• babelの使い方
• babelの細かい機能など

ずばり一言で、babelとは

先に私が調べてみた理解でbabelを一言で表すと、

新しいバージョンの書き方で書いたJavascritpコードを古いバージョンでも互換して動くように変換するコンパイラツール

です。
(冒頭の通り、筆者は初学者のため間違っていればコメントで教えていただけると嬉しいです。)

ECMAScriptとは

ECMAScriptとは、javascriptの機能を標準化した仕様になります。
他の言語からjavascriptを勉強しようと思ったとき、このECMAScriptってなんだ？となったので、少し歴史を含めてまとめてみたいと思います。

javascriptってバージョンあるの？

本題とは少しずれてしまいますが、Javascriptのバージョンについて書かせていただきます。
私が初めてJavascriptを使おうと思ったときにまず驚いたのが、このバージョンについてです。

というのもJSをはじめてみようかなと思ったときに、まずは開発環境を準備するのが他の言語では一般的だと思うのですが、調べてみても「javascriptのバージョンごとのインストール方法」などが見つかりませんでした。

他の言語、例えばPythonなどではバージョンが3.6、3.7...のように分かりやすく決まっており、開発をしようとする場合にはどのバージョンを使うかなど考えたりするかと思います。

しかし、javascript自体にはバージョンがなく、このバージョンにあたるものとしてECMAScriptが該当するそうです。
では、このECMAScriptとは、なにか、なぜ他の言語と少し異なるのか調べてみました。

javascriptの歴史

javascriptは1995年に開発されたのですが、当時はNetscape Communicationsというブラウザを開発していた会社が作ったプログラミング言語であり、このNetscape社のブラウザで利用されていました。

その後、マイクロソフトのIEや他のブラウザでもjavascriptが利用されるようになっていったのですが、各会社がそれぞれのルールで使うようになり、結果ブラウザ間での互換性が取れなくなるといった課題が出てきました。
いわば、同じ日本語でも各地方で言語が変化していき方言が生まれたことで、同じ日本語なのに言葉が通じないという現象が発生してしまったのです。

そこで、この混沌とした状況を解決するために言語のルールを統一する目的でECMAScriptが作られました。
余談になりますが、プロダクト開発でも何も設計を考えずにいきあたりばったりモノを作ってしまうと、後で後悔することは少なくないですが、javascriptの歴史を学び近いものを感じました。

こういった背景もあり、javascriptにはバージョンがなく、ECMAScriptで定義されているのです。

ECMAScriptのバージョン変遷

なお、これまでのバージョンの変遷は以下の通りです。

バージョン	略称	リリース
ECMAScript 1	ES1	1997年6月
ECMAScript 2	ES2	1998年6月
ECMAScript 3	ES3	1999年12月
ECMAScript 4	ES4	--
ECMAScript 5	ES5	2009年12月
ECMAScript 5.1	ES5.1	2011年6月
ECMAScript 2015	ES2015 / ES6	2015年6月
ECMAScript 2016	ES2016 / ES7	2016年6月
ECMAScript 2017	ES2017 / ES8	2017年6月
ECMAScript 2018	ES2018 / ES9	2018年6月
ECMAScript 2019	ES2019 / ES10	2019年6月
ECMAScript 2020	ES2020 / ES11	2020年6月

babelの必要性

ここまでjavascriptの歴史などについて簡単に触れてきましたが、javascritpにもECMAScriptというバージョンがあることが理解できたかと思います。
このバージョンの存在があることで、課題になるのが上位・下位バージョンとの互換性です。

Pythonでも2系と3系という大きなバージョンの違いがあり、書き方が全く違うことで2->3に移行するのが大変でした。

しかし、python以上にjavascripのバージョン互換性というのは非常に厄介な問題になります。
というのも、ブラウザごとに対応しているjavascriptのバージョンが異なってしまうことが往々にしてあるからです。
そのため、最新バージョンのECMAScriptでjavascriptのコードを書いた場合、Google Chromeなどでは最新バージョンにも基本的に対応していると思いますが、Internet Explorer11といった古いブラウザでは動作しない、なんてケースも発生してしまいます。

そこで、新しいバージョンの記法で書いたjavascriptコードを下位バージョンのjavascriptで動くように変換する(=トランスパイル)ツールが必要であり、これが「babel」なのです。

babelのトランスパイル例

babelでトランスパイルした時の例が以下になります。
前者がアローファンクションを使った書き方なのですが、こちらをbabelでトランスパイルすると後者のように変換してくれます。

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

※ 参考 https://babeljs.io/docs/en/index.html

所感

簡単にbabelについてまとめてみましたが、最初勉強した時はなぜこんなツールがひつようなのだろうかと疑問だったことが解決しました。

Pythonのようなバックエンド系の言語では、新しいバージョンを使うとして、そのバージョンに合わせてインフラ環境(dockerやミドルウェア)もバージョンを変更するだけですが、フロントエンドで動作するjavascriptはユーザが使うブラウザに基づいて動く・動かないということが発生する、この対策のためにbabelでトランスパイルしているのか、と理解できました。