この記事は フューチャー Advent Calendar 2018 ４日目の記事です。
１日目に「脱Babel!」言われましたが僕は泣きません。明日も元気にバベっていきます。
みなさまはESのバージョンはどのバージョンでJavaScript書いていますでしょうか？
とりあえず2015という人も、asyncまではつかう2017な人も、2018の正規表現もガンガン使っちゃうモダンな人も、stage-3も使っちゃう未来人もいるでしょう。
（え？ES5？？すみませんが本記事は全く役に立ちません。）
しかし、その構文、バベってブラウザ要件満たせるやつでしたっけ？Chromeでしか動かないんじゃないの？って気になりませんか？
私は気になって調べようと思ったので、調べついでに記事にします。
（間違ってたらごめんなさい。指摘くれると嬉しいです。）
（Polyfillで解決できるような追加メソッドやプロパティは対象にしません。）
（あと、疲れたのでstage-3以下は対象にしません。）
各構文の調べ方
構文はeslint-plugin-esのルール一覧で見ていこうと思います。どう考えても使い方違いますが年ごとに綺麗に一覧になってるので。
そこから、tc39/proposalsやbabelのPlugins、@babel/preset-envの中とか見ながら集めようと思います。
ES2019
バベられる。
-
JSON superset
エスケープ無しで使える文字コードが増える（ってことかな？）。バベられる。
@babel/plugin-proposal-json-strings -
Optional
catchbinding
catch(e)ってe使わない場合意味ないよね？いらないよね？という感じ（想像）の構文。バベられる。
@babel/plugin-proposal-optional-catch-binding
ES2018
-
Asynchronous Iteration
イテレーションもawaitするぜ。バベられる。
@babel/plugin-syntax-async-generators -
Lifting template literal restriction
テンプレートリテラルのエスケープのつもりじゃない\uはそのまま。バベられる。 -
RegExp Lookbehind Assertions
正規表現の後読み。バベられない。 -
RegExp named capture groups
正規表現のキャプチャに名前つけられる構文。バベられない。
プラグイン入れればいけるという噂。
babel-plugin-transform-modern-regexp -
s(dotAll) flag for regular expressions
/.*/とか書くとき使うドット.の意味を変える正規表現のフラグ。バベられる。
@babel/plugin-transform-dotall-regex -
RegExp Unicode Property Escapes
Unicodeデータベースの名前で正規表現かける構文。バベられる。
@babel/plugin-proposal-unicode-property-regex -
Rest/Spread Properties
ObjectでRest/Spread使う構文。バベられる。
@babel/plugin-proposal-object-rest-spread
ES2017
バベられる。
-
Async functions
async。バベられる。
@babel/plugin-transform-async-to-generator -
Trailing commas in function parameter lists and calls
Function引数ケツカンマ。バベられる。
ES2016
バベられる。
ES2015
全部バベられる。
-
Arrow Function Definitions
アローファンクション。バベられる。
@babel/plugin-transform-exponentiation-operator -
Binary numeric literals
2進数でリテラル書いちゃう。バベられる。
@babel/plugin-transform-literals -
block-scoped function declarations
ブロックスコープで関数宣言しちゃう。バベられる。
@babel/plugin-transform-block-scoped-functions -
Let and Const Declarations
let、const。バベられる。
@babel/plugin-transform-block-scoping -
Class Definitions
class。バベられる。
@babel/plugin-transform-classes -
Computed property names
Object初期化時に変数でプロパティ名を指定できたりする。バベられる。
@babel/plugin-transform-computed-properties -
Default function parameters
デフォルト引数。バベられる。
@babel/plugin-transform-parameters -
Destructuring
分割代入とか。バベられる。
@babel/plugin-transform-destructuring -
for-ofStatements
for-of。バベられる。
@babel/plugin-transform-for-of -
Generator Function Definitions
*ジェネレーター()。バベられる。
@babel/plugin-transform-regenerator -
Imports / Exports
importやexport。バベられる。
@babel/plugin-transform-modules-commonjs -
new.targetproperty
new.targetっていうプロパティ。バベられる。
@babel/plugin-transform-new-target -
superkeyword
super。バベられる。
@babel/plugin-transform-object-super -
Octal numeric literals
8進数でリテラル。バベられる。
@babel/plugin-transform-literals -
Shorthand properties
Object初期化時の省略記法。バベられる。
@babel/plugin-transform-shorthand-properties -
RegExp
uflag
正規表現のuフラグ。バベられる。
@babel/plugin-transform-unicode-regex -
RegExp
yflag
正規表現のyフラグ。バベられる。
@babel/plugin-transform-sticky-regex -
Rest Parameters
可変長引数的な。バベられる。
@babel/plugin-transform-parameters -
Spread elements
スプレッドでの関数呼び出しと配列初期化。バベられる。
@babel/plugin-transform-spread -
Template Literals
テンプレートリテラル。バベられる。
@babel/plugin-transform-template-literals -
Unicode code point escapes
ユニコードエスケープをコードポイントでかける。バベられる。
まとめ
正規表現はもう少し悲惨な結果になると思ったら、ほとんど対応しててびっくりした。
結果的も、対応してなさそうなのは、ES2018の正規表現関連の２つだけでしたね。
というわけで、eslint-plugin-esの、es/no-regexp-lookbehind-assertionsとes/no-regexp-named-capture-groupsを検出できるようにしておけば、うっかりバベられない構文を使ってしまうことはなくなります。
あとがき
記事のタイトルに「まとめ」って空気出すといいらしいって聞いたので「まとめ」って入れてみました。「お前らのJavaScriptはバベられない！」っていうのも考えましたが、結局ほとんどバベられるし違う気がしたので控えました。
どうでもいいけど、「バベられる」でググると 聖☆おにいさん が出てきますね。
この記事書くの思ってたより疲れた。