AI!AI!
このブログの殆どの要素はAIを使用して作られています。
使用したのはAntigravityです。
以下はログです。スクショはないですけどね。ごめんね。
大まかな流れ
Geminiにモックアップ作成させる
webアプリのGeminiに「個人ブログのモックアップを作成して」と頼みます。
いい感じの物が出てくるので、デザイン規則などを書かせて、閉じます。
大まかにコードを書く
プロジェクトの作成・依存関係のインストール・tailwindcssなどのインストールを行います。
ここらへんは自分でやったほうが早いです。検索すればやり方なんていくらでも出てきますから。
あとは最低限のコードを自分で書きます。Geminiが生成したReactのコードやデザイン規則を見ながら、理想を実装します。
自分で書いたコードを参照させて他のページを書く
@でファイルを指定して、自分の書いたコードに倣ってコードを書かせていきます。
必要であればデザイン規則をDESIGN.mdに書かせて、それを遵守させます。
勝手にデザインを変えたりとかもするから、結構大変でした。
デプロイ
ここは人間のお仕事です。私はCloudflare Workersにデプロイしています。
ビルドにはGitHub Actionsを使用しています。
使ったモデル
このブログの実装にはGemini 3 Flashのみを使用しています。
理由は単純明快、安定しているからです。Gemini 3.1 Proはしょっちゅうエラーを吐くのでストレスがすごいです。
Context7などを使えば誤ったコードを書くことは少ないし、ファイル編集後にビルドプロセスを走らせるようにすればエラーも勝手に治してくれます。
クォーター制限も割とすぐに復活するのでコスパというかタイパというか、体験が良いです。
以上!
AIにかなりの量のコードを書かせました。
まだまだバイブコーディングに入門できていないようなものですが、いい加減入門したいね。