この記事は フューチャー Advent Calendar 2018 4日目の記事です。
1日目に「脱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-stringsOptional
catch
binding
catch(e)
ってe
使わない場合意味ないよね?いらないよね?という感じ(想像)の構文。バベられる。
@babel/plugin-proposal-optional-catch-binding
ES2018
Asynchronous Iteration
イテレーションもawait
するぜ。バベられる。
@babel/plugin-syntax-async-generatorsLifting template literal restriction
テンプレートリテラルのエスケープのつもりじゃない\u
はそのまま。バベられる。RegExp Lookbehind Assertions
正規表現の後読み。バベられない。RegExp named capture groups
正規表現のキャプチャに名前つけられる構文。バベられない。
プラグイン入れればいけるという噂。
babel-plugin-transform-modern-regexps
(dotAll
) flag for regular expressions
/.*/
とか書くとき使うドット.
の意味を変える正規表現のフラグ。バベられる。
@babel/plugin-transform-dotall-regexRegExp Unicode Property Escapes
Unicodeデータベースの名前で正規表現かける構文。バベられる。
@babel/plugin-proposal-unicode-property-regexRest/Spread Properties
Object
でRest/Spread使う構文。バベられる。
@babel/plugin-proposal-object-rest-spread
ES2017
バベられる。
Async functions
async
。バベられる。
@babel/plugin-transform-async-to-generatorTrailing commas in function parameter lists and calls
Function
引数ケツカンマ。バベられる。
ES2016
バベられる。
ES2015
全部バベられる。
Arrow Function Definitions
アローファンクション。バベられる。
@babel/plugin-transform-exponentiation-operatorBinary numeric literals
2進数でリテラル書いちゃう。バベられる。
@babel/plugin-transform-literalsblock-scoped function declarations
ブロックスコープで関数宣言しちゃう。バベられる。
@babel/plugin-transform-block-scoped-functionsLet and Const Declarations
let
、const
。バベられる。
@babel/plugin-transform-block-scopingClass Definitions
class
。バベられる。
@babel/plugin-transform-classesComputed property names
Object
初期化時に変数でプロパティ名を指定できたりする。バベられる。
@babel/plugin-transform-computed-propertiesDefault function parameters
デフォルト引数。バベられる。
@babel/plugin-transform-parametersDestructuring
分割代入とか。バベられる。
@babel/plugin-transform-destructuringfor-of
Statements
for-of
。バベられる。
@babel/plugin-transform-for-ofGenerator Function Definitions
*
ジェネレーター()
。バベられる。
@babel/plugin-transform-regeneratorImports / Exports
import
やexport
。バベられる。
@babel/plugin-transform-modules-commonjsnew.target
property
new.target
っていうプロパティ。バベられる。
@babel/plugin-transform-new-targetsuper
keyword
super
。バベられる。
@babel/plugin-transform-object-superOctal numeric literals
8進数でリテラル。バベられる。
@babel/plugin-transform-literalsShorthand properties
Object
初期化時の省略記法。バベられる。
@babel/plugin-transform-shorthand-propertiesRegExp
u
flag
正規表現のu
フラグ。バベられる。
@babel/plugin-transform-unicode-regexRegExp
y
flag
正規表現のy
フラグ。バベられる。
@babel/plugin-transform-sticky-regexRest Parameters
可変長引数的な。バベられる。
@babel/plugin-transform-parametersSpread elements
スプレッドでの関数呼び出しと配列初期化。バベられる。
@babel/plugin-transform-spreadTemplate Literals
テンプレートリテラル。バベられる。
@babel/plugin-transform-template-literalsUnicode code point escapes
ユニコードエスケープをコードポイントでかける。バベられる。
まとめ
正規表現はもう少し悲惨な結果になると思ったら、ほとんど対応しててびっくりした。
結果的も、対応してなさそうなのは、ES2018の正規表現関連の2つだけでしたね。
というわけで、eslint-plugin-esの、es/no-regexp-lookbehind-assertionsとes/no-regexp-named-capture-groupsを検出できるようにしておけば、うっかりバベられない構文を使ってしまうことはなくなります。
あとがき
記事のタイトルに「まとめ」って空気出すといいらしいって聞いたので「まとめ」って入れてみました。「お前らのJavaScriptはバベられない!」っていうのも考えましたが、結局ほとんどバベられるし違う気がしたので控えました。
どうでもいいけど、「バベられる」でググると 聖☆おにいさん が出てきますね。
この記事書くの思ってたより疲れた。