いつも読んでいただき、ありがとうございます。
少し前まで、「アプリを作る」というのは自分には関係のない話だと思っていました。
プログラミングは苦手で、たぶん向いていないと今でも思っています。授業でやっても理解が浅い、自分で書こうとすると詰まる。コードが書けないという妙なコンプレックスをずっと抱えていました。それでも今、自分で考えたWebアプリが実際に動いています。
そんな私がアプリを作れたのは、AIの「Claude」のおかげです。
なぜ作ろうと思ったのか
私は本が大好きです。電子書籍はKindleを使っています。そのためKindle本のセール情報を載せているサイトをよく見ていますが、それを調べるのが面倒になったことが理由です。
Kindleのセール情報を発信しているサイトはいくつかあります。有名どころも知っています。でも、どれも情報量が多くて、複数のリンク先を見て回らないといけない。割引本のリストを眺めていても、件数が多すぎて「結局どれを買えばいいの？」となってしまう。
自分が本当に知りたかったのは、シンプルにこれだけです。「今どの本がセールになっているのか。その中で人気が高いのはどれか」。
「だったら自分で作ってしまおう」と思い立ちました。でも、どうやって？
Claudeとの最初の会話
最初は半信半疑でした。「AIにアプリが作れるの？」という感じです。
試しに、こんなことをClaudeに相談してみました。
「KindleのセールになっているAmazon本の一覧を自動で取得して表示するWebサイトを作りたいです。プログラミングはほぼできません。どうすればいいですか？」
返ってきた答えは、思っていたより具体的でした。
「Amazonにはデータを取得するためのAPIがあります。Firebaseというサービスを使えば、無料でサーバーも用意できます。Reactというライブラリでサイトの見た目が作れます」
なるほど、なんとなく「できそう」という感触はありました。
私がやったこと、Claudeがやったこと
正直に言います。コードはClaudeがほぼすべて書きました。
私がやったのは、「何を作りたいか」「どう動いてほしいか」を言葉で伝えることです。
たとえばこんな感じです。
私：「スマホで見たとき、本の画像が大きすぎて見づらいです。もっと小さくしてもらえませんか」
Claude： 「モバイルでは横並びのレイアウトに変更して、画像を96pxに固定します」→ コードを書いてくれる
私：「ジャンルで絞り込みができるといいんですが」
Claude： 「フィルターバーを追加します。APIからはジャンル情報が取れないので、タイトルのキーワードから推定します」→ 実装してくれる
まるで、自分の代わりに手を動かしてくれる技術者がいるみたいでした。
詰まったとき、Claudeは一緒に考えてくれた
開発していると、うまくいかないことがたくさんありました。エラーが出たり、想定と違う動作をしたり。
そのたびに、エラーメッセージをそのままClaudeに貼り付けて聞きました。
あるとき、すべての本の「割引額」が¥0と表示される問題が起きました。
「以下のエラーが出ています。割引額がすべて0円になってしまいます。
（ここにログをペースト）」
Claudeはログを見て、こう説明してくれました。
「AmazonのAPIは商品ごとに複数の価格リストを返します。現在価格は1つ目のリストに、割引情報は2つ目のリストに入っています。それぞれ別々に取得する必要があります」
原因がわかれば解決できます。こういうとき、Claudeは「なぜそうなるのか」もちゃんと教えてくれるので、ただ直してもらうだけでなく、少しずつ理解が深まっていく感覚がありました。
何度も方針が変わった
最初に決めた設計が、途中で全部変わることもありました。
最初は「ジャンルごとにAmazonを検索して本を集めよう」と思っていました。でもやってみると、セール中でもない本がたくさん混じってきてしまう。
Claudeに相談すると、「AmazonにはKindleのセールページ専用のIDがあります。そこを直接指定すれば、本当にセール中の本だけが取れます」と教えてくれました。
設計を丸ごと変えることになりましたが、Claudeは嫌な顔ひとつせず（当たり前ですが）、新しい方針でコードを書き直してくれました。
こういう「方針転換」を何度かくり返しながら、少しずつ理想の形に近づいていきました。
できあがったもの
最終的に完成したのは、こんなアプリです。
- セール中Kindle本の人気上位をまとめて一覧表示する
- ジャンル・価格・割引率でフィルタリングできる
- 割引率の高い順・価格の安い順などで並び替えできる
- 日替わりセール・月替わりセールなど、Amazonの各セールページへ直接飛べるリンクを設置
- 1時間ごとに自動でセール情報が更新される
- スマホでも見やすいデザイン
「全件表示」にしなかった理由があります。セール中の本は数百冊になることもあって、全部並べると逆に選べなくなるからです。人気順で上位に絞り込むことで、「話題になっている本がセールになっているかどうか」をサッと確認できるようにしました。
一方で「全部見たい」というときのために、AmazonのセールページへのリンクをUI上部に設置しています。アプリで気になる本を見つけたらAmazonで詳細を確認する、という使い方を想定しています。
Googleのサービス（Firebase）を使って無料で公開しています。プログラミングが苦手な自分が、こういうものを作れたというのは、正直びっくりしました。
以下が実際に出来上がったWebアプリです。まだ荒削りではあるのですが、自分ひとりでは到底作ることができませんでした。
Claudeと開発して感じたこと
① 「何を作りたいか」さえ言語化できれば進める
コードが書けなくても、「こういうものが欲しい」「ここが気に入らない」を言葉にできれば、Claudeが形にしてくれます。大事なのは技術力ではなく、自分のやりたいことを具体的に伝える力だと思いました。
② 詰まったら、そのまま相談すればいい
エラーメッセージをコピペして「これどういう意味ですか」と聞くだけで大丈夫です。Claudeは「このエラーは〇〇が原因で、こう直せば解決します」と教えてくれます。一人で悩み続ける必要がありません。
③ 何度方針を変えても付き合ってくれる
「やっぱりこの設計は違う気がする」「別のやり方でやり直したい」という気まぐれにも、Claudeは丁寧に対応してくれます。人間の開発者に頼んでいたら気を遣ってしまうようなことも、遠慮なく言えるのは気持ちが楽でした。
④ 説明もしてくれるので、少しずつ理解できる
「このコードはなぜこう書くの？」と聞けば、わかりやすく説明してくれます。ただコードをもらうのではなく、「なるほど、こういう仕組みなのか」と少しずつ理解が積み上がる感覚がありました。
やってみてわかった「うまくいくコツ」
振り返ると、うまくいったときには共通点がありました。
曖昧な指示より、具体的な要望を伝える
「いい感じにしてください」より「スマホで見たとき画像が大きすぎるので、横幅を今の半分くらいにしてください」のほうが、一発で望み通りの結果になります。
エラーはそのままコピペする
「なんかうまくいきません」より、エラーメッセージをそのまま貼るほうがずっと速く解決します。Claudeはエラーを見れば、たいていどこに問題があるか教えてくれます。
できないことは、別の方法で目的を達成する
「日替わりセールをAPIで取れない」とわかったとき、Claudeと相談して「代わりにAmazonへのリンクを貼る」という方法に切り替えました。一つの方法に固執しないことが大事です。
まとめ
プログラミングが苦手でも、Webアプリは作れます。
コードを書くことが苦手なことをコンプレックスに思っていた自分が、実際に動くアプリを作れました。ポイントは、「作りたいものを言葉にして、Claudeと一緒に考えること」だと思っています。
Claudeは技術的なことを全部知っているわけでもないし、一発で完璧なものを作ってくれるわけでもありません。でも、一緒に試行錯誤してくれる相手として、素晴らしい存在でした。
「アプリを作ってみたいけど、プログラミングは難しそう」と思っている人に、少しでも参考になれば嬉しいです。
ただしひとつ注意点として、ある程度のITリテラシーは必要となります。ターミナルを使ってコマンドラインからの操作や、デプロイなどの最低限の用語などは知っておくべきです。そのあたり少しかじったことのある人であれば、頑張ればAIを使って自分でアプリ作成をすることは、かなり簡単な時代になったと実感しました。
再度、以下が私が作ったKindleセール情報のアプリになるので、Kindle本が好きな方は使っていただけると嬉しいです。
コメント