【Vue.js】Babelとはいったいなんなのか

はじめに

Vue.jsを使っていて、vue-cliを用いてプロジェクトを作成しようとするとこんなこと聞かれますよね。

? Please pick a present: (Use arrow keys)
> default (babel, eslint)
  Manually select features

デフォルトで入っているbabelとはいったいなんだろうといつも思っていたので、備忘録の意味合いもかねて残しておきたいと思います。

Babalとは？

公式サイトのドキュメントの冒頭にはこのように表記されていました。

Babel is a JavaScript compiler
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

Babel · The compiler for next generation JavaScript

簡単にまとめるとES6等の新しい文法をES5に変換してくれるコンパイラといった感じでしょうか。

実際にGIFを見てみると分かりやすいと思います。

さいごに

デフォルトでいつも入っているので、いったいなんなんだろうと思っていた謎が一つ解けてスッキリです。

特にアロー関数なんかが使えないと何かとつらいところもあるので、すごくありがたいですね。

ちなみにもう一つデフォルトで入っているeslintはJavaScriptの記述スタイルチェックツールらしく、設定した記述ルールにソースコードが沿っているかをチェックすることができるみたいでした。
運用中のVue.jsプロジェクトにESLintを入れるためにやったこと - Qiita

こちらもうまく利用していきたいですね。