インモビインモビ

Claude Codeが話題になっているのはたくさん知っているのですが、具体的にどうやるの⁉︎みたいな疑問がずっとあってわかってませんでした。
理由としてはターミナルのコマンドで入力していくタイプなのでいわゆるXcodeやAndroidStudioみたいなIDEと違っているので自分にはピンときてませんでした。
最近だとCursorみたいに扱うタイプのAIエージェントですね。
こちらでは、Claude Codeを使用する際のセットアップとCursorとの連携、モバイルアプリ開発の環境構築を説明していきたいと思います。

基本的にiOSアプリをメインに開発してるのでこちらではXcodeを使用したやり方がメインになります。とはいえ、応用はできると思うのでモバイル開発の参考にして下さい。

Claude Codeはその名称がある通り、ClaudeのWebやアプリを作っているAnthropic社が開発しています。
私も普段はWebやアプリで使用しているのですが、それよりもより拡張式で自由度が高い環境構築でアプリ開発を使用することができます。
こちらがAnthropic社が公式に出しているサイトですので、詳細はこちらから参考にしてください。

https://docs.anthropic.com/ja/docs/claude-code/setup

Node.jsをインストールする

Node.js公式サイト

https://nodejs.org/ja

「Install Node.js」をクリックして下さい。

完了するとこんな画面になります。

Claude Codeをインストールする

https://docs.anthropic.com/ja/docs/claude-code/setup

コマンド

npm install -g @anthropic-ai/claude-code

プロジェクトに移動

cd your-project-directory

Claude Codeを起動する

となります。

うまく完了すると、このような画面になります。
ただし自分の場合はうまくできずエラーが表示されたのでターミナル画面をスクショしてClaudeに聞いて完了させました。

連携される時は以下のような感じでやりました。

「1.Claude account with subscription」を選択します。

接続を希望していますと表示されるので「承認する」と選択して下さい。
私の場合はもともと月額のプランを契約していたので、この設定で連携できるようになりました。

モデルと料金
Claude Codeを使用する際の詳細な金額はこちらの公式サイトに書いてあります。

Gemini CLI

「Gemini CLI : オープンソース AI エージェント」

https://cloud.google.com/blog/ja/topics/developers-practitioners/introducing-gemini-cli

GeminiもClaude Codeと同じように使えるようになったので入れ方と起動だけ記載します。

ターミナルを開きます。
インストールコマンド

npm install -g @google/gemini-cli

インストールが完了したらこちらを入力してください。

コマンドを打ち込んでインストールが完了するとこの画面が開きます。

テーマを選ぶことができるので好きなテーマを選択してください。
キーボードの↑↓で選択してEnterで選べます。

次にログインの方法があるのですが、こちらは「Login with Google」を選択して既存のGoogleアカウントでログインする方法が1番簡単です。
こちらも↑↓で選択してEnterで決定してください。

Cursor

https://cursor.com/ja

こちらがCursorの公式ダウンロード画面です。
ダウンロードを行って下さい。

https://zenn.dev/umi_mori/books/ai-code-editor-cursor/viewer/install

ダウンロードと登録方法などはこちらの記事などを参考にして下さい。

CursorとClaude Codeを連携してモバイル環境を構築する

基本的にCursorで開いてやっていますが、別にVSCodeでも構わないので大丈夫です。
そこら辺の環境構築は好きなので作って下さい。

Xcodeで新規ファイルを作って下さい。または開きたいファイルです。
iOSアプリの場合は最初にXcodeで新規アプリのファイル作成→Cursorで開くという方法みたいです。

CLAUDE_TEMPLATEというファイルを作りました。

Cursorを開いたら「Open project」をクリックしてファイルを開きます。

開発環境構築はこんな感じにしています。
ここら辺は人の好みによると思っているので、自分の好きなレイアウトにして下さい。
・ファイル管理
・コード部分
・Claude Code
・Hot Reload
・シュミレーター
・Gemini CLI
・ターミナル
・GitHub→GitHubは画面に出してるのではなくてClaude Codeと連携させているって意味です。「変更があればCommitしてPushして下さい」と指示を出しています。
連携のさせ方はClaude Codeに聞けば、手順を教えてくれるのでその通りにやってみて下さい。こちらでやるのはGitHubで新規リポジトリ作成とHTTPSをコピペすれば連携できます。

Claude Code単体でもできますが、テキストベースのVSCodeやCursorと連携させた方が圧倒的に便利です。

https://zenn.dev/ichigoooo/articles/claude-code-cursor-integration

