--- title: Codex × SwiftUI開発の実践：OpenAI Codex チームに学ぶ UI 改良ワークフロー tags: #codex cloud #xcode #swiftui #openai devday exchange #agents.md #plans.md #exec plan #github copilot #ai駆動開発 #駆動開発 author: [Shotaro Suzuki](https://www.docswell.com/user/shosuz) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/Y76L1N86JV.jpg?width=480 description: 爆速開発LT：Codex編 https://lancersagent.connpass.com/event/373021/ published: November 12, 25 canonical: https://www.docswell.com/s/shosuz/ZM6P36-2025-11-12-124009 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/Y76L1N86JV.jpg) Codex × SwiftUI 開発の実践︓ OpenAI Codex チームに学ぶ UI 改良ワークフロー 2025年11⽉12⽇ 鈴⽊ 章太郎 Executive Evangelist, FPT Japan Holdings # Page. 2 ![Page Image](https://bcdn.docswell.com/page/G7514595E4.jpg) 鈴⽊ 章太郎 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。 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/9J21VN2G7R.jpg) 本⽇の発表︓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 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/DEYZ3PYG7M.jpg) OpenAI DevDay [Exchange (Tokyo)] ⽇時: 11⽉11⽇(⽕) 15:00-19:00 @ ⿇布台ヒルズ コンテンツ: OpenAI 新機能ライブデモ、Q&A # Page. 5 ![Page Image](https://bcdn.docswell.com/page/VJN3V5P8J8.jpg) 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」 と呼ばれる詳細な実⾏計画 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/YE996Y3XE3.jpg) デモ: 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)、グラデーション背景、シャドウ、 インタラクティブなボタンを実装してください" # Page. 7 ![Page Image](https://bcdn.docswell.com/page/GE89Z6M97D.jpg) # Page. 8 ![Page Image](https://bcdn.docswell.com/page/LELWD93MJR.jpg) 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 に従って実装を進めること。 ユーザーからのステップ指⽰を待たず、 次のマイルストーンに⾃律的に進むこと。 効果: プロトタイピングから⼤規模リファクタまで⼀貫性を保持、テスト駆動で品質担保 ワークフロー: 計画→実装→テスト→（失敗なら計画⾒直し）の継続的サイクル # Page. 9 ![Page Image](https://bcdn.docswell.com/page/4JM9PZD6EW.jpg) 効果測定データと現場での⽬安 X 投稿で共有された情報 現場での⽬安 KPI 例 OpenAI 社内: 92% のエンジニアが⽇常利⽤ UI 改修の所要時間: 30〜50%短縮 週あたり PR 数: +70% 増加 スナップショット差分の NG 戻り: 低減 ⻑時間セッション: 最⻑7時間 PR 通過までのリードタイム: 短縮 約1.5億トークン処理の実績 複雑タスクの修正回数: 削減 注: ⾃社プロセス・環境での再測定を推奨。組織固有の初期値からの変化量を測定することが重要 # Page. 10 ![Page Image](https://bcdn.docswell.com/page/PJRG164NE9.jpg) まとめ︓実践⼿順 まずは最⼩の UI コンポーネントでスクショ → Codex 改良を試す agents.md を作成し、検証と出⼝条件を明⽂化 plans.md に計画・ToDo・判断ログを集約し、レビュー対象を可視化 チーム KPI を決めて効果測定（PR 数・所要時間・差分 NG など） # Page. 11 ![Page Image](https://bcdn.docswell.com/page/PEXXYM28EX.jpg) フロントエンド⽀部 #1 with あずもば 2025年12⽉11⽇ https://aid.connpass.com/event/374658/ # Page. 12 ![Page Image](https://bcdn.docswell.com/page/3EKW3GMLED.jpg) 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 # Page. 13 ![Page Image](https://bcdn.docswell.com/page/L731GNY6J5.jpg) Thank you for your attention!