Claude Code講座 - 第19章：Claude CodeでiOSアプリを作る

oz

Swift、SwiftUI、iPhone向けアプリの構築

かつて、ネイティブのiOSアプリを作るには、Objective-CやSwift/SwiftUIを学び、Xcodeという学習曲線が崖のように切り立ったIDEを理解し、Apple独自のフレームワークやデザインパターンを把握し、App Storeへの提出プロセスを乗り越える必要がありました。そのひとつひとつが、それだけで大きな時間投資でした。

Claude Codeを使えば、この学習曲線は劇的に緩やかになります。iOS特有の概念をいくつか理解しておく必要はまだありますし、XcodeがインストールされたMacも必要ですが、動くSwiftコードを生み出すために必要な手作業の量は、桁違いに減ります。しかしSwiftやiosプログラミングの基本知識は持っておく必要があります。

この章は、iPhone上で動くアプリを作りたい人のためのものです。セットアップから、実際の作業の進め方、そしてClaude CodeでiOS開発を効果的に進めるための具体的なテクニックまで扱います。

19-1. 必要なもの

Mac — iOSアプリの構築はmacOS上でしか行えません。これに回避策はありません。Appleの開発ツール一式は、Apple自身のプラットフォームでしか動きません。

Xcode — Appleの開発環境です。Mac App Storeから無料でダウンロードできます。容量は約12GBあり、ダウンロードに時間がかかるので、これは一番先に始めておきましょう。

Apple Developer Account（実機テストとApp Store公開用）— シミュレータでの開発・テストは無料です。実機への配布や、App Storeへの公開には、年間99ドル（日本円は為替変動あり）かかります。

iOS Simulator — Xcodeに付属しています。Mac上で仮想のiPhoneを動かし、実機がなくてもアプリ（一部機能は対象外）を実行できます。

19-2. 2つの道：SwiftUIとReact Native

iOS開発に踏み込む前に、選ぶべき道があります。

SwiftUIは、Appleのネイティブなユーザーインターフェースフレームワークです。iOS上で自然に馴染むアプリを作れ、AppleのすべてのAPIにアクセスでき、パフォーマンスも最良です。トレードオフは、Appleのプラットフォーム向けにしか作れないことです。そのコードはAndroidでは動きません。

React Nativeは、JavaScript（Webプロジェクトで使っているのと同じ言語）を使って、iOSとAndroidの両方で動くアプリを作れます。これまでClaude CodeでWebアプリを作ってきていて、モバイルにも進出したいなら、React Nativeのほうが馴染みやすく感じられるでしょう。トレードオフは、ネイティブのiOS開発なら簡単なことが、React Nativeでは少し扱いにくかったり、アプリの手触りがわずかにネイティブらしさを欠いたりすることがある点です。

この章でのおすすめは、まずSwiftUIから始めることです。より良質なiOSアプリを作れますし、Claude CodeはSwiftUIを非常に得意としています。Androidへの対応が必要になったら、そのときにReact Nativeを検討し直しましょう。＊Swiftは常に進化しており、Claude Codeの知識が追いついていない場合も多くあります。そのためコンパイルエラーを出力したり、正常に機能しないアプリが生成されるケースが大変多いです。

19-3. 初めてのSwiftUIアプリ

Xcodeでセットアップする

  1. Xcodeを開く

  2. 「Create a new Xcode project」をクリックする

  3. iOSの下にある「App」を選択する

  4. 名前をつける（スペースなし）、組織識別子は「com.あなたの名前」のような形式にする

  5. 言語が「Swift」、インターフェースが「SwiftUI」になっていることを確認する

  6. 保存場所を選び、「Create」をクリックする

Xcodeが、基本的なContentView.swiftファイルを含むプロジェクトを作成してくれます。ここが出発点です。

Claude Codeセッションを開始する

ターミナルを開き、Xcodeプロジェクトのディレクトリに移動して、Claude Codeを起動します。

cd ~/path/to/your/xcode-project
claude

ここで、文脈を設定します。

XcodeでSwiftUIを使ったiOSアプリを作っています。プロジェクトはこの
ディレクトリにあります。メインのエントリーポイントは
［アプリ名］App.swiftで、メインのビューはContentView.swiftです。

習慣トラッカーアプリを作りたいです。ユーザーができることは：

1. 記録したい習慣を追加する（名前、色、1日の目標）
2. 毎日、習慣を「達成した」とチェックする
3. 習慣ごとに、連続達成日数を確認できる
4. 習慣ごとに、直近30日分の履歴カレンダーを見られる

コードを書き始める前に、アーキテクチャを提案してください。
どういうSwiftファイル構成にするか、必要なデータモデルは何か、
データはどう永続化するか（シンプルにUserDefaultsか、もっと
良い方法があれば提案してください）。

Claude Codeは、理にかなったアーキテクチャを提案してくれるはずです。おそらく、いくつかのモデルファイル、SwiftDataまたはUserDefaultsを使ったデータ永続化層、そして一連のビュー、という構成になります。

19-4. Swift未経験者のための、SwiftUIの基本

Swiftの専門家になる必要はありません。ただ、3つの概念を押さえておくだけで、Claude CodeによるiOS開発を、格段にうまく導けるようになります。

ビュー（View） SwiftUIでは、画面上のすべてがビューです。ボタンもビューです。テキストラベルもビューです。あなたの画面全体も、小さなビューが組み合わさってできた、ひとつの大きなビューです。見た目がおかしいときは、たいていビューの設定に問題があります。

状態（State） SwiftUIはリアクティブなモデルを採用しています。データが変化すると、ビューは自動的に更新されます。UIの更新を引き起こすデータには、@State（シンプルなローカルの値の場合）や@ObservableObject（共有データの場合）といった目印が付けられます。画面上で更新されるべきものが更新されていないときは、たいてい、そのデータが状態として正しく扱われていません。

プレビュー（Preview） SwiftUIには、コードを編集している最中に、Xcodeがビューのライブプレビューを表示してくれる、優れた機能があります。Xcode画面の右側にある「Canvas」パネルがそれです。これを頻繁に活用してください。保存するたびに自動で更新される、専用のブラウザを持っているようなものです。

これらの概念を押さえておけば、もっと的確なフィードバックを出せるようになります。

新しい習慣を追加しても、習慣一覧の画面が更新されません。habits配列が
@Stateとして正しく設定されていないか、監視の仕組みがうまく
機能していないのではないかと思います。HabitListView.swift を読んで、
状態管理の問題を修正してください。

19-5. 画面をひとつずつ作っていく

/frontend-design 習慣トラッカーのホーム画面を作ってください。デザインの
方針は次の通りです：

- 習慣の一覧を表示し、それぞれ今日の達成状況（チェック済みか未チェックか）
  がわかるようにする
- 各行の構成：色付きのドット、習慣名、連続達成日数バッジ（🔥12日）
- タップすると、今日分の達成／未達成を切り替えられる
- 長押しすると、オプション（編集、削除）が表示される
- 右下に、新しい習慣を追加するための、浮遊する「＋」ボタンを配置する
- ナビゲーションタイトルは「今日」とし、サブタイトルに今日の日付を表示する
- AppleのHuman Interface Guidelinesに沿った、清潔感のあるiOSネイティブな
  雰囲気にしてください

「Apple's Human Interface Guidelines（HIG）」というフレーズが重要です。これにより、Claude Codeは、Appleのデザイン原則——標準フォント（SF Pro）、標準的な余白、標準的な操作パターン——に従うようになります。HIGに沿ったアプリは、iPhoneユーザーにとって、直感的に馴染みやすいものになります。

19-6. ネイティブならではのiOS機能

ネイティブアプリを作る価値の核心は、Webアプリでは手が届かない、ハードウェアやOSの機能にアクセスできることにあります。

プッシュ通知

ここから先は

2,727字

¥ 300

ログイン

この記事が気に入ったらチップで応援してみませんか？