◉ AIモデル/2026-04-10中級

Rork AI ネイティブアプリ生成の品質を上げる SwiftUI 出力対策

Rork AI が生成する SwiftUI コードの品質に悩んでいるあなたへ。高品質なプロンプト、SwiftUI 特有のトラブル解決、Rork Companion での反復改善ワークフローを完全マスターして、本番品質のネイティブアプリを完成させます。

rork-ai³ swiftui¹¹ native-app³ quality prompt-engineering³ rork-max⁴¹

✦ プレミアム記事

Rork AI でネイティブアプリを生成する魅力は「テキスト指示だけで SwiftUI コードが完成する」ことです。しかし、実際に使ってみると、生成されたコードにバグがあったり、UI が崩れたり、期待と異なるレイアウトになることは少なくありません。

Rork AI のネイティブ生成の仕組み

Rork Max の役割

Rork Max は、AI エージェントとしてあなたの指示を理解し、SwiftUI のネイティブコードを自動生成するサービスです。生成されるコードの品質は、あなたの指示（プロンプト）の質に大きく左右されます。

生成の流れ:

Rork Max でアプリの概要を入力（例：「SNS フィード画面」）
Rork AI があなたの要件を解釈して SwiftUI コードを生成
ローカル環境で実行・テスト
問題があれば Rork Companion で修正指示を出す
新しいバージョンのコードが生成される
これを繰り返して完成度を上げていく

この循環が、Rork AI でのアプリ開発の本質です。

Rork Companion との連携

Rork Companion は、生成されたアプリをスマートフォンで実行しながら、スクリーンショットやビデオを Rork Max に送って修正指示を出すツールです。

Rork Companion の利点:

ビジュアルフィードバック：実際の見た目を AI に見せることで、より正確な修正が可能
段階的改善：小さな修正を積み重ねて、目指すデザインに近づけられる
リアルタイム動作確認：複雑なアニメーションや状態遷移も実機で確認可能

Rork AI は、テキスト指示だけでなく、ビジュアル情報からも学習できます。つまり「見た目の違い」をスクリーンショットで示すことが、最も効果的な修正指示になります。

よくある品質問題と原因分析

ビルドエラーが発生する

症状: コードを Xcode でビルドするとエラーが出て、コンパイルできません。

原因:

View の戻り値が明示されていない
- SwiftUI の View プロトコルは、some View という戻り値を要求
- Rork AI が自動で補っていない場合がある
State 変数の型が不完全
- @State var count などと型注釈なしで宣言されている
- @State var count: Int = 0 のように明示する必要がある
Optional unwrap の忘れ
- API レスポンスや画像読み込みで Optional 型が返される
- 適切に ?? や if let で処理していない

対処例:

// 誤り：戻り値型が不明確
var body {
  VStack {
    Text("Hello")
  }
}
 
// 修正：some View を明示
var body: some View {
  VStack {
    Text("Hello")
  }
}

修正指示の例：

このコードが Xcode でコンパイルエラーになっています：「View の body プロパティが some View を返す必要があります」。以下のように修正してください：
var body: some View {
  // ここに UI コード
}

UI が崩れている（レイアウト問題）

症状: スマートフォンの画面で UI が期待と異なるレイアウトになっています。

原因:

画面サイズに対応していない
- Rork AI が固定サイズで UI を生成している（例：width: 300）
- 異なるデバイスサイズに対応していない
動的テキスト長に対応していない
- 短いテキストでは OK だが、長いテキストが入ると UI が崩れる
SafeArea を考慮していない
- ノッチ付き iPhone でコンテンツが切れている

対処例:

固定サイズの代わりに、GeometryReader や padding を使った相対サイズ指定：

// 誤り：固定サイズ
VStack {
  Text("Hello").frame(width: 300)
}
 
// 修正：相対サイズ
VStack {
  Text("Hello").frame(maxWidth: .infinity)
}

修正指示の例：

スクリーンショット（添付）を見てください。テキスト「[長い文字列]」が画面右側にはみ出ています。以下のようにしてください：

各テキスト要素に lineLimit(2) を追加

VStack/HStack に適切な spacing と padding を設定

iPhone 12 mini〜iPhone 16 Pro Max で動作確認

機能が中途半端・未実装

症状: ボタンをタップしても何も起こらない、フォームの検証がない、リスト読み込みが失敗します。

原因:

UI だけで、ロジックが実装されていない
- Rork AI が状態管理を忘れている
- クロージャが empty で、処理が書かれていない
API 連携が簡略化されている
- ダミーデータで動作する UI のみ生成
- 実際の API エンドポイントに接続していない
エラーハンドリングが不足
- ネットワークエラー時の画面遷移が定義されていない

対処例:

修正指示では「動作の詳細」を具体的に指示：

ボタン「保存」をタップしたとき、以下の処理を実行してください：

バリデーション：入力値が空でないか確認

ローディング表示：「保存中...」と表示

