LoginSignup
2

More than 5 years have passed since last update.

Rails5/webpacker/ECMAScriptメモ

Posted at

rails5でwebpackerを使ったりviewに直接jsを書いたりしてます。どこでどの仕様までのjsを使っていいのかいつも迷うので纏めておくもの

ECMAScript

es5

  • IE11でもほぼ動く、安心
  • babelで変換する先

es6(=es2015)

  • IE以外ならbabelしなくてもだいたい動く
  • letconstが使える
  • { }でスコープが切れる(スコープのためだけに即時関数いちいち書かなくていい)
  • アロー関数が書ける() => {}
  • 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は大丈夫っぽい

rails5のアセットパイプラインはどこまでやってくれるのか

  • 残念ながらes6以降からes5へのコンパイルはrails5でもデフォルトでは面倒みてくれないようです
  • hamlやassets/javascriptsに書くjsはes5で書くかjqueryに全部任せるように気を付けましょう

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2