目次

1. はじめに
2. 環境構築
3. AI に実装を依頼する
4. 所感
5. まとめ

1. はじめに

こんにちは。エンジニアの齋藤です。

昨今のSNSでは、ChatGPTやClaudeを使ってアプリを作ったという報告を目にすることがあります。一方で、「どんな手順で進めればいいのか」「どこまでAIに任せて、どこから自分で考えるべきか」 といった具体的なプロセスについては、まだ体系的な情報が少ないように感じます。

本記事では、Apple が Xcode 26 で導入した Claude統合機能 を活用し、実際にTODO管理アプリを作る過程を通じて、AIを使った開発の実態を具体的に解説 します。非エンジニアの方でも実践できるよう、環境構築から完成まで、すべてのステップを詳細に記載しました。

AI開発の可能性を体感していただくことで、チームの生産性向上や新規事業の迅速な検証といった、新しいアプローチのヒントを得ていただければ幸いです。

1-1. この記事で分かること

• Claude統合機能を利用したiOSアプリ開発環境の構築手順
• 非エンジニアでも理解できる開発フロー
• 実際に使えるTIPS

1-2. この記事では割愛すること

• Swift/SwiftUIの詳細な文法説明
• UIデザインの詳細
• App Storeへの公開手順
• CLAUDE.mdなどを利用したチーム開発での運用

1-3. 対象読者

• 非エンジニア: 自分でもアプリ開発してみたい方
• iOS開発初心者: AI支援機能を利用してiOS開発を学習したい方
• iOSエンジニア: 最新のAI支援開発を体験したい方
• プロジェクトマネージャー: AI開発の実態を把握したい方

1-4. 今回作成するアプリ

シンプルなTODO管理アプリを作成します。

主な機能

• TODO の作成・編集・削除
• 完了/未完了の切り替え
• 期日設定と期限アラート(色分け表示)
• ステータス管理(未着手/処理中/作業完了/完了)
• ドラッグ&ドロップでの並び替え
• データの永続化(アプリを閉じても保存)

所要時間
約 2〜3 時間(環境構築含む)

2. 環境構築

今回の検証に利用したMac、およびツールのスペックは以下の通りです。

macOS	Tahoe 26.1
チップ	Apple M1 Pro
メモリ	32GB
Xcode	26.1

2-1. Xcode のインストール

1. App Storeアプリ を開く
2. 検索で「Xcode」を入力
3. 「入手」をクリック
4. ダウンロード完了まで待つ (10GBほどあるため、回線速度によっては30分ほどかかる場合があります)

2-2. Claude統合機能 の設定

Xcodeを起動して、設定画面を開く

1. メニューバーから Xcode > Settings... をクリック(⌘,)
2. 設定ウィンドウが開きます
3. 左メニューのIntelligenceを選択

Claudeアカウントでログイン

1. 「Sign In...」をクリックして、お手持ちのClaudeアカウントで認証してください
2. 接続要求の画面が表示されたら、「承認する」をクリック

2-3. プロジェクトの作成

新規プロジェクトを作成

1. Xcode を起動
2. "Create New Project" をクリック
3. テンプレート選択画面で:
   • iOS を選択
   • App を選択
   • Next をクリック

プロジェクト設定

以下の項目を入力します:

項目	設定内容	説明
Product Name	SampleTodoApp	アプリの名前
Team	(自分の Apple ID)	開発者アカウント
Organization Identifier	com.yourname	任意の識別子
Interface	SwiftUI	UI構築用のフレームワークを選択します。 SwiftUIかStoryboardを選択可能。
Language	Swift	そのまま
Testing System	None	今回は不要
Storage	None	今回は不要

※ Organization Identifier は逆ドメイン形式(com.会社名.アプリ名)が一般的ですが、個人開発なら jp.yourname.SampleTodoApp のような形式で問題ありません。

プロジェクトの保存先を選択

1. 任意のフォルダを選択
2. "Create Git repository" にチェック(バージョン管理用、推奨)
3. Create をクリック

これでプロジェクトが作成され、Xcode のメイン画面が開きます。

3. AI に実装を依頼する

ここから実際に実装していきます。直接コードを書かずに アプリを完成させます。

3-1. 開発フロー

下記の開発フローで進めます。
肝は、要件定義をもとに全体を一括実装したあとに、個別に細かい部分を修正していくというところになります。

1. 要件定義(必要に応じて設計レベルまで)を作成する
2. 前段で作成した要件定義をXcodeのCoding Assistantに読み込ませる
3. Coding Assistantがコードを自動生成
4. シミュレータで実行
5. エラーや想定と異なる箇所があれば、個別にCoding Assistant経由でコードを修正

3-2. 要件定義の作成