API 呼び出し：POST /api/save に JSON を送信

成功時：アラート「保存されました」を表示して画面を閉じる

エラー時：アラート「エラー: [サーバーエラーメッセージ]」を表示

パフォーマンスが悪い（遅い・重い）

症状: アプリが重たく、リスト表示時にカクついたり、スクロールが引っかかります。

原因:

リスト各行で複雑な処理が実行される
- 画像のダウンロード・処理が行・描画のたびに走っている
- Rork AI がキャッシュを実装していない
State 更新が頻繁すぎる
- タイマーやアニメーション速度が高すぎる
不要な再描画
- 親 State の変更で、全子要素が再描画されている

対処例:

修正指示では「パフォーマンス要件」を明示：

このリスト画面のパフォーマンスを最適化してください：

画像は AsyncImage で非同期読み込み

リスト各行は LazyVStack に変更

セルレイアウトは equatable() で再描画を防止

API は最初の 20 件を読み込み、スクロール時に追加読み込み

✦

ここまでお読みいただきありがとうございます。

この記事の続きを読む

この先には、実装コードやベンチマーク結果など、実務でお役に立てる内容をご用意しています。このサイトは広告を掲載しておらず、サーバーや開発にかかる費用はメンバーの皆様のご支援で成り立っています。もしお役に立てていましたら、ご支援いただけますと大変ありがたいです。

この記事で得られること

✦Rork AIが生成するSwiftUIコードの品質に不満があった人が、出力を大幅に改善するプロンプト技法を身につけられる

✦ネイティブアプリ生成で繰り返しエラーに悩まされていた人が、よくある落とし穴を事前に回避できるようになる

✦Rork Companionを使いこなせていなかった人が、反復改善のワークフローを確立して開発速度を2〜3倍にできるようになる

Stripe による安全な決済 · いつでもキャンセル可能

✦

この記事を購入する

この先の内容をすべてお読みいただけます。一度のご購入で、いつでも何度でもアクセスできます。このサイトは広告を掲載しておらず、皆さまのご支援がサーバー費用などの運営を支えています。

または

メンバーシップなら全記事が読み放題 →

高品質なプロンプトの書き方

曖昧な指示が失敗の原因

最も一般的な失敗パターンは「曖昧なプロンプト」です。

ダメな例:

SNS のようなアプリを作ってください

何が起きるか:

Rork AI がイメージ）不確定）
Instagram を想定するのか Twitter を想定するのか判断不能
結果：ニッチなレイアウト、実装されていない機能、が生まれる

具体的な UI 仕様の書き方

良い例 1：要素別の詳細指示

フィード画面を作ってください。仕様は以下の通りです：

ナビゲーションバー：背景色 #2563EB、右側に「投稿」ボタン

フィード：ユーザー画像（プロフィール）、ユーザー名、投稿日時、テキスト、画像、いいね数・コメント数の順

各セル：カード型、コーナー半径 12pt、影（elevation 4）

リスト読み込み：下スクロール時に「さらに読み込み」アニメーション表示

データソース：ダミーデータ 10 件

このレベルの具体性があると、Rork AI が正確に解釈でき、修正指示の回数も減ります。

良い例 2：参考画像の活用

最も効果的なのは、目指すデザインの参考画像を見せることです。

修正指示の例：

参考画像（添付）のような見た目に変更してください：

ヘッダーは薄いグレー背景

テキストはサンセリフフォント（例：-apple-system）

ボタンは青色の rounded rectangle

余白は 16pt で統一

Rork AI は視覚情報に強いため、文字説明だけより、スクリーンショット + 修正指示の方が効果的です。

コンポーネント単位の指示

複雑なアプリは「コンポーネント」に分割して指示するのが効果的です。

例：段階的な構築

ユーザープロフィールセルコンポーネントを作成してください

画像（円形、80×80pt）、ユーザー名、フォローボタンで構成

次に、フィードセルコンポーネントを作成

プロフィール + テキスト + 画像 + アクションボタン（いいね、コメント、シェア）

最後に、フィード画面を組み立て

ScrollView で複数のセルを表示

この方法だと、各ステップで修正・確認でき、最終的な完成度が高くなります。

SwiftUI 特有のトラブルシューティング

Navigation（画面遷移）が動作しない

症状: ボタンをタップしても画面が遷移しない、または遷移アニメーションがおかしい。

原因:

NavigationLink が正しく宣言されていない
- iOS 16+ では NavigationStack を使う必要がある場合も
@State が画面遷移に紐付いていない
- Navigation 状態を管理する変数が未定義

修正指示の例:

「詳細」ボタンをタップすると詳細画面に遷移し、背中ナビゲーションボタンで戻る、という動作を実装してください。iOS 16+ 対応で NavigationStack を使ってください。

State・環境変数の管理エラー

症状: 入力フィールドに文字を入力できない、チェックボックスの状態が反映されません。

原因:

@State 変数がビューの外で定義されている
- 親ビューで定義された State を正しく子に渡していない
@Binding が使われていない
- 双方向バインディングが必要な場面で一方向参照だけ

修正指示の例:

TextFieldに入力した内容が保存されるように修正してください：

@State var inputText: String = "" を定義

TextField を $inputText にバインド

保存ボタンで inputText の値を処理

データバインディングエラー

症状: API から取得したデータが画面に表示されない、またはデータが古いまま更新されません。

原因:

@ObservedObject/@StateObject が宣言されていない
- ViewModel の変更が自動で View に反映されていない
ネットワークリクエストが実行されていない
- onAppear でデータ取得を指示していない

修正指示の例:

API（GET /api/feed）からデータを取得して表示してください：

ViewModelで @Published var items: [FeedItem] = [] を定義

画面表示時（onAppear）にAPIを呼び出し

取得結果を items に格納

リストで items を forEach で列挙

Rork Companion を使った反復改善ワークフロー

効果的なスクリーンショットフィードバック

Rork AI の最大の強みは、ビジュアルフィードバックから学習できることです。

ステップ 1：アプリを実行・スクリーンショット撮影

Rork Max → ビルド → iPhone シミュレータで実行 → スクリーンショット撮影

ステップ 2：問題点をアノテーション

撮影したスクリーンショットに、Markup（Mac の Preview、または iOS の Screenshot Markup）で矢印・テキストを追記：

例：

赤矢印で「このテキストが長すぎて右にはみ出ている」と指摘
緑矢印で「ここにボタンを追加」と指示

ステップ 3：Rork Companion で修正指示

スクリーンショット（添付）を見てください。以下を修正してください：

テキストが右にはみ出ている → 2 行表示 + 末尾「...」に設定

ボタンの間隔が狭い → 16pt 増幅してください

全体的に薄い灰色背景にしてください（現在は白）

段階的な改善サイクル

1回で完全に仕上げるのではなく、段階的に改善する方が、最終的な完成度は高くなります。

推奨フロー:

Day 1: 基本レイアウト完成
Day 2: 細かい UI調整（余白、フォントサイズ等）
Day 3: インタラクション実装（ボタン動作、画面遷移）
Day 4: API 連携（本物のデータ取得）
Day 5: エラーハンドリング、ローディング表示追加
Day 6: アニメーション・微調整
Day 7: 最終レビュー・App Store 提出準備

3〜4 日で本格的なアプリが完成することも珍しくありません。

バージョン管理のコツ

複数バージョンを並行開発している場合は、明確に名前を付けましょう。

例：

rork-ai-feed-v1.0-base          (基本レイアウト)
rork-ai-feed-v1.1-styling       (色・フォント調整後)
rork-ai-feed-v1.2-interaction   (ボタン動作実装後)
rork-ai-feed-v1.3-api           (API 連携完了)
rork-ai-feed-v2.0-release       (App Store 提出版)

Rork Max でバージョン管理ができれば、ロールバックも簡単です。

パフォーマンス・品質向上のテクニック

不要なコードの削除指示

Rork AI はときどき「実装されたが使われていない」コードを生成することがあります。

修正指示の例：

以下のコードを削除してください。未使用です：

debugPrint() 呼び出し全て

ViewModel の unused_ で始まるプロパティ

Import statement の中で使われていないもの

コンポーネント分割

複雑な View を複数の小さな Component に分割すると、再利用性と保守性が向上します。

指示例：

以下のコンポーネントに分割してください：

FeedCellView: フィードセルの全体（プロフィール + コンテンツ + アクション）

UserProfileView: ユーザー情報表示部分（画像 + 名前）

FeedContentView: 投稿テキスト・画像表示

FeedActionsView: いいね・コメント・シェアボタン

親の FeedView では、これらコンポーネントを組み立てるだけにしてください。

アクセシビリティ対応

App Store 審査でも加点されるのがアクセシビリティ対応です。

指示例：

アクセシビリティを追加してください：

全ボタンに .accessibilityLabel() で日本語説明を設定

アイコンボタンに .accessibilityHint() で機能説明を追加

色でのみ情報を表現していないか確認（カラーユニバーサル対応）

実践サンプル：SNS フィード画面を段階改善

初期指示（Day 1）

SNS フィード画面を生成してください。機能：

ダミーデータ（10 件）をリスト表示

各行：ユーザー画像、ユーザー名、投稿テキスト、いいね数表示

参考デザイン（添付 Instagram フィードスクリーンショット）に近い見た目

iOS 16+ 対応

初回レビュー→修正指示（Day 2）

スクリーンショット（添付）を確認しました。以下の修正をお願いします：

テキストサイズ：本文 16pt → 14pt に縮小

ユーザー画像：正方形 → 円形（コーナー半径 50%）

セル間隔：現在 4pt → 12pt に拡大

セルの角丸：なし → 8pt に設定

セル影：なし → elevation 2 に追加