rails5でwebpackerを使ったりviewに直接jsを書いたりしてます。どこでどの仕様までのjsを使っていいのかいつも迷うので纏めておくもの
ECMAScript
- 実装であるjavascriptに対し、言語仕様を指してECMAScriptと呼ぶ http://kangax.github.io/compat-table/es6/
es5
- IE11でもほぼ動く、安心
- babelで変換する先
es6(=es2015)
- IE以外ならbabelしなくてもだいたい動く
-
let
やconst
が使える -
{ }
でスコープが切れる(スコープのためだけに即時関数いちいち書かなくていい) - アロー関数が書ける
() => {}
for (const elem of array)
Promise
- テンプレート文字列(文字列リテラルでの式展開)
-
array.map()/array.reduce()
などpythonスタイルの配列処理
es2016(es7と呼んではいけない)
array.includes()
- 冪乗演算子
es2017
await/async
object.values()
webpackerデフォルト設定でどの仕様まで使ってよいか
- ほとんどの場合にうまく動く設定にしてあるよ!babel-preset-envにまかせてるよ!
@babel/polyfill
も入ってるから使いたければ使ってね!とのこと- babel-preset-envは何も設定しないとlatestになるので、現時点だとbabel-preset-es2017 + babel-preset-es2016 + babel-preset-es2015になる
- 要はes2017まで使っていい。実際にincludesを使ってIE11で動いたので少なくともes2016は大丈夫っぽい
- babel-preset-envは何も設定しないとlatestになるので、現時点だとbabel-preset-es2017 + babel-preset-es2016 + babel-preset-es2015になる
rails5のアセットパイプラインはどこまでやってくれるのか
- 残念ながらes6以降からes5へのコンパイルはrails5でもデフォルトでは面倒みてくれないようです
- hamlやassets/javascriptsに書くjsはes5で書くかjqueryに全部任せるように気を付けましょう