エイプリルフール企画などでレガシーブラウザ対応する場合に覚えておきたい最初期のDHTMLブラウザのJavaScriptの罠たちを回避する

この記事は、JavaScript Advent Calendar 2022の3日目です。2日目の記事は martinheidegger さんによる「JavaScript を使って DNS データ受け取る。」になります。

1. はじめに
2. IE5 以下に未実装のビルトインオブジェクトとメソッドを補う
3. Opera 7.23以下はラベル付きブロックで構文エラー
   1. ラベル付きブロックを do~while または即時実行関数に書き換える
4. 優等生の Gecko 0.8.0以下のややこしめのバグ
   1. 即時実行関数が絡むバグ
5. さいごに
   1. 注釈
   2. ご参考リンク

1. はじめに

---

さて、0年代前年は DHTML ブラウザが出揃い、後の Ajax(2005年～)の開花を準備します。

Microsoft が IE4 に向けて書いた文書によると DHTML はダイナミックコンテンツ、ダイナミックスタイル、CSS-P などがその構成技術です。これらに加えて、要素とテキストレンジの計測が正常に実装されているなら、理論上は、新しい CSS の実装を待たずともどんなレイアウトでも可能です。つまり DHTML さえ健全ならどんな表現でも可能なわけです。(*2)

そんな素晴らしい能力を秘めたレガシー DHTML ブラウザですが、いざそれらに向けて開発を始めると、不可解なバグと貧弱な開発者ツールに泣くことになります。エラーコンソールがあれば御の字という世界へようこそ。

本記事では未実装とバグの中から印象的なものを3つご紹介します。どれも JavaScript を書き換えるポストプロセッサーを用意してエレガントめに迂回できた問題たちです。

2. IE5 以下に未実装のビルトインオブジェクトとメソッドを補う

3. Opera 7.23以下はラベル付きブロックで構文エラー

3.1. ラベル付きブロックを do~while または即時実行関数に書き換える

こんな感じに書き換えます。

a: {
  break a;
}
// ↓
do{
  break; // <= break a;
} while(false);

// ---------

a: {
  b: {
    break b;
    break a;
  }
  break a;
}
// ↓
(function(){
  do{
    break; // <= break b;
    return; // <= break a;
  } while(false);
  return; // <= break a;
})();

4. 優等生の Gecko 0.8.0以下のややこしめのバグ

4.1. 即時実行関数が絡むバグ

function parentScope(){
  var a = {};
  (function(){
    alert(typeof a); // "undefined"
  })();
};

// ↓

function parentScope(){
  var a = {};
  function b(){
    alert(typeof a); // "object"
  };
  b();
  b = false;
};

5. さいごに

これで0年代風の見た目に留まらず、対応ブラウザも0年代の Web 開発をする下準備が出来ました。

さて、現在では Visual Studio Code などの優れたツールを使って Web 開発が行えます。現代のツールと知見を駆使してチューニングされた Web コンテンツをレガシーブラウザに読み込ませたら、当時には引き出せなかったパワーを引き出すことが出来るかもしれませんね！(*3)

---

「この Canvas ゲームですけど、Java アプレットってので出来るんじゃないっスか？」

「… … 、、、」

(function(){
  obj.filters.alpha.opacity -= 5;
  0 < obj.filters.alpha.opacity && setTimeout(arguments.callee, 50);
})();

5.1. 注釈

1. 

   

   Netscape 4.xまでは日本語 UTF-8 に非対応のようです。公開サーバ側で Shift-JIS などで HTML を返す必要があると思います。そして、仮にこのような実装がされていても Web アーカイブには記録されません。

2. やっぱり、Canvas と WebAudio と GamePad API と Service Worker と IndexedDB は欲しいです。
3. という事象は確認していません。特に Opera 7.xの DHTML は、激しくモッサリです。

5.2. ご参考リンク

1. 「令和にも残そう、懐かしい90年代WEBデザイン。さよなら平成。」
2. 「レトロブームが、どのようにwebデザインに取り入れられているか」「ニュートロ（Newtro）」とは「現在or未来（New）」と「過去（Retro）」を融合させた「新しい過去」を意味する韓国で生まれた新造語です。
3. 「懐かしのインターネット。AppleにGoogle、Amazonなど1999年のサイトデザインはこんな感じだった。」 90年代は、ウェブのグラフィックデザインの可能性が模索された時代でした。当時、ウェブデザイナーの大多数は印刷物のデザインしか手がけたことがありませんでした。だからウェブサイトをどのようにデザインするのか、その方法が試行錯誤されていたのです。