自己紹介
はじめまして、MONO-Xの西田です。今年の春に新卒で入社して以来、AI事業部でAIを活用したアプリケーション開発に携わっています。
まだまだ勉強不足なことも多いですが、AIが開発をサポートしてくれるおかげで、コーディング未経験の私でもアプリケーションを実際に形にできるようになってきました。
そこで本記事では、そんな環境に身を置く私が、「バイブコーディング」という手法を用い、段階的にアプリケーション開発を学んだ一つの学習法をご紹介します。
この記事が、私と同じような未経験エンジニアの方の実践の第一歩となれば幸いです。
用語解説
- バイブコーディング（AIペアプログラミング）: この記事では「バイブコーディング」という用語を使用していますが、これはAIと対話しながらコードを書く開発手法を指します。一般的には「AIペアプログラミング」や「AI支援開発」とも呼ばれます。詳細な説明は同僚の山下さんの記事（RulesOps: 自律改善型Vibeコーディング）をご参照ください。
この記事を読んで欲しい人
- Progateやったけど、次に何すればいいか分からない人
- 基礎は分かったけど、実際のアプリケーション作りたい人
- AIを使った開発に興味があるが、何から始めていいかわからない人
学べること
この記事では、AIと対話しながら家計簿アプリを作ることで、以下のことを学べます：
- アプリケーション開発の全体像 - 設計から実装までの流れ
- 段階的な学習アプローチ - 初心者でも無理なく進められる実践的な開発手順
- AIを活用した効率的な学習方法 - 実践と理論の反復で理解を深める
この記事の目的は「段階的にアプリケーション開発を学べる手法」を紹介することです。 従来の学習方法では、基礎学習から実践までに大きなギャップがありましたが、この手法では小さなステップを積み重ねることで、着実にスキルを身につけることができます。
「家計簿アプリ」完成イメージ
注意事項
開発環境
本記事では以下のツールを使用しています：
-
Cursor: 無料版でも十分に利用可能（Proプランは月額20ドルで追加機能あり）
- バージョン: 1.4以上（記事執筆時点の最新版）
- ダウンロード: https://cursor.sh/
- 注意: 無料版でも本記事の内容は十分に実践できます
-
Docker Desktop: コンテナ環境の構築用
- バージョン: 4.44.3以上（記事執筆時点の最新版）
- ダウンロード: https://www.docker.com/products/docker-desktop/
実践：家計簿アプリを作ってみる
前準備：Cursorにプロンプトルールを設定
同僚の山下さんの記事（RulesOps: 自律改善型Vibeコーディング）を参考に、Cursorの設定画面で以下のようなユーザールールを設定しました。
Cursorにルールを設ける利点については、山下さんの記事で詳しく解説されています。ここでは、私が学習用に実際に使っているユーザールールを共有します。
実際の開発現場では、プロジェクトの規模やチームの状況に応じて、より適切なルール設計が求められます。今回のルールはアプリケーション開発の流れを学ぶことを目的としており、特にPDCAサイクルを意識しながら段階的に学習を進められるように工夫しています。
Cursorに設定するユーザールール
# User Rules - 開発方法論とベストプラクティス
## 基本方針とPDCAサイクル
### 開発の基本原則
- **必須項目**:
- ユーザーがアプリケーション設計を学べるように設計・構築ロジックを明確化
- 技術書のような説明（設計原理、実装パターン、ベストプラクティス）
- 重要用語（使用した重要な構文・ライブラリ・フレームワーク）は最後に箇条書きで挙げ、説明
- 重要用語の説明時に参考にしたリソース（公式サイトや技術記事）のURLを添付
- **重要**: すべてのタスクは必ずPLANフェーズから開始する
- PDCAサイクルに基づく継続的改善
### PDCAサイクルの実行義務
#### PLAN（計画）フェーズ - 必須開始点
- **目次参照**: まず `.cursor/rules/general.md` を確認し、関連するルールファイルを特定
- **TODO作成**: 具体的な実装ステップを計画
#### DO（実行）フェーズ - 実装
- **計画順守**: PLANで策定した手順に従ってステップバイステップで実行
- **プログレス管理**: TODOリストの進捗を随時更新
#### CHECK（評価）フェーズ - 検証
- **成果物評価**: 実装結果がPLANの目標を達成しているか確認
- **品質チェック**: コード品質、パフォーマンス、セキュリティの検証
- **計画との照合**: 実際の実装と当初計画の差異を分析
- **問題発見**: 予期しなかった課題や改善点を特定
#### ACTION（改善）フェーズ - 改善・知見蓄積
- **知見抽出**: CHECKで発見した問題や改善点を知見として整理
- **ルール更新**: 重要な知見を適切なProject Rulesファイルに追記
- **次回改善**: 次のサイクルでの効率化ポイントを特定
- **目次更新**: general.mdの構成を必要に応じて更新
.cursor/rules/general.mdとは、Cursor向けに、ルールやガイドラインをまとめて記述するファイルです。特に general.md には、プロジェクト全体に共通するコーディングルールや方針 を記載します。Cursor はこのファイルを参照することで、コード補助やAI支援機能を提供し、チーム全体で一貫した開発スタイルを維持できるようサポートします。今回はアプリケーション開発の流れを学ぶことを目的としているため、最初の指示でCursorに作ってもらいましょう。
指示1回目：
GoとReactを使って自分専用のローカルで動く家計簿アプリを作ろうと思います。設計と計画を立てて、.cursor/rules/general.mdにまとめた後、詳しく説明して下さい。
初めの指示を与えると、これから作るアプリケーションの設計をまとめたマークダウンを作成してくれました。このmdを参考にCursorがアプリケーションを作るようになるので、複雑な指示は必要なくなります。また、Cursorディレクトリにはプロジェクト全体の設計が含まれており、フロントエンドやバックエンド、データベースなどに関する設計も作ってくれます。これにより、学習すべき技術の全体像が把握できます。
1回目の指示で作成されたgeneral.mdの内容
# 家計簿アプリ開発プロジェクト - General Rules
## プロジェクト概要
### 目的
自分専用のローカル環境で動作する家計簿アプリケーションの開発
### 技術スタック
- **バックエンド**: Go + Gin + SQLite
- **フロントエンド**: React + TypeScript + Vite
- **データベース**: SQLite（ローカルファイル）
- **UI/UX**: Tailwind CSS + Headless UI
- **グラフ**: Chart.js + react-chartjs-2
### 開発環境
- **OS**: macOS (darwin 24.5.0)
- **シェル**: zsh (/opt/homebrew/bin/zsh)
- **エディタ**: Cursor
- **バージョン管理**: Git
## アーキテクチャ設計
### ディレクトリ構造
household-account-book/
├── backend/ # Goバックエンド
│ ├── cmd/ # エントリーポイント
│ ├── internal/ # 内部パッケージ
│ │ ├── api/ # APIハンドラー
│ │ ├── models/ # データモデル
│ │ ├── services/ # ビジネスロジック
│ │ └── database/ # データベース操作
│ ├── pkg/ # 公開パッケージ
│ ├── go.mod
│ ├── go.sum
│ └── main.go
├── frontend/ # Reactフロントエンド
│ ├── src/
│ │ ├── components/ # Reactコンポーネント
│ │ ├── pages/ # ページコンポーネント
│ │ ├── hooks/ # カスタムフック
│ │ ├── services/ # API通信
│ │ ├── types/ # TypeScript型定義
│ │ └── utils/ # ユーティリティ
│ ├── public/
│ ├── package.json
│ └── vite.config.ts
├── docs/ # ドキュメント
│ ├── api/ # API仕様書
│ ├── database/ # データベース設計
│ └── deployment/ # デプロイメント手順
└── .cursor/rules/ # 開発ルール
├── general.md # このファイル
├── backend.md # バックエンド開発ルール
├── frontend.md # フロントエンド開発ルール
└── database.md # データベース設計ルール
## 開発フェーズ計画
### Phase 1: 基盤構築
1. **プロジェクト構造作成**
- ディレクトリ構造の作成
- 各技術スタックの初期化
- 開発環境のセットアップ
2. **バックエンド基盤**
- Go + Ginプロジェクトの初期化
- SQLiteデータベース設計
- 基本的なAPIエンドポイントの実装
3. **フロントエンド基盤**
- React + TypeScript + Viteプロジェクトの初期化
- Tailwind CSSの設定
- 基本的なコンポーネント構造の作成
### Phase 2: コア機能実装
1. **データモデル設計**
- 収支記録のデータ構造
- カテゴリ管理
- ユーザー設定
2. **API実装**
- CRUD操作の実装
- データ検索・集計機能
- エラーハンドリング
3. **UI実装**
- 収支入力フォーム
- 一覧表示
- 基本的なダッシュボード
### Phase 3: 高度な機能
1. **集計・分析機能**
- 月別・年別集計
- カテゴリ別分析
- グラフ・チャート表示
2. **データ管理**
- エクスポート・インポート機能
- データバックアップ
- 設定管理
### Phase 4: 最適化・テスト
1. **パフォーマンス最適化**
- フロントエンド最適化
- バックエンド最適化
- データベースクエリ最適化
2. **テスト実装**
- ユニットテスト
- 統合テスト
- E2Eテスト
## 開発ルール
### コーディング規約
- **Go**: `gofmt`, `golint`, `go vet`の使用
- **TypeScript**: ESLint + Prettierの使用
- **命名規則**: 明確で一貫性のある命名
- **コメント**: 複雑なロジックには適切なコメント
### コミット規約
feat: 新機能の追加
fix: バグ修正
docs: ドキュメント更新
style: コードスタイルの修正
refactor: リファクタリング
test: テストの追加・修正
chore: その他の変更
### ブランチ戦略
- `main`: 本番環境
- `develop`: 開発環境
- `feature/*`: 機能開発ブランチ
- `hotfix/*`: 緊急修正ブランチ
## 技術的考慮事項
### セキュリティ
- 入力値の検証
- SQLインジェクション対策
- XSS対策
- CORS設定
### パフォーマンス
- データベースインデックス最適化
- フロントエンドの遅延読み込み
- APIレスポンスのキャッシュ
- 画像・アセットの最適化
### 保守性
- モジュール化された設計
- 依存関係の最小化
- 適切なエラーハンドリング
- ログ出力の統一
## 参考リソース
### 公式ドキュメント
- [Go公式サイト](https://golang.org/)
- [Gin Web Framework](https://gin-gonic.com/)
- [React公式サイト](https://react.dev/)
- [TypeScript公式サイト](https://www.typescriptlang.org/)
- [Vite公式サイト](https://vitejs.dev/)
- [Tailwind CSS公式サイト](https://tailwindcss.com/)
### 技術記事・チュートリアル
- [Go + React アプリケーション構築ガイド](https://blog.logrocket.com/build-web-app-go-react/)
- [SQLite with Go](https://github.com/mattn/go-sqlite3)
- [React + TypeScript ベストプラクティス](https://react-typescript-cheatsheet.netlify.app/)
## 重要用語
### バックエンド関連
- **Gin**: Goの軽量Webフレームワーク
- **SQLite**: 軽量なリレーショナルデータベース
- **GORM**: GoのORMライブラリ
- **JWT**: JSON Web Token（認証）
### フロントエンド関連
- **React**: JavaScriptライブラリ
- **TypeScript**: JavaScriptの型付きスーパーセット
- **Vite**: 高速なビルドツール
- **Tailwind CSS**: ユーティリティファーストCSSフレームワーク
- **Chart.js**: JavaScriptチャートライブラリ
### アーキテクチャ関連
- **RESTful API**: Web APIの設計原則
- **SPA**: Single Page Application
- **CORS**: Cross-Origin Resource Sharing
- **ORM**: Object-Relational Mapping
このような形で設計書を作成してくれます。さらに中身を見てみると、使っている技術に関しては公式サイトのURLを貼ってくれています。重要語句もまとめてくれています。
1回目の指示で、アプリケーションの設計書をCursorが作成してくれました。この設計書を見ながら、実装を進めていき、実践的にアプリケーション開発の学習をしていきましょう。
指示2回目：
「このアプリケーションをローカルで動かすのに必要なコンテナを準備して下さい。」
アプリケーションの機能を実装していく前に、もうひとつ前準備が必要です。それは開発環境を構築することです。今回はDockerコンテナを使って、開発環境を整えていきましょう。Dockerコンテナとは、アプリケーションとその実行に必要な環境（ライブラリや依存関係など）をパッケージ化した、軽量で持ち運び可能な「箱」のような仕組みです。コンテナを使うことで、開発者は自分の PC・テスト環境・本番環境といった異なる環境の違いを気にせずに、同じ動作を再現できます。その利便性から、多くの企業で取り入れられています。
2回目の指示で開発に必要な環境のセットアップを行いました。setup.sh と README.md を確認しながら、アプリケーションを動かす環境を整えていくイメージです。
README.md の「開発環境」の欄を見ると、Docker や Docker Compose の記載があります。その違いについての理解が浅かったので、改めて勉強してみました。
DockerとDocker Composeの違い
- Docker: アプリケーションとその実行環境を「コンテナ」という形でパッケージ化する技術
- Docker Compose: 複数のコンテナを連携させて、アプリケーション全体を管理するツール
簡単に例えると、Dockerは「箱」を作る技術で、Docker Composeは「複数の箱を組み合わせてシステムを作る」ツールです。
詳細については、Docker公式ドキュメントやDocker Compose公式ドキュメントをご参照ください。
ただし、おすすめは理論の学習に時間をかけすぎないことです。ここでいう Docker を完全に習得しようとすると、かなりの時間が必要になります。まずは公式サイト、ブログ、動画講座などで必要最低限の知識を得る程度に留めましょう。そのうえで、アプリケーション開発の流れをある程度掴んでから技術書などで体系的に勉強すると、理解度がさらに高まります。
3回目の指示：
このアプリケーションを完成させ、ローカル環境で動かすまでに必要な作業を箇条書きで上げ、TODO.mdにまとめて下さい。
1回目の指示で、実装すべき機能を明確にすることができました。
しかし、初心者の方にとっては「その機能を実装するために、具体的に何をすればよいのか」を理解することが最初の大きなハードルになります。
そこで、もう少し踏み込んで、機能ごとに必要な作業を TODO リストの形で Cursor にまとめてもらいました。
TODO.mdの内容
## Phase 1: 基盤構築 🏗️
### 1.1 プロジェクト構造の作成
- [ ] ディレクトリ構造の設計
- [ ] Docker環境の準備
- [ ] 開発ルールの整備
- [ ] バックエンドプロジェクトの初期化
- [ ] `backend/go.mod`の作成
- [ ] 基本的なディレクトリ構造の作成
- [ ] 依存関係の定義
- [ ] フロントエンドプロジェクトの初期化
- [ ] `frontend/package.json`の作成
- [ ] Vite + React + TypeScriptの設定
- [ ] Tailwind CSSの設定
- [ ] 基本的なディレクトリ構造の作成
### 1.2 開発環境のセットアップ
- [ ] Docker Compose設定の作成
- [ ] マルチステージDockerfileの作成
- [ ] 開発用スクリプトの作成
- [ ] 環境変数ファイルの作成
- [ ] `backend/env.example`
- [ ] `frontend/env.example`
- [ ] 開発ツールの設定
- [ ] ESLint + Prettier設定
- [ ] Go linting設定
- [ ] Git hooks設定
### 1.3 データベース設計
- [ ] SQLiteデータベースの初期化
- [ ] エンティティの実装
- [ ] `models/base.go` - 基本構造体
- [ ] `models/category.go` - カテゴリエンティティ
- [ ] `models/transaction.go` - 取引エンティティ
- [ ] `models/budget.go` - 予算エンティティ
- [ ] `models/goal.go` - 目標エンティティ
- [ ] マイグレーションの実装
- [ ] 初期データの投入
---
## Phase 2: バックエンド実装 🔧
### 2.1 基本構造の実装
- [ ] メインエントリーポイント
- [ ] `cmd/server/main.go`の実装
- [ ] 設定管理の実装
- [ ] ログ設定の実装
- [ ] データベース接続
- [ ] `internal/database/connection.go`
- [ ] マイグレーション実行
- [ ] 初期データ投入
- [ ] ミドルウェアの実装
- [ ] CORS設定
- [ ] ログミドルウェア
- [ ] エラーハンドリング
### 2.2 API実装
- [ ] ルーティング設定
- [ ] `internal/api/routes/routes.go`
- [ ] APIバージョニング
- [ ] カテゴリAPI
- [ ] `internal/api/handlers/category_handler.go`
- [ ] CRUD操作の実装
- [ ] バリデーション
- [ ] 取引API
- [ ] `internal/api/handlers/transaction_handler.go`
- [ ] CRUD操作の実装
- [ ] 検索・フィルタリング機能
- [ ] 集計機能
- [ ] 予算API
- [ ] `internal/api/handlers/budget_handler.go`
- [ ] 予算管理機能
- [ ] 目標API
- [ ] `internal/api/handlers/goal_handler.go`
- [ ] 目標管理機能
### 2.3 ビジネスロジック
- [ ] サービス層の実装
- [ ] `internal/services/category_service.go`
- [ ] `internal/services/transaction_service.go`
- [ ] `internal/services/budget_service.go`
- [ ] `internal/services/goal_service.go`
- [ ] リポジトリ層の実装
- [ ] `internal/repository/category_repository.go`
- [ ] `internal/repository/transaction_repository.go`
- [ ] `internal/repository/budget_repository.go`
- [ ] `internal/repository/goal_repository.go`
### 2.4 ユーティリティ
- [ ] 共通ユーティリティ
- [ ] `pkg/utils/date.go` - 日付処理
- [ ] `pkg/utils/currency.go` - 通貨処理
- [ ] `pkg/utils/validation.go` - バリデーション
- [ ] エラーハンドリング
- [ ] `pkg/errors/app_error.go`
- [ ] エラーレスポンスの統一
---
## Phase 3: フロントエンド実装 🎨
### 3.1 基本構造の実装
- [ ] アプリケーションの初期化
- [ ] `src/main.tsx`の実装
- [ ] `src/App.tsx`の実装
- [ ] ルーティング設定
- [ ] 型定義の実装
- [ ] `src/types/models.ts` - データモデル型
- [ ] `src/types/api.ts` - API型定義
- [ ] `src/types/common.ts` - 共通型定義
### 3.2 状態管理
- [ ] Zustandストアの実装
- [ ] `src/stores/authStore.ts` - 認証状態
- [ ] `src/stores/transactionStore.ts` - 取引状態
- [ ] `src/stores/categoryStore.ts` - カテゴリ状態
- [ ] `src/stores/uiStore.ts` - UI状態
### 3.3 API通信
- [ ] APIクライアントの実装
- [ ] `src/services/api.ts` - Axios設定
- [ ] `src/services/transactions.ts` - 取引API
- [ ] `src/services/categories.ts` - カテゴリAPI
- [ ] `src/services/budgets.ts` - 予算API
- [ ] `src/services/goals.ts` - 目標API
### 3.4 コンポーネント実装
- [ ] 基本UIコンポーネント
- [ ] `src/components/ui/Button.tsx`
- [ ] `src/components/ui/Input.tsx`
- [ ] `src/components/ui/Modal.tsx`
- [ ] `src/components/ui/Loading.tsx`
- [ ] レイアウトコンポーネント
- [ ] `src/components/layout/Header.tsx`
- [ ] `src/components/layout/Sidebar.tsx`
- [ ] `src/components/layout/Footer.tsx`
- [ ] フォームコンポーネント
- [ ] `src/components/forms/TransactionForm.tsx`
- [ ] `src/components/forms/CategoryForm.tsx`
- [ ] `src/components/forms/BudgetForm.tsx`
- [ ] `src/components/forms/GoalForm.tsx`
### 3.5 ページ実装
- [ ] ダッシュボード
- [ ] `src/pages/Dashboard/index.tsx`
- [ ] 収支サマリー表示
- [ ] 最近の取引一覧
- [ ] 予算進捗表示
- [ ] 取引管理
- [ ] `src/pages/Transactions/index.tsx`
- [ ] 取引一覧表示
- [ ] 取引追加・編集・削除
- [ ] 検索・フィルタリング
- [ ] カテゴリ管理
- [ ] `src/pages/Categories/index.tsx`
- [ ] カテゴリ一覧表示
- [ ] カテゴリ追加・編集・削除
- [ ] 予算管理
- [ ] `src/pages/Budgets/index.tsx`
- [ ] 予算設定・管理
- [ ] 予算進捗表示
- [ ] 目標管理
- [ ] `src/pages/Goals/index.tsx`
- [ ] 目標設定・管理
- [ ] 目標進捗表示
### 3.6 チャート・グラフ
- [ ] Chart.js設定
- [ ] `src/components/charts/BarChart.tsx`
- [ ] `src/components/charts/LineChart.tsx`
- [ ] `src/components/charts/PieChart.tsx`
- [ ] `src/components/charts/GoalProgressChart.tsx`
---
## Phase 4: 高度な機能実装 🚀
### 4.1 データ分析機能
- [ ] 月別・年別集計
- [ ] カテゴリ別分析
- [ ] 支出傾向分析
- [ ] 予算達成率分析
### 4.2 データ管理機能
- [ ] データエクスポート
- [ ] CSV形式でのエクスポート
- [ ] JSON形式でのエクスポート
- [ ] データインポート
- [ ] CSV形式でのインポート
- [ ] データ検証機能
- [ ] データバックアップ
- [ ] 自動バックアップ機能
- [ ] 手動バックアップ機能
### 4.3 設定機能
- [ ] アプリケーション設定
- [ ] 通貨設定
- [ ] 日付形式設定
- [ ] テーマ設定
- [ ] カテゴリ設定
- [ ] デフォルトカテゴリ
- [ ] カテゴリ色設定
---
## Phase 5: UI/UX改善 🎨
### 5.1 デザインシステム
- [ ] カラーパレットの定義
- [ ] プライマリ・セカンダリカラー
- [ ] セマンティックカラー（success, warning, danger, info）
- [ ] カテゴリカラー
- [ ] タイポグラフィの設定
- [ ] フォントファミリーの統一
- [ ] フォントサイズと行間の定義
- [ ] レスポンシブタイポグラフィ
- [ ] コンポーネントライブラリの構築
- [ ] Badgeコンポーネント
- [ ] Alertコンポーネント
- [ ] Tooltipコンポーネント
- [ ] ProgressBarコンポーネント
- [ ] Skeletonコンポーネント
- [ ] DropZoneコンポーネント
- [ ] ErrorBoundaryコンポーネント
- [ ] レスポンシブデザインの実装
- [ ] ResponsiveContainer
- [ ] ResponsiveGrid
- [ ] ResponsiveFlex
### 5.2 ユーザビリティ改善
- [ ] キーボードショートカット
- [ ] useKeyboardShortcutsフック
- [ ] プリセットショートカット
- [ ] KeyboardShortcutsModal
- [ ] ドラッグ&ドロップ機能
- [ ] useDragAndDropフック
- [ ] ファイル検証機能
- [ ] ビジュアルフィードバック
- [ ] 検索・フィルタリングの改善
- [ ] 高度な検索機能
- [ ] リアルタイムフィルタリング
- [ ] エラー表示の改善
- [ ] ユーザーフレンドリーなエラーメッセージ
- [ ] エラーバウンダリー
- [ ] リトライ機能
### 5.3 アニメーション
- [ ] ページ遷移アニメーション
- [ ] PageTransitionコンポーネント
- [ ] フェードイン・アウト効果
- [ ] コンポーネントアニメーション
- [ ] AnimatedContainer
- [ ] AnimatedListItem
- [ ] スタッガーアニメーション
- [ ] ローディングアニメーション
- [ ] スケルトンローディング
- [ ] プログレスバー
- [ ] スピナーアニメーション
---
## Phase 6: テスト実装 🧪
### 6.1 バックエンドテスト
- [ ] ユニットテスト
- [ ] サービス層のテスト
- [ ] リポジトリ層のテスト
- [ ] ユーティリティのテスト
- [ ] 統合テスト
- [ ] APIエンドポイントのテスト
- [ ] データベース操作のテスト
### 6.2 フロントエンドテスト
- [ ] コンポーネントテスト
- [ ] UIコンポーネントのテスト
- [ ] ページコンポーネントのテスト
- [ ] フックテスト
- [ ] カスタムフックのテスト
- [ ] E2Eテスト
- [ ] 主要フローのテスト
---
## Phase 7: 最適化・セキュリティ 🔒
### 7.1 パフォーマンス最適化
- [ ] フロントエンド最適化
- [ ] コード分割
- [ ] 遅延読み込み
- [ ] キャッシュ戦略
- [ ] バックエンド最適化
- [ ] データベースクエリ最適化
- [ ] キャッシュ実装
- [ ] レスポンス最適化
### 7.2 セキュリティ強化
- [ ] 入力検証の強化
- [ ] SQLインジェクション対策
- [ ] XSS対策
- [ ] CSRF対策
---
## Phase 8: ドキュメント・デプロイ 📚
### 8.1 ドキュメント作成
- [ ] API仕様書
- [ ] データベース設計書
- [ ] ユーザーマニュアル
- [ ] 開発者ドキュメント
### 8.2 デプロイ準備
- [ ] 本番環境設定
- [ ] 環境変数の整理
- [ ] ログ設定の最適化
- [ ] 監視設定
---
TODO.mdを参考にAIに指示を与えながら、実装を進めていきます。
TODOごとに実装
実装が進んでいくと、こんな感じでTODO.mdの完了タスクにチェックマークがついていき、次のタスクが明確になるので、アプリケーション開発の流れを体系的にかつ実践的に学ぶことができます。
特に、現役エンジニアやエンジニアを目指している方は、Phase 6: テスト実装、Phase 7: 最適化・セキュリティ を繰り返し演習することをおすすめします。
この2つは独学では理解が難しい領域ですが、バイブコーディングを通じてAIと実際のアプリケーション開発に取り組むことで、より具体的なイメージを持ちながら習得できます。
テストやセキュリティに関する知識はエンジニアにとって非常に重要です。これらの知識は個人のスキル向上だけでなく、チーム開発においても不可欠です。特にセキュリティ対策の不備は、会社に大きな損失を与えるリスクにつながるため、実践を通じて早い段階から習慣的に身につけることが大切です。
今回の開発で学んだこと・まとめ
今回の開発を通じて、新しく学んだことや学び直したことを整理してみました。
アプリケーション開発に必要な知識は、利用する言語やフレームワークによって変わりますが、ここで挙げる内容は Webアプリケーション開発全般において汎用的に活かせるスキル です。
RESTful API設計
- Web APIの基本原則
- エンドポイント設計
- データベース操作
ユーザーインターフェース設計
- ユーザビリティの基本原則
- Tailwind CSSによるスタイリング
- フォームバリデーション
テスト駆動開発の基礎
- ユニットテストの書き方
- Jest/Vitestによるテスト実装
- テストケースの設計
セキュリティ対策
- Webアプリケーションセキュリティ
- OWASP Top 10の理解と実践
バイブコーディングを通じて実証できたこと
- 初心者でもAIと一緒にアプリケーション開発の手順を学べる
- 段階的な指示で実践的な開発プロセスを体験できる
- 理論と実践を繰り返すことで、知識を定着させながら進められる
この方法は、基礎学習を終えた後の 次のステップ として非常に効果的です。AIとともにアプリケーションを作り上げる中で、実際の開発手順を自然に身につけることができます。
最初は少し時間がかかるかもしれませんが、繰り返すうちにスピードも上がり、効率的に学習できます。さらに、進めた内容を TODO.md に整理しておくことで、隙間時間を活用しながら段階的に確実にスキルを積み上げられる のも大きなメリットです。
さらに学びを深めるために
バイブコーディングやAIを活用した学習について、さらに詳しく知りたい方は以下の記事も参考にしてください：
関連記事・リソース
-
RulesOps: 自律改善型Vibeコーディング - 同僚の山下さんによるバイブコーディングの詳細な解説記事です。本記事の前提知識として参考にしてください。
-
Claude Code Learning Mode で効率的にコードを学ぶ方法 - Claudeの学習モードを活用した効率的なコード学習手法について詳しく解説されています。この記事で紹介したバイブコーディングと合わせて読むことで、より効果的な学習アプローチを構築できます。
-
Claude Code 出力スタイルガイド - Anthropic公式によるClaude Codeの出力スタイルに関する詳細なドキュメントです。コード品質の向上やスタイル修正に役立ちます。
-
Tsumiki - AI支援型開発フレームワーク - クラスメソッド社が開発したPDCAやTDDに沿ってClaude Codeを活用するためのオープンソースフレームワークです。体系的なAI支援開発を実践できます。
これらの記事とツールを参考に、自分に最適な学習方法を見つけてください。AIを活用した学習は、従来の学習方法とは異なるアプローチが必要ですが、一度コツを掴めば非常に効率的にスキルを向上させることができます。
MONO-Xの開発チームによるAI tech Blogです。 生成AIや業務支援AI、API連携など、現場で役立つAI活用の実践知を発信中。 自社AIの技術ノウハウや、AIを活用した業務改善にご興味のある方はぜひフォローしてご覧ください。
Discussion