まずは、作りたいアプリの要件を整理します。これが最も重要なステップです。

※ 重要: 要件定義の作成自体も、生成AI(ClaudeやChatGPT)を積極的に活用しましょう。アイデアを箇条書きで伝えるだけで、AIが構造化された要件定義を作成してくれます。

要件定義の作り方

アイデアを簡単に箇条書きする

まず、作りたいアプリのイメージを箇条書きで整理します:

作りたいアプリ: TODO管理アプリ

基本的な機能:
- TODOの追加・編集・削除
- 完了/未完了の管理
- 期限の設定
- 並び替え

欲しい機能:
- ステータス管理(未着手、処理中など)
- 期限が近いTODOを色分け表示
- データはアプリを閉じても保存される

AIに要件定義の作成を依頼

上記の箇条書きを Claude に渡して、要件定義書を作ってもらいます:

以下のアイデアをもとに、iOSアプリ開発用の詳細な要件定義書を作成してください。

【要件定義書に含めてほしい項目】
- アプリ概要
- 機能要件(画面ごとに整理)
- UI/UX仕様
- データ管理(データモデル、永続化方法)
- 技術仕様
- 画面フロー
- ファイル構成

【アイデア】
[上記の箇条書きを貼り付け]

SwiftUIを使用したネイティブiOSアプリとして実装したいです。

生成された要件定義を確認・修正

AIが生成した要件定義を確認し、必要に応じて修正を依頼します:

要件定義ありがとうございます。
以下の点を修正してください:

- ステータスは4段階(未着手/処理中/作業完了/完了)にしたい
- 期限が過ぎたTODOは赤、3日以内は橙色で表示したい
- ドラッグ&ドロップで並び替えできるようにしたい

このように、対話しながら要件定義を磨き上げることで、非エンジニアでも実装可能なレベルの詳細な仕様書が完成します。

完成した要件定義のサンプル

上記のプロセスで作成された要件定義の例を以下に示します:

# SampleTodoApp 要件定義書

## 1. 概要

### 1.1 アプリケーション名
SampleTodoApp

### 1.2 目的
日々のタスクを効率的に管理するためのTODO管理アプリケーション。作成、編集、削除、ステータス管理などの基本機能を備えたiOSネイティブアプリケーション。

### 1.3 対象プラットフォーム
- iOS（SwiftUI使用）

---

## 2. 機能要件

### 2.1 TODO一覧表示機能

#### 2.1.1 基本表示
- TODOアイテムをリスト形式で表示
- 各アイテムに以下の情報を表示：
  - タイトル
  - 完了/未完了チェックボックス
  - ステータスバッジ（カラー付き）
  - 作成日
  - 期日（設定されている場合）

#### 2.1.2 空状態
- TODOが0件の場合、空状態画面を表示
- メッセージ：「TODOがありません」
- システムアイコン：checklist
- 説明文：「右上の + ボタンで新しいTODOを追加してください」

#### 2.1.3 期日表示の色分け
- **赤色**：期日超過
- **オレンジ色**：期日まで3日以内
- **グレー色**：通常（4日以上先）

#### 2.1.4 完了済みアイテムの表示
- タイトルに取り消し線を表示
- チェックマークアイコンを緑色で表示
- テキストカラーをセカンダリカラーに変更

### 2.2 TODO追加機能

#### 2.2.1 入力項目
**基本情報セクション：**
- タイトル（必須）：テキストフィールド
- ステータス：ピッカー（デフォルト：未着手）

**日付セクション：**
- 作成日：日付ピッカー（デフォルト：現在日時）
- 期日設定トグル
- 期日：日付ピッカー（トグルON時のみ表示、作成日以降の日付のみ選択可能）

**説明セクション：**
- 説明：テキストエディター（複数行入力可能、高さ150〜200pt）

#### 2.2.2 バリデーション
- タイトルが空の場合、保存ボタンを無効化
- 保存ボタンの背景色を変更（無効時：グレー、有効時：ブルー）

#### 2.2.3 UI構成
- ナビゲーションタイトル：「新規TODO」
- キャンセルボタン（左上）
- 保存ボタン（画面下部固定、フルワイド）
- スクロール可能なフォーム部分

### 2.3 TODO編集機能

#### 2.3.1 編集可能項目
- タイトル
- ステータス
- 期日（設定/解除/変更）
- 説明

#### 2.3.2 編集不可項目
- 作成日（表示のみ、グレーアウト）

#### 2.3.3 UI構成
- ナビゲーションタイトル：「TODOを編集」
- キャンセルボタン（左上）
- 削除ボタン（右上、赤色のゴミ箱アイコン）
- 保存ボタン（画面下部固定）

