2025/09/18 AIコーディングで「保活手帳」を作ってみた

AIコーディング道場勉強会 #4 第2期成果発表会

Transcript

1. AIコーディングで「保活手帳」をつくってみた @AIコーディング道場勉強会 第4回 成果発表 1
2. プロダクト: 保活手帳 保育園の見学のための質問リストを 用意しておけるWebアプリ。 1.5ヶ月弱で初版を公開 URL: https://hokatsu-techo.com/ 2
3. 園の追加 園の名前と見学日が決まっていれば 入力 3
4. 質問の追加 別途、質問するまでもないけど見学 中に気づいたことをサッとタグ形式 でメモできる機能も 4
5. 質問への回答 見学中や質問タイム中に回答を入 力。 回答を入力したら回答済みであると 視覚的にわかるように 5
6. Why? (表向き) 娘が今年小規模保育園を卒園するので、ふたたびの保活スタート。 「スプレッドシートで管理すればいっか 」って最初はスプレッドシートにしていた けど、実際に見学に行ってスマホでスプレッドシートを開いたら落ちるわちっさいわ 書きにくいわの三重苦 「小さいアプリ」のネタを探していたのもあって、作成してみることに 6
7. Why? (裏目的) 自分のスキル的に偏りすぎているのをひしひし感じるようになり、もっと視野を 広げたかった 要件定義やテストなど、普段やってない領域も一貫して行ってみる 「これ好きかも」 「もっとやってみたいかも」を新しい軸として見つけるのが 目的 7
8. 体制と稼働 開発体制: ほぼAIコーディング (Claude Code) 稼働: 平日約1h + 道場日約2h + 日々の隙間時間 技術スタック: React + TypeScript + Chakra UI v3 8
9. 進め方 リリースすることを優先（途中で無駄に凝って想定以上に時間かかってしまったけど） エラーなく動くという最低限の品質でリリース（今困ってる） 9
10. 困りごと CLAUDE.mdが無視されがち（シンプルにきれそう） 関数・クラスコンポーネントが混在 設計書に書いておかないといけなかったなーと反省 修正のはずが新規ファイルで作成して機能重複（は？？？） 設計原則とかテストについてとか、根本的に自分の知識不足が目立つ 10
11. やってみたこと CLAUDE.md は「読まれたらラッキー」と捉える。期待しない 代わりに、守りたいラインを守れているかチェックするスラッシュコマンドやサ ブエージェントを追加 公式ドキュメントに沿ってるかチェックするサブエージェント TypeScriptとReactのレビューで真逆なこと言うことがある 妥当な方を選択（例: useEffectとかuseMemoの有無とか） よくわからなかったらチャットのClaudeで学習モードでお勉強 https://zenn.dev/hamworks/articles/45053f7c0efef7 11
12. リリース後に自分で使ってみて改善ポイントを洗い出し 質問追加前にアコーディオン挟むけど、アコーディオン自体が邪魔じゃない？ 保活はたくさん行くからとりあえず何かしらのテンプレートがあった方がいいん じゃない？ → 機能自体の追加から細かい調整まで気になるところをIssue化 12
13. 質問入力時のアコーディオ ン削除 13
14. システム提供のテンプレー ト機能の追加 元々自分でテンプレート作る機能は 課金提供しようと思ってたけど、そ れっぽいテンプレートをひとまず提 供しておく必要があるなと感じて優 先度アップ 14
15. 成果と学び ちょっとプロトタイプ！ならいいけど、プロトタイプからプロダクトを作るならその まま使うはダメだなと再認識。 とはいえ、公開したい時期までに公開できたのはよかった 多分、自力だけだったらアプリ作ろうとも思ってなかった AIコーディングの自分なりの原型は見えてきた感じ 「QA」 「UX、特にIA」がすごく興味深く感じたので、この分野を第二・第三の軸 として伸ばしていきたい 15
16. 今後やること コードのリファクタリング 早速やっていきたいけど、設計原則とかもうちょっとしっかり頭に入れてか らじゃないと同じ轍を踏むことになりそう テスト書き直し 書き方はわかるけどテストケースの出し方がわからない モックが多すぎてテストできてるのか謎 DB実装・ソーシャルログイン・課金 NO 知識なのでまずは自分で理解するところから UX改善 まだ改善できるところはありそう。見学日本当にいる？は今考え中 16
17. ありがとうございました！ がんばって勉強します 17