連携のさせ方などはこちらの記事を参考にして下さい。

個人的に最初にやるべきなのは「CLAUDE.md」の作成だと思っています。
どんなアプリを開発したいのか、どんな条件で開発をしていくのかしっかりと設計を行うことが大切になっていきます。
なのでClaude Codeに「CLAUDE.md」を作って下さいと指示を出します。
その内容はテストで作ったのでこちらの内容を使ってもらって構いません。

このファイルはClaude Codeがプロジェクトの構造と設定を理解するためのものです。

プロジェクト概要（README.mdより）

このプロジェクトは新しいiOSアプリ開発のベーステンプレートです。

含まれる機能

• SwiftUI + UIKit 併用の実装パターン
• タブバーのカスタマイズ（色設定）
• 画像選択機能
• Hot Reload (Inject)
• Firebase統合準備
• .gitattributes (Swift言語認識)

新プロジェクト作成方法

1. ./setup_new_project.sh MyNewApp com.yourcompany.mynewapp
2. Xcodeで開く
3. 開発開始

プロジェクト構造

CLAUDE_TEMPLATE/
├── CLAUDE_TEMPLATE/
│   ├── CLAUDE_TEMPLATEApp.swift  # メインアプリファイル
│   ├── ContentView.swift         # メインビュー
│   ├── Assets.xcassets/         # アセット
│   └── Preview Content/         # プレビュー用アセット
├── CLAUDE_TEMPLATE.xcodeproj/   # Xcodeプロジェクト
├── CLAUDE.md                   # Claude Code設定ファイル
└── DerivedData/                # ビルドデータ（自動生成）

シミュレーター管理

利用可能なシミュレーター一覧

xcrun simctl list devices

iPhone 16 Pro シミュレーター設定（iOS 18.5）

• Device ID: YOUR_SIMULATOR_ID (取得方法: xcrun simctl list devices | grep "iPhone 16 Pro")
• iOS Version: 18.5
• Bundle ID: com.yourcompany.yourproject

注意: 必ずiPhone 16 Pro (iOS 18.5)を使用してください。

シミュレーター起動・停止

xcrun simctl boot YOUR_SIMULATOR_ID


open -a Simulator


xcrun simctl shutdown YOUR_SIMULATOR_ID

Hot Reload (Inject) 完全セットアップガイド

シミュレーターでアプリを起動したまま、コードの変更をリアルタイムで反映する完全な設定方法：

📋 セットアップ前提条件

• InjectionIII アプリがインストール済み
• Xcode 16.2+
• iPhone 16 Pro iOS 18.5 シミュレーター

🔧 Step 1: Claude Code での基本設定

1-1. Inject パッケージ追加 (Claude Code)

1-2. アプリファイルの設定確認 (Claude Code)

import SwiftUI
#if DEBUG
import Inject
#endif

@main
struct CLAUDE_TEMPLATEApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
            #if DEBUG
                .enableInjection()
            #endif
        }
    }
}

1-3. 各ViewファイルのInject設定確認 (Claude Code)

import SwiftUI
#if DEBUG
import Inject
#endif

struct FeatureView: View {
    #if DEBUG
    @ObserveInjection var inject
    #endif
    
    var body: some View {
        
    }
}

🛠️ Step 2: Xcode での必須設定

⚠️ 重要: ここはClaude Codeで自動的にやってくれます

2-1. Other Linker Flags の設定

1. Xcodeでプロジェクトを開く
2. プロジェクトナビゲーターで CLAUDE_TEMPLATE プロジェクトを選択
3. CLAUDE_TEMPLATE ターゲットを選択
4. Build Settings タブを開く
5. All と Combined を選択
6. 検索バーで「Other Linker Flags」を検索
7. Debug 行で以下を追加:

または Claude Code で自動設定 (推奨)

OTHER_LDFLAGS = (
    "-Xlinker",
    "-interposable",
);

🚀 Step 3: 初回ビルドとアプリ起動 (Claude Code)

xcrun simctl shutdown all
xcrun simctl boot YOUR_SIMULATOR_ID
open -a Simulator


xcodebuild -scheme CLAUDE_TEMPLATE -destination 'platform=iOS Simulator,id=YOUR_SIMULATOR_ID' clean build


xcrun simctl install YOUR_SIMULATOR_ID "/Users/○○○/Library/Developer/Xcode/DerivedData/CLAUDE_TEMPLATE-*/Build/Products/Debug-iphonesimulator/CLAUDE_TEMPLATE.app"
xcrun simctl launch YOUR_SIMULATOR_ID com.yourcompany.yourproject

