MENU
AIで稼ぐ最底辺｜発達障害×引きこもりからの挑戦
  1. ホーム
  2. AI×稼ぐ
  3. 初心者のReact Native入門｜Expoとの違い・CLIの始め方・OTA更新まで手順まとめ

初心者のReact Native入門｜Expoとの違い・CLIの始め方・OTA更新まで手順まとめ

AI×稼ぐ スマホアプリ開発 毎日の作業報告記録

最近、EasyNovelAssistantでノベル作りに励んでいたのだけれども、ちょっと行き詰っていました。
そこで！気分転換に、前からやろうと思っていたけど出来ていなかったReact Native単体（Expoを使わずに）でのスマホアプリ開発に浮気してみました。

以前は、expo + react nativeでいくつかアプリを作っていたけど、expoとadmobのバージョン問題で広告が導入できず、あえなく断念。

あわせて読みたい
ExpoでAdMobが動かない！？Kotlinバージョン地獄にハマった話（と今できるベストな対処法） コードも書けない初心者がReact Native × Expoでグーグルのアップデートによって発生したkotlinバージョン問題によって見事に沼にハマりました。結果的に3日以上、毎日...

あと、expoの無料プランってビルド回数の制限があって、当時は月5回までしかできないと思ってたから、「リリース後の不具合対応も回数に含まれるのヤバくない？」ってなって、正直、無料じゃもう無理だなって結論に達していたのです。

あわせて読みたい
Expo（React Native）Freeプランで何個までアプリ公開できるの？月5回制限の真実と、うっかり初心者のた... 先日、せっせと作ったスマホアプリをビルドしようとしたら、Expo様からまさかの通知。 「月5回のビルド制限を超えました」 …いや、嘘でしょ？って一瞬フリーズしました...

…と思ったら、今見たら月30回（AndroidとiOS合計）までOKになってるっぽい？
ただ、無料プランだと混雑時に30分～2時間待ちとかザラにあるみたいで、実際使ってたときもかなりストレスだった。

そんなわけで、今回あらためてReact Native単体での開発にチャレンジしてみることに。

React Native CLIなら、ビルドも更新も全部自分のPCで完結するから、お金もかからず、ビルド制限もなし。
しかも、ネイティブ機能も自由に使えるので、expoよりもいろいろできる…っぽい。

ただ、前にChatGPTには「React Nativeは初心者には導入が難しいよ～」って脅されてたし、私はコードも書けないし、超初心者だから「無理では？」と思っていたのです。

でも、実際やってみたら…expoとそこまで変わらなかった！
環境構築とか多少めんどくさいところもあったけど、AI（ChatGPT）に頼りながら進めたら、ASDでIQ67の私でもなんとかなりました。

もちろん、expoとの違いや開発のクセ、ビルドの重さなどは感じたけれど、こっちのほうがなんか玄人っぽくていいかもしれない。

目次

React Native CLIとExpoって何が違うの？初心者でもわかる違いまとめ

まずは、「ExpoとReact Native CLIってそもそも何が違うの？」ってところから整理してみます。
これは実際に私が両方使ってみたからこそ分かったリアルな違いです。

Expoとは？

  • インストールがめっちゃ楽（npx create-expo-app だけ）
  • スマホに「Expo Go」アプリを入れれば、コードをすぐ実機で見られる
  • JavaやAndroid Studioを一切触らずに開発できる
  • ただし、ネイティブ機能の追加には制限がある
  • ビルド（本番用APKなど）は無料だと月30回の制限あり

React Native CLIとは？

  • ガチのAndroidアプリ開発ができる
  • android/ フォルダやネイティブコードが最初から使える
  • 自分のPC上で何度でもビルドOK
  • ただし、JavaやAndroid Studioのインストールが必要
  • 初期設定がちょっと面倒（でもAIに任せれば大丈夫！）

表で比べてみた

項目ExpoReact Native CLI
セットアップ難易度★☆☆☆☆（超簡単）★★★★☆（環境構築が必要）
ビルド回数制限（無料）月30回まで無制限（PCでビルド）
ネイティブ機能の自由度制限あり自由自在
開発速度かなり速い初回は遅い、2回目から少しマシ
実機確認のしやすさExpo Goで即表示AVDや実機接続が必要
OTA（更新機能）標準搭載（expo publish）自分で構築する必要あり（CodePush）

