ZAICO Developers BlogPublicationへの投稿
💬

Xcode26.3 でMCPが追加されClaude CodeからSwiftUIのレンダリングができるようになった

hiro
に公開
iOS
Swift
Xcode
SwiftUI
Claude Code
tech

はじめに

Xcode 26.3(RC)からMCP（Model Context Protocol）に対応しました。
これによりClaude CodeからXcodeを直接操作できるようになり、SwiftUIのプレビューレンダリングやビルド、テスト実行などがターミナルから可能になりました。

今回はSwiftUIのプレビューレンダリングを試してみたので、使い方とフックを使った自動化についてまとめます。

前提

MCPの追加方法

1. XcodeでMCPを有効化

Xcodeの設定でMCPサーバーを有効にします。

  1. Xcode > Settings を開く
  2. サイドバーから「Intelligence」を選択
  3. 「Model Context Protocol」の「Xcode Tools」をオンにする

2. エージェントにMCPを追加

ターミナルで以下のコマンドを実行します。

Claude Codeの場合

claude mcp add --transport stdio xcode -- xcrun mcpbridge

Codexの場合

codex mcp add xcode -- xcrun mcpbridge

追加できたか確認します。

claude mcp list  # または codex mcp list

詳細は公式ドキュメントを参照してください。

https://developer.apple.com/documentation/xcode/giving-agentic-coding-tools-access-to-xcode

動作環境の注意

いくつかハマったポイントがあるので共有します。

  • Xcodeを起動しておく必要がある

    • MCPはXcodeと通信するため、Xcode26.3が起動していないとツールが使えません

  • macOSのバージョン制限がありそう

    • 公式の記載は見つけられなかったのですが、macOS 26.0ではClaude Code起動時に表示されるはずのXcodeの認証ダイアログが表示されませんでした
    • macOS 26.2にアップデートしたところ、ダイアログが表示されて正常に動作するようになりました

やったこと

Xcode MCPで何ができるか

Claude Codeから以下の操作ができます。

操作 ツール名
プレビューレンダリング RenderPreview
ビルド BuildProject
テスト実行 RunAllTests / RunSomeTests
ビルドログ取得 GetBuildLog
エラー確認 XcodeListNavigatorIssues
ファイル操作 XcodeRead / XcodeWrite / XcodeLS など
ドキュメント検索 DocumentationSearch

SwiftUIのプレビューをレンダリングする

試しにログイン画面をレンダリングしてみます。

ログイン画面をレンダリングして

Claude Codeが RenderPreview を呼び出して、プレビューのスナップショットが生成されます。

{
  "previewSnapshotPath": "/var/folders/.../RenderPreview_result_2026-02-04T093024Z@3x.png"
}

スナップショットは一時ディレクトリに保存されるので、必要に応じて open コマンドで確認できます。

フックでスナップショットを自動保存する

毎回一時ディレクトリから画像を探すのは面倒なので、RenderPreview 実行後に自動でプロジェクト内に保存されるようにしました。

Claude Codeのフック機能を使います。

~/.claude/settings.json

{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "mcp__xcode__RenderPreview",
        "hooks": [
          {
            "type": "command",
            "command": "~/.claude/hooks/save-preview-snapshot.sh"
          }
        ]
      }
    ]
  }
}

~/.claude/hooks/save-preview-snapshot.sh

#!/bin/bash

INPUT=$(cat)

# ソースファイルパスを取得
SOURCE_FILE=$(echo "$INPUT" | jq -r '.tool_input.sourceFilePath // empty')

# スナップショットパスを取得
# tool_response[0].text にJSONが文字列として入っている
RESPONSE_TEXT=$(echo "$INPUT" | jq -r '.tool_response[0].text // empty')
SNAPSHOT_PATH=$(echo "$RESPONSE_TEXT" | jq -r '.previewSnapshotPath // empty')

CWD=$(echo "$INPUT" | jq -r '.cwd // empty')

if [ -z "$SOURCE_FILE" ] || [ -z "$SNAPSHOT_PATH" ]; then
    exit 0
fi

if [ ! -f "$SNAPSHOT_PATH" ]; then
    exit 0
fi

# View名を抽出
VIEW_NAME=$(basename "$SOURCE_FILE" .swift)

# Snapshotsディレクトリに保存
SNAPSHOT_DIR="${CWD}/Snapshots"
mkdir -p "$SNAPSHOT_DIR"

OUTPUT_PATH="${SNAPSHOT_DIR}/${VIEW_NAME}.png"
cp "$SNAPSHOT_PATH" "$OUTPUT_PATH"

echo "Snapshot saved: ${OUTPUT_PATH}" >&2

exit 0

動作確認

フック設定後、Claude Codeを再起動して RenderPreview を実行すると、自動的に Snapshots/ ディレクトリにView名でスナップショットが保存されます。

Snapshots/
└── LoginView.png

活用できそうな場面

  • UI実装のフィードバックループ高速化

    • 「ログイン画面作って」→ 実装 → レンダリング → 「ボタンをもう少し大きく」→ 修正 → レンダリング
    • Xcodeを見に行かなくてもターミナル上で完結する

  • スナップショットテストの素材生成

    • フックでView名ごとに画像を保存しておけば、VRT（Visual Regression Testing）の比較元として使える
    • PR作成時に自動でスナップショットを更新する運用もできそう

  • デザインレビュー用の画像生成

    • 実装したViewのスナップショットをまとめて出力してデザイナーに共有
    • Figmaとの差分確認に使える

  • ドキュメント用のスクリーンショット

    • READMEやWikiに載せる画像を自動生成
    • UIが変わったら再レンダリングして更新

  • PR作成時にUIのスクリーンショットを添付

    • Claude CodeにPRを作らせる際、変更したViewのスナップショットをPRの説明に貼れる
    • レビュアーがXcodeを開かなくてもUIの変更内容がわかる

おわり

AppleはかなりAI関連に遅れている印象がありましたが、今回のMCPの追加は開発フローがまた変わるようなインパクトがある気がしました。
今回紹介したSwiftUIのレンダリング以外にも便利そうなツールがあるので正式リリースされた際にはすぐに開発環境のアップデートをしたいと思いました。

ZAICO Developers Blog
ZAICO Developers BlogPublication

累計導入企業数18万社超の在庫管理システム「zaico」の運営・在庫管理を自動化するIoT重量計「ZAICON」の開発などを行う株式会社ZAICOのエンジニア・デザイナー・PdM・稀に代表など皆でわいわいと発信していきます。※ 各記事は筆者個人の見解であり、弊社の公式な意見を代表するものではありません

Discussion