AI開発パートナーと4日間でブログサイトを構築した実体験記
AI開発パートナーと4日間でブログサイトを構築した実体験記
皆さん、こんにちは！たにーです。
最近、AI開発ツールが話題になっていますが、実際のところどうなんでしょうか？ 今回、Claude CodeとGemini CLIというAI開発パートナーと一緒に、このブログサイトを4日間で構築してみました。
その過程で見えてきた AI開発の現実 、品質管理の重要性、そして次の挑戦について、正直にお話しします。
構築したサイトの技術構成
まずは、今回構築したブログサイトの技術スタックをご紹介します。
フロントエンド：Next.js
モダンなReactフレームワークとして、Next.jsを選択しました。 静的サイト生成（SSG）機能を活用し、高速なページ読み込みを実現しています。
プラットフォーム：AWS Amplify
デプロイとホスティングにはAWS Amplifyを採用。 GitHubとの連携により、プッシュするだけで自動デプロイされる環境を整えました。
アクセス解析：Google Analytics
サイトの成長を追跡するため、Google Analytics 4を導入。 どのコンテンツが読者に響いているかを分析できるようになっています。
開発パートナー：Claude Code & Gemini CLI
そして今回の主役、AI開発パートナーたち！
- Claude Code ：コーディングタスクの中心的存在
- Gemini CLI ：コマンドライン作業や設定関連でサポート
開発プロセス：AWS Kiroメソッドを参考に
今回の開発では、AWS Kiroのプロセスを参考にして進めました。
1. サイトコンセプトの定義
まず最初に、このブログが目指すべき方向性を明確にしました。 「ITエンジニアの実体験から生まれる、実用的な知識とライフハック情報の発信基地」というコンセプトを定義。
2. 必要機能の整理
サイトコンセプトに基づいて、必要な機能を洗い出しました：
- 記事一覧表示
- カテゴリ別記事表示
- タグ機能
- 検索機能
- レスポンシブデザイン
- SEO対策
3. 設計フェーズ
機能要件を元に、システム設計とUI/UXデザインを決定。 この段階でディレクトリ構造やコンポーネント設計の方針も固めました。
4. 実装
そしていよいよ、AIパートナーとの協働開発がスタート！
5. テスト
単体テストから結合テストまで、品質を担保するテスト環境を整備。
開発初期の課題：手探り状態からのスタート
正直に言うと、最初はかなり苦労しました。
バイブコーディングに慣れていない
AI開発ツールを使った バイブコーディング （AI主導のコーディング）は初体験。 どう指示を出せば良いのか、どこまでお任せして良いのか、全く分からない状態でした。
指示書がない状態
「こんな感じでお願いします」みたいな曖昧な指示しかできず、AIも困っていたと思います。 結果として、最初の1日は試行錯誤の連続でした。
品質向上の仕組み作り
開発を進める中で、品質を維持・向上させるための仕組みを段階的に構築していきました。
指示書の整備
まず取り組んだのが、AI向けの指示書作成です。
- コーディング規約
- ディレクトリ構造のルール
- コミットメッセージの形式
- レビューポイント
これらを明文化することで、AIとの協働効率が劇的に向上しました。
ガイドラインの策定
記事作成ガイドラインやデザインガイドラインも整備。 一貫性のあるサイト作りができるようになりました。
テストコードの実装
途中から、テストコードの重要性を実感。 単体テスト、統合テストを段階的に導入しました。
// 例：記事表示コンポーネントのテスト
import { render, screen } from "@testing-library/react";
import ArticleCard from "../components/ArticleCard";
test("記事カードが正しく表示される", () => {
const mockArticle = {
title: "テスト記事",
description: "テストの説明文",
date: "2025-09-09",
};
render(<ArticleCard article={mockArticle} />);
expect(screen.getByText("テスト記事")).toBeInTheDocument();
});
Lintとフォーマッターの導入
ESLintとPrettierを導入し、コード品質の自動チェック機能を構築。 コミット前に自動的にQAチェックが走るようになりました。
広告
AI開発パートナーとの協働体験
新規開発：AIにお任せスタイル
新しい機能を一から作る場合は、基本的にAIにお任せするスタイルが効果的でした。
「ブログ記事一覧ページを作ってください。レスポンシブ対応で、カード形式で表示してください。」
このような指示で、期待以上のクオリティのコードが生成されました。
細かい改善：ペアプログラミングスタイル
一方で、既存機能の改善やリファクタリングでは、ペアプログラミングのスタイルがしっくりきました。
- 自分 ：ナビゲーター役（方向性を示す）
- AI ：ドライバー役（実際にコードを書く）
GitHub Issuesでの課題管理
AI開発中は、自分は動作確認に集中。 気づいた不具合や改善点は、すぐにGitHub Issuesに記録する運用にしました。
これにより、後から漏れなく対応でき、開発効率が大幅に向上しました。
AI開発で感じた不安と対策
スパゲッティコードへの恐怖
AI開発を進める中で、最も不安だったのが コードがスパゲッティ化してしまうこと 。
AIが生成するコードを自分が完全に理解できていない状態が続くと、だんだん不安になってきます。
対策1：テストコードがガードレール
幸い、テストコードがある程度のガードレールとして機能してくれました。 大きな変更を加えても、テストが通れば最低限の品質は保証されます。
対策2：実装ガイドラインの策定
ディレクトリ構造のルールや共通コンポーネント化の基準など、実装ガイドラインを明文化。 これにより、一定の秩序を保てるようになりました。
対策3：定期的なコードレビュー
AIが生成したコードも、必ず自分でレビューする時間を設けました。 理解できない部分は遠慮なくAIに質問し、説明してもらいます。
次の開発に向けて
今回の経験を踏まえて、次はより複雑なWebアプリケーション開発に挑戦予定です！
技術的な挑戦
- データベースの活用（PostgreSQLやDynamoDBなど）
- より複雑なアプリケーション構成
- リアルタイム機能の実装
プロセスの改善
次回は事前準備をより充実させる計画です：
- ガイドライン整備の前倒し
- 開発開始前にルールを確定
- 設計ドキュメントの事前作成
- 自分とAI、両者でレビューする体制
- テスト戦略の明確化
- 開発と並行してテストコードも充実
まとめ：AI開発パートナーとの未来
4日間という短期間で、本格的なブログサイトを構築できた今回の経験。 AI開発ツールの可能性を実感すると同時に、品質管理の重要性も痛感しました。
AI開発で大切なのは：
- 明確な指示とガイドライン
- 継続的な品質改善の仕組み
- AIとのコミュニケーション
- 自分自身の理解とレビュー
技術の進歩とともに、開発のスタイルも大きく変わっていくのを肌で感じています。 でも、根本的な部分—設計思想や品質への意識—は変わらないんだなと。
皆さんも、AI開発ツールに興味があれば、ぜひ一度試してみてください。 思っているより簡単で、思っているより奥が深いですよ！
今回の開発で使用したツールや技術について、もっと詳しく知りたい方がいらっしゃいましたら、コメントでお気軽にお聞きください！
