JavaScript: 考古学
こちらはお気楽の落書きです。 歴史探訪、遺跡発掘のコーナー。
- 姉妹編: HTML 考古学
いろいろ
JavaScript は近年でも新しい文法が追加され、10年前 (2010年代)、 20年前 (2000年代) と比べてプログラムの書き方が激変しています。 私の Web のプログラムでも昔のコードもあり、 書かれた時期の違いによって書き方が異なります。
- TestJS_array_map_toText01.html
配列の文字列を連結するサンプル。
配列 Array.join("") で連結する - TestJS_parse_TSV_old01.html
TSV テキストを 2重配列に分割するサンプル。
テキストを2重配列に分割する
プログラムの書き方で、 いつ頃の時代に書かれたプログラムかもある程度推測できます。 古いコードや解説を見かけたら年代測定の目安にどうぞ・・・。
近年編
IE がなくなった後の 2020年代以降でもいろいろ追加された話があります。 2,3年前の少し古い Web ブラウザでも動かないコードもあります。
- 例: # の private フィールド。
Firefox89 (2021年) 以前では動きません。
MDN: プライベートクラス機能 - 例: HTML の dialog タグ。
Edge Chromium (2020年) や Firefox98 (2022年春) で対応したタグです。
dialog タグ - 例: CSS の popover
Chrome や Edge では 2023年春に対応した CSS です。2024年春頃は Firefox がまだ正式に対応していません。
昔話編
IE では動かないコードか (最近 2020年代)、 IE でも動くコードか (昔 2010年代) で大きく変わります。
IE では動かないコードの例
下のコードを含んだ JavaScript は IE では動作しません。 IE を気にしていないわりと近年のプログラムです。
- テンプレートリテラル
- アロー関数
- for of
- class, constructor を使ったクラス
- async, await
IE 時代までコード
IE では上のようなコードが動作しないので、 これらを使わない昔風の書き方になります。 アロー関数、for of, class, constructor などを含まないプログラムになります。 代わりに現在では使われない古語も出てきます。
- prototype を使ったクラス。
クラスは現在では class, constructor で書くので prototype を 使った書き方をしません。
JavaScript: クラスの書き方 (IE時代の昔話)
IE9 以前のコード
- 変数を let ではなく var で宣言しているコード。
let が使えなかった時代のコードです (IE9 以前、2010年代前半)。
JavaScript: 変数宣言 let, var
2010年代半ばはまだ IE8,9 など古い IE も残っていたので var を使うのが普通でした・・・というより let が使えませんでした。 こちらも HTML 要素をリストで取り出して for でイベント処理を付けるときにはまる定番の話がありました。
JavaScript イベント処理 (1) IE11 時代までの昔話いろいろ
IE8 以前のコード
- Array.map(), Array.filter() を使わずに処理しているコード。
Array.map(), Array.filter() などがなかった時代のコードです。 IE8 以前。
例: TestJS_array_map_toText01.html
ただし大量のデータを処理するときに 新しい配列を作るオーバーヘッドをなくすため意識的に Array.map() などを使わない場合もあります。
- console.log() も IE8 までは使えなかった関数です。
IE9 (2011年) から使用可能に。
- (関数)(引数); で書かれたコード。
独特な古文文体のコード。 bind() がなかった時代 (IE8以前) にこの書き方でないとできない処理がありました。 データの隠蔽で使うこともあるようです。// () の中に関数があり、最後に関数に渡す (引数) がある。 ( function(param){ ... })(引数);
関数内の行数が多いとブロックの終了が分かりにくいコードになるのが特徴です。
難解な筆記体の古文書みたいな話になります。
筆記体と活字体
- document.querySelector() がまったく出てこないコード。
getElementsByTagName() や getElementsByClassName() を多用しているコード。 IE8 より前ぐらいの時代です。
ただし querySelector() は処理が重いので 現在でも巨大なドキュメントツリーで getElementsByTagName() などを使うこともあります。
JavaScript: HTML 要素を取り出す
jQuery も古文書化したという話もありますが・・・。
- その他いろいろ
すでに 3G ガラケー、MD、カセットテープの時代・・・ よく使っていたら十分おっさんです。
PC と AV の年表 - 2000年代
PC と AV の年表 - 1990年代