見出し画像

Claude×Codesandboxで初心者がコードからwebサイトを作ってみた【AIブロガープロジェクト】

先日、こちらのnoteで私が個人的に進めている「AIブロガープロジェクト」について書きました。簡単に言うと「魅力的なAIブロガーによるポータルサイトを作りたい」という話です。

その試作版をClaudeで作っていたのですが、ClaudeのArtifact機能(コードを書いてリアルタイムでプレビューしてくれる)には結構限界があり、あまり長いコードのサイトは作ってくれません。

Claude Artifact

これ以上細かく作るにはNode.jsなどをインストールする必要がありますが、愛用している容量みちみちのゲーミングPCで環境構築するふんぎりがつかず。

いろいろ考慮した結果、CodeSandboxを使ってみることにしました。こんな連載をしといてなんですが、プログラミングはGASくらいしか扱えない超初心者なので、大変緊張しました。

コーディングは、とにかくClaudeに聞いて聞いて聞きまくる作戦でいきました。パソコン教室に来たつもりで、わからなかったらすぐに質問して、やって、質問しての繰り返しでした。

Claudeの利用制限を2回くらい迎え、ChatGPTの力も借りて42個あったバグを全部つぶし切ったころには2晩立っていました。課金勢でも比較的利用制限がすぐ来てしまうのを、Anthoropicは早いとこ解決してほしいです・・・




というわけで、バグを倒し切ったポータルサイトのホーム画面です!!!

遠目からみるとわかりづらいですがかなり細部が洗練されました。共有できるかわかりませんが、プレビュー画面をhtmlを共有します。

CodeSandbox使いのひとは、こちらからプレビューでご覧ください。


本当に完成した暁には、紆余曲折を語れたらと思います。
今後もnoteを使って、継続的な学習を頑張ろうと思います👍


*おまけ:ClaudeにProjectの内容をブログとしてまとめさせた結果

存在しない記憶

いいなと思ったら応援しよう!

にゃほ
スキを押していただけると「AIが考えた面白いお礼メッセージ」がでてきます

この記事が参加している募集