Claude Codeが話題になっているのはたくさん知っているのですが、具体的にどうやるの⁉︎みたいな疑問がずっとあってわかってませんでした。
理由としてはターミナルのコマンドで入力していくタイプなのでいわゆるXcodeやAndroidStudioみたいなIDEと違っているので自分にはピンときてませんでした。
最近だとCursorみたいに扱うタイプのAIエージェントですね。
こちらでは、Claude Codeを使用する際のセットアップとCursorとの連携、モバイルアプリ開発の環境構築を説明していきたいと思います。
基本的にiOSアプリをメインに開発してるのでこちらではXcodeを使用したやり方がメインになります。とはいえ、応用はできると思うのでモバイル開発の参考にして下さい。
Claude Codeはその名称がある通り、ClaudeのWebやアプリを作っているAnthropic社が開発しています。
私も普段はWebやアプリで使用しているのですが、それよりもより拡張式で自由度が高い環境構築でアプリ開発を使用することができます。
こちらがAnthropic社が公式に出しているサイトですので、詳細はこちらから参考にしてください。
Node.jsをインストールする
Node.js公式サイト
「Install Node.js」をクリックして下さい。
完了するとこんな画面になります。
Claude Codeをインストールする
コマンド
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 エージェント」
GeminiもClaude Codeと同じように使えるようになったので入れ方と起動だけ記載します。
ターミナルを開きます。
インストールコマンド
npm install -g @google/gemini-cli
インストールが完了したらこちらを入力してください。
コマンドを打ち込んでインストールが完了するとこの画面が開きます。
テーマを選ぶことができるので好きなテーマを選択してください。
キーボードの↑↓で選択してEnterで選べます。
次にログインの方法があるのですが、こちらは「Login with Google」を選択して既存のGoogleアカウントでログインする方法が1番簡単です。
こちらも↑↓で選択してEnterで決定してください。
Cursor
こちらがCursorの公式ダウンロード画面です。
ダウンロードを行って下さい。
ダウンロードと登録方法などはこちらの記事などを参考にして下さい。
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と連携させた方が圧倒的に便利です。
連携のさせ方などはこちらの記事を参考にして下さい。
個人的に最初にやるべきなのは「CLAUDE.md」の作成だと思っています。
どんなアプリを開発したいのか、どんな条件で開発をしていくのかしっかりと設計を行うことが大切になっていきます。
なのでClaude Codeに「CLAUDE.md」を作って下さいと指示を出します。
その内容はテストで作ったのでこちらの内容を使ってもらって構いません。
このファイルはClaude Codeがプロジェクトの構造と設定を理解するためのものです。
プロジェクト概要（README.mdより）
このプロジェクトは新しいiOSアプリ開発のベーステンプレートです。
含まれる機能
- SwiftUI + UIKit 併用の実装パターン
- タブバーのカスタマイズ（色設定）
- 画像選択機能
- Hot Reload (Inject)
- Firebase統合準備
- .gitattributes (Swift言語認識)
新プロジェクト作成方法
./setup_new_project.sh MyNewApp com.yourcompany.mynewapp- Xcodeで開く
- 開発開始
プロジェクト構造
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 の設定
- Xcodeでプロジェクトを開く
- プロジェクトナビゲーターで
CLAUDE_TEMPLATEプロジェクトを選択 -
CLAUDE_TEMPLATEターゲットを選択 -
Build Settingsタブを開く -
AllとCombinedを選択 - 検索バーで「Other Linker Flags」を検索
-
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. ファイル編集とテスト
- XcodeでFeatureView.swiftを開く
- テキストを変更（例: “Hello, World!” → “ホットリロード成功!”）
- ⌘+S で保存
- シミュレーターで即座に変更が反映されることを確認
📊 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: 変更が反映されない
解決策:
- アプリを完全に停止
- クリーンビルド実行
- 新しくインストール・起動
💡 開発フロー（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 は既存パッケージの設定や使用コードの実装は可能ですが、新しいパッケージの追加はできません。
-
Xcodeでの追加（GUI） – 🔴 必須手順
- File → Add Package Dependencies…
- パッケージURLを入力
- バージョンを選択して追加
- Claude Code ではこの操作は不可能
-
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") ] ) -
Claude Code での対応範囲
#if DEBUG import Inject #endif @ObserveInjection var inject OTHER_LDFLAGS = ("-Xlinker", "-interposable"); -
コマンドラインでの管理
swift package resolve swift package update swift package show-dependencies
🔄 パッケージ追加の推奨ワークフロー
Xcode + Claude Code の組み合わせで効率的にパッケージを管理：
-
Xcode: パッケージの追加・削除
- GUI操作でパッケージ依存関係を管理
- Swift Package Manager の解決とダウンロード
-
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にして公開してあります。
こちらです。
Xcode側で行う設定
Xcodeで行う方法はパッケージを入れることです。
それはどうやらClaude Codeではやってくれないみたいです。
なので今回は、Hot Reloadを効かせて変更した箇所をシュミレーターで即時反映されるためにSPMでInjectを使用しています。
詳細はこちらです。
やり方はこちらの記事を参考にして下さい。
記事に書いてあるのはアプリの大まかな設計だけです。
詳細はなくてもClaude Codeだといい感じにアプリの内容を自動的に作ってくれます。
スラッシュコマンドについて
記載はしてないですが、スラッシュコマンドも使うと便利みたいです。
参考記事はこちらです。
メモリの使用率
メモリの使用率がくらいかっていう意見もあったので載せておきます。
今回紹介している環境を全て開いている状態でのみ測定しました。
大体使用済みメモリは12GB前後を行ったり来たりする感じで、特別重いということはありません。
Xcodeを使用しての開発でメモリ16GBだと割と頻繁にメモリ圧迫通知が来ていたのですが、使っている最中は特に何もなかったです。
X(旧Twitter)でモバイル開発について発信してます！
主にiOSアプリですがAndroidアプリについてもポストしてます！
フォローお願いします⤴️
「Claude Code」って何？使い方とセットアップを優しく解説！
Claude Codeとは？主な特徴や使い方、料金体系を徹底解説【活用例付き】
【初心者向け】Claude Code とは？インストールから使い方まで徹底解説
$5払ってどこまでできる？Claude CodeでiOSアプリ開発
【3分でできる】Claude CodeをCursorで使う方法【簡単】
Googleの対話型AIエージェント「Gemini CLI」を使ってみた
Views: 0
