ClaudeCodeでスマホアプリを作る方法【React Native実践チュートリアル】
「アプリを作ってみたいけれど、プログラミングができないから無理」と諦めていませんか。実は、ClaudeCodeを使えば、コードが書けない人でもスマホアプリを作れるようになりました。本記事では、iOSとAndroidの両方で動く「クロスプラットフォーム」のフレームワークであるReact Nativeを使い、ClaudeCodeに指示を出しながらスマホアプリを作る方法を、ゼロから丁寧に解説します。環境構築のつまずきポイント、シンプルなToDoアプリの作成、実機での動作確認、ストア公開前の準備まで、初心者が最短でゴールにたどり着くための道筋をまとめました。読み終わるころには、「自分の手元で動くアプリ」を作れる自信が持てるはずです。
結論：ClaudeCode×React Nativeなら非エンジニアでもスマホアプリは作れる
結論から言うと、ClaudeCodeとReact Nativeの組み合わせは、非エンジニアにとってスマホアプリ開発の最短ルートです。React NativeはJavaScriptで書ける人気のフレームワークで、iOSとAndroidを同時に開発できる強みがあります。とはいえ、初心者がいきなりReact Nativeを学ぶのはハードルが高いのも事実。そこで活躍するのがClaudeCodeです。ClaudeCodeに「ToDoアプリを作って」「ボタンの色を青に変えて」と日本語で指示するだけで、必要なコードを書き、エラーがあれば自分で修正してくれます。あなたがやるのは、やりたいことを言葉で伝え、生成された結果を確認し、実機で動かすこと。本記事の手順に沿えば、最短1日でも「自分の手元で動くアプリ」が完成します。ただし、App StoreやGoogle Playへの本格的な公開には審査やアカウント費用が必要なので、まずは「自分のスマホで動かす」ところを目標にするのがおすすめです。
React Nativeとは何か：なぜ初心者におすすめなのか
React Nativeは、Facebook（現Meta）が開発したオープンソースのモバイルアプリ開発フレームワークです。最大の特徴は、ひとつのコードでiOSとAndroidの両方のアプリが作れる「クロスプラットフォーム」である点。本来ならiOSアプリはSwift、AndroidアプリはKotlinという別々の言語を学ぶ必要がありましたが、React NativeならJavaScript（あるいはTypeScript）を学ぶだけで両OS対応のアプリが作れます。
初心者にReact Nativeをおすすめする理由は3つあります。第一に、Webサイト制作で使われるReactと文法がほぼ同じなので、Web開発の知識が応用できること。第二に、世界中で使われているため、ClaudeCodeが学習しているサンプルコードが豊富で、AIが正確なコードを生成しやすいこと。第三に、Expoという便利なツールを使えば、面倒な環境構築を大幅に省略できることです。
ExpoはReact Nativeをさらに簡単に扱えるようにしたツールセットで、スマホに「Expo Go」というアプリを入れるだけで、自分のPCで書いたコードを即座に実機で確認できます。シミュレーターやエミュレーターのインストールが不要なので、最初の一歩を踏み出すハードルが格段に下がります。本記事ではこのExpoを前提に話を進めます。
開発環境の準備：Node.jsとExpoのインストール
まずは開発に必要なソフトをそろえます。必要なものは「Node.js」「Expo CLI」「お使いのスマホにExpo Goアプリ」の3点です。順番にClaudeCodeに指示しながら進めましょう。
Node.jsのインストールは、ClaudeCodeに次のように頼むのが手軽です。
私のMacにNode.jsをインストールしたい。
nodebrewまたはnvmを使うのがおすすめか教えてほしい。
コマンドを一行ずつ説明しながら、私のターミナルで実行する手順を教えて。
ClaudeCodeはあなたのOSを確認し、Homebrewを使ったインストール方法を案内してくれます。Windowsの場合も同様で、「私のWindowsにNode.jsをインストールして」と頼めば、公式インストーラーのダウンロード方法を教えてくれます。
Node.jsが入ったら、次にExpo CLIです。ターミナルで次のコマンドを実行します。
npm install -g expo-cli
そして、Expoの新しいプロジェクトを作成します。ClaudeCodeに次のように頼みましょう。
デスクトップに「my-first-app」という名前のExpoプロジェクトを作って。
TypeScriptではなくJavaScriptのテンプレートで、初心者向けの最小構成にしてほしい。
ClaudeCodeはnpx create-expo-appコマンドを実行し、必要なフォルダ構成を作ってくれます。最後にお手持ちのスマホ（iPhoneまたはAndroid）に、App StoreまたはGoogle Playから「Expo Go」アプリをインストールしてください。これで開発環境は整いました。
ClaudeCodeに指示してToDoアプリを作る
では実際にアプリを作ってみましょう。今回作るのはシンプルなToDoアプリです。「タスクを追加できる」「タスクを完了にできる」「タスクを削除できる」の3つの機能を備えたものを目指します。
ClaudeCodeに次のようなプロンプトを送ります。
さきほど作ったmy-first-appというExpoプロジェクトの中で、ToDoアプリを実装したい。
要件は以下のとおり。
- 画面上部にタイトル「My ToDo」を表示
- テキスト入力欄と「追加」ボタンを表示
- 入力された内容をリストとして画面に表示
- リストの項目をタップしたら取り消し線が引かれる（完了状態）
- 各項目の右側に「削除」ボタンを置き、押すとリストから消える
- スタイルはシンプルで見やすく、白背景に黒文字、ボタンは青系で
App.jsを書き換える形で実装して、必要ならコンポーネントを分割してもよい。
JavaScriptで、外部ライブラリは追加せず標準のReact Nativeコンポーネントだけで作って。
ClaudeCodeは要件を理解し、App.jsを書き換えます。生成されるコードはおおむね次のような形になります。
import React, { useState } from 'react';
import {
View, Text, TextInput, TouchableOpacity,
FlatList, StyleSheet, SafeAreaView,
} from 'react-native';
export default function App() {
const [text, setText] = useState('');
const [todos, setTodos] = useState([]);
const addTodo = () => {
if (text.trim() === '') return;
setTodos([...todos, { id: Date.now().toString(), title: text, done: false }]);
setText('');
};
const toggleTodo = (id) => {
setTodos(todos.map(t => t.id === id ? { ...t, done: !t.done } : t));
};
const deleteTodo = (id) => {
setTodos(todos.filter(t => t.id !== id));
};
return (
<SafeAreaView style={styles.container}>
<Text style={styles.title}>My ToDo</Text>
<View style={styles.inputRow}>
<TextInput
style={styles.input}
value={text}
onChangeText={setText}
placeholder="やることを入力"
/>
<TouchableOpacity style={styles.addBtn} onPress={addTodo}>
<Text style={styles.btnText}>追加</Text>
</TouchableOpacity>
</View>
<FlatList
data={todos}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<View style={styles.row}>
<TouchableOpacity style={{ flex: 1 }} onPress={() => toggleTodo(item.id)}>
<Text style={[styles.itemText, item.done && styles.done]}>{item.title}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => deleteTodo(item.id)}>
<Text style={styles.delete}>削除</Text>
</TouchableOpacity>
</View>
)}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, backgroundColor: '#fff', padding: 16 },
title: { fontSize: 28, fontWeight: 'bold', marginBottom: 16 },
inputRow: { flexDirection: 'row', marginBottom: 12 },
input: { flex: 1, borderWidth: 1, borderColor: '#ccc', padding: 8, borderRadius: 6 },
addBtn: { backgroundColor: '#2563eb', paddingHorizontal: 14, justifyContent: 'center', borderRadius: 6, marginLeft: 8 },
btnText: { color: '#fff', fontWeight: 'bold' },
row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: '#eee' },
itemText: { fontSize: 16 },
done: { textDecorationLine: 'line-through', color: '#888' },
delete: { color: '#dc2626', marginLeft: 12 },
});
このコードを保存したら、ターミナルでnpx expo startと打ちます。すると画面にQRコードが表示されるので、お手持ちのiPhoneのカメラ、もしくはAndroidのExpo Goアプリでそれを読み取ってください。数秒のビルドの後、自分のスマホ上でアプリが立ち上がります。タスクを追加し、タップして取り消し線が引かれるか、削除ボタンで消えるかを確認してみましょう。
エラーが出たらClaudeCodeに丸投げする
開発を進めていると、必ずエラーに出会います。たとえば「Unable to resolve module」という赤い画面が表示されたり、ボタンを押しても反応しなかったり。慌てずに、エラー画面のスクリーンショットや、エラーメッセージをそのままClaudeCodeに貼り付けて尋ねましょう。
ToDoアプリを起動したら、次のエラーが出た。
「Unable to resolve module ./components/TodoItem from /Users/me/.../App.js」
原因と修正方法を教えて。実際に修正もしてほしい。
ClaudeCodeはファイル構成を確認し、足りないファイルを作るか、importパスを直してくれます。エラーは「悪いこと」ではなく「ヒント」です。ClaudeCodeに任せれば、初心者でも詰まらず前に進めます。
機能を増やしてみる：データの保存とプッシュ通知
最低限のアプリができたら、機能を増やしてみましょう。まずはアプリを閉じてもタスクが消えないようにする「データの永続化」です。React NativeではAsyncStorageというライブラリを使います。
今のToDoアプリに、AsyncStorageを使ってタスクをスマホ内に保存する機能を追加して。
アプリを開きなおしても前回のタスクが残っているようにしてほしい。
必要ならパッケージを追加するコマンドも教えて。
ClaudeCodeはexpo install @react-native-async-storage/async-storageを実行するよう指示し、useEffectを使った保存・読み込みのコードを書き加えてくれます。
次に、毎日決まった時間に通知を出す機能も足してみましょう。
expo-notificationsを使って、毎朝9時に「今日のタスクを確認しよう」という
ローカル通知を出す機能を追加して。
通知の許可リクエストも実装して、初回起動時に表示されるようにしてほしい。
このように、機能を一つずつ追加しながらアプリを育てていけます。ClaudeCodeは前のコードの文脈を覚えているので、「さっきの〇〇に追加して」という言い方が通じます。
公開前の準備：アイコン、スプラッシュ、テスト
アプリを他人に使ってもらう、あるいはストアに出すには、もうひと手間必要です。アプリアイコン、起動時のスプラッシュ画像、利用規約とプライバシーポリシーの用意が最低限必要になります。
ClaudeCodeに次のように頼むと、必要なファイルの差し替え場所を教えてくれます。
Expoプロジェクトでアプリアイコンとスプラッシュ画面を変更したい。
1024x1024のアイコン画像と、2048x2048のスプラッシュ画像をassetsフォルダに置いた。
app.jsonをどう書き換えればよいか教えて、書き換えも実行して。
公開前のテストでは、できるだけ多くのスマホで実機テストをするのが理想ですが、難しい場合はExpoの「EAS Build」を使ってビルドし、TestFlight（iOS）や内部テスト（Android）で配布する方法があります。ただし、本格的な公開審査やストア登録は専門的な作業も多いので、社内ツールとして配布したい場合は当社のインフラ方針（Cloudflare WorkersでのWebアプリ提供＋Cloudflare Access認証）に切り替えるのも一つの選択肢です。
モバイル開発で気をつけたいこと：セキュリティと審査
モバイルアプリ開発で初心者が見落としがちなのが、セキュリティです。APIキーやパスワードをコード内に直接書くのは絶対にやめてください。ClaudeCodeに頼むときも、「APIキーは環境変数または安全なストレージに保存する形で実装して」と必ず伝えましょう。
また、App StoreやGoogle Playの審査では、プライバシーポリシーの掲載、データの取り扱いの明示、不要な権限を要求しないことなどが厳しく見られます。「とりあえず動くもの」を作る段階と、「ストアに出すもの」を作る段階では、求められる品質が大きく違うと意識しておきましょう。
FAQ：スマホアプリ開発でよくある質問
Q1. Macがなくてもアプリは作れますか。 A. Androidアプリだけ作るならWindowsだけで完結します。iOSアプリのストア配布には最終的にMacが必要ですが、Expoの「EAS Build」を使えばクラウド上でiOS向けビルドができるので、開発自体はWindowsでも可能です。
Q2. ストア公開にはいくらかかりますか。 A. Apple Developer Programは年間99ドル、Google Play Consoleは初回25ドルの登録料が必要です。社内利用ならCloudflare Workers＋PWA（Progressive Web App）のほうがコストが安く済む場合もあります。
Q3. ClaudeCodeが書いたコードをそのまま信用していいですか。 A. 動作確認は必ず実機で行ってください。特にお金や個人情報を扱う処理は、エンジニアにレビューしてもらうのを強くおすすめします。
Q4. 学習にはどのくらい時間がかかりますか。 A. 「自分用のToDoアプリを動かす」だけなら数時間で十分です。ストア公開を目指すなら2〜4週間ほど見ておくとよいでしょう。
Q5. ネイティブ機能（カメラ、GPSなど）は使えますか。
A. Expoにはexpo-cameraやexpo-locationなどのライブラリが揃っており、ClaudeCodeに頼めば簡単に実装できます。
Q6. 既存のWebサイトをアプリ化することはできますか。
A. 可能です。react-native-webviewを使えばWebサイトを内包した簡易アプリが作れます。ただしストア審査で弾かれやすいので、社内利用にとどめるのが無難です。
Q7. アプリの更新はどうやって行いますか。 A. ExpoのOTA（Over the Air）アップデート機能を使うと、ストアの再審査なしでJavaScript部分だけを差し替えられます。
まとめ
ClaudeCodeとReact Native（Expo）の組み合わせは、非エンジニアがスマホアプリ開発に踏み出す最短ルートです。本記事の手順に従えば、最低限のToDoアプリは1日で動かせます。大事なのは「いきなり完璧を目指さない」「まず自分のスマホで動かす」「エラーは怖がらずClaudeCodeに丸投げする」の3点です。アプリのアイデアがあるなら、今日から手を動かしてみましょう。ストア公開や本格的な業務利用を考える段階になったら、エンジニアに相談しつつ、安全な構成で進めるのが賢明です。