webアプリ開発未経験の大学生がClaude3.7 Sonnet使ったら30分でwebアプリ作れちゃった話 #Webアプリケーション - Qiita

こんにちは!
webアプリ開発未経験のみっきーです!
この記事を見つけてくださりありがとうございます!
今回はClaude3.7 Sonnetを使ってwebアプリを作っていこうと思います。というか、Claudeにやってもらいます(笑)
※内容に不備等ございましたら、ご連絡いただけると助かります。

Qiitaを読み漁っていたらこのような記事を見つけました。
(参考にさせていただいております。)

この記事を見て「まさか俺でも出来ちゃったり…???」なんてことを思いついたので、Claudeを試してみるという思いを込めてやってみることにしました。

今回は以前私が投稿したこちらの記事で作成したPythonコードをそのままwebアプリにしてやろうという目論見です。

この記事ではGUIでの実装を切り捨ててターミナルでの動作のみの実装としていました。いつかGUIも実装したいなーと思っていたところ、先ほどの記事を発見!しかもサーバーすら用意しなくても作れるという、こんなのやるしかない。

先ほどの記事で作成した内容をGUIにし、モンスターハンターワイルズでも使用できるように機能を追加しました。
image.png
見た目は質素ですが、ターミナルでの実装よりも直感的で使いやすいです。

まずは元のPythonプログラムと作りたい内容をClaudeに投げます。
image.png

するとこんな返答がきました。
image.png
まじですごい。でもGAS(Google Apps Script)使ってほしんだよなー
じゃあ指定してみよう
image.png
image.png

では作成されたコードをGASに投げてみよう。

image.png
手順通りに作成されたコードをgs、htmlファイルにコピペして、デプロイ。

image.png
ちょっと待ってまじでできたんだけど!!!
こんな簡単にできると思っていなかったので驚きました。

できたはいいものの、元のプログラムはモンスターハンターワールド:アイスボーンで遊ぶときを想定して作っていたので、これでは新作のワイルズには対応できません(主にクエスト選択)。ということで、遊ぶタイトルを切り替えられる機能を搭載しようと考えました。早速Claudeに投げます。
image.png
そして先ほどと同様にGASを使ってデプロイ。
image.png
できた…!
ここまでの所要時間30分もかかってません。もともとPythonでプログラムを作っていたので大枠は既に完成していたとはいえ、こんな短時間で個人用webアプリが作れるとは…Claude恐ろしい(誉め言葉)

もちろんアイスボーンの表示も想定通り動いてくれます。
image.png

以前作成したとき(ターミナル)の表示結果から変わりすぎですね…
image.png

今回はClaude3.7 Sonnetを使って小規模なwebアプリを開発しました。
データベースやweb検索機能、API等を使う場合はさすがにもっと時間がかかると思いますが、このような小規模なwebアプリならプログラミング初心者の方でも簡単に作れるのではないかと思いました。生成AIすごすぎ
そしてなにより、webアプリ開発って楽しい! と思うことができました。また思いついたら何か作ってみようと思います!



フラッグシティパートナーズ海外不動産投資セミナー 【DMM FX】入金

Source link