はじめに
今回は、たばこ銘柄を調べたり、お気に入り登録をしたり、レビューを見返したりできるアプリを作りました。
正直に言うと、私はこのアプリを作り始めた時点で「設計が得意です」とはまったく言えない状態でした。画面をどう分けるか、データをどう持つか、どの順番で考えればいいかも、かなり手探りでした。
そんな中で大きく助けになったのがAIです。この記事では、設計経験がほぼゼロの状態から、AIを相談相手にしながらたばこ銘柄アプリを形にしていった過程を、できるだけリアルに書いてみます。
作ったもの
今回作成したのは、たばこ銘柄を扱うWebアプリです。
銘柄一覧を見る
銘柄詳細を見る
お気に入り登録をする
自分のレビューを確認する
といった基本的な機能を持たせています。
単純に「動くものを作る」だけではなく、画面ごとの役割を分けたり、フロントとバックエンドの責務を意識したりと、これまであまり意識してこなかった設計らしい考え方に触れる機会になりました。
なぜこのテーマで作ったのか
題材としてたばこ銘柄を選んだ理由は、一覧・詳細・お気に入り・レビューといった、アプリ開発の基本要素を自然に入れやすかったからです。
単なるToDoアプリよりも、少し情報のまとまりや比較の要素があり、「どんな情報を一覧に出して、どんな情報を詳細に出すか」を考える練習にもなると思いました。
また、身近なテーマを選んだことで、「まず作ってみる」ことへのハードルも下がりました。設計に自信がない状態だと、テーマが難しいだけで前に進みにくくなるので、最初の題材選びはかなり大事だと感じました。
最初にぶつかった壁
作り始める前に一番悩んだのは、「何から決めればいいのか分からない」ことでした。
実装経験が多少あっても、設計になると急に抽象度が上がります。例えば、次のようなところで止まりました。
一覧画面と詳細画面は、どう分けるのが自然なのか
お気に入りやレビューは別機能として切り出すべきか
APIはどの単位で用意するべきか
画面に表示するためのデータを、どこで整えるべきか
今までは、「まずコードを書く」で進めてしまうことが多かったのですが、今回は少しでも整理してから進めたかったので、ここでAIを活用しました。
AIをどう使ったか
今回の開発で、AIはコード生成ツールというより「設計の壁打ち相手」として使うことが多かったです。
具体的には、次のような使い方をしました。
1. 機能の分解
最初に「このアプリで必要な機能は何か」を洗い出す時、頭の中だけで整理しようとすると抜け漏れが出ました。
そこでAIに、たばこ銘柄アプリで必要そうな画面や機能を挙げてもらい、自分のイメージと比べながら必要なものだけを残していきました。
この段階で、「一覧」「詳細」「お気に入り」「レビュー」のように機能のまとまりを分けられたのが大きかったです。
2. 画面ごとの責務整理
「この画面では何を見せるべきか」「どこまで操作できれば十分か」といった整理にもAIを使いました。
例えば、一覧画面に情報を詰め込みすぎると見づらくなるので、詳細画面に逃がす情報を分ける、といった判断はAIとの対話があると考えやすかったです。
自分一人だと何となく実装してしまいがちな部分を、一度言語化してから進められたのはとても助けになりました。
3. 命名やデータの持ち方の相談
設計経験が少ないと、変数名や型名、APIの責務の切り方にも迷います。
その際はAIに「この機能ならどういう単位でデータを持つのが自然か」「この名前で伝わるか」と、確認しながら進めました。おかげで、時間がたった後でも理解しやすい形へと近づけられました。
4. 詰まったときの整理役
開発中にエラーや仕様の迷いが出たときも、AIに状況を説明して整理してもらう使い方が有効でした。
答えをそのまま採用するというよりは、「自分が今どこで詰まっているのか」を言葉にする補助として使う感覚に近かったです。
AIを使って良かったこと
一番良かったのは、「設計が分からないから止まる」時間をかなり減らせたことです。
設計経験がないと、分からないことが多すぎて、何を調べればいいかすら分からない場面があります。そういうときにAIへ今の状態をそのまま投げると、次に考えるべき論点を返してくれるので、完全停止しにくくなりました。
また、AIは気軽に何度でも聞き直せるので、「こんな初歩的なことを聞いていいのかな」と思うことでも確認しやすいです。これは初心者にとってかなり大きいと思います。
逆に難しかったこと
もちろん、AIがいれば全部うまくいくわけではありませんでした。
特に難しかったのは、AIの提案がいつも自分の作りたいものにぴったり合うわけではないことです。少し立派すぎる設計や、今の自分には扱いきれない構成を提案されることもありました。
そのため、AIの提案をそのまま採用するのではなく、
今回のアプリ規模に合っているか
自分が理解しながら保守できるか
今必要な複雑さか
を考えて、取り入れる内容を絞る必要がありました。
ここは「AIに任せる」というより、「AIの提案を見て自分で選ぶ」感覚の方が、近かったです。
設計経験ほぼゼロでも進められた理由
今回の経験を振り返ると、設計経験が少なくても前に進めた理由は大きく3つあったと思います。
1. 最初から完璧を目指さなかった
最初に全部きれいに決めようとすると、知識が足りないぶん動けなくなります。
なので今回は、まず最低限の機能を整理し、実装しながら必要に応じて見直す進め方を取りました。結果的に、このやり方が自分には合っていました。
2. AIへの質問を細かくした
「設計を教えて」だと広すぎて、自分でも何を知りたいのか曖昧になります。
そこで、
一覧画面に必要な情報は何か
詳細画面に分けるべき内容は何か
お気に入り機能はどこで管理するとよいか
のように、小さな単位で聞くようにしました。
このやり方に変えてから、AIの回答もかなり使いやすくなりました。
3. 最後は自分で理解して決める意識を持った
AIが提案してくれた内容でも、自分で説明できないものはそのまま入れないようにしました。
遠回りに見えても、このルールを持っていたことで、あとからコードや構成を見返したときに「なぜこうなっているのか」が追いやすくなりました。
作ってみて感じたこと
今回一番強く感じたのは、AIは初心者の弱点をかなり埋めてくれる一方で、最終的な判断までは代わりにしてくれないということです。
でも、それは逆に言うと、設計経験が少ない人でも「相談しながら前に進む」ことができることでもあります。
今までは設計に対して少し身構えていたのですが、今回の開発を通じて、完璧でなくても整理しながら進めればちゃんと形にできる実感が持てました。AIはその最初の一歩をかなり軽くしてくれる存在でした。
おわりに
「設計経験がほぼゼロなのに、設計を意識したアプリ開発なんてできるのか」と思いながら始めましたが、AIを壁打ち相手にすることで、想像以上に前へ進めました。
もし自分と同じように、設計に苦手意識があるけれど何か作ってみたいと思っている人がいたら、まずは小さなテーマで、AIに相談しながら作ってみるのがおすすめです。
最初からきれいにできなくても大丈夫でした。少なくとも自分にとっては、「分からないから止まる」より、「分からないままでも一歩ずつ整理して進める」方が、ずっと大事でした。
