Claude 3.7 Sonnetと一緒に作る爆速Webアプリ開発

はじめに

食材価格検索Webアプリ(完全自分用)を作ってみました。
普段はインフラ側の仕事をしており、フロントエンドやバックエンドの開発はほとんど経験がありませんでしたが、生成AIを活用することで、超簡単にWebアプリを作成できました。

本記事では、生成AIの力を借りまくって、Webアプリ作成した過程を紹介します。
「アプリ作ったことないけど、やってみたい！」という方の参考になれば幸いです。

今回の開発では、最近流行りの自律型AIエージェントは使用していません。
エラーが出たら都度LLMに聞いて修正するという、従来の(?)スタイルで開発しました。

作成時の私のスキル

• AWSの基本的なサービスは理解している
• Pythonの基本的な文法は理解している
• HTML/CSS/JavaScriptはほとんど経験がない

アプリ作成の背景

最近自炊をするようになり、買い物に行くことが増えた
↓
「あれ、あっちのスーパーだと卵いくらだっけ」となるようなことがよくある
↓
買った食材の値段を記録して、いつでも検索できるようなアプリがほしい！
↓
自分で作ってみよう！

といった感じです。

アプリの概要

今回作成したアプリには、以下の2つの機能があります。

• 食材価格検索機能
  食材名を入力すると、過去に記録した食材の価格を検索できます。
  
  

• 価格データ登録機能
  csvファイルをアップロードすることで、食材の価格データを登録できます。
  

アプリの構成

• 食材価格検索
  

• 価格データ登録
  撮影したレシートをcsvに変換してくれる外部アプリを利用し、csvを手作業で整形してアップロードします。
  （この手作業の部分もいつか自動化したいですね。。。）
  

開発過程

Claude 3.7 Sonnetで手順書作成

今回はこちらの記事を参考に、Claude 3.7 Sonnetに助けてもらいながら開発を進めました。

• 最初のプロンプト

過去に購入した食材の値段をすぐに検索できる自分用のwebアプリを作りたい。
構築手順を初心者でも分かるように教えてください。

## 今考えていること 
- UI: 
  - スマホで閲覧することを想定
- ユーザーが期待する機能: 
  -  検索欄に食材の名前を入力して検索すると、過去にその食材を購入した「日付」、「購入場所」、「金額」が表示される。 
- 構成: 
  - AWSを利用したい。なるべく簡単な構成にしたい。 
- 購入履歴:
  - csvを用意可能
  - webアプリ上でcsvをアップロードできるようにしたい。
- 言語:
  - フロントエンド: HTML, CSS, JavaScript
  - バックエンド: Python

このような感じで、考えていることをなるべく具体的に伝えることで、少しでも期待通りの回答が得られやすいようにしました。

• Claude 3.7 Sonnetの回答①
  AWSコンソールでリソースを作成する手順を教えてくれました。（一部抜粋）
  

• Claude 3.7 Sonnetの回答②
  また、フロントエンドやバックエンドのコードも生成してくれました。
  これはcsvアップロード用のLambda関数のコードです。
  

• Claude 3.7 Sonnetの回答③
  さらに、お願いしていないのに簡単なAWS構成図まで作ってくれました（すごい）
  

言われた通りに作る＆デバッグ

手順書をもとに、アプリを作成しましたが、当然エラーなく動くわけではありませんでした。
出てきたエラーをClaudeに投げて、修正方法を聞きながら進めました。

Lambda関数のコードを修正する際は、Claudeの回答も参考にしつつ、AWS SDK for Python (Boto3)のドキュメントも参照しながら進めることで、正確な修正ができました。

大体デバッグには全部で4時間くらいかかりましたが、Claudeにたくさん助けてもらい、なんとか動くアプリを作成することができました。

作成にかかった時間：約6時間

• アプリ構想・要件定義：10分
• 環境構築：30分
• データの準備：1時間
• 実装・デバッグ：4時間
• UI調整：30分

感想

• 作るって楽しい
  エラーが解決してアプリが動いたあの瞬間はたまらなく気持ちよかったです。

• 手を動かすの大事
  業務ではあまり触らないAPI Gatewayについて、だいぶ理解度を深めることができました。
  また、デバッグを通して、プログラミングも自然と身についた気がします。最初はエラー文をコピペしてClaudeに投げるだけでしたが、徐々に自分でエラー文を読んで修正箇所を特定し、「ここがこう間違っているから、こう修正してみて」といった感じで、Claudeに質問できるようになりました。

おわりに

初心者の自分でも、生成AIを活用することで、簡単にWebアプリを作成できることを知りました。
今後もアプリ開発にチャレンジしていきたいと思います。