ES5
ES4 ← ES5 → ES2015 (ES6)
2009/12に公開されたECMAScriptのバージョン
Internet Explorerが完全対応しているのはこのバージョンまで
一応ES6（ES2015）も対応してはいるが、部分的な対応となる
主に使えない構文・オブジェクト
変数の定義に使用するlet・const
varしか使えない
即時実行関数式でどうにかできる...
varはスコープの概念が薄いので不便だし、プログラムの解説記事では推奨しない構文として紹介されていることが多い
【JavaScript】var / let / const を本気で使い分けてみた - Qiita
varがあると古のコードの印象を受けるtakker.iconMijinko_SD.icon
現代だとvarの使い道は以下の2つだけだと思う
minify時に変数宣言を短くする
自動生成コードの話なので気にしなくていい
letは……？綾坂こと.icon
ブロックスコープ不便みたいな話bsahd.icon
var使うとdeno lintがお怒りになるが、どうにかできないのか
たぶんそういうことtakker.icon
コード量を極限まで減らす
preactとかで使われてたはず
つまり常人がつかう宣言じゃないtakker.icon
Promiseが使えない
もちろんfetchもない
Promise、fetchを実現するライブラリは結構あったので実質あったようなもの
非同期の処理を組むのが非常にだるい
Promiseが実装されたのはES2015から
async/awaitが実装されたのはもっと先のES2017から
for...ofが使えない
そもそもiteratorの概念がない
配列(Array)をforで回すには、for(var i = 0; i < ary.length; i++){}みたいに書くか、Array.prototype.forEach()を使うしかなかった
/nwtgck/.forEach()よりもfor-of派な理由 - JavaScript/TypeScript
これ知らなかったtakker.icon
おまけ: for-ofでインデックス欲しい
.entries()を使って、[idx, e] of ...のようにすれば良い。
.entries()はES2017からですwho.icon
code:js
for (const idx, e of "A", "B", "C".entries()) {
console.log(idx, e);
}
アロー関数が無い
function式はあった
クラスが無い
テンプレートリテラルを使えない
文字列の中に変数を入れたい場合は"foo" + bar + "baz"とするしかなかった
テンプレートリテラルを使えれば\`foo${bar}baz\`と短くシンプルに書ける
そこまで短くなってないような...bsahd.icon
bar + ""みたいなテクニックもあったtakker.icon
なつかしすぎるMijinko_SD.icon
minifyなら今でも使うかなbsahd.icon
.toString()が+""まで短くなるので
barを文字列に変換するコード
現代語訳：\`${bar}\`
こっちのほうが読みにくいので素直にtoString書いたほうが良さそうbsahd.icon
bar単体の変換であれば、可読性はString(bar)の方が高そう（Python民感）Mijinko_SD.icon
pythonってそう書くんだtakker.icon
f"{bar}"でもよさそう
Pythonはstr(bar)（型名(値)）で変換できますねMijinko_SD.icon
bar.toString()もありtakker.icon
↑の「〇〇でしか使えない」と書かれている部分の〇〇を未だに使っている参考書などは、情報が古い可能性があるので要注意Mijinko_SD.icon
使えないわけじゃないのでいいのでは...bsahd.icon
古いES構文を使用している参考書は初心者にとって良くない？
よくわからなければとりあえずlinterの指示に従って書き換えればなんとかなるtakker.icon
初心者さんにとってはESLintの環境構築がつらいので、Denoのオールインワン性はありがたそうMijinko_SD.icon
現代の便利構文で対応していないものが多く、ES5で高度なプログラムを書こうとしたらだいぶ大変な気がするMijinko_SD.icon
そこでBabelの出番かtakker.icon
そこでjQueryの出番かbsahd.icon