本日の構成

1. Claude Codeが刷新した開発現場
2. 手数の増加を支えるClaude Codeの機能
3. 人間に残された仕事
4. まとめ

開発速度が明らかに向上した

• 2025年5月頃、Claude Codeを全社導入
• Claude Codeの全社導入後、
  チーム内のPRリリース数は約3倍に増加
• Devin、Cursor等もリリースと同時に導入したが、
  比べ物にならない上昇幅

コードの民主化: 職能を超えた開発が日常に

• 会社全体では、職能を問わず全員がClaude Codeをはじめとする
  AIエージェントを使える
• 非エンジニアがClaude Codeを使ってコードを書く
  • デザイナー、PdM、医師等
• エンジニアが専門外のコードを書く

実例: デザイナーがClaude Codeを使って作成

• 「Ubie Draw」
  • システムプロンプトを元に、Ubie風の画像を作成できるツール
  • デザイナーにいちいち依頼せずに画像を作れるように

実例: 医師がClaude Codeを使って作成

• 医療関係の論文を週次で調査する
• レポートを作成・出力するツール
• コードの経験がほぼない医師が、Claude Codeを使って作成した
• 「自分でほしいから自分で作った」

実例: エンジニアが他職種の開発を行う

• フロントエンドエンジニアがdbtを更新してデータ分析を行う
  • データ分析の知識は持っていない
• データ分析のエンジニアが、Claude Codeで開発しやすいよう
  環境を整えてくれている

実例: PR作成の自動化

毎回やっているフォーマットとPR作成処理をカスタムスラッシュコマンド化

## Description
このコマンドは以下の作業を自動で実行します：
1. `npm run format` でPrettierフォーマットを実行
2. 変更内容を適切な粒度でコミットに分割
3. GitHub PRを作成

## Implementation
prettierをかけたあと、適切な粒度でコミットし、PRを作って
**使用例:** `/create-pr` → 自動でPR作成完了

実例: dbt model実装/更新

• 引数を受け取れるなど、表現力が豊富

あなたにはユーザーからのお願いに対してdbt model実装/更新をお願いしたいです

# 実装/更新を作るためのインプット
作業を始める前に前提となる以下のdbt modelやSQLの知識を必ずインプットしてください
- @docs/ja/how-to-guides/dbt-model-development.md
- @docs/ja/reference/dbt-documentation-standards.md
- @docs/ja/reference/dbt-schema-definition.md
- @docs/ja/reference/dbt-sql-style-guide.md

# ユーザーからのお願い
$ARGUMENTS

MCP

• Claude Codeを外部システムと連携させる仕組み
• よく使っているMCP
  • Figma MCP: デザインファイルの取得
  • JIRA MCP: JIRAのチケット情報を取得・更新
  • Notion MCP: Notionのドキュメント情報を取得・更新
  • Codex MCP: Codexの知識を活用
  • Chrome DevTools MCP: Chrome DevToolsを使ってブラウザ操作を自動化

https://docs.claude.com/ja/docs/claude-code/mcp

実例: Figma MCP

• Figma MCPを使うと、Figmaのデザインファイルを参照して
  コードを生成できる

https://help.figma.com/hc/ja/articles/32132100833559-Dev-Mode-MCPサーバー利用ガイド

Figma Appで実装したいデザインのリンクを取得

Figma MCPを使い、デザインを参照してコーディング命令

• プロンプト例
  • メインビジュアルのテキストを次のように変更して https://www.figma.com/design/（デザインファイルURL）

実例②: Figma MCP × 自社デザインシステムMCP

• AIエージェントに実装を依頼すると、独自のUIを作り出す
• そうではなく、自社のデザインシステムを使ってUIを作りたい
• 自社デザインシステム MCPを使う
• Figma MCP → 自社デザインシステム MCP → コーディング

Ubieのデザインシステム「ubie-ui」

自社デザインシステムMCPの構築

const server = new McpServer({ name: "ubie-ui-mcp" });

server.tool("get_components", "Get components for ubie-ui", async () => {
  // ☆ ここでデザインシステムのコンポーネント群を読み込む
  const componentContents =
    globSync(`${ubieUiDir}/src/components/**/*.tsx`)
    .filter((path) => !path.includes("stories"))
    .map((path) => {
      const content = readFileSync(path, "utf-8");
      return { type: "text", text: content };
    });
  return { content: componentContents };
});

デザインシステムのコンポーネントを使ったコードが生成

