Mac初心者が Claude Code × Expo でAI駆動モバイル開発に挑戦してみた（開発環境構築編）

Posted at 2026-03-09

この記事は、Mac初心者がClaude Code + Expo + React Nativeで開発環境を構築した手順をまとめたものです。

はじめに、の前に

Mac買ったー！！！！！！
理由ですか？ふふ・・・

ただの憧れです！
あと
エンジニアっぽいからです！！（ミーハー）

さーて、バリバリ使うぞー！

・・
・・・
・・・・

え・・・？Windowsと全然違う・・・（あたりまえ）
ショートカットわからない！
メニューバーがウィンドウじゃなくて、画面の上にある！？慣れない！！
右クリックは？右クリックぅぅぅ！！！

ちょっと仕事が忙しい・・・あとでやろう・・・

そして月日は経ち

最近、AIエージェントを使った開発（AI駆動開発）が流行ってるみたい。やってみたいな。

せっかくだから、Macの勉強がてらやってみよう。
教えてチャッピー！

はじめに

ということで、
Claude Code + Expo + React Native でモバイルアプリを作ってみることにしました。

ただし問題がありました。

私は・・・先に述べた通り・・・

Mac初心者です。

普段はWindows環境なので、

ターミナル？
zsh？
Homebrew？
Macのショートカット？

など、基本から調べながらの構築になりました。

この記事では
Mac初心者がAI駆動モバイル開発環境を構築した手順
をまとめます。

作ろうとしているアプリ

目的がないと身も入らないという事で、

お買い物支援アプリ

を作ろうと思います。

機能はこんな感じ。

買い物リスト登録
店舗登録（地図から）
店に近づいたら通知

位置情報、通知など、モバイル要素が入っているので良いかなと。

技術スタック

今回の開発では、以下の基準で技術スタックを選びました。

iOS / Android の両方に対応したい
今後Webアプリ開発にも活かせる技術を選びたい

技術	用途
React Native	モバイルアプリ開発フレームワーク
Expo	React Nativeの開発ツールキット
EAS(Expo Application Services)	アプリのクラウドビルド
Claude Code	AIエージェントによる開発

それぞれの選定理由を簡単に説明します。

React Native

React Nativeは JavaScript / TypeScriptでモバイルアプリを開発できるフレームワークです。

通常、モバイルアプリを作る場合は

iOS → Swift
Android → Kotlin

のように 2つの言語で開発する必要があります。

しかしReact Nativeを使うと

1つのコードで
iOS / Android 両方のアプリを作れる

というメリットがあります。

今回は 個人開発でAIエージェントと開発するという目的があるため、

学習コストが低い
Web技術と親和性が高い
AIのサンプルコードが多い

という理由で React Native を選びました。

Expo

Expoは React Nativeの開発を簡単にするツールセットです。

React Nativeをそのまま使うと、本来は

iOSのビルド設定
AndroidのGradle設定
ネイティブSDK設定

など、かなり複雑な環境構築が必要になります。

Expoを使うと

環境構築が簡単
開発サーバですぐ動く
ネイティブ機能（位置情報・通知など）が簡単に使える

というメリットがあります。

特に今回のアプリでは

位置情報
通知
地図

などのネイティブ機能を使う予定なので、Expoは非常に相性が良いです。

EAS (Expo Application Services)

EASは Expo公式のクラウドビルドサービスです。

モバイルアプリを実機で動かすには通常

Androidビルド環境
iOSビルド環境
証明書設定
署名設定

などが必要になります。

EASを使うと

クラウドでビルドできる（！？）
iOS / Android両方対応
CIサービスのようにクラウドで自動ビルドできます

というメリットがあります。

個人開発でもかなり便利なので、Expoとセットで使うことにしました。

（※ iOS向けアプリはMac環境がないとビルドできないと思っていたので、なんでこれが無料でできるの！？とびっくりしました。
個人開発者の囲い込みと、その延長で業務採用に繋げることが目的とのことですが、すごいなぁと。）

Claude Code

Claude Codeは AIエージェント型の開発ツールです。

通常のAIチャットと違い、

リポジトリを読み取る
コードを修正する
実装を提案する

など、開発作業を自動化できます。

他にも種類はありますが、AI駆動開発において、
最も勢いのあるプロダクトと思われるので、採用しました。

開発環境構築

ここからMacに開発環境を構築していきます。

開発ツールのインストール

今回は以下のツールをインストールします。

ツール	役割
Homebrew	Macのパッケージマネージャ
Node.js	JavaScript実行環境
nvm (Node Version Manager)	Node.jsのバージョン管理
Watchman	ファイル変更監視
Git	ソースコード管理

Homebrew

Homebrewは Mac用のパッケージマネージャです。
Linuxでいう apt や yum のようなものです。

Homebrewを使うと

brew install node
brew install git

のように、コマンド1つでソフトウェアをインストールできます。

Macで開発をする場合、ほぼ必須のツールです。

インストール

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

確認

brew -v

Node.js (nvm)

React NativeやExpoは JavaScriptで動くツールなので、Node.jsが必要です。

Node.jsはバージョン差異によるトラブルが多いため、
nvm (Node Version Manager) を使って管理するのが一般的です。

nvmを使うと

Node 18
Node 20

などを簡単に切り替えることができます。

nvmの役割と仕組み

通常Node.jsをインストールすると、システムに1つだけインストールされます。

/usr/local/bin/node

しかしプロジェクトによっては

Node 18
Node 20
Node 22

など 異なるバージョンが必要になることがあります。

そこで使うのが nvm です。

nvmのディレクトリ構造

mkdir ~/.nvm で作成したフォルダには
Node.jsのバージョンが保存されます。

~/.nvm
 ├ versions
 │   └ node
 │        ├ v18.x
 │        ├ v20.x
 │        └ v22.x
 └ alias

なので

Node v18
Node v20
Node v22

などを 同時にインストールできる というわけです。

インストール

brew install nvm

ディレクトリ作成

nvmがNode.jsを保存するディレクトリを作成します

mkdir ~/.nvm

`.zshrc` に追加

下記のコマンドで、

nvmの保存場所を環境変数に設定
nvmコマンドを読み込む

を実施します

echo 'export NVM_DIR="$HOME/.nvm"' >> ~/.zshrc
echo 'source $(brew --prefix nvm)/nvm.sh' >> ~/.zshrc

※ >> は、そのファイルの末尾に追記するという意味です。

ポイント：なぜ `>>` を使うの？

>> は ファイルに追記するリダイレクト演算子です。

演算子	動作
`>`	ファイルを上書き（既存の内容が消える）
`>>`	ファイルに追記（既存の内容は残る）

.zshrc には他の設定がすでに書かれている場合があるため、>> で追記するのが安全です。

シェルへ反映

設定ファイルを現在のシェルに読み込む

source ~/.zshrc

確認

node -v
npm -v

おまけ：`source` コマンドとは？

設定ファイルを現在のシェルに読み込む

というコマンドです。
　※ターミナル再起動でも同じ効果があります。

また、$(brew --prefix nvm) は

「Homebrewでインストールされた nvm のインストールディレクトリ」を取得する、
そして、コマンドの実行結果を文字列として埋め込む。

という意味です。

Macの場合、CPUの違いにより、インストールフォルダーが変わるため、このような書き方とのことです。

Watchman

Watchmanは ファイル変更を監視するツールです。

React Nativeでは

コード変更
ホットリロード

などのために ファイル監視が必要になります。

macOSの標準機能だけだとパフォーマンスが悪くなる場合があるため、
React Nativeでは Watchman の利用が推奨されています。

インストール

brew install watchman

Git

言わずと知れた ソースコード管理ツールです。

今回は

Claude CodeによるGitHub連携
開発履歴管理

のために利用します。

インストール

brew install git

Claude Code

Claude Codeは Anthropicが提供しているAIエージェント型の開発ツールです。

通常のAIチャットと違い、

リポジトリのコードを読む
ファイルを編集する
実装を提案する

など、実際の開発作業を支援してくれます。

AI駆動開発を体験してみたかったので、今回はClaude Codeを使います。

インストール

Node.jsがインストールされていれば、以下のコマンドでインストールできます。

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

ターミナル環境の強化

ここまでで開発に必要なツールはインストールできました。

ただ、Macのデフォルトターミナルは少しシンプルすぎるため、
多くの開発者はターミナル環境を強化しています。

今回は以下を導入します。

ツール	役割
iTerm2	高機能ターミナル
Oh My Zsh	zshの拡張フレームワーク
Powerlevel10k	ターミナルテーマ

これらを入れることで

Gitブランチ表示
コマンド履歴の強化
見やすいプロンプト
開発効率の向上

などのメリットがあります。

iTerm2

iTerm2は Macで最も人気のあるターミナルアプリです。

Mac標準のTerminal.appでも問題ありませんが、
iTerm2には以下のメリットがあります。

ターミナル分割表示
検索機能
カスタマイズ
コピー＆ペーストの改善

インストール

brew install --cask iterm2

インストール後は
iTerm2をメインターミナルとして使うのがおすすめです。

Oh My Zsh

Oh My Zshは zshを強化するフレームワークです。

zshはMacの標準シェルですが、そのままだと

Gitブランチ表示
コマンド補完
テーマ

などの機能が弱いです。

Oh My Zshを入れることで

Git情報表示
プラグイン
テーマ

などが簡単に使えるようになります。

要するに、zshの便利ツール集ですね。

インストール

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Oh My Zsh のインストールスクリプトを実行すると
.zshrc に以下の設定が自動で追加されます。

source $ZSH/oh-my-zsh.sh

この設定によって
Oh My Zsh の機能が読み込まれます。

Powerlevel10k

Powerlevel10kは zsh用の高速テーマです。

ターミナルの表示を見やすく改善します。

Gitブランチ表示
コマンド成功/失敗表示
ディレクトリ表示
アイコン表示

インストール

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git \
${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

`.zshrc` を編集

次に .zshrc を開いて ZSH_THEME を変更します。
今回は、コマンドラインから編集できるエディタ nano を使用してみます。

nano ~/.zshrc

Ctrl + W で文字列検索が可能です。
"ZSH_THEME" を検索します。

検索ヒット

値を下記のように変更します

ZSH_THEME="powerlevel10k/powerlevel10k"

※ ZSH_THEME は source $ZSH/oh-my-zsh.sh より前に設定されている必要があります。
通常は、既存の ZSH_THEME の値を書き換えれば問題ありません。

nanoでは次のキーで保存できます。

Ctrl + O
Enter

Ctrl + O で下記の表示がされ、Enterで保存されます。

nanoの終了

Ctrl + X

反映

source ~/.zshrc

初期設定

ウィザードが自動で表示されない場合は、以下を実行します。

p10k configure

セットアップウィザードが表示されるので、質問に答えていくだけで設定できます。
※ウィザードは英語なので、その点は注意。

トラブルシュート

[oh-my-zsh] theme 'powerlevel10k/powerlevel10k' not found

と表示される場合は、Powerlevel10k 本体が正しくインストールされていない可能性があります。

以下で確認できます。

ls ~/.oh-my-zsh/custom/themes

ここで powerlevel10k という文字列が表示されない場合は、再度インストールしてください。

※私はここでハマりました。。。

おまけ　"Oh My Zsh" と "Powerlevel10k" の違い

自分自身、ちょっとよくわからなかったので補足。

Oh My Zsh は zshを拡張するフレームワークで、
Powerlevel10k は zshのプロンプトテーマです。

つまり

zsh
↓
Oh My Zsh（機能拡張）
↓
Powerlevel10k（見た目）

という構造になっています。

なるほどー

設定が完了すると、このような見た目になります。
ウィザードの回答次第で、異なるカスタマイズも可能です。

Expo プロジェクト作成

ここから実際にモバイルアプリのプロジェクトを作成します。

開発ディレクトリ作成

開発用ディレクトリを作成します。
ここでは、dev というディレクトリを作成します。

mkdir ~/dev

プロジェクト作成

開発ディレクトリに移動したあと、
Expoプロジェクトを作成するコマンドを実行します。

cd ~/dev
npx create-expo-app ShoppingListApp

このコマンドでは

React Native
Expo
TypeScript
開発サーバ

などが含まれたプロジェクトが自動で生成されます。

作成後、プロジェクトに移動します。

cd ShoppingListApp

追加ライブラリ

今回のアプリで使用する予定の機能を先にインストールします。

Expo SDKの公式ライブラリ

npx expo install expo-location expo-task-manager expo-notifications expo-sqlite

それぞれの役割

ライブラリ	役割
expo-location	位置情報取得
expo-task-manager	バックグラウンド処理
expo-notifications	通知機能
expo-sqlite	ローカルDB

外部ライブラリ：地図表示

npx expo install react-native-maps

これは Google Map / Apple Mapを表示するライブラリです。

Claude Code 起動

プロジェクトディレクトリで以下を実行します。
Claude Codeは プロジェクトディレクトリで起動するのがポイントです。

こうすることで

プロジェクトのコード
package.json
ディレクトリ構造

などをClaude Codeが理解できるようになります。

cd ShoppingListApp
claude

初回起動時はログインが求められます。
※ 記事執筆時点では、Claude CodeはClaude Pro / Maxプランで利用できます

テーマの選択

コマンドを実行すると、テーマの選択が表示されます。
お好みのテーマを選択します。

アカウントの種類を選択

下記のような画面が表示されます。選択項目は、下記の３つ。

サブスクリプション(すでにPro・Maxなどのプランに登録している方はこちら)
APIの使用量に基づく従量課金
サードパーティのプラン

サブスクリプション登録済みであっても、
２を選択してしまうと、別途課金されてしまうようなので注意が必要です。

種類を選択すると、ブラウザが開き、ログイン画面が表示されます。
ログインすると、承認要求画面が表示されます。

承諾すると、シェルに

Login successful.

と表示されます。

続けて、フォルダーを信頼する、を選択をします。

これで、プロンプト入力が表示され、Claude Codeへの指示ができる状態になりました。

完成した開発環境の構成

Mac
 ├ Node (nvm)
 ├ Watchman
 ├ Git
 ├ Expo
 ├ EAS
 ├ Claude Code
 └ iTerm2 + OhMyZsh + Powerlevel10k

今後やること

いよいよ実装。（AIが）

お買い物支援アプリ

機能

買い物登録
店舗登録（地図）
店に近づくと通知

これらの機能を、AI駆動開発で作っていきます。

まとめ

AIの力を借りることで、Mac初心者でも開発環境を整えることができました。

次は実装編を書こうと思います。

おまけ　Macの基本（備忘）

Macのシェルはbashじゃない

最近のMacは zsh がデフォルトシェルです。

確認方法

echo $SHELL

出力例

/bin/zsh

とはいえ、bashとほぼ同じように使えます。

Macのランチャー

Macのアプリ検索は

⌘ + Space

Spotlightが起動します。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Mac初心者が Claude Code × Expo でAI駆動モバイル開発に挑戦してみた（開発環境構築編）

はじめに、の前に

そして月日は経ち

はじめに

作ろうとしているアプリ

技術スタック

React Native

Expo

EAS (Expo Application Services)

Claude Code

開発環境構築

開発ツールのインストール

Homebrew

インストール

確認

Node.js (nvm)

nvmの役割と仕組み

nvmのディレクトリ構造

インストール

ディレクトリ作成

.zshrc に追加

ポイント：なぜ >> を使うの？

シェルへ反映

確認

おまけ：source コマンドとは？

Watchman

インストール

Git

インストール

Claude Code

インストール

ターミナル環境の強化

iTerm2

インストール

Oh My Zsh

インストール

Powerlevel10k

インストール

.zshrc を編集

反映

初期設定

トラブルシュート

おまけ "Oh My Zsh" と "Powerlevel10k" の違い

Expo プロジェクト作成

開発ディレクトリ作成

プロジェクト作成

追加ライブラリ

Expo SDKの公式ライブラリ

それぞれの役割

外部ライブラリ：地図表示

Claude Code 起動

テーマの選択

アカウントの種類を選択

完成した開発環境の構成

今後やること

まとめ

おまけ Macの基本（備忘）

Macのシェルはbashじゃない

Macのランチャー

`.zshrc` に追加

ポイント：なぜ `>>` を使うの？

おまけ：`source` コマンドとは？

`.zshrc` を編集

おまけ　"Oh My Zsh" と "Powerlevel10k" の違い

おまけ　Macの基本（備忘）