連載目次
| 回 | 内容 |
|---|---|
| #1 | 企画・課題発見 |
| #2 | 要件定義 |
| #3 | 設計 |
| #4 | データ処理・ロジック実装編 |
| #5 | UI・画面実装編 |
| #6 | テスト・CI/CD構築編 |
| #7 | 開発中に遭遇した技術的問題 |
| #8 | 完成・振り返り（この記事） |
はじめに
連載の最終回です。完成した「暗記ノート」の全体像と、企画から公開までを振り返ります。
完成したアプリ
覚えたい長文を貼り付けるだけで、3つの見せ方で練習できるWebアプリです。アカウント登録は要りません。
できること
| 分類 | 機能 |
|---|---|
| テキスト管理 | 長文をそのまま貼り付けて登録（タイトルは空欄なら自動で作成）、タイトルの変更、削除 |
| 整理 | 1階層のフォルダ（作成・名前変更・削除）、ブックマーク、「すべて／ブックマークのみ／フォルダ別」の絞り込み |
| 練習 | 暗記（隠す／表示）、穴埋め（キーワードを空欄にしてタップで答え合わせ）、キーワード（要点だけを表示） |
| 記録 | 習熟度「未着手／暗記中／習得済み」の自己申告 |
| 移動 | 同じフォルダの前後のテキストへ移動 |
| その他 | トップページで、登録前に3つのモードを試せるデモ |
数字で見る開発
| 項目 | 内容 |
|---|---|
| 期間 | 企画から公開まで約1週間（2026年9月） |
| Issue | 16件 |
| マージしたPR | 21件 |
| テスト | 6ファイル・67件 |
| リリース |
v1.0.0（初回公開）、v1.0.1（hotfix） |
| 技術 | Next.js 16 ／ React 19 ／ TypeScript ／ Tailwind CSS ／ Vitest ／ GitHub Actions ／ Vercel |
企画から完成までの流れ
| 回 | やったこと | 決めたこと・変わったこと |
|---|---|---|
| #1 企画 | 長文を覚えるときの困りごとを4つ書き出し、アイデアを広げた | 「言えたかどうか」はアプリではなく本人が判断する |
| #2 要件定義 | Claude でプロトタイプを作って試した | 声に出す機能を外し、「隠して思い出す」練習に絞った |
| #3 設計 | 技術を選び、データの形を決め、V0で画面を作った | 登録なしで使うため、データベースを使わずブラウザに保存する |
| #4 ロジック | 型・保存・キーワード抽出を実装した | キーワードは手で指定せず、文字の種類で自動で見つける |
| #5 画面 | V0のデザインに処理をつないだ | データを持つ部品は画面ごとに1つにする |
| #6 テスト・CI/CD | テスト、GitHub Actions、Vercel を整えた | 品質チェックと公開の役割を分ける |
| #7 技術的問題 | 分割機能・公開の失敗・読み返しで見つかった不具合に対応した | 分割機能は廃止した |
振り返り
企画のときより、アプリは小さくなった
#1 のラフスケッチでは、音声認識・録音・復習リマインド・連続練習日数の表示など、たくさんのアイデアを出しました。完成したアプリに入っているのは、その一部です。さらに、要件定義でMVPに入れた「分割して少しずつ覚える」機能も、開発の途中でやめました。
それでも、長文を覚える練習として必要な「隠す → 思い出す → 確かめる」は、3つのモードで一通りできます。機能を減らしたことで、アプリの中身も、使い方も分かりやすくなりました。
作る前に試す、作った後に使う
方向を大きく変えたのは、どれも実際に触ったときでした。
- プロトタイプを触って、声に出す機能は要らないと分かった（#2）
- 自分で文章を入力して、改行で区切る書き方を想定していなかったと分かった（#7）
- 手動で何度も確かめて、分割機能は設計から見直す必要があると分かった（#7）
頭の中で考えた仕様と、実際に触ったときの感覚は、思った以上に違いました。
完成してから、読み返す
公開した後に、すべてのソースコードを1ファイルずつ読み返しました。その中で、フォルダを削除したときの不具合や、トップページの日付の問題など、テストにも手動確認にも引っかからなかった不具合が見つかりました（#7）。
特に日付の問題は、公開した翌日以降にしか起きない種類のものでした。画面を触るだけの確認では見つけにくい不具合も、コードを読むと「このHTMLはいつ作られるのか」という視点で気づけます。
苦労したこと
一番時間がかかったのは、分割機能です（#7 問題2）。同じ「分割されない」という症状に対して、上限の調整を2回重ねた後で、ようやく設計そのものの問題だと気づきました。症状を1つずつ塞ぐのではなく、「なぜ同じ種類の不具合が繰り返し起きるのか」を早い段階で考えるべきでした。
もう1つは、Vercel の最初の公開の失敗です（#7 問題3）。Git Flow で運用しているつもりで、develop から main へのリリースを一度もしていませんでした。ルールを決めても、実際に通してみないと抜けている工程には気づけない、と実感しました。
今後やりたいこと
| 分類 | 内容 |
|---|---|
| 練習 | 音声読み上げとの組み合わせなど、練習モードを増やす。苦手な箇所だけを繰り返し出題する復習機能 |
| 整理 | フォルダの並び替え、複数階層のフォルダ、テキストの検索 |
| 技術 | PWA にして、オフラインでも練習できるようにする。Playwright を使った E2E テストの導入 |
今のテストは、関数や画面の部品ごとに確かめるものです。「トップページから登録して練習する」という一連の流れを本物のブラウザで確かめる E2E テストがあれば、#7 の日付の問題のような、ブラウザで動かして初めて分かる不具合も見つけやすくなります。
おわりに
「長い文章を、本番で出てくるように覚えたい」という自分の困りごとから始まったアプリでした。面接の自己紹介やスピーチの原稿など、長い文章を覚える必要がある方は、ぜひ試してみてください。
全8回、読んでいただきありがとうございました。