React Native CLIの開発環境構築【Windows初心者向け完全ガイド】

React Native CLIでAndroidアプリを作るには、いくつかのツールを自分のPCにインストールしておく必要があります。
順番通りに進めれば、初心者でもちゃんと動かせます！

必要なものリスト（Windows）

ツール名役割
Node.jsJavaScriptを動かすランタイム
npmパッケージ管理ツール
Java JDK（11以上）Androidのビルドに必要な開発環境
Android StudioエミュレーターやSDKを管理
環境変数設定JavaやSDKの場所をOSに教えるため

この辺は、私はexpoを使用していたので、android studioのみインストールとなりました。

手順①：Node.jsとnpmのインストール

  1. 公式サイトにアクセス：
    https://nodejs.org/
  2. 「LTS（推奨版）」をダウンロードしてインストール
  3. ターミナルを開いて以下を入力して確認：
node -v
npm -v

手順②：Java JDKのインストール

  1. JDK 17（または11）を以下から入手：
    https://adoptium.net/
  2. インストーラーの指示に従ってインストール
  3. ターミナルで確認：
java -version

手順③：Android Studioのインストールと設定

  1. 公式サイト：
    https://developer.android.com/studio
  2. インストール中に以下のチェックをすべて入れる：
  • Android SDK
  • Android SDK Platform
  • Android Emulator
  • Android Virtual Device (AVD)
  1. Android Studio 起動後：
  • 「More Actions」→「SDK Manager」
  • 「SDK Platforms」→ Android 13 (API 33) をチェック
  • 「SDK Tools」→ Build-Tools, Platform-Tools, Emulator, Intel HAXM をチェック

手順④：環境変数の設定

環境変数に以下を追加します：

  • JAVA_HOME
  • ANDROID_HOME
  • PATH に platform-tools と emulator のパスを追加

※ これは少し難しいので、手順書か、AI（chatgpt）に聞きながらやるのが確実です。

補足：エミュレーター（AVD）を作っておこう

  • Android Studio の「Device Manager」から Pixel 5などの仮想デバイスを作成
  • OSイメージは Android 13 (API 33) が安定しておすすめ
  • 作成後、「▶」ボタンで仮想デバイスが起動するか確認

ここまでできれば準備完了！

次からは実際にReact Native CLIでプロジェクトを作って、スマホアプリを動かしてみます

React Native CLIでアプリを作ってみよう【電卓アプリ編】

環境構築が終わったら、いよいよ実際にアプリを作って動かしてみてください。

私は最初に試しに、超シンプルな電卓アプリを作成して、エミュレーターで動かしてみました。

手順①：プロジェクトを作成

以下のコマンドをターミナルで実行します：

npx @react-native-community/cli init CalcApp

すると、CalcApp というフォルダが作成され、React Native CLI用のアプリテンプレートが自動で生成されます。
TypeScript対応の構成がデフォルトで入っているので、初心者でも型安全な開発ができます。

フォルダ構成（ざっくり）

フォルダ/ファイル内容
App.tsxアプリのメイン画面（ここを書き換える）
android/Androidネイティブコード
ios/iOSネイティブコード（Windowsでは使わない）
package.jsonライブラリ管理

手順②：仮想デバイスを起動

Android Studio の Device Manager から、作成済みの仮想デバイス（Pixel 5など）を選んで ▶ ボタンで起動しておきます。

手順③：アプリをエミュレーターにインストールして実行

以下のコマンドでビルド＆実行：

cd CalcApp
npx react-native run-android

初回はGradleビルドに少し時間がかかります（数分程度）。
ビルドが成功すると、自動でエミュレーターにアプリがインストールされ、起動します！

初期状態の画面

React Nativeのデフォルト画面が表示されます。「Welcome to React Native」という白い画面が出たら成功！

App.tsx を編集してシンプル電卓アプリを作ろう

初期状態の App.tsx を、タップで計算できる簡単な電卓アプリに書き換えていきます。

アプリの仕様

  • 2つの数字を入力
  • + - × ÷ のボタンで計算
  • 計算結果を画面に表示

