React Native入門｜Expoでサンプルアプリを作成して実機確認する方法

React Nativeとは？

React Nativeは、JavaScriptまたはTypeScriptを使って、iOS・Android向けのモバイルアプリを開発できるオープンソースのフレームワークです。

本記事では、React Nativeの開発支援ツールであるExpoを使用し、プロジェクトの作成からWebブラウザ、iOSシミュレータ、実機での動作確認までを初心者向けに解説します。

Expoとは？

「Expo」とはReact Nativeアプリを開発する上で、開発をアシストしてくれるツール群を有しているのが、「Expo」である。今回は、「Expo」での開発を前提して説明していく。

React Nativeの開発環境を準備する

React Nativeで開発では、Node.js及び今回は、開発エディタとしてVSCodeを利用することとする。

以下にインストール手順を記載。

Node.jsのインストール

もし、Node.jsがインストールされていないならば、Node.jsのインストールを実施。

Node.jsのバージョンを複数インストールしておき、複数バージョンを使用できるようにしたいため、nvmというバージョンマネージャーをインストールして、nvmでNode.jsを適用するようにする。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash
nvm install 24
node -v

VSCode(Visual Studio Code)のインストール

自分の好みのエディタでいいのですが、今回はVSCodeを利用してReactNativeの基本アプリケーションを作成することにする。

Visual Studio Codeのダウンロードページからインストール対象のOSを選択し、ダウンロードしインストールをしておく。

「Expo」による「React Native」のアプリ作成の方法

以下のコマンドにより、Expoによる「React Native」の初期アプリを作成

create-expo-appを実行する

npx create-expo-app@latest sample-app

Expo SDKのバージョンを選択する

? Select an Expo SDK version: › - Use arrow-keys. Return to submit.
❯   Latest (SDK 57) - Recommended for most projects
    For learning with Expo Go (SDK 54)
    Other SDK version…

という表示になる場合があり、ここでリターンを押して「Latest(SDK57)」を選択してしまうと、後述するアプリのExpo Goアプリとのバージョン不一致が起きてしまう。よって、「>」を下にして「For learning with Expo Go(SDK 54)」の方を選択して、実行する。そうすると、インストールが実行開始、しばらくすると初期アプリが生成される。

アプリの生成が成功したら、以下のメッセージが出力される。

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd sample-app
- npm run android
- npm run ios
- npm run web

作成したアプリを起動する

このメッセージ通り、作成したディレクトリ「sample-app」に移動して、今手元にAndroidの実機はないので、以下を実行

Webブラウザで確認する

npm run web

ブラウザ上に今作成した、「React Native」で作成したアプリが表示される。

また、実行した際、以下のQRコード等が表示される。

React Compiler enabled
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █ ▄▄ █▀ █▄█ ▄▄▄▄▄ █
█ █   █ ██▄█▀▀ ▄▄ █ █   █ █
█ █▄▄▄█ █ ▀▀▄ ▄██ █ █▄▄▄█ █
█▄▄▄▄▄▄▄█ ▀▄█▄█ █ █▄▄▄▄▄▄▄█
█   █▀ ▄█ ▄█▄ █  █▄ ▄▄██  █
█ ▀█ ▄ ▄▄ ▄ ▀ ▄▄▄██▀▄█▄▄█▄█
██▄ ▄█▄▄ █▄ █▄█  █  ███▀ ▀█
█▄▄▀▄█▀▄▀▀▀ ▄█▄█   ▄█ ▄█▀▄█
█▄▄▄█▄▄▄█  ▄ █▀ █ ▄▄▄  ▀█ █
█ ▄▄▄▄▄ █▀▄▀▄▄█▄█ █▄█ ███ █
█ █   █ ███▄▀█▀ ▄▄▄▄   ▀ ██
█ █▄▄▄█ █ █▀▄▄▄▄ ▀▀█ ▄██▄▄█
█▄▄▄▄▄▄▄█▄▄█▄██▄▄▄▄█▄▄███▄█

› Metro waiting on exp://192.168.150.104:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Web is waiting on http://localhost:8081

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› shift+m │ more tools
› Press o │ open project code in your editor

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.
λ Bundled 8650ms node_modules/expo-router/node/render.js (1101 modules)
Web node_modules/expo-router/entry.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓░ 98.8% (1133/1140)
Web Bundled 9547ms node_modules/expo-router/entry.js (1140 modules)
Web Bundled 3191ms node_modules/expo-router/entry.js (1150 modules)
 LOG  [web] Logs will appear in the browser console

iOSシミュレータで確認する

ここで、iOSのシミュレータを実行するため、「i」をキーボードから入力すると、自分の開発環境上にある、iOSのシミュレータ上にアプリが立ち上がる。

Expo Goで実機確認する

また、実機で確認したい場合は、自分の携帯に「App Store」から「Expo Go」をインストールする。

そして、上記の「QRコード」を自分の携帯からカメラで撮ると、自分の端末にサンプルアプリが立ち上がる。

まとめ

結構以前にReact Nativeで、アプリ開発を行おうとした際よりかなり簡単にアプリ作成、シミュレータ、実機確認ができるようになったかと思います。

さらに今後は深い部分まで使い込んでいきたいと考えております。

コメント