【Babel】ES2019までの構文はバベられる？バベられない？まとめ

この記事は [フューチャー Advent Calendar 2018](https://qiita.com/advent-calendar/2018/future) ４日目の記事です。
１日目に[「脱Babel!」](https://qiita.com/shibukawa/items/0a1aaf689d5183c6e0f1)言われましたが僕は泣きません。明日も元気にバベっていきます。

みなさまはESのバージョンはどのバージョンでJavaScript書いていますでしょうか？
とりあえず2015という人も、`async`まではつかう2017な人も、2018の正規表現もガンガン使っちゃうモダンな人も、stage-3も使っちゃう未来人もいるでしょう。
（え？ES5？？すみませんが本記事は全く役に立ちません。）

しかし、その構文、バベってブラウザ要件満たせるやつでしたっけ？Chromeでしか動かないんじゃないの？って気になりませんか？
私は気になって調べようと思ったので、調べついでに記事にします。
（間違ってたらごめんなさい。指摘くれると嬉しいです。）
（Polyfillで解決できるような追加メソッドやプロパティは対象にしません。）
（あと、疲れたのでstage-3以下は対象にしません。）

### 各構文の調べ方
構文は[eslint-plugin-es](https://mysticatea.github.io/eslint-plugin-es/)の[ルール一覧](https://mysticatea.github.io/eslint-plugin-es/rules/)で見ていこうと思います。どう考えても使い方違いますが年ごとに綺麗に一覧になってるので。
そこから、[tc39/proposals](https://github.com/tc39/proposals/blob/master/finished-proposals.md)や[babelのPlugins](https://babeljs.io/docs/en/plugins/)、[@babel/preset-env](https://github.com/babel/babel/blob/master/packages/babel-preset-env/package.json)の中とか見ながら集めようと思います。

### :100: ES2019

バベられる。

- :ok: [JSON superset](https://github.com/tc39/proposal-json-superset)
    エスケープ無しで使える文字コードが増える（ってことかな？）。バベられる。
    [@babel/plugin-proposal-json-strings](https://www.npmjs.com/package/@babel/plugin-proposal-json-strings)

- :ok: [Optional `catch` binding](https://github.com/tc39/proposal-optional-catch-binding)
    `catch(e)`って`e`使わない場合意味ないよね？いらないよね？という感じ（想像）の構文。バベられる。
    [@babel/plugin-proposal-optional-catch-binding](https://www.npmjs.com/package/@babel/plugin-proposal-optional-catch-binding)

### :warning: ES2018

- :ok: [Asynchronous Iteration](https://github.com/tc39/proposal-async-iteration)
    イテレーションも`await`するぜ。バベられる。
    [@babel/plugin-syntax-async-generators](https://www.npmjs.com/package/@babel/plugin-syntax-async-generators)

- :ok: [Lifting template literal restriction](https://github.com/tc39/proposal-template-literal-revision)
    テンプレートリテラルのエスケープのつもりじゃない`\u`はそのまま。バベられる。

- :x: [RegExp Lookbehind Assertions](https://github.com/tc39/proposal-regexp-lookbehind)
    正規表現の後読み。バベられない。

- :x: [RegExp named capture groups](https://github.com/tc39/proposal-regexp-named-groups)
    正規表現のキャプチャに名前つけられる構文。バベられない。
    プラグイン入れればいけるという噂。
    [babel-plugin-transform-modern-regexp](https://github.com/DmitrySoshnikov/babel-plugin-transform-modern-regexp)

- :ok: [`s` (`dotAll`) flag for regular expressions](https://github.com/tc39/proposal-regexp-dotall-flag)
    `/.*/`とか書くとき使うドット`.`の意味を変える正規表現のフラグ。バベられる。
    [@babel/plugin-transform-dotall-regex](https://www.npmjs.com/package/@babel/plugin-transform-dotall-regex)


- :ok: [RegExp Unicode Property Escapes](https://github.com/tc39/proposal-regexp-unicode-property-escapes)
    Unicodeデータベースの名前で正規表現かける構文。バベられる。
    [@babel/plugin-proposal-unicode-property-regex](https://www.npmjs.com/package/@babel/plugin-proposal-unicode-property-regex)

- :ok: [Rest/Spread Properties](https://github.com/tc39/proposal-object-rest-spread)
    `Object`でRest/Spread使う構文。バベられる。
    [@babel/plugin-proposal-object-rest-spread](https://www.npmjs.com/package/@babel/plugin-proposal-object-rest-spread)

### :100: ES2017

バベられる。

- :ok: [Async functions](https://github.com/tc39/ecmascript-asyncawait)
    `async`。バベられる。
    [@babel/plugin-transform-async-to-generator](https://www.npmjs.com/package/@babel/plugin-transform-async-to-generator)  

- :ok: [Trailing commas in function parameter lists and calls](https://github.com/tc39/proposal-trailing-function-commas)
    `Function`引数ケツカンマ。バベられる。

### :100: ES2016

バベられる。

- :ok: [Exponentiation operator](https://github.com/rwaldron/exponentiation-operator)  
    指数演算子。バベられる。  
    [@babel/plugin-transform-exponentiation-operator](https://www.npmjs.com/package/@babel/plugin-transform-exponentiation-operator)

### :100: ES2015

全部バベられる。

- :ok: Arrow Function Definitions
    アローファンクション。バベられる。
    [@babel/plugin-transform-exponentiation-operator](https://www.npmjs.com/package/@babel/plugin-transform-exponentiation-operator)

- :ok: Binary numeric literals
    2進数でリテラル書いちゃう。バベられる。
    [@babel/plugin-transform-literals](https://www.npmjs.com/package/@babel/plugin-transform-literals)

- :ok: block-scoped function declarations
    ブロックスコープで関数宣言しちゃう。バベられる。
    [@babel/plugin-transform-block-scoped-functions](https://www.npmjs.com/package/@babel/plugin-transform-block-scoped-functions)

- :ok: Let and Const Declarations
    `let`、`const`。バベられる。
    [@babel/plugin-transform-block-scoping](https://www.npmjs.com/package/@babel/plugin-transform-block-scoping)

- :ok: Class Definitions
    `class`。バベられる。
    [@babel/plugin-transform-classes](https://www.npmjs.com/package/@babel/plugin-transform-classes)

- :ok: Computed property names
    `Object`初期化時に変数でプロパティ名を指定できたりする。バベられる。
    [@babel/plugin-transform-computed-properties](https://www.npmjs.com/package/@babel/plugin-transform-computed-properties)

- :ok: Default function parameters
    デフォルト引数。バベられる。
    [@babel/plugin-transform-parameters](https://www.npmjs.com/package/@babel/plugin-transform-parameters)

- :ok: Destructuring
    分割代入とか。バベられる。
    [@babel/plugin-transform-destructuring](https://www.npmjs.com/package/@babel/plugin-transform-destructuring)

- :ok: `for-of` Statements
    `for-of`。バベられる。
    [@babel/plugin-transform-for-of](https://www.npmjs.com/package/@babel/plugin-transform-for-of)

- :ok: Generator Function Definitions
    `*`ジェネレーター`()`。バベられる。
    [@babel/plugin-transform-regenerator](https://www.npmjs.com/package/@babel/plugin-transform-regenerator)

- :ok: Imports / Exports
    `import`や`export`。バベられる。
    [@babel/plugin-transform-modules-commonjs](https://www.npmjs.com/package/@babel/plugin-transform-modules-commonjs)

- :ok: `new.target` property
    `new.target`っていうプロパティ。バベられる。
    [@babel/plugin-transform-new-target](https://www.npmjs.com/package/@babel/plugin-transform-new-target)

- :ok: `super` keyword
    `super`。バベられる。
    [@babel/plugin-transform-object-super](https://www.npmjs.com/package/@babel/plugin-transform-object-super)

- :ok: Octal numeric literals
    8進数でリテラル。バベられる。
    [@babel/plugin-transform-literals](https://www.npmjs.com/package/@babel/plugin-transform-literals)

- :ok: Shorthand properties
    `Object`初期化時の省略記法。バベられる。
    [@babel/plugin-transform-shorthand-properties](https://www.npmjs.com/package/@babel/plugin-transform-shorthand-properties)

- :ok: RegExp `u` flag
    正規表現の`u`フラグ。バベられる。
    [@babel/plugin-transform-unicode-regex](https://www.npmjs.com/package/@babel/plugin-transform-unicode-regex)

- :ok: RegExp `y` flag
    正規表現の`y`フラグ。バベられる。
    [@babel/plugin-transform-sticky-regex](https://www.npmjs.com/package/@babel/plugin-transform-sticky-regex)

- :ok: Rest Parameters
    可変長引数的な。バベられる。
    [@babel/plugin-transform-parameters](https://www.npmjs.com/package/@babel/plugin-transform-parameters)

- :ok: Spread elements
    スプレッドでの関数呼び出しと配列初期化。バベられる。
    [@babel/plugin-transform-spread](https://www.npmjs.com/package/@babel/plugin-transform-spread)

- :ok: Template Literals
    テンプレートリテラル。バベられる。
    [@babel/plugin-transform-template-literals](https://www.npmjs.com/package/@babel/plugin-transform-template-literals)

- :ok: Unicode code point escapes
    ユニコードエスケープをコードポイントでかける。バベられる。

### まとめ

正規表現はもう少し悲惨な結果になると思ったら、ほとんど対応しててびっくりした。
結果的も、対応してなさそうなのは、ES2018の正規表現関連の２つだけでしたね。

というわけで、[eslint-plugin-es](https://mysticatea.github.io/eslint-plugin-es/)の、[es/no-regexp-lookbehind-assertions](https://mysticatea.github.io/eslint-plugin-es/rules/no-regexp-lookbehind-assertions.html)と[es/no-regexp-named-capture-groups](https://mysticatea.github.io/eslint-plugin-es/rules/no-regexp-named-capture-groups.html)を検出できるようにしておけば、うっかりバベられない構文を使ってしまうことはなくなります。

### あとがき

記事のタイトルに[「まとめ」って空気出すといいらしい](https://qiita.com/SugarShootingStar/items/bba0fab1e55936e7234a)って聞いたので「まとめ」って入れてみました。「お前らのJavaScriptはバベられない！」っていうのも考えましたが、結局ほとんどバベられるし違う気がしたので控えました。

どうでもいいけど、「バベられる」でググると 聖☆おにいさん が出てきますね。 

この記事書くの思ってたより疲れた。