Vol. 01
2026.04.10
2026.03.11 ZENN // TECH

平成レトロを歪曲し理解した俺がインターネッツ老人会の見本市を作ってしまった話。

ORIGIN: ZENN.DEV READ ORIGINAL

はじめに

Windows 98風の個人サイトをReactで作った。

動機は単純で、「個人サイトって今の技術で作ったらどうなるんだろう」という好奇心だ。最初はお遊びのつもりだった。

気づいたら四桁行近いスパゲッティコードと、十数個のイースターエッグが生えていた。

→ https://www.ena-dri.dev
（スマホの方には申し訳ない、PC推奨である。というかスマホほぼお断りの隠し機能ばかり…）

技術スタック

構成はシンプルだ。

  • React + TypeScript（Vite）
  • スタイル：インラインスタイルのみ（CSS不使用）
  • ホスティング：Vercel（無料）
  • ドメイン：Cloudflare Registrar（$12.20/年）
  • 外部ライブラリ：なし

一切のUIライブラリを使っていない。Win98のベベルボタンも、タイトルバーの青グラデーションも、全部インラインスタイルで。

const Win98Button = ({ children, onClick, style = {} }) => (
  <button
    style={{
      background: "#c0c0c0",
      border: "2px solid",
      borderColor: "#ffffff #808080 #808080 #ffffff",
      // ...
    }}
    onMouseDown={(e) => (e.currentTarget.style.borderColor = "#808080 #ffffff #ffffff #808080")}
    onMouseUp={(e) => (e.currentTarget.style.borderColor = "#ffffff #808080 #808080 #ffffff")}
  >
    {children}
  </button>
);

押したときにベベルが反転する、あの感触…。

実装したイースターエッグ

ただし、概要だけ。どうすればでてくるのかはお楽しみ。

深夜猫

文字通り。触ったらなんか喋る。条件満たすと出現。

🦀の雨

特定のコマンドで🦀が降り注ぐ。

それだけ。コマンドは、ね。言わずもがなアレですよアレ。

15パズルが起動する

難易度激高の15パズルが何かしらをトリガーに遊べる様になる。

ひみつ.txt

隠しボタンでポップアップが開く。中身は「なにもないよ！」という一文だけ。本当だよ？クリックしても何もおきないよ？

cat.log

リンク集に小さなボタンがある。押すとテキストファイルがダウンロードされる。

スクリーンセーバー

今はもう古いスクリーンセーバー、当時を知っていればこれは簡単に出せる。

右クリック禁止

文字通り。

ブルスク

おっと、怪しいアイコンを触るとどうなるかわかるね？

「歪曲し理解した」について

もちろん完全再現ではないのだが。

当時、個人サイトをリアルタイムで運営していたわけでもないし、考証に正確性を求めてもいない。GeminiやClaudeに「平成初期の個人サイトのあるあるを発散してくれ」と投げて、面白そうなものを実装したっていう。

だから「歪曲し理解した」という表現になった。俺自身30は超えたがwin98時代で小学生、断片でしか記憶してない。俺の青春はXPだ（？）

🦀が降ってくるのは当時のあるあるではないと思う。でも「急に何かが降ってくる」というノリは、あの時代のインターネットに確かにあったと思う。

ソースコードは見れる

ブラウザのDevToolsを開けばビルド済みのJSが読める。minifyはされているが、読もうと思えば読める。

おわりに

お遊びのつもりで始めた企画だけど、ドメイン取得・Vercelデプロイ・Supabase連携まで全部整ってしまった。$12/年で遊び放題。。。

今後はここに各アプリのLPも生やしていく予定だったりする。いい勉強になった。

因みにまだまだ隠し機能は増やしていくつもりである。Reactで。懐かしさや「んなわけｗ」っていう感情が芽生えていただければコレ幸い。

あ、キリ番踏んだらBBSに書き込んでくださいね？（強制

BACK TO WRITING