社会人からの挑戦、React Nativeとの出会い
エンジニアの道は、いつもワクワクとちょっとした不安の連続です。30代半ばまでWebサイトを作ったり、サーバーのメンテナンスをしたりしていましたが、ある日突然「自分でモバイルアプリを作りたい！」と思ったんです。
仕事と子育ての合間に、カフェでポートフォリオ作ったり、副業の勉強したり…。でも、アプリ開発は未経験。それにiOSとAndroidで別々の言語を勉強する時間もないし…。そんな時に出会ったのが React Native でした。JavaScriptとReactの知識があれば、iOSとAndroidの両方のアプリを1つのコードで作れるって聞いて、すごく興味がわいたんです。
最初は簡単なチュートリアルをなぞるだけ。「本当に自分にできるのかな？」って不安になったりもしました。Macを持ってないのにiOSアプリを作れるの？ そもそも環境構築でつまずくんじゃない？ って。
でも、友達が副業でアプリ開発の案件を受けているのを聞いて、「とりあえずやってみる価値はあるかも」と思いました。この記事では、私が実際にReact Nativeでアプリを作るまでの手順と、その時に得た経験をまとめてみました。プログラミングスクールに通おうか悩んでいる人、独学で頑張りたい人、副業に興味がある人に向けて、学習方法から開発の仕方まで、わかりやすく説明します。
React Nativeって何？ ─ 1つのコードで色々なOSに対応！
React Nativeは、Meta（旧Facebook）が作ったフレームワークです。これを使うと、JavaScriptとReactでアプリの見た目を作れば、iOSとAndroidの両方で動くアプリができます。
普通、iOSアプリはSwiftとかObjective-C、AndroidアプリはKotlinとかJavaで作りますよね。でも、React Nativeなら1つのコードで両方に対応できるから、勉強する量を減らせるんです！
特に2024年からは、新しい仕組み（FabricとJSI）が基本になって、アプリの動きが速くなったり、安定したりしました。2025年10月に出たReact Native 0.82からは、古い仕組みがなくなって、新しい仕組みだけで動くようになったんです。新しい仕組みでは、JavaScriptとアプリの間でデータのやり取りがスムーズになって、画面の切り替えが速くなったり、アプリがすぐに起動するようになったりします。React 19.1.1に対応したり、実験的にHermes V1エンジンを選べるようになったりして、さらに使いやすくなっています。
Expoっていう便利なツールを使うと、React Nativeでの開発やバージョンアップがもっと簡単になります。Expoは、開発に必要なものが全部入っていて、React Native初心者でもすぐにアプリを作れるようになります。Expo SDK 54ではReact Native 0.81が使われていて、iOS用のパーツがあらかじめ準備されているので、アプリを作る時間が短くなりました。それに、新しいアイコンやSwiftUIプラグインなどにも対応しています。
「React Nativeって、動きが遅いんじゃないの？」「副業でちゃんと使えるの？」って心配な人もいるかもしれません。確かに、昔は動きが悪かったり、使える機能が少なかったりしたこともありました。でも、最近のアップデートで、InstagramやShopifyみたいな大きなサービスでも使われるようになったんです。もちろん、完璧ではないけれど、初心者がアプリ開発に挑戦するには、すごく良い選択肢だと思います。
開発の準備 ─ 必要なもの
ソフトをインストールしよう
まず、開発に必要なものを準備しましょう。
- Node.js 18以上: React Nativeのツールとか、必要なものを管理するために使います。公式サイトからLTS版をインストールして、バージョンを確認しましょう。
- コードエディタ: Visual Studio Code（VS Code）がおすすめ。React Native用の便利な機能がたくさんあります。
- Watchman（MacとLinuxだけ）: ファイルを監視するツール。コードを修正した時に、すぐにアプリに反映されるようにしてくれます。
- Android Studio: Androidのアプリを動かすためのもの。Android SDKとかも一緒にインストールしておきましょう。
- Xcode: iOSアプリを作るにはMacが必要です。App Storeからインストールして、コマンドラインツールを設定します。CocoaPodsもインストールしておきましょう。
私も最初はWindowsしか持ってなくて、「iOSアプリを作れない！」って焦りました。でも、Expo Application Services (EAS) を使うと、iOSアプリをインターネット上で作れるんです。Macがなくても、EAS Buildを使えばiOSアプリを作れます。MacInCloudとかGitHub Actionsを使う方法もあります。プログラミングスクールでは、こういう環境の準備も手伝ってくれるので、困ったら先生に聞いてみましょう。
Androidの設定とエミュレーター
Android Studioで開発する時は、ANDROID_HOME という設定をして、SDK ManagerでAndroid 14とかAndroid 13をインストールします。AVD ManagerでPixel 7 ProとかGalaxy S23みたいな仮想のスマホを作って、色々な機種でちゃんと動くか確認しましょう。
iOSの設定
iOSアプリを作るにはMacが必要です。Xcodeをインストールしたら、CocoaPodsで必要なものを管理できるようにしておきましょう。XcodeシミュレーターでiPhone 15 ProとかiPhone SEを動かして、画面が崩れてないかチェックします。Expoを使っているなら、「Expo Go」アプリをスマホに入れて、QRコードを読み取るだけで実機でテストできます。
スクールに通うメリット
独学でもできますが、スクールに通うと先生が教えてくれるので安心です。特にReact Nativeは、スマホとWebの知識が混ざっているので、XcodeとかAndroid Studioの設定でつまずきやすいです。スクールでは、順番に教えてくれるし、MacとWindowsで設定が違うところとか、エラーが出た時の対処法とか、副業の案件の取り方まで教えてくれるので、早くできるようになります。私も、副業で初めての案件を受ける前に、スクールでポートフォリオを作っていたおかげで、お客さんに良い評価をもらえました。
プロジェクトを作ろう ─ どっちが良い？
React Native CLIを使う
React Nativeを本格的に使うなら、まずプロジェクトを作ります。React Native CLIを使う場合は、次のコマンドを実行します。
# 最新のReact Native CLIでプロジェクトを作る
npx @react-native-community/cli@latest init MyFirstApp
# Androidエミュレーターで起動
cd MyFirstApp
npx react-native run-android
# iOSシミュレーターで起動（Macが必要）
npx react-native run-iosinit コマンドを実行すると、必要なファイルが色々作られます。この方法だと、アプリの中身を自由に編集できるので、特別な機能を追加する時に便利です。でも、XcodeとかAndroid Studioの設定を自分でやる必要があるので、初心者には難しいかもしれません。
Expo CLIを使う
勉強とか、小さめの副業案件なら、Expo CLIがすごく便利です。次のコマンドでプロジェクトを作れます。
# ExpoアプリをTypeScriptで作成
npx create-expo-app MyExpoApp --template blank-typescript
cd MyExpoApp
# 開発サーバーを起動
npx expo startコマンドを実行すると、QRコードが出てくるので、スマホに入れた「Expo Go」アプリで読み込むと、すぐにアプリが動きます。Expoは、開発中にコードを修正したらすぐに反映されたり、デバッグツールが充実していたり、設定ファイルがシンプルだったりします。それに、EAS Buildを使えばMacがなくてもiOSアプリを作れるので、Windowsユーザーでも副業しやすいです。
プロジェクトの構造
React Nativeアプリは、OSごとに違うコードと、共通のコードでできています。App.jsがメインのファイルで、src/componentsには何度も使うUI、src/screensには画面ごとのUI、src/servicesにはAPIの呼び出しとか処理などを入れると整理しやすいです。Androidでは AndroidManifest.xml、iOSでは Info.plist みたいな設定ファイルで、アプリの権限とかアイコンを設定します。
UIを作ろう ─ 部品、デザイン、使いやすさ
部品を作って再利用
React NativeのUIは、色々な部品を組み合わせて作ります。ViewとかTextみたいな基本的な部品に加えて、ScrollViewとかFlatListみたいなリストを表示する部品もあります。関数型コンポーネントとReact Hooks（useStateとかuseEffect）を使うと、状態の管理とか、色々な処理が簡単にできます。これは、カウンターアプリの例です。
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
// カウンターアプリの例
export default function Counter() {
// countという変数と、それを更新する関数
const [count, setCount] = useState(0);
// ボタンを押すたびにcountを1増やす
const handleIncrease = () => setCount(count + 1);
return (
<view style="{styles.container}">
</view> style={styles.title}>カウント: {count}
<button title="増やす" onpress="{handleIncrease}">
);
}
// デザイン
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:</button> 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
title: {
fontSize: 24,
marginBottom: 12,
},
});このコードでは、コメントをたくさん書いて、初心者でもわかりやすいようにしています。StyleSheet.create() を使ってデザインすることで、コードが見やすくなって、アプリの動きも速くなります。
デザインとレイアウト
React NativeのレイアウトはFlexboxで作ります。flex:1 で要素を自由に動かして、justifyContent と alignItems で配置を調整します。OSごとに少し違うところは Platform.OS を使って、iOSとAndroidで見た目を変えることができます。最近はExpo SDK 54にLiquid Glass効果が入って、expo-glass-effect の <glassview> コンポーネントを使うと、ガラスみたいなデザインが簡単にできます。UIの美しさは、副業の案件を取れるかどうかに影響するので、細部までこだわりましょう。
画面の切り替え
画面がたくさんあるアプリでは、React Navigationを使って画面を切り替えます。これは、スタックナビゲーションの例です。
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './src/screens/HomeScreen';
import DetailScreen from './src/screens/DetailScreen';
const Stack = createStackNavigator();
export default function App() {
return (
<navigationcontainer>
<stack.navigator initialroutename="Home">
<stack.screen name="Home" component="{HomeScreen}">
</stack.screen></stack.navigator></navigationcontainer>Detail component={DetailScreen} />
);
}こんな感じで、画面の切り替えも簡単にできます。副業でよくあるタスク管理アプリとかToDoリストアプリでは、ホーム画面で一覧を表示して、詳細画面で編集したり削除したりする構造が多いです。自分のポートフォリオでも、画面の切り替えの練習として、小さいアプリを作ってみると良いでしょう。
UIライブラリとアクセシビリティ
React Native ElementsとかNativeBaseみたいなUIライブラリを使うと、おしゃれな部品をすぐに使うことができます。でも、ライブラリに頼りすぎるとアプリの特徴がなくなることもあるので、自分でデザインを変えたり、部品を組み合わせたりしましょう。アクセシビリティも大切です。accessibilityLabel とか accessibilityHint を設定して、目の不自由な人がスクリーンリーダーで操作できるようにしたり、色のコントラストが十分かを確認したりします。
状態管理とAPI通信
アプリが複雑になってくると、部品の状態だけでは管理が難しくなります。グローバルな状態管理にはRedux Toolkitが便利です。設定が簡単で、configureStore と createSlice を使うと、状態の作成や更新が楽になります。これは、タスク管理アプリの状態管理の例です。
// src/store/tasksSlice.js
import { createSlice } from '@reduxjs/toolkit';
const tasksSlice = createSlice({
name: 'tasks',
initialState: [],
reducers: {
addTask: (state, action) => {
// タスクを追加
state.push({ id: Date.now(), title: action.payload, completed: false });
},
toggleTask: (state, action) => {
// 完了フラグを切り替え
const task = state.find((t) => t.id === action.payload);
if (task) task.completed = !task.completed;
},
removeTask: (state, action) => {
// タスクを削除
return state.filter((t) => t.id !== action.payload);
},
},
});
export const { addTask, toggleTask, removeTask } = tasksSlice.actions;
export default tasksSlice.reducer;
// storeの作成
// src/store/index.js
import { configureStore } from '@reduxjs/toolkit';
import tasksReducer from './tasksSlice';
export const store = configureStore({
reducer: {
tasks: tasksReducer,
},
});API通信にはAxiosを使います。例えば、外部のToDoリストAPIからデータを取得する場合は、次のような関数を用意します。
// src/services/api.js
import axios from 'axios';
const client = axios.create({
baseURL: 'https://example.com/api',
timeout: 5000,
});
export const fetchTasks = async () => {
const response = await client.get('/tasks');
return response.data;
};Redux Toolkitの createAsyncThunk を使うと、APIの呼び出しと状態の更新をまとめてできます。状態管理やAPIの呼び出しが整理されることで、副業案件で色々な機能を組み合わせる時にもコードが追いやすくなります。
デバッグ・テスト・最適化
アプリ開発では、作るのと同じくらいデバッグとテストが大切です。React NativeではChrome DevToolsとかReact Native Debugger、Flipperといったツールを使って、部品の状態とかネットワーク通信を確認できます。Expoでは、ブラウザ上でログを確認したり、コードを修正したらすぐに反映させたりできます。
単体テストにはJest、エンドツーエンドテストにはDetoxがよく使われます。Jestで部品がちゃんと表示されるか確認して、Detoxで実際にスマホを操作するのと同じようにテストすることで、リリース前に不具合を減らせます。新しい仕組みでは、初期表示とか処理が速くなっていて、React Native 0.82ではHermes V1によって、アプリの起動時間が少し短くなったという報告もあります。でも、アプリの動きを速くするためには、無駄な再表示を避けたり、FlatListにkeyExtractorを指定したりといった基本的なことも大切です。
ビルドとリリース
アプリが完成したら、リリースビルドを作って、アプリストアに提出します。Androidの場合は、cd android && ./gradlew assembleRelease を実行して、署名付きAPKを作って、Google Play Consoleで公開します。App Bundle（AAB）形式がおすすめなので、Gradleの設定ファイルで bundleRelease タスクを有効にしましょう。iOSの場合はXcodeでアーカイブを作って、App Store Connectへ申請します。Expoを使っている時は eas build -p android とか eas build -p ios を実行するだけでビルドできるので、証明書の管理が楽です。
副業としてアプリを納品する時は、クライアントが求めるOSに合わせてビルド方法を選びます。AndroidだけならWindowsだけでも対応できますが、iOS対応が必要な場合はMacを用意するか、EAS Buildなどを利用するか、あらかじめ相談しておくことが大切です。ストアの審査には数日かかることもあるので、スケジュールに余裕を持たせましょう。
学習ロードマップ
React Nativeでアプリ開発を学ぶロードマップは、こんな感じです。
- JavaScriptとReactの基礎: まずはJavaScriptとReact（Hooksも）を勉強します。独学でもできますが、オンラインスクールなら先生が課題をチェックしてくれるので、理解が深まります。
- React Native基礎: 部品の作り方、デザインの書き方、画面の切り替えとか状態管理とか、基本的なことを学びます。スクールの課題では、天気アプリとかToDoアプリを作って理解を深めました。
- 環境構築とデバッグ: Node.jsとかAndroid Studio、Xcodeをインストールして、エミュレーターとか実際のマシンを設定して、デバッグツールの使い方を覚えます。
- 中規模アプリの制作: API通信とか状態管理ライブラリ、UIライブラリを組み合わせて、中規模アプリを作ります。実際の案件を想定して、どんなものを作るか決めたり、設計したりするので、この段階で副業案件を受ける準備が整います。
- ビルドとリリース、保守: リリースビルドを作って、ストアへ申請・公開する手順を学びます。公開後は、ユーザーからの意見を聞いてアップデートを繰り返します。
副業では、React Nativeの経験だけでなく、お客さんとのコミュニケーションも大切です。例えば、納期の調整とか、要件変更の相談とか、アップデート後の不具合対応とか、Web制作とかサーバー保守で培ったスキルが役に立ちました。プログラミングスクールでは、案件の相場 とか クラウドワークスでの提案方法 についても教えてくれるので、副業初心者には助かります。
実践アドバイス
エラーは必ず調べよう
React Nativeで開発していると、赤いエラースクリーンが出てきて、やる気がなくなることが何度もありました。例えばAndroid Studioの設定ミスでビルドができなかったり、CocoaPodsのバージョンが違っていてライブラリがインストールできなかったり。そんな時は焦らずに、エラーメッセージをコピーして検索して、公式サイトとかGitHubのIssueを確認するのが大切です。React Nativeコミュニティは活発で、最新バージョンの不具合とか解決策がすぐに共有されています。新しい仕組みに移行する時に、使えないライブラリが見つかった場合は、ライブラリの管理者に問い合わせるか、同じ機能を持つ別のライブラリを探すと良いでしょう。
ホットリロードとデバッグ
開発中はホットリロードとかFast Refreshを使って、効率を上げましょう。特にExpoはデフォルトでホットリロードが有効なので、すぐに変更が反映されます。Chrome DevToolsとかReact Native Debuggerでコンソールログとか部品の状態を確認して、どの処理に時間がかかっているか分析します。FlipperのネットワークタブでAPI通信を監視できるので、サーバーからの応答時間とかJSON形式の確認が簡単になります。
時間と健康
副業で夜遅くまで開発することもありますが、睡眠不足とか作業のしすぎは良くないです。私は初めてReact Nativeアプリを作った時、納期直前に無理をして、エラーの原因を見落として、リリースが1週間遅れてしまいました。先生から「夜中にコーディングしても良いことはない」と言われて、生活リズムを整えるようにしました。健康管理は、長く続けるためにも大切です。
バージョン管理とチーム開発
Gitを使ったバージョン管理は必須です。プルリクエストベースでコードレビューをして、細かいコミットメッセージを残すことで、後から変更履歴を追いやすくなります。React Nativeでは、OSごとの設定も含めて管理する必要があるので、機能ごとにブランチを切り、ios/ とか android/ 配下の変更もプルリクエストで確認できるようにしましょう。副業では、クライアントのリポジトリにアクセスすることも多いので、GitHubの権限設定とか秘密情報の管理方法も覚えておく必要があります。
コミュニティに参加
独学でモチベーションを維持するのは難しいです。私はオンラインサロンとかハッカソンに参加して、React Native仲間と情報交換をしました。そこで得た知識とか、他人のコードレビューは、自分の成長につながります。プログラミングスクールとか勉強会に参加して、現場のエンジニアから直接学ぶ機会を増やすのもおすすめです。副業の案件情報が共有されることもあって、人脈づくりにもつながります。
よくある質問
Q1: React Nativeは2025年でも使える？
A: はい、React Nativeは2025年でも広く使われています。最新バージョンではパフォーマンスが良くなって、InstagramとかDiscordみたいな大きなアプリでも採用されています。新しい仕組みとHermes V1の導入で、起動時間も短くなっています。
Q2: ExpoとReact Native CLI、どっちが良い？
A: 学習初期とか小さめのアプリ、副業の試作ではExpoがおすすめです。設定も簡単で、すぐに実機テストができます。ネイティブモジュールを自分で作ったり、高度なカスタマイズが必要な場合はReact Native CLIが良いでしょう。将来的にネイティブコードを触る予定があるなら、早いうちにCLIに慣れておくと良いでしょう。
Q3: iOSアプリはMacがないと作れない？
A: ローカルでXcodeを使ってビルドするにはMacが必要です。でも、Expo Application Services（EAS）とかクラウドCIサービスを使えば、MacがなくてもiOSアプリのビルドとテストができます。私はWindowsユーザーですが、EAS Buildを使って副業案件のiOSビルドをしました。
Q4: アプリのテストはどうすれば良い？
A: Jestを使ったユニットテストでロジックの動作を確認して、Detoxで実際にユーザーが操作するのと同じようにテストするのがおすすめです。Expoでも同じようにテストできて、CI/CDに組み込めば、コードを修正するたびに自動でテストが走るように設定できます。
Q5: 副業で稼げる？
A: 案件の規模とか、自分のスキルによって収入は変わりますが、Web制作よりも単価は高い傾向があります。React Nativeアプリの開発費用は簡単なアプリでも数十万円から、複雑な案件では数百万円になることもあります。スクールとかコミュニティで案件単価の相場とか交渉術を学んで、ポートフォリオを充実させることが、より高単価な副業を獲得するコツです。
手順を振り返ると…
React Nativeでモバイルアプリを作る手順を振り返ると、環境構築・プロジェクト作成・UI/UX実装・状態管理・デバッグ・ビルドといったステップを積み重ねていくことが大切だとわかります。最新バージョンのReact NativeやExpoの改善で、初心者でも開発しやすくなりました。私も最初は環境構築で苦労しましたが、スクールの先生とかコミュニティの助けを借りて乗り越えることができました。副業としてもReact Nativeの需要は高く、モバイルアプリのスキルを身につけることは、自分のキャリアを大きく広げることにつながります。
今、この記事を読んでいるあなたが、私と同じように「自分のアイデアを形にしたい」「副業で稼げるスキルを身につけたい」と感じているなら、ぜひReact Nativeに挑戦してみてください。失敗することもあるかもしれませんが、それを乗り越えた先に、開発者としての成長があります。この記事が、あなたの第一歩を踏み出す手助けになれば嬉しいです。
手順を振り返ると手順を振り返ると手順を振り返ると
