webアプリ開発未経験の大学生がClaude3.7 Sonnet使ったら30分でwebアプリ作れちゃった話

はじめに

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

webアプリ開発やったことないけどやってみたい

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

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

ところで、なんのアプリを作るの？

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

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

作成したアプリ

先ほどの記事で作成した内容をGUIにし、モンスターハンターワイルズでも使用できるように機能を追加しました。

見た目は質素ですが、ターミナルでの実装よりも直感的で使いやすいです。

作成手順

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

するとこんな返答がきました。

まじですごい。でもGAS(Google Apps Script)使ってほしんだよなー
じゃあ指定してみよう

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

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

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

機能追加

できたはいいものの、元のプログラムはモンスターハンターワールド:アイスボーンで遊ぶときを想定して作っていたので、これでは新作のワイルズには対応できません(主にクエスト選択)。ということで、遊ぶタイトルを切り替えられる機能を搭載しようと考えました。早速Claudeに投げます。

そして先ほどと同様にGASを使ってデプロイ。

できた...！
ここまでの所要時間30分もかかってません。もともとPythonでプログラムを作っていたので大枠は既に完成していたとはいえ、こんな短時間で個人用webアプリが作れるとは...Claude恐ろしい(誉め言葉)

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

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

おわりに

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

参考

• モンスターハンター公式サイト
• モンスターハンターライズ公式サイト
• モンスターハンターワールド：アイスボーン公式サイト
• モンスターハンターワイルズ公式サイト
  ※本プログラムで使用しているクエストリストには、モンスターハンターワールド：アイスボーンに出てくるモンスターの名前または俗称が含まれています。