この記事の要点（TL;DR）

英語テストの前日に、自分用の単語カードアプリが欲しくなって作りました。
フレームワークもビルドも使わず、HTMLファイル1個（index.html）だけで作りました。
「覚えた」の記録は localStorage に保存したので、ページを閉じても消えません。
大げさな環境構築なしでも、こういう「自分だけが使う小さな道具」はサクッと作れる、という話です。

用語を軽く補足します。**localStorage（ローカルストレージ）**は、ブラウザに用意されている「ちょっとしたデータを保存しておける小さな棚」のようなものです。サーバーもデータベースも要らず、JavaScriptから数行で読み書きできます。

なぜ作ったのか

英語のテスト範囲の単語が125個あって、市販アプリに1個ずつ登録するのが面倒でした。単語のテキストは手元にあったので、「これを読み込んで、カードをめくって覚えられるページがあればいいのに」と思ったのがきっかけです。

条件はこんな感じでした。

テストは明日。時間をかけたくない
自分（と友達）しか使わないので、ログインもサーバーも要らない
「覚えた単語」は次に開いたときも残っていてほしい

この条件だと、わざわざReactでプロジェクトを立ち上げたり、データベースを用意したりするのは大げさです。そこでHTML 1ファイルにしました。

構成：本当に1ファイルだけ

index.html の中に、HTML・CSS・JavaScriptを全部書きました。ファイル構成はこれだけです。

index.html   ← これ1個。以上。

単語データも、外部ファイルにせずJavaScriptの配列としてそのまま書きました。

<script>
  // 単語データ（英語, 日本語, 重要かどうか）
  const words = [
    { en: "environment", ja: "環境", important: true },
    { en: "transport",   ja: "交通機関", important: true },
    { en: "reduce",      ja: "減らす", important: false },
    // …これを125個ぶん
  ];
</script>

「データベースに入れなきゃ」と身構えがちですが、自分用で数百件までなら、コードに直接書いてしまうのがいちばん速いです。

「覚えた」を保存する：localStorageは3つ覚えれば使える

カードを「覚えた」にしたとき、その状態を保存したいですよね。ここでlocalStorageの出番です。使うのは実質この3つだけです。

// 保存する（キーと値を渡す。値は文字列にする必要があるのでJSONに変換）
localStorage.setItem("learned", JSON.stringify(learnedList));

// 読み込む（無ければ null が返るので、その時は空配列にする）
const learnedList = JSON.parse(localStorage.getItem("learned") || "[]");

// 消す
localStorage.removeItem("learned");

ポイントは、localStorageは文字列しか保存できないことです。配列やオブジェクトを入れたいときは JSON.stringify() で文字列にして保存し、読むときは JSON.parse() で戻します。ここだけ最初つまずきやすいですが、上の3行がテンプレだと思えば大丈夫です。

これで、ページを閉じても・スマホを再起動しても、「覚えた単語」はそのブラウザに残ります。サーバーもログインも無いのに、ちゃんと"続き"から使えます。

できたもの

最終的にこんな機能になりました。全部 index.html の中だけで動きます。

カード：英語↔日本語をタップでめくる
テスト：4択で出題（覚えたい範囲を選べる）
「覚えた」チェック：localStorageに保存され、次回も維持

最初はブラウザでファイルを開くだけで動かしていて、あとから見やすいURLで使いたくなったので、そのままの1ファイルを無料ホスティング（Vercel）に置いて公開しました。ビルド設定は一切いじっていません。HTMLを置いただけです。

学び：全部が「ちゃんとした構成」じゃなくていい

普段はフレームワークを使って開発しているのですが、今回みたいに

使うのは自分（＋α）だけ
データも数百件まで
明日までに欲しい

という条件なら、HTML1ファイル＋localStorageで十分でした。むしろ環境構築ゼロなぶん、思いついてから動くまでが一番速いです。

「アプリを作る＝プロジェクトを立ち上げてビルドして…」と身構えてしまう人（昔の自分もそうでした）に、「1ファイルでも立派に動くよ」というのが伝わったら嬉しいです。小さく作って、必要になったら育てればいいんだな、と思えた一件でした。