Codex が変える開発体験！設定ファイル生成から Swift UI 改良まで

Codex Meetup Japan LT Codex が変える開発体験︕ 設定ファイル⽣成から Swift UI 改良まで 鈴⽊ 章太郎 Executive Evangelist, FPT Japan Holdings

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

• https://www.docswell.com/user/shosuz

GitHub Copilot こんな課題ありませんか プロジェクトごとに Copilot の動きがバラバラ… 設定やプロンプトが属⼈化 同じルールを毎回チームで共有・適⽤するのが⾯倒 GitHub Copilot 新機能を使って 「設定ファイル地獄」からそろそろ卒業したい

解決策︓copilot-instructions.md で⼀発標準化 プロジェクトルートに1ファイル置くだけ 命名規則や開発ルール、プロンプトも Markdown で管理 Codex との連携も可能 次は実際の設定例 & デモ

copilot-instructions.md とは︖ GitHub Copilot 新機能の⼀つ VS Code プロジェクト内の 設定ファイル 配置場所︓ .github/copilot-instructions.md 従来は 毎回チャットや設定で指⽰を⼿⼊⼒ Git で共有すれば全員が同じ品質・効率で作業可能に プロジェクト・チームの規約を⼀括⾃動化

プロジェクト内のファイル構造イメージ プロジェクト/ .github/ copilot-instructions.md src/ README.md .github フォルダ の中に置くだけで OK、既存の VS Code 設定と併⽤可能 チームで共有する場合は Git 管理すれば全員で活⽤できる

分析対象プロジェクトの例 1. 実践的なサンプルプロジェクトの例 2. Codex 分析のポイント • API 設計パターン︓REST API sample-web-api/ ├── .github/ • セキュリティ要素︓認証ミドルウェア │ └── (ここに copilot-instructions.md を⽣成) • テスト構造︓Jest 形式 ├── src/ │ ├── controllers/ • 技術スタック︓Node.js + Express │ │ └── userController.js │ ├── models/ │ │ └── user.js │ └── middleware/ │ └── auth.js ├── tests/ 事前準備: │ └── user.test.js Node.js v18+, npm install -g @openai/codex, ├── package.json OpenAI API キー設定 └── README.md Codex SDK がプロジェクトを⾃動分析し、最適な設定ファイルを⾃⼰⽣成

【デモ】 Codex SDK で設定ファイルが⾃⼰進化 $ codex exec "このプロジェクトを分析して最適な copilot-instructions.md を⽣成して" 基本設定 進化版（⾃動検出︕） # Copilot Instructions # Copilot Instructions 会社の開発規約に従ってください。 会社の開発規約に従い、TypeScript型安全性を重視してください。 ## Custom Prompts - ./prompts/general.prompt.md ## Custom Prompts - ./prompts/general.prompt.md - ./prompts/security_patterns.prompt.md ## Settings - Language: ja-JP - Context: standard ## Settings - Language: ja-JP - Context: extended ## API Endpoints - /api/users - /api/products Codex SDK がプロジェクト 固有のルールを⾃動検出・追加︕ ## Security Patterns - OAuth - CSRF対策 ## TypeScript Rules - strictNullChecks: true - noImplicitAny: true

【デモ2】 Swift UI プレビュー → スクリーンショット → Codex 連携フロー
STEP 1

基本的な Swift UI コード作成

import SwiftUI
struct ProductCard: View {
var product: Product

}

var body: some View {
VStack {
Text(product.name)
.font(.headline)
Text("¥¥(product.price)円")
.font(.subheadline)
}
.padding()
}

struct Product {
let name: String
let price: Int
}
struct ContentView: View {
let product = Product(name: "サンプル商品", price: 1000)

}

var body: some View {
ProductCard(product: product)
}

#Preview {
ContentView()
}

•
•

スクリーンショット取得
基本的な Swift UI
コードのプレビュー画⾯を
キャプチャ

