Codex × SwiftUI開発の実践：OpenAI Codex チームに学ぶ UI 改良ワークフロー

Codex × SwiftUI 開発の実践︓ OpenAI Codex チームに学ぶ UI 改良ワークフロー 2025年11⽉12⽇ 鈴⽊ 章太郎 Executive Evangelist, FPT Japan Holdings

鈴⽊ 章太郎 X (Twitter) ︓ @shosuz https︓//www.docswell.com/user/shosuz FPT ジャパン FPT データ& AI インテグレーション エグゼクティブエバンジェリスト 独⽴⾏政法⼈ 国⽴印刷局 デジタル統括アドバイザー兼最⾼情報セキュリティアドバイザー 略歴︓ AI 駆動開発勉強会主催。Microsoft エバンジェリスト時代から、Dell、 Accenture、Elastic、VMware を経て現職まで⼀貫して開発者向け に最新技術を啓発。GPU クラウド技術訴求、AI 駆動開発推進。 政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を経て、 現職を兼務。 GH-300 コースをエディフィストラーニング社で MCT (Microsoft 認定 トレーナー) として担当中。 Google Cloud Partner All Certifications Engineer 2025。

• https://www.edifist.co.jp/course/MSCGH300
• https://cloud.google.com/blog/ja/topics/partners/google-cloud-partner-all-certification-holders-2025
• https://www.docswell.com/user/shosuz

本⽇の発表︓Codex Meetup Japan との位置付けの違い 前回 今回 Codex Meetup Japan Lancers 爆速開発 イベント 2025年10⽉14⽇ 2025年11⽉12⽇ copilot-instructions.md ⼀撃設定術で チーム開発を標準化 SwiftUI プレビュー → コマンド基本フロー紹介 実務ですぐに使える TIPS として紹介 OpenAI Codex チームの実践⼿法 agents.md と plans.md の詳細構造と応⽤事例 スナップショット⾃動化の実装詳細と運⽤ノウハウ Codex Meetup Japan 発表スライド: https://www.docswell.com/s/shosuz/5M68XW-2025-10-14-210109

• https://www.docswell.com/s/shosuz/5M68XW-2025-10-14-210109

OpenAI DevDay [Exchange (Tokyo)] ⽇時: 11⽉11⽇(⽕) 15:00-19:00 @ ⿇布台ヒルズ コンテンツ: OpenAI 新機能ライブデモ、Q&A

OpenAI Codex チームの実践⼿法概要
agents.md 活⽤

スナップショットテスト⾃動化

•

Feler（記録保持者）の⼿法︓
7時間セッション

エージェントへの⾏動指⽰を明⽂化

•

実装計画・ToDo・意思決定ログを⼀元管理

「このスクリプトで視覚的に検証して」等々の
具体指⽰

•

⼤規模リファクタリング（15000⾏）も
Codex だけで完遂

•

Nacho Soto (iOS) が開発した⼿法

•

20,000+オープンソースプロジェクトで採⽤

•

SwiftUI プレビューから36種類のバリアント
を⾃動⽣成
Codex が⾃⼰修正ループを使ってピクセル
パーフェクトに

•
•

•

plans.md (ExecPlan) 活⽤

# AGENTS.md

# <Short, action-oriented description>

PreviewVariants(layout: .sizeThatFits) {
MyView(mode: .loaded)
.previewVariant(named: "Loaded") }

## Setup commands

## Progress

- Install deps: `pnpm install`

- [x] (2025-10-01) 完了したステップ

- Run tests: `pnpm test`

- [ ] 未完了のステップ

OpenAI OpenAI Codex アプリ実装例

READMEの補完 – AI エージェント向けの指⽰書

「exec plan」 と呼ばれる詳細な実⾏計画

