無事にVer1が動いて感動したのも束の間。欲張って機能を追加しまくったら、コードが長すぎて迷子になりました……。今回はアプリを『実用レベル』に引き上げる新機能と、プログラマーっぽい整理術、そして初心者あるあるの罠をお届けします！この記事のポイントはこちらです！
- 苦手を克服！「復習機能」で学習アプリらしく進化
- 手書き判定への第一歩「手書きキャンバス」の実装
- コードが長すぎ……プロの階段「リファクタリング（ファイル分割）」に挑戦！
- コードは合ってるのに動かない!? VS Codeの罠（接続切れ・保存忘れ）と解決法
ちなみに、今回Ver2を作るにあたって、AI先生に「どんな手順で進めればいい？」と相談して作ってもらった開発ロードマップ（図解）がこちらです。
「Sprint（スプリント）」なんていうプロっぽい横文字が並んでいて、めちゃくちゃ完璧な計画！……ですが、プログラミング初心者の私がこんなに綺麗にスイスイ進めるわけもなく、現実は泥臭いトラブルの連続でした（笑）。
というわけで、AIが描いた理想とはちょっと違う、リアルな開発の裏側をご覧ください！
1. Ver2の目玉！学習アプリとしての実用性をアップ
とりあえず動く状態のVer1をベースに、今回はより「学習アプリ」として役立つ2つの新機能を追加しました！AIに相談しながら実装した、今回のドヤ顔ポイントです。
① 苦手な漢字だけをやり直す「復習機能」
これまでの「ただ正解・不正解を記録するだけ」から一歩進んで、「記録を活かして学習する」機能を作りました！ データベース（SQLiteという裏方の仕組み）から「不正解（isCorrect = 0）」だった漢字だけを引っ張り出してきて、一覧表示。さらに、その間違えた問題だけで再挑戦できる「復習クイズ」機能を実装しました。 これで一気にアプリの付加価値が高まりました！
不正解だった漢字だけがリストアップされる画面。下部のボタンから再挑戦できます。
② 未来へ繋がる「手書きキャンバス（テスト版）」
将来的な最終目標である「漢字を直接手書きして、AIに正誤判定してもらう」ための大きな第一歩を踏み出しました。 スマホの画面を指でなぞって線を描ける機能です。「GestureDetector（指の動きを検知する機能）」と「CustomPainter（線を画面に描く機能）」という、なんだか難しそうな横文字の仕組みを組み合わせて実現しました！
Ver2のメニュー画面。「苦手な漢字を復習する」と「手書きキャンバス」のボタンが追加されて、一気にアプリっぽくなりました！
さっそく、動作確認としてPCのマウスで「か」と書いてみたのですが……絶望的に下手くそ（笑）。 AI先生いわく「実機（スマホ）で指で書けばもっと滑らかになりますよ！」とのことですが、果たして本当に綺麗に書けるのか！？ 次回、このいびつな文字をAIがちゃんと判定してくれるのかも含めて、ドキドキの課題が残りました。
マウスで書いた「か」。AIには「スマホの指なら綺麗に書けますよ」と慰められましたが……本当に！？（笑）
2. プロの階段を登る！「ファイル分割（リファクタリング）」
順調に機能を追加して喜んでいた私ですが、ここで大きな壁にぶつかりました。
機能が増えたことで、アプリのメインとなる main.dart というファイルが600行近くになってしまったんです。上から下までスクロールしても、どこに何が書いてあるのかサッパリわからないカオス状態……。
そこでAI先生に助けを求め、「リファクタリング（コードの整理・ファイル分割）」という超大工事を決行しました！
【こんな風に4つに分けました】
database_helper.dart： データの保存や読み込みなど、裏方の処理を担当。quiz_data.dart： クイズの問題データ（選択肢や正解）だけをまとめた倉庫。app_screens.dart： クイズ画面、履歴画面など、ユーザーが見る「画面表示」に関するコードを全部ここに！main.dart： アプリの起動とホーム画面のメニューボタンだけのお留守番。
■ ファイル分割の成果は？ なんと、カオスだった main.dart が100行程度に超スッキリしました！ 「画面がおかしい時は app_screens.dart を直せばいい」「データのバグなら database_helper.dart を見ればいい」と、どこを直せばいいのかが一目瞭然に。なんだか一気にプログラマーの階段を登った気分です（笑）。
左側のファイル一覧（エクスプローラー）にご注目！役割ごとに4つのファイルに綺麗に分かれて、どこに何があるか一目でわかるようになりました！
3. 今回の罠はコードじゃない！VS Codeあるある事件簿
コードの整理も終わって「よーし、完璧なVer2を動かすぞ！」と意気込んだものの……やっぱりすんなりとはいきませんでした。 でも今回は「コードの間違い」ではなく、「開発環境（VS Code）の罠」にどっぷりハマってしまったんです。初心者の皆様、これはマジであるあるだと思うので共有させてください！
罠その①：「謎のエラー祭りと突然の接続切れ」
【症状】 突然アプリがうんともすんとも言わなくなり、「問題」タブに警告が大量発生！右下には「Failed to launch（起動失敗）」の絶望的な文字が……。
【原因と解決策】 コードのバグを必死に探したんですが、実はこれ、VS Codeとエミュレーター（仮想スマホ）の接続が勝手に切れていた（No Device状態）だけだったんです。 画面右下の「No Device」をクリックして、再度「Pixel 7S」などのエミュレーターを選んで繋ぎ直したら、何事もなかったかのように直りました。焦らせないで……！
罠その②：「消えた『復習クイズを始める』ボタン」
【症状】 ファイル分割の大工事のあと、コードにはちゃんと「ボタンを表示してね」と書いているのに、エミュレーターの画面にボタンが一切表示されない……。
【原因と解決策】 AIに何度聞いても「コードは合っています」と言われ、発狂しかけたのですが……原因はあまりにも初歩的でした。 ファイルを分割・移動させた後、ファイルの「保存（Ctrl + S）」を忘れたまま、アプリを更新しようとしていたんです！ 変更したファイルをしっかり保存して、VS Code上で「再起動（緑の矢印）」ボタンを押したら、無事に画面にボタンが復活しました。保存、大事、絶対。
おわりに：次はついに「AI判定」へ！
ファイルの保存忘れや接続切れなど、初心者丸出しのトラブルで大慌てしましたが、無事にアプリの土台がガッチリ固まりました。
「復習機能」と「手書きキャンバス」が実装できたので、次回はいよいよ……このアプリ最大の挑戦！ 「キャンバスに書いた手書きの漢字を、AIに画像として送って正誤判定してもらう」という機能に挑みます！
果たしてプログラミング初心者にそんな高度なことができるのか！？ 次回の奮闘記もお楽しみに！
コメント