# Codex コマンド
codex exec --skip-git-repo-check
"現在のContentView.swiftにある
ProductCard viewを改良してください。
重要な制約︓
1. 既存のProduct構造体（name:
String, price: Int）はそのまま使⽤す
ること
2. ProductCardEnhancedという新し
いViewを作成
3. @Stateによる状態管理
（isFavorite）を追加
4. より洗練されたデザイン（グラデーショ
ン、シャドウ、ボタンアクション）
5. 画像は表⽰せず、テキストベースのデ
ザインに
6. 既存のContentView.swiftに追記
する形で、ProductCardと
ProductCardEnhancedの両⽅が共
存できるようにする
元のProduct構造体の定義を変更しな
いでください。"

STEP 2
STEP 2

改良・拡張された SwiftUI コード

// Codex による改良・拡張版
import SwiftUI
struct ProductCard: View {
var product: Product

}

var body: some View {
VStack {
Text(product.name)
.font(.headline)
Text("¥¥(product.price)円")
.font(.subheadline)
}
.padding()
}

struct Product {
let name: String
let price: Int
}
struct ProductCardEnhanced: View {
var product: Product
@State private var isFavorite = false

…

private var gradient: LinearGradient {
LinearGradient(
colors: [
Color(red: 0.25, green: 0.34, blue: 0.78),
Color(red: 0.56, green: 0.22, blue: 0.55)
],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
}

なぜこのワークフローに価値があるのか︖ 「最初から SwiftUI で書けばいいじゃん...」 学習・教育効果 ︓AI が UI 設計の理由を説明、良い設計の考え⽅を学べる 複数パターン⽣成 ︓同じスクショから異なるデザインアプローチを⼀括⽣成 プラットフォーム間移植 ︓SwiftUI → React Native/Flutter/Web に変換 コードリファクタリング ︓既存 UI を最新 API で再実装、最適化 チーム開発標準化 ︓copilot-instructions.md と連携し企業標準に準拠 「⾒た⽬」は同じでも、コードの品質・保守性・拡張性が劇的に向上

⼿作業 vs Codex ⽣成︓劇的な違い Before（⼿動 .md 作成） After（Codex 魔法） JSON 構⽂理解 たった⼀⾔ 敷居⾼め 構⽂エラーと格闘する時間 設定調査 「Codex さん、設定ファイル作って」 30分以上 正しいオプション値を調べる苦労 試⾏錯誤 3秒で完成 完璧な出⼒ エラー0 構⽂も最適化もお任せ 複数回修正 「あれ、動かない...」と繰り返す ⼿動で書くの︖ 先回り提案 想定外の改善も 思いつかなかった最適設定も提案 ✨ 設定ファイル作成 直ちに⽣成完了︕ ✨

📹 さらに⾼度な活⽤︓OpenAI Codex チームの最新ワークフロー スナップショットテスト⾃動化 ⽣きたドキュメント⼿法 • SwiftUI プレビュー → ⾃動画像⽣成 → ピクセルパーフェクト検証 • agents.md での指⽰⾃動化 • 「最後の10%で時間の90%」問題の完全解決 • plans.md による設計書⾃動⽣成 • 15000⾏リファクタリングを7時間セッションで • 1億5000万トークン処理の記録保持者 詳しくはYouTube 動画を参照︓ コードレビュー統合システム • /review コマンドで AI が依存関係全解析 • OpenAI 社内で92%のエンジニアが活⽤ Shipping with Codex https://www.youtube.com/watch?v=Gr41tYOzE20

• https://www.youtube.com/watch?v=Gr41tYOzE20

まとめ & 明⽇から︕ copilot-instructions.md なら⼀撃で標準化 チーム⼒を ⼀気に底上げ Codex ユーザーも今すぐ導⼊可能 → 今⽇から設定して、ぜひ⽣産性 UP 体験を

Thank you for your attention!