#### 2.3.4 削除機能
- 削除ボタンタップ時、確認アラートを表示
- アラートメッセージ：「『[タイトル]』を削除しますか？この操作は取り消せません。」
- ボタン：「キャンセル」「削除」（破壊的アクション）

### 2.4 TODO操作機能

#### 2.4.1 完了/未完了切り替え
- チェックボックスタップで即座に状態を切り替え
- アニメーション付きで表示を更新

#### 2.4.2 並び替え
- 編集モード時にドラッグ&ドロップで順序変更可能
- 変更内容は自動保存

#### 2.4.3 削除
- スワイプ削除に対応
- 編集モード時の削除ボタンにも対応

#### 2.4.4 詳細表示
- リストアイテムタップで編集画面へ遷移

### 2.5 データ管理機能

#### 2.5.1 データ永続化
- UserDefaultsを使用してデータを保存
- JSON形式でエンコード/デコード

#### 2.5.2 自動保存タイミング
- TODO追加時
- TODO更新時
- TODO削除時
- TODO並び替え時
- 完了状態変更時

---

## 3. データモデル

### 3.1 TodoItem構造体

```swift
struct TodoItem: Identifiable, Codable {
    let id: UUID                // 一意識別子
    var title: String           // タイトル（必須）
    var isCompleted: Bool       // 完了フラグ
    let createdAt: Date         // 作成日時
    var dueDate: Date?          // 期日（オプショナル）
    var description: String     // 説明
    var status: TodoStatus      // ステータス
}
```

### 3.2 TodoStatus列挙型

4つのステータスを定義：

| ステータス | 表示名 | カラー | 
|-----------|--------|--------|
| notStarted | 未着手 | グレー |
| inProgress | 処理中 | ブルー |
| workCompleted | 作業完了 | オレンジ |
| completed | 完了 | グリーン |

---

## 4. UI/UX要件

### 4.1 画面構成

#### 4.1.1 一覧画面（ContentView）
- NavigationView構造
- ツールバー：
  - 左側：編集ボタン（日本語表示）
  - 右側：追加ボタン（+アイコン）
- リスト表示エリア
- 上部セーフエリアに16ptのスペーシング

#### 4.1.2 追加/編集画面
- NavigationStack内でシート表示
- ScrollView + Form構造
- 固定された下部ボタンエリア
- フォーム最小高さ：700pt

### 4.2 カラースキーム
- システムカラーを使用（ダークモード対応）
- ステータスバッジの背景：対応カラーの10%透明度
- 保存ボタン有効時：ブルー
- 保存ボタン無効時：グレー
- 削除ボタン：レッド

### 4.3 アクセシビリティ
- EditButtonにロケール設定（ja_JP）を適用
- 日付フォーマットは日本語形式（yyyy/MM/dd）

---

## 5. 技術要件

### 5.1 開発環境
- 言語：Swift
- フレームワーク：SwiftUI
- アーキテクチャ：MVVM
- 非同期処理：Swift Concurrency（MainActor使用）

### 5.2 使用技術
- **データバインディング**：@Published, @StateObject, @ObservedObject
- **ナビゲーション**：NavigationView, NavigationStack
- **モーダル表示**：Sheet
- **状態管理**：@State, @Environment
- **データ永続化**：UserDefaults + Codable

### 5.3 ViewModel（TodoViewModel）
- @MainActorで宣言（UIスレッドで実行）
- ObservableObjectプロトコル準拠
- 提供メソッド：
  - `addTodo()` - TODO追加
  - `updateTodo()` - TODO更新
  - `deleteTodo()` - TODO削除
  - `moveTodo()` - TODO並び替え
  - `toggleCompletion()` - 完了状態切り替え

---

## 6. 制約事項

### 6.1 データ保存
- UserDefaultsを使用するため、大量データには不向き
- データ容量制限に注意

### 6.2 日付選択
- 期日は作成日以降の日付のみ選択可能
- 作成日は編集不可

### 6.3 バリデーション
- タイトルが空の場合は保存不可

---

## 7. 今後の拡張可能性

### 7.1 検討される機能
- カテゴリー/タグ機能
- 検索・フィルター機能
- 優先度設定
- 通知機能（期日アラート）
- iCloudによるデータ同期
- SwiftDataへの移行（より高度なデータ管理）
- ウィジェット対応
- 添付ファイル機能

### 7.2 改善案
- オフライン対応の強化
- パフォーマンス最適化（大量データ対応）
- アニメーション強化
- アクセシビリティの向上（VoiceOver対応など）

---

## 8. 非機能要件

### 8.1 パフォーマンス
- リスト表示：スムーズなスクロール
- データ保存：同期的に実行（データ量が少ないため許容）

### 8.2 ユーザビリティ
- 直感的な操作性
- 即座のフィードバック
- エラー時の適切なメッセージ表示