デモ: SwiftUI プレビュー → スクショ → Codex 改良フロー 1 2 3 最⼩の SwiftUI コンポーネント プレビューのスクリーンショット Codex による改良 • • 基本的な UI 要素のみを持つ シンプルなコンポーネントを作成 例: ProductCard の⾒た⽬だけ の簡素な実装 • SwiftUI プレビュー画⾯をキャプチャ • • ⾃動キャプチャスクリプトまたは⼿動で Screenshots/ 配下に保存 • キャプチャ画像を⼊⼒に UI 改善 を依頼 アクセシビリティ・アニメーション・状態 管理まで⾃動実装 Codex コマンド例:(当該 Project があるパスで実⾏） $ codex -i "~/Desktop/ProductCard.png" "この画像を元にContentView.swiftのProductCard viewを 改良してください。重要な制約︓1. 既存のProduct構造体はそのまま使⽤、2. ProductCardEnhancedという新しい Viewを作成、3. アクセシビリティとアニメーション機能を追加、4. 状態管理（@State）を組み込む、5. グラデーション背 景とシャドウを追加、6. ボタンとインタラクティブ要素を実装" … Codex が画像を認識して質問してきたら︓ … "この画像を元にContentView.swiftのProductCard viewを改良してください。ProductCardEnhancedという新しい Viewを作成し、アクセシビリティ、アニメーション、状態管理(@State)、グラデーション背景、シャドウ、 インタラクティブなボタンを実装してください"

plans.md 活⽤による複雑タスク運⽤ ExecPlan︓必須セクション構成 ⾃⼰完結型ドキュメントの原則 Purpose / Big Picture ⾃⼰完結性︓その⽂書だけで完全な理解が可能 ⽣きたドキュメント︓進⾏に合わせて常に更新 初⼼者向け︓リポジトリを知らない⼈でも実装可能 動作確認重視︓単なるコード変更ではなく動作する成果物 何のための変更か、ユーザーにどんな価値をもたらすか Progress ✓ タイムスタンプ付きチェックリスト（必須）、現在の作業状況を 常に反映 Aaron Friel（OpenAI）⽒の記録: 7時間セッション · 1億5000万トークン処理 · 15,000⾏ リファクタリング Surprises & Discoveries ✓ 実装中の発⾒、パフォーマンス問題、バグなどを記録 Decision Log ✓ # agents.md 連携例 意思決定とその理由を記録、後から参照可能に • Outcomes & Retrospective ✓ 達成した成果、残った課題、学びをまとめる • 複雑なタスクでは「ExecPlan」を作成し、 plans.md に従って実装を進めること。 ユーザーからのステップ指⽰を待たず、 次のマイルストーンに⾃律的に進むこと。 効果: プロトタイピングから⼤規模リファクタまで⼀貫性を保持、テスト駆動で品質担保 ワークフロー: 計画→実装→テスト→（失敗なら計画⾒直し）の継続的サイクル

効果測定データと現場での⽬安 X 投稿で共有された情報 現場での⽬安 KPI 例 OpenAI 社内: 92% のエンジニアが⽇常利⽤ UI 改修の所要時間: 30〜50%短縮 週あたり PR 数: +70% 増加 スナップショット差分の NG 戻り: 低減 ⻑時間セッション: 最⻑7時間 PR 通過までのリードタイム: 短縮 約1.5億トークン処理の実績 複雑タスクの修正回数: 削減 注: ⾃社プロセス・環境での再測定を推奨。組織固有の初期値からの変化量を測定することが重要

まとめ︓実践⼿順 まずは最⼩の UI コンポーネントでスクショ → Codex 改良を試す agents.md を作成し、検証と出⼝条件を明⽂化 plans.md に計画・ToDo・判断ログを集約し、レビュー対象を可視化 チーム KPI を決めて効果測定（PR 数・所要時間・差分 NG など）

フロントエンド⽀部 #1 with あずもば 2025年12⽉11⽇ https://aid.connpass.com/event/(TBD)/

• https://aid.connpass.com/event/368649/

Microsoft ｜Git・GitHub NEW GitHub Copilot https://www.edifist.co.jp/course/MSCGH300 開催⽇程︓2025/10/24(⾦)、11/21(⾦)、12/19(⾦)、2026/1/23(⾦)、2/27(⾦)、3/27(⾦) 本コースは、GitHub Copilot の機能とその責任ある活⽤⽅法を学ぶためのトレーニングです。 Microsoft の最近の調査では、GitHub Copilot の活⽤により⼤幅な⽣産性の向上を経験することがわかりました。 ・ 新しいコードの 46% が AI によって記述されるようになった ・ 開発者の全体的な⽣産性が 55% 速くなった ・ 開発者の 74% が満⾜のいく作業に集中できるようになったと感じている どのような⼿段で⽣産性の向上が実現可能か、具体的なケースによる GitHub Copilot の活⽤⽅法を学びます。 対象者 ・ ソフトウェア開発者、DevOps エンジニア、管理者の⽅ ・ AI ツールを開発ワークフローに統合したい⽅ ・ 責任ある AI の使⽤と倫理的な配慮を学びたい⽅ ・ GitHub Copilot の機能を深く理解し、業務に活⽤したい⽅ 前提条件 MSCGIT01 : Git・GitHub 基礎と実践 （https://www.edifist.co.jp/course/MSCGIT01）受講済、 または、次の知識を保有する⽅ ・ 統合開発環境 (Visual Studio Code) と GitHub などのバージョン管理システムに関する知識 ・ AI と機械学習の原則に関する基礎知識 到達⽬標 ・ GitHub Copilot を責任ある⽅法で活⽤できる ・ 効果的なプロンプトを作成し、提案精度を向上できる ・ Visual Studio Code や CLI など様々な環境で Copilot を使いこなせる ・ Business や Enterprise プランの管理機能を理解できる 研修⽇数 1⽇ 時間 9:30〜17:30 受講料 7,7000 円（税込） 学習形態 オンライン コースコード MSCGH300

• https://www.edifist.co.jp/course/MSCGIT01
• https://www.edifist.co.jp/course/MSCGH300

Thank you for your attention!