演習：業務効率化プロジェクト

ストーリー

「ここまでの知識を使って、実際の業務シーンを想定した演習をやってみよう」

中島先輩が4つの課題を用意した。

「どれも実務でよくあるシーンだ。AIを使って効率的にこなしてくれ」

「全部AIだけでやっていいんですか？」

「AIは"使う"けど、最終的な品質チェックは必ず自分でやること。 それがプロの仕事だ」

課題概要

課題1: コードレビュー（20分）

以下のコードをAIにレビューさせ、指摘内容を検証して、レビューコメントとしてまとめてください。

レビュー対象コード

import express from 'express';
const app = express();
app.use(express.json());

const users: any[] = [];

app.post('/register', (req, res) => {
  const { username, password, email } = req.body;
  const user = { id: users.length + 1, username, password, email };
  users.push(user);
  res.json({ message: 'User created', user });
});

app.post('/login', (req, res) => {
  const { username, password } = req.body;
  const user = users.find(u => u.username == username && u.password == password);
  if (user) {
    res.json({ message: 'Login successful', token: 'abc123' });
  } else {
    res.status(401).json({ message: 'Invalid credentials' });
  }
});

app.get('/users/:id', (req, res) => {
  const user = users[req.params.id];
  res.json(user);
});

app.listen(3000);

やること

1. AIにコードレビューを依頼するプロンプトを作成
2. AIの指摘を受け取り、各指摘が妥当かを自分で判断
3. 最終的なレビューコメントを3つ以上まとめる

主要な指摘事項:

1. CRITICAL: パスワードが平文保存 - bcrypt等でハッシュ化が必要
2. CRITICAL: パスワードがレスポンスに含まれる - registerのレスポンスにpasswordが含まれている
3. CRITICAL: SQLインジェクションならぬオブジェクトインジェクション - any型でバリデーションなし
4. CRITICAL: トークンがハードコード - JWTなど適切なトークン生成が必要
5. WARNING: == の使用 - === を使うべき（厳密等価演算子）
6. WARNING: IDの取得方法が不正確 - users[req.params.id] はIDとインデックスを混同
7. WARNING: エラーハンドリングなし - try-catchが欠如
8. INFO: any型の使用 - 適切な型定義が必要

課題2: README作成（20分）

以下のプロジェクト情報から、AIを使ってREADME.mdを作成してください。

プロジェクト情報

名前: weather-dashboard
説明: 天気予報ダッシュボードのWebアプリケーション
技術: Next.js 14, TypeScript, Tailwind CSS, OpenWeatherMap API
機能:
  - 現在の天気表示
  - 5日間の天気予報
  - 都市検索
  - お気に入り都市の保存（localStorage）
セットアップ:
  1. git clone
  2. npm install
  3. .env.localにAPI_KEY設定
  4. npm run dev

やること

1. AIにREADME生成を依頼するプロンプトを作成
2. 生成されたREADMEの技術的正確さを確認
3. 不足している情報があれば追加指示で改善

プロンプト例:

以下の情報に基づいてGitHubのREADME.mdを作成してください。

[プロジェクト情報を記載]

含めるセクション:
1. プロジェクト名とバッジ（TypeScript, Next.js, License）
2. 概要スクリーンショット代替のASCIIアート
3. 機能一覧
4. 技術スタック
5. セットアップ手順（コードブロック付き）
6. 環境変数の説明
7. プロジェクト構造
8. 開発コマンド一覧
9. ライセンス

注意: .env.localの実際の値は記載しないでください。

確認ポイント:

• APIキーの取り扱いに関する注意が書かれているか
• セットアップ手順が実際に動く手順になっているか
• Next.js 14のApp Router前提になっているか

課題3: バグ修正（25分）

以下のコードにはバグがあります。AIを使って原因を特定し、修正してください。

バグのあるコード

interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
}

const filterAndSort = (
  products: Product[],
  category: string,
  sortBy: 'price' | 'name',
  order: 'asc' | 'desc'
): Product[] => {
  const filtered = products.filter(p => p.category === category);

  filtered.sort((a, b) => {
    if (sortBy === 'price') {
      return a.price - b.price;
    }
    return a.name > b.name ? 1 : -1;
  });

  if (order === 'desc') {
    filtered.reverse();
  }

  return filtered;
};

// テストケース
const products: Product[] = [
  { id: '1', name: 'Apple', price: 150, category: 'fruit' },
  { id: '2', name: 'Banana', price: 100, category: 'fruit' },
  { id: '3', name: 'Carrot', price: 80, category: 'vegetable' },
];

// 期待: fruit カテゴリを名前降順 → Banana, Apple
const result = filterAndSort(products, 'fruit', 'name', 'desc');
console.log(result.map(p => p.name)); // => ['Banana', 'Apple'] が期待値

やること

1. CoTを使ってAIにバグ分析を依頼
2. AIが特定したバグを自分で検証
3. 修正コードを作成

バグ1: sort() は元の配列を変更する（破壊的メソッド）ため、元のproducts配列のfruitカテゴリの順序も変わってしまう。

バグ2: name の比較で a.name === b.name のケース（等しい場合）に0を返していない。localeCompare を使うべき。

修正版:

const filterAndSort = (
  products: Product[],
  category: string,
  sortBy: 'price' | 'name',
  order: 'asc' | 'desc'
): Product[] => {
  const filtered = products.filter(p => p.category === category);

  const sorted = [...filtered].sort((a, b) => {
    if (sortBy === 'price') {
      return a.price - b.price;
    }
    return a.name.localeCompare(b.name);
  });

  if (order === 'desc') {
    sorted.reverse();
  }

  return sorted;
};

課題4: 技術選定メモ（25分）

チームで状態管理ライブラリを選定するための比較メモをAIと作成してください。

要件

検討対象: React Context, Zustand, Jotai, Redux Toolkit
プロジェクト規模: 中規模（20画面程度）
チーム: React経験1-3年のメンバー4名
要件: グローバル状態 + サーバー状態の管理

やること

1. AIに技術比較を依頼するプロンプトを作成
2. 生成された比較を検証（最新情報かどうか確認）
3. チーム向けの推奨を含む1ページのメモにまとめる

プロンプト例:

以下の要件でReactの状態管理ライブラリを比較してください。

[要件を記載]

比較表形式で、以下の軸で評価してください:
| 軸 | Context | Zustand | Jotai | Redux Toolkit |
|----|---------|---------|-------|---------------|
| 学習コスト | | | | |
| バンドルサイズ | | | | |
| DevTools | | | | |
| TypeScript対応 | | | | |
| サーバー状態管理 | | | | |
| パフォーマンス | | | | |
| コミュニティ | | | | |

最後に、上記の要件を踏まえた推奨を述べてください。

注意: サーバー状態管理はTanStack Queryとの組み合わせも検討に含めてください。

確認ポイント:

• バンドルサイズの数値は正確か（npm等で確認）
• 各ライブラリの最新バージョンの情報か
• 推奨理由が要件と整合しているか

達成度チェック

まとめ

チェックリスト

• AIを使ってコードレビューを効率化できた
• AIが生成したドキュメントを検証・改善できた
• CoTでバグの原因を特定できた
• 技術比較メモを作成して検証できた

次のステップへ

お疲れさまでした。Step 3の演習が完了しました。 次はStep 3のチェックポイントです。

推定読了時間: 90分