### 8.3 保守性
- MVVMアーキテクチャによる責務分離
- Codableプロトコルによるシリアライズ処理
- プレビュー機能による開発効率化

---

## 9. ファイル構成

```
SampleTodoApp/
├── SampleTodoAppApp.swift      # アプリケーションエントリーポイント
├── Models/
│   └── TodoItem.swift           # データモデル定義（TodoItem, TodoStatus）
├── ViewModels/
│   └── TodoViewModel.swift      # ビジネスロジックと状態管理
└── Views/
    ├── ContentView.swift        # TODO一覧画面
    ├── AddTodoView.swift        # TODO追加画面
    └── EditTodoView.swift       # TODO編集画面
```

3-3. Claudeへの実装依頼

XcodeのCoding Assistantを表示する

左ペインのCoding Assistantをクリックします

プロンプトを入力

以下のプロンプトをCoding Assistant経由で Claude に送信すると、必要なファイルが自動生成されます。

以下の要件定義に基づいて、SwiftUIでiOS TODO管理アプリを実装してください。

【重要な指示】
1. すべてのファイルを完全な形で出力してください
2. 各ファイルのパス（例: Models/TodoItem.swift）を明示してください
3. 実装の際、適切なフォルダ構成を提案してください
4. すべてのコードにコメントを付けてください（日本語で）
5. エラーハンドリングを適切に実装してください

【要件定義】

[上記の要件定義をそのまま貼り付け]

3-4. ビルドと動作確認

ファイルが生成されたら、いよいよ実行しましょう。

ビルド

⌘ + B (Command + B) を押してビルドします。

エラーが出た場合:

1. Coding Assistantで、Claude に以下のように伝える:

発生しているビルドエラーを解消して。

2. 該当ファイルが修正される
3. 再度ビルドを実行する

※ Coding AssistantがXcode上のエラー情報などを直接読み取るため、エラー内容の添付は不要です

シミュレータで実行

1. Xcode ツールバーでデバイスを選択(例: iPhone 16e)
2. ⌘ + R (Command + R) を押す
3. シミュレータが起動

動作確認

シミュレータが起動すると、自動的にアプリが立ち上がります。
要件定義の仕様をもとに、動作確認を行いましょう。

TODO一覧 (ブランク)	TODO一覧	TODO一覧 (編集)
TODO新規作成画面	TODO編集画面

3-5. 細かい調整

動作確認後、気になる点があれば、Coding AssistantからClaudeに伝えます。

調整例:

現在のアプリでは、期日が表示される位置が少し窮屈です。
TODORowのレイアウトを調整して、期日を右端に表示するように変更してください。

指摘をClaudeへ送信 → Coding Assistantが自動修正 → 確認

このサイクルを繰り返すことで、理想のアプリに近づけます。

4. 所感

今回の開発を通しての所感をまとめます。

4-1. 要件定義が8割

曖昧な要件だと、AIは「推測」で埋めます。後から「これも欲しい」と追加すると、既存コードとの整合性が取れず大幅な修正が必要になる場合もあります。

本記事でも言及しているように、要件定義の作成自体もAIに任せることができます。ぜひ有効活用してください。

悪い例:

TODO管理アプリを作ってください

良い例:

[詳細な要件定義を提示]
- 画面構成(一覧、追加、編集)
- 各画面の具体的な機能
- データ構造(どんな情報を持つか)
- UI/UXの仕様(色分け、アニメーションなど)

4-2. 開発方針と実装規模

今回実装したアプリは比較的小さい規模だったため、「一括実装→修正」の方針を採用しました。
それでは、実装規模が大きくなったときは、どのような開発方針を採るべきでしょうか。
規模に応じて、適切な粒度で実装スコープを分割することが重要そうです。

アプリ規模	画面数	推奨アプローチ
小規模	1〜5画面	一括実装
中規模	6〜14画面	機能単位で分割
大規模	15画面以上	機能単位分割 / 段階的実装(MVP→拡張)

4-3. スクリーンショットの活用

Claudeは画像解析も可能です。
言葉で説明しづらいUIの改善も、スクリーンショットで伝えることができます。

[アプリのスクリーンショットを添付]

このUIをもっと洗練させてください。
具体的には、余白を増やし、フォントサイズを調整したいです。

5. まとめ

本記事では、非エンジニアでもClaudeを活用すれば、わずか2〜3時間でiOSアプリを開発できることを実証しました。
ここで重要なのは「詳細な要件定義の作成」と「AIへの適切な指示」でした。
非エンジニアにとっても、自らアイデアを形にできる新しい可能性が開かれました。
この機会に、ぜひ他の生成AIサービスも含めて、色々お試しいただけますと幸いです。