import { FC } from 'react';
import { Stack, Input, Label, Button } from '@ubie/ubie-ui';
export const UserProfileForm: FC = () => {
  return (
    <form>
      <Stack spacing="md">
        <Stack spacing="xs">
          <Label htmlFor="name">名前</Label>
          <Input id="name" type="text" required placeholder="山田 太郎" />
        </Stack>
        <Button type="submit" variant="primary">
          送信
        </Button>

実例③: Codexの知識をMCP経由で活用する

• Codex CLIはまだClaude Codeに比べて
  （私にとっては）機能が少なめ
• Codex CLIがMCPサーバーに対応した
• MCPを経由してCodex CLIを呼び出すことで、
  手慣れたClaude Codeと優秀なCodexの知識を組み合わせて
  いいとこ取りができた

https://github.com/openai/codex/blob/main/docs/advanced.md#using-codex-as-an-mcp-server

Subagent

• 特定のタスクを、独立した
  コンテキストウィンドウで処理してくれる
• ドメイン知識、専門分野にしたがって調整可能

実例: Reactの専門家 Subagentにレビュー依頼

一般公開されているSubagentを流用した

• 各サブエージェントが公開されているリポジトリ
• 一例
  • フロントエンド・バックエンドの専門家
  • 各言語（JS, TypeScript, React他多数）の専門家
  • データ分析・AI開発の専門家
  • フィンテック・ゲーム領域・SEOの専門家

https://github.com/VoltAgent/awesome-claude-code-subagents/tree/main/categories

Plan Mode

• 実装前に全体の計画を提示する
• 普段は --dangerously-skip-permissions で
  何でも即実行
• 計画だけ知りたいときは Shift+Tab でPlan Modeに切り替え
• 計画確認後は再度 Shift+Tab で元のモードに戻る
• いきなり実装を始めるより、手戻りの少ない開発ができる

人間がやっていることは

• ガードレールの作成
• コンテキストの提供
• 品質チェック
• 成果物の細かい調整

ガードレールを作って質を担保する

• ガードレールとは事故を防ぐための安全柵のこと
• AIの開発速度はもはや人間には超えられない
• AIは好きなだけ爆速で開発してもらう
• 人間は、AIが爆速で開発したときに品質を担保したり、
  バグを起こさないためのガードレールを作る

テストの充実

• ユニットテストの拡充
• E2Eテストの充実
• ビジュアルリグレッションテストの作成

実例: Storybookとinteraction test

• Storybookのinteraction test機能を使う
• Storybook UI
  • テストに合致しない要素があると、UI上で検知できる
• CI
  • storybookファイルを読み込み、テストの失敗を検知できる

Storybookのinteraction testコード

export const Default: Story = {
  name: 'LPトップページ',
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    const pageTitle = canvas.getByRole('heading', { level: 1 });
    await expect(pageTitle).toHaveTextContent(/ユビーオンライン診療/);

    const breadcrumbList
        = canvasElement.querySelector('ol[typeof="BreadcrumbList"]');
    await expect(
           within(breadcrumbList).getByRole('link', { name: 'トップ' })
          ).toBeVisible();

Storybook UI上でテストの成功を確認

• 失敗時は、視覚的に検知できる
• コードだけからUIを想像するよりも早くて正確

CIでテスト結果を確認

レビュー環境

• AIが大量に作るコードを、いかに効率よくレビューするか
• 私のチームで使っているレビューツール
  • CodeRabbit
  • Claude Code GitHub Actions
  • GitHub Copilot
  • PRごとのプレビュー環境

実例: CodeRabbit

• PRを作ると、自動的にAIがレビューする
• 人間のレビューを受ける前に、AIのレビューに一通り対応する

実例: プレビュー環境の作成

• PR毎にプレビュー環境が作られる
• 変更内容を視覚的にチェックできる

AIにドメイン知識を伝える

• AIは一般的な知識しか持たない
• ドメイン知識（プロジェクト固有の知識、タスクの背景）を伝える必要がある
• JIRA MCPでチケットの目的・背景を明確に伝達
• Notion MCPで社内リソースからドメイン知識を提供

実例: 社内AIのSEOアドバイザー

• ユビーは月間1200万MAUのサービスを運営しており、
  そこで培ったSEOの知識・知見が豊富
• その知識が大量のNotionにまとまっており、
  AIに伝えることで、Ubieの事情に合った適切なSEO対策を行える
• Notion MCPと連携できる社内AIのSEOアドバイザーを経由してアクセスする
• Ubie独自のドメイン知識を社内リソースから、
  良質なSEO情報を外部から、MCP経由でもたらす

実例: AIのSEOアドバイザーによるコーディングチェック

実例: AIのSEOアドバイザーによるコーディングチェック

本日話したこと

• Claude Codeにより、開発速度・開発量が爆増
• 人間は、ガードレールとコンテキストを提供することで、
  AIエージェントの開発品質を担保する

Ubieで一緒に働きましょう

https://recruit.ubie.life/