初心者でもすぐ理解できるシンプル構成です。

🧑‍💻 手順①：App.tsx を開いて編集

CalcApp/App.tsx をテキストエディタ（VS Codeなど）で開いて、以下のコードにまるっと置き換えます：

import React, { useState } from 'react';
import { View, Text, TextInput, Pressable, StyleSheet } from 'react-native';

const App = () => {
  const [num1, setNum1] = useState('');
  const [num2, setNum2] = useState('');
  const [result, setResult] = useState<number | null>(null);

  const calculate = (operator: string) => {
    const a = parseFloat(num1);
    const b = parseFloat(num2);
    if (isNaN(a) || isNaN(b)) {
      setResult(NaN);
      return;
    }

    let res = 0;
    switch (operator) {
      case '+':
        res = a + b;
        break;
      case '-':
        res = a - b;
        break;
      case '*':
        res = a * b;
        break;
      case '/':
        res = b !== 0 ? a / b : NaN;
        break;
    }
    setResult(res);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>🧮 Simple Calculator</Text>
      <TextInput
        style={styles.input}
        keyboardType="numeric"
        placeholder="Enter first number"
        value={num1}
        onChangeText={setNum1}
      />
      <TextInput
        style={styles.input}
        keyboardType="numeric"
        placeholder="Enter second number"
        value={num2}
        onChangeText={setNum2}
      />

      <View style={styles.row}>
        {['+', '-', '*', '/'].map((op) => (
          <Pressable key={op} style={styles.button} onPress={() => calculate(op)}>
            <Text style={styles.buttonText}>{op}</Text>
          </Pressable>
        ))}
      </View>

      <Text style={styles.result}>
        Result: {result !== null ? isNaN(result) ? 'Invalid Input' : result : '---'}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  title: { fontSize: 28, marginBottom: 20, fontWeight: 'bold' },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    width: '80%',
    padding: 10,
    marginVertical: 10,
    fontSize: 18,
    borderRadius: 8,
  },
  row: { flexDirection: 'row', marginTop: 20 },
  button: {
    backgroundColor: '#007AFF',
    padding: 12,
    marginHorizontal: 5,
    borderRadius: 8,
    minWidth: 50,
    alignItems: 'center',
  },
  buttonText: { color: 'white', fontSize: 20 },
  result: { fontSize: 22, marginTop: 30 },
});

export default App;

手順②：エミュレーターで確認

すでに npx react-native run-android で起動中なら、エミュレーター上で R キーを2回連続で押すと画面がリロードされ、変更が反映されます。

または以下で再実行も可：

npx react-native run-android

結果：タップできる電卓アプリが完成！

  • 数字を入力
  • + - × ÷ ボタンをタップ
  • Result: ○○ と計算結果が表示されます

超シンプルだけど、**「ちゃんとReact Nativeでスマホアプリを作った！」**という実感が得られます！

⚖ ExpoとReact Native CLIの違いを体感して分かったこと

実際に両方の開発方式を試してみて、「ああ、これは明確に違うな」と感じた点をまとめます。

ビルド時間が圧倒的に違う

Expoの場合：

  • npx expo start → 数秒で開発開始
  • 変更後も即リロード、ビルド待ちは基本ゼロ
  • 実機で見るのも Expo Go アプリから即OK

⚙ React Native CLIの場合：

  • npx react-native run-android で、初回ビルドに2〜5分かかることも
  • Gradleがフルで動くため、PCスペックが低いと重い
  • AVD（仮想デバイス）が起動していないと先に進めない

初心者が「おや？重い？動かない？」と感じる原因の多くは、このCLI側のビルド工程にあります。

実行中のプロセスが多い？

React Native CLI で開発中は、裏で次のようなものが動いています：

プロセス説明
Metro BundlerJSコードを変換・配信するサーバー
Gradleネイティブコードをビルド
Android Emulator仮想Androidスマホ
ADB (Android Debug Bridge)デバイスと通信するツール

→ コマンドプロンプト（ターミナル）ウィンドウが 3～4個開いて当たり前という世界。
最初は「これ全部必要なの！？」ってビビるけど、だんだん慣れます（笑）