🔄 Step 4: Hot Reload 動作確認

4-1. Xcode でプロジェクトを開く

open "/Users/○○○/CLAUDE_TEMPLATE/CLAUDE_TEMPLATE.xcodeproj"

4-2. ファイル編集とテスト

1. XcodeでFeatureView.swiftを開く
2. テキストを変更（例: “Hello, World!” → “ホットリロード成功!”）
3. ⌘+S で保存
4. シミュレーターで即座に変更が反映されることを確認

📊 Hot Reload 成功時のログ例

💉 InjectionIII connected /Users/○○○/CLAUDE_TEMPLATE/CLAUDE_TEMPLATE.xcodeproj
💉 Watching files under the directory /Users/○○○/CLAUDE_TEMPLATE
💉 Compiling /Users/○○○/CLAUDE_TEMPLATE/CLAUDE_TEMPLATE/FeatureView.swift
💉 Loading .dylib ...
💉 Interposed 6 function references.
💉 Injected type #1 'CLAUDE_TEMPLATE.FeatureView'

🚨 トラブルシューティング

問題1: “Injection may have failed” 警告

💉 ⚠️ Injection may have failed. Have you added -Xlinker -interposable

解決策: Step 2-1 の Other Linker Flags 設定を確認

問題2: ビルドエラー “Cannot find ‘ObserveInjection'”
解決策: Inject パッケージが正しく追加されているかXcodeで確認

問題3: 変更が反映されない
解決策:

1. アプリを完全に停止
2. クリーンビルド実行
3. 新しくインストール・起動

💡 開発フロー（Hot Reload有効後）

📝 注意事項

• Debug ビルドでのみ動作（Release では無効）
• 新しいファイル追加時は再ビルドが必要
• 構造的変更（新しいプロパティ追加等）は再ビルドが必要
• シミュレーターは起動したままで開発継続可能
• InjectionIII アプリは別途Mac App Storeからインストール必要

ビルド・実行コマンド

iPhone 16 Pro (iOS 18.5) シミュレーター用

xcodebuild -project CLAUDE_TEMPLATE.xcodeproj -scheme CLAUDE_TEMPLATE -destination 'platform=iOS Simulator,id=YOUR_SIMULATOR_ID' -derivedDataPath ./DerivedData build


xcrun simctl install YOUR_SIMULATOR_ID ./DerivedData/Build/Products/Debug-iphonesimulator/CLAUDE_TEMPLATE.app
xcrun simctl launch YOUR_SIMULATOR_ID com.yourcompany.yourproject


xcrun simctl terminate YOUR_SIMULATOR_ID com.yourcompany.yourproject

一連の開発フロー（iOS 18.5必須）

xcrun simctl boot YOUR_SIMULATOR_ID
open -a Simulator


xcodebuild -project CLAUDE_TEMPLATE.xcodeproj -scheme CLAUDE_TEMPLATE -destination 'platform=iOS Simulator,id=YOUR_SIMULATOR_ID' -derivedDataPath ./DerivedData build


xcrun simctl install YOUR_SIMULATOR_ID ./DerivedData/Build/Products/Debug-iphonesimulator/CLAUDE_TEMPLATE.app
xcrun simctl launch YOUR_SIMULATOR_ID com.yourcompany.yourproject


xcrun simctl terminate YOUR_SIMULATOR_ID com.yourcompany.yourproject

依存関係

• iOS 18.5+ (必須: iPhone 16 Pro iOS 18.5シミュレーターを使用)
• Xcode 16.2+
• Swift 6.0+
• SwiftUI
• UIKit
• Swift Package Manager

パッケージ管理

このプロジェクトでは**Swift Package Manager (SPM)**を使用して依存関係を管理します。

パッケージの追加方法

⚠️ 重要: パッケージの追加は必ずXcodeで行ってください

Claude Code は既存パッケージの設定や使用コードの実装は可能ですが、新しいパッケージの追加はできません。

1. Xcodeでの追加（GUI） – 🔴 必須手順

   • File → Add Package Dependencies…
   • パッケージURLを入力
   • バージョンを選択して追加
   • Claude Code ではこの操作は不可能

2. Package.swiftでの管理

   
   let package = Package(
       name: "CLAUDE_TEMPLATE",
       dependencies: [
           .package(url: "https://github.com/firebase/firebase-ios-sdk.git", from: "10.0.0"),
           .package(url: "https://github.com/krzysztofzablocki/Inject.git", from: "1.0.0"),
           .package(url: "https://github.com/googleads/swift-package-manager-google-mobile-ads.git", from: "11.0.0")
       ]
   )
   

3. Claude Code での対応範囲

   
   #if DEBUG
   import Inject  
   #endif
   
   
   @ObserveInjection var inject
   
   
   OTHER_LDFLAGS = ("-Xlinker", "-interposable");
   

4. コマンドラインでの管理

   
   swift package resolve
   
   
   swift package update
   
   
   swift package show-dependencies
   

🔄 パッケージ追加の推奨ワークフロー

Xcode + Claude Code の組み合わせで効率的にパッケージを管理：

1. Xcode: パッケージの追加・削除

   • GUI操作でパッケージ依存関係を管理
   • Swift Package Manager の解決とダウンロード

2. Claude Code: 使用コードの実装・設定・ビルド設定

   • import文の追加
   • パッケージ使用コードの実装
   • Build Settings の調整
   • project.pbxproj の直接編集

⚠️ Claude Code の制限事項

できないこと:

• 新しいパッケージの追加・削除
• Package Dependencies の GUI 操作
• swift package resolve の実行

できること:

• 既存パッケージの使用コード実装
• プロジェクト設定ファイルの編集
• パッケージ使用に必要なビルド設定

推奨パッケージ

• Firebase SDK: バックエンドサービス
• Inject: Hot Reload機能
• Google Mobile Ads (AdMob): 広告収益化
• SwiftUI Navigation: 高度なナビゲーション
• Alamofire: ネットワーキング（必要に応じて）

カスタマイズガイド

SwiftUIアプリの基本構造

CLAUDE_TEMPLATEApp.swiftでアプリの基本設定を行い、ContentView.swiftでメインビューを実装：

import SwiftUI

@main
struct CLAUDE_TEMPLATEApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

ContentViewのカスタマイズ

ContentView.swiftで画面の内容を変更：

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.tint)
            Text("Hello, world!")
        }
        .padding()
    }
}

CLAUDE.mdの内容全文載せると分割で説明されてしまうので、分割された説明が以上になります。
一括して載せる方法はGitHubぐらいだったのでPublicにして公開してあります。
こちらです。

https://github.com/sunnyman5/Claude-Code-iOS-Template.git

Xcode側で行う設定

Xcodeで行う方法はパッケージを入れることです。
それはどうやらClaude Codeではやってくれないみたいです。
なので今回は、Hot Reloadを効かせて変更した箇所をシュミレーターで即時反映されるためにSPMでInjectを使用しています。
詳細はこちらです。

https://github.com/krzysztofzablocki/Inject.git

https://github.com/johnno1962/InjectionIII.git

https://qiita.com/y-hirakaw/items/1fba72344912d1f3912c

やり方はこちらの記事を参考にして下さい。

記事に書いてあるのはアプリの大まかな設計だけです。
詳細はなくてもClaude Codeだといい感じにアプリの内容を自動的に作ってくれます。

スラッシュコマンドについて

記載はしてないですが、スラッシュコマンドも使うと便利みたいです。
参考記事はこちらです。

https://zenn.dev/oikon/articles/cb11b84f891228

メモリの使用率

メモリの使用率がくらいかっていう意見もあったので載せておきます。
今回紹介している環境を全て開いている状態でのみ測定しました。
大体使用済みメモリは12GB前後を行ったり来たりする感じで、特別重いということはありません。
Xcodeを使用しての開発でメモリ16GBだと割と頻繁にメモリ圧迫通知が来ていたのですが、使っている最中は特に何もなかったです。

X(旧Twitter)でモバイル開発について発信してます！

主にiOSアプリですがAndroidアプリについてもポストしてます！
フォローお願いします⤴️

Claude Code の使い方

Claudeの紹介

Claude Code時代のアプリ開発手法

「Claude Code」って何？使い方とセットアップを優しく解説！

Claude Codeとは？主な特徴や使い方、料金体系を徹底解説【活用例付き】

【初心者向け】Claude Code とは？インストールから使い方まで徹底解説

$5払ってどこまでできる？Claude CodeでiOSアプリ開発

【3分でできる】Claude CodeをCursorで使う方法【簡単】

Googleの対話型AIエージェント「Gemini CLI」を使ってみた

Claude Code , GeminiCLI スラッシュコマンド 比較チートシート

gemini-cli の google_web_search が最高