この記事の要点（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ファイルでも立派に動くよ」というのが伝わったら嬉しいです。小さく作って、必要になったら育てればいいんだな、と思えた一件でした。