OTA（Over The Air）アップデートの違い

  • Expo： 最初から expo publish で更新可能。ストア申請いらず。
  • CLI： 自分で構築（CodePushなど）しないと OTA は使えない。

でも、CLIでも一度構築すれば、

appcenter codepush release-react みたいな1コマンドでJSの更新を配信できるようになります。

ただし、一度だけストアにOTA対応版のアプリをアップロードする必要があるのは注意点。

CLIに向いている人・使うべきタイミング

  • 「カメラ」「センサー」「Bluetooth」などネイティブ機能を使いたい
  • アプリをストアで配信したい
  • 月5回以上ビルドしたい（←Expo無料制限を超える人）

逆に、試作・学習目的なら Expo の方が正直早い。

CLIを使って感じたリアルなまとめ

感想コメント
初期設定はめんどいでも一度できれば、何度でも使い回せる
ビルド時間は長い2回目以降は少しマシになる
実行中のウィンドウ多いMetro、Gradle、AVD…「にぎやか」って感じ
ネイティブ感は最高「本当にAndroidアプリ作ってる！」感がある

OTAアップデートは導入すべき？初心者が知っておくべき判断基準

「OTAって便利そうだけど、初心者にも必要？」
これはReact Native CLIを始めたとき、一度は悩むポイントだと思います。

実際にOTAの仕組みを学び、AIに頼りつつも自分で判断してみた結果――

更新の予定がなければ、無理に導入しなくてOK！
でも、継続開発・改善するアプリなら導入する価値あり！

OTAとは何か？ざっくりおさらい

OTA（Over The Air）アップデートとは：

ストアに再申請せずに、ユーザーのスマホへアプリの更新を配信する仕組み。

  • Expoでは最初から expo publish で可能
  • React Native CLIでは、自分で構築が必要（代表例：Microsoft CodePush）

OTAが「必要ない」アプリの特徴

  • 完成したらもう更新する気がない
  • 一発ネタ・学習目的の小さなアプリ
  • ストア審査や更新作業が苦じゃない

こういったケースでは、OTAの導入コストの方が高くつくのでスルーしてOKです。

OTAが「必要になる」アプリの特徴

  • 公開後にバグ修正や機能追加の予定がある
  • 不特定多数に配布する
  • ストア審査を毎回通すのが大変そう
  • 複数人で使う社内アプリ・営業ツールなど

こういうアプリには、OTAの即時反映・無審査更新の恩恵がめちゃくちゃ大きいです。

React Native CLIでOTAを導入するには？

以下の手順で導入可能（AIの助けがあれば初心者でもできる）：

  1. Microsoft アカウントを作成
  2. App Center にアプリを登録
  3. react-native-code-push ライブラリを導入
  4. App.tsx に組み込み
  5. ビルド＆ストアに一度だけ更新版をアップロード
  6. 以降はコマンドでJSのみ配信OK！

一度導入してしまえば、あとは codepush release-react で1コマンド更新が可能になります。

最終結論

アプリタイプOTAの必要性
単発の学習用アプリ❌ いらない
今後更新の予定がない❌ いらない
バグ修正や機能追加が出そう✅ 入れて損なし
社内や多数に配る本番アプリ✅ あった方が安心

初心者でも、「更新するかどうか」という観点で判断すればOK！
最初から無理に入れる必要はまったくありません。

まとめ：初心者でもReact Native CLIはやれる！

  • 環境構築は少し大変だけど、AIに任せれば迷わず進めれます。
    ただしハルシネーションに注意。chatgptで２つのチャットで同じことを同時にすすめたり、geminiやcloudeで同時進行で同じ質問をするのもいいかも。
  • Expoを最初に経験して置けば、reactnative単体でも特に問題は無かったです。
  • OTAは「必要になったときに入れればOK」という気持ちで大丈夫です。もしくはAIに任せれば大丈夫だと思う・・。

✨ これから始める人へ一言

React Native CLIは、初心者でもちょっとの根気とAIの助けがあれば絶対に動かせます！
難しいと思わず、まずは1つ動かしてみるところから始めてみてください。

AI×稼ぐ スマホアプリ開発 毎日の作業報告記録
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

コメント

コメントする

目次