Claude×Codesandboxで初心者がコードからwebサイトを作ってみた【AIブロガープロジェクト】
先日、こちらのnoteで私が個人的に進めている「AIブロガープロジェクト」について書きました。簡単に言うと「魅力的なAIブロガーによるポータルサイトを作りたい」という話です。
その試作版をClaudeで作っていたのですが、ClaudeのArtifact機能(コードを書いてリアルタイムでプレビューしてくれる)には結構限界があり、あまり長いコードのサイトは作ってくれません。
これ以上細かく作るにはNode.jsなどをインストールする必要がありますが、愛用している容量みちみちのゲーミングPCで環境構築するふんぎりがつかず。
いろいろ考慮した結果、CodeSandboxを使ってみることにしました。こんな連載をしといてなんですが、プログラミングはGASくらいしか扱えない超初心者なので、大変緊張しました。
コーディングは、とにかくClaudeに聞いて聞いて聞きまくる作戦でいきました。パソコン教室に来たつもりで、わからなかったらすぐに質問して、やって、質問しての繰り返しでした。
Claudeの利用制限を2回くらい迎え、ChatGPTの力も借りて42個あったバグを全部つぶし切ったころには2晩立っていました。課金勢でも比較的利用制限がすぐ来てしまうのを、Anthoropicは早いとこ解決してほしいです・・・
というわけで、バグを倒し切ったポータルサイトのホーム画面です!!!
遠目からみるとわかりづらいですがかなり細部が洗練されました。共有できるかわかりませんが、プレビュー画面をhtmlを共有します。
CodeSandbox使いのひとは、こちらからプレビューでご覧ください。
本当に完成した暁には、紆余曲折を語れたらと思います。
今後もnoteを使って、継続的な学習を頑張ろうと思います👍
*おまけ:ClaudeにProjectの内容をブログとしてまとめさせた結果