はじめに

最近、私は BLE 通信ができるスマホアプリを React Native で開発しています。
しかし、React Native で BLE 通信を行うためのライブラリ（例：react-native-ble-plx）は、スマートフォンの OSに直接アクセスする ネイティブ機能 を使用しますので、React Native の開発でよく使われる「Expo Go」（Google Play や App Store から配布されている共通クライアントアプリ）では、このようなネイティブ機能を含むアプリを実行することができません。実際に実行しようとすると、ライブラリが読み込めずエラーになります。

そこで本記事では、ネイティブ機能に対応した開発用の専用クライアントアプリを自分で作れる Expo の公式機能 expo-dev-client を使って、React Native アプリ（Hello Worldを画面表示するアプリ）をスマホ実機に表示するまでの手順を 1 から解説していきます。

なお、本記事では対象のスマートフォンをAndroidのみと絞らせていただきます。（iPhone持ってないので……いつかiPhoneを買ったらiOS版も更新しますね）

目次

はじめに
1. 前提条件
2. アプリをスマホ実機に表示する手順
おわりに

1. 前提条件

使用するOSや開発エディタ、スマホ実機については以下の通りです。

項目	内容
OS	Windows 10 / 11
エディタ	Visual Studio Code（以下、VSCode）
実行環境	Node.js
実機	スマートフォン(Android)

本記事では、Windows上で VSCode を使用し、手元のAndroidのスマートフォンと連携する形で開発環境を構築します。

VSCode,Node.jsをまだインストールされていない方は、以下の記事で手順を詳しく解説しています。

2. アプリをスマホ実機に表示する手順

expo-dev-clientを用いてアプリをスマホ実機に表示するやり方について、１から解説していきます。

2-1. Expoアカウント作成

expo-dev-clientで開発用のアプリを作成するためには、Expoのアカウントが必要です。
Expoアカウントを持っていない方は、以下の手順でExpoアカウントを作成しましょう。
既にExpoアカウントを持っている方は、読み飛ばしていただいて大丈夫です。

2-1-1. Expoの公式サイトを開く

下記のリンクから、Expoの公式サイトを開きましょう。
Expo公式サイト

2-1-2. Sign Upボタンを押下

サイトを開くと、右上の隅に「Sign Up」の青いボタンがあるので、クリックしてアカウント作成画面に遷移しましょう。

2-1-3. 登録するアカウント情報を入力

Create an Account画面に遷移したら、登録するアカウント情報を入力しましょう。
Email、Username、password、Confirm passwordの入力が完了したら、
「I agree to the Tearms of Service and Privacy Policy」にチェックを入れて、「Sign Up」ボタンを押下しましょう。

2-1-4. 登録完了

Dashboard画面に遷移できたら登録完了です。

2-2. プロジェクトを作成する

VSCodeを開き、プロジェクトを作成しましょう。

2-2-1. VSCodeを開く

すでにインストールしているVSCodeを開きましょう。
まだインストールしていない方は、「1.前提条件」にインストール手順の記事のリンクを載せていますので参考にしてください。

2-2-2. フォルダを開く

プロジェクトフォルダを配置する任意のフォルダを開きましょう
上部メニューバーの「ファイル」>「フォルダーを開く」、を押下して開くフォルダを指定してください。

「フォルダーを開く」ダイアログで任意のフォルダを開き、「フォルダーを選択」ボタンを押下しましょう。

補足：「このフォルダーの作成者を信頼しますか？」というダイアログが表示された場合は、自分で作成したプロジェクトであれば「信頼する（Yes）」を選んで問題ありません。
これは、VSCodeのセキュリティ機能「ワークスペースの信頼」による確認です。

2-2-3. ターミナルを開く

ExpoにCLI（コマンドラインインターフェース）でログインするために、まずはVSCodeのターミナルを開きましょう。

上部のメニューバーの「表示」>「ターミナル」を押下する、もしくは「Ctrl+@」を入力することでVSCode上にターミナルを表示することができます。

上記作業を行うとVSCodeの画面下部に、手順「2-2-2. フォルダを開く」で選択したフォルダーパスをプロンプト（カレントディレクトリを示す表示）としてターミナルが下記のように表示されます。

2-2-4. create-expo-appコマンドでプロジェクトを作成する

Expo環境で開発を進めるときのプロジェクトのひな型を作成してくれるcreate-expo-appコマンドをターミナルで実行し、プロジェクトを作成しましょう。

下記のコマンドを実行してみてください。

npx create-expo-app HelloWorldApp --template

create-expo-appコマンドを実行すると、下記のようにcreate-expo-appパッケージを一時的にインストールするか聞かれますが、「y」を入力してインストールを実行しましょう。

PS C:\work\qiitaApp> npx create-expo-app HelloWorldApp --template
Need to install the following packages:
create-expo-app@3.4.2
Ok to proceed? (y)

次に、作成するプロジェクトのテンプレートの選択肢がターミナルに表示されますので、今回はexpo-router + TypeScript構成のテンプレートである「Navigation (TypeScript)」を選択します。

? Choose a template: » - Use arrow-keys. Return to submit.
    Default
    Blank
    Blank (TypeScript)
>   Navigation (TypeScript) - File-based routing with TypeScript enabled
    Blank (Bare)

インストール実行後、「Your project is ready!」の文字がターミナル表示されたら、create-expo-appコマンドが正常終了したことを意味しているので、プロジェクト作成完了です。

左側のエクスプローラーを見ると「HelloWorldApp」プロジェクトが作成されているのがわかります。

補足：
create-expo-app コマンドで自動作成されたプロジェクトの中には、expo パッケージがすでに含まれているため、
プロジェクトフォルダ内であれば npx expoコマンドを実行しても追加ダウンロードなしですぐに使えるようになります。

2-3. Expoアカウントでログイン

Expoでは、クラウド上でビルドを実行する eas build 機能などを利用する際に、Expoアカウントでのログインが必要です。
このログインによって、ビルドやデバイスへの配信などの操作がユーザーアカウントに紐づき、Expoの各種クラウド機能が利用できるようになります。

以下のコマンドでプロジェクトフォルダに移動し、ターミナルからExpoアカウントにログインしましょう。

PS C:\work\qiitaApp> cd .\HelloWorldApp\
PS C:\work\qiitaApp\HelloWorldApp> npx expo login

npx expo loginコマンドを実行すると、以下のようにExpoに登録しているEmailまたはusernameを聞かれますので、手順「2-1. Expoアカウント作成」で登録したアカウントのメールアドレスまたはユーザ名を入力しましょう。

PS C:\work\qiitaApp\HelloWorldApp> npx expo login     
Log in to EAS with email or username (exit and run 'npx expo login --help' for other login options)
? Email or username »

メールアドレスまたはユーザ名の入力を完了すると、次はアカウントのパスワードを聞かれますので、こちらも入力しましょう。

PS C:\work\qiitaApp\HelloWorldApp> npx expo login     
Log in to EAS with email or username (exit and run 'npx expo login --help' for other login options)
√ Email or username ... r.tsuda124@gmail.com
? Password »

パスワードを入力して、「Email or username」と「Password」の左側に両方チェックマークが付いたらログイン完了です。

PS C:\work\qiitaApp\HelloWorldApp> npx expo login     
Log in to EAS with email or username (exit and run 'npx expo login --help' for other login options)
√ Email or username ... r.tsuda124@gmail.com
√ Password ... **********************

2-4. EAS CLIのインストール

EAS CLI（Expo Application Services CLI）は、Expoのクラウドビルドやデバイスにアプリ配信などを行うためのコマンドラインツールです。

React Nativeでネイティブ機能（BLEやカメラなど）を使うアプリを実機で動かすためには、eas build によるビルドが必要となります。

2-4-1. インストールコマンド

下記のコマンドを用いてターミナルでEAS CLIのインストールを行いましょう。

npm install -g eas-cli

補足：
Expo CLI（expo）はプロジェクトごとにバージョンが異なるため、ローカルにインストールされますが、
EAS CLI（eas）は開発者全体で共通のツールとして扱われるため、グローバルインストールが推奨されているので、上記のコマンドでグローバルインストールを行っています。

2-4-2. 設定の初期化

インストールが完了したら、プロンプトにプロジェクトフォルダを指定し、設定の初期化も行いましょう。

eas build:configure

補足：
npmで eas-cli をグローバルインストールしても、各ユーザーの %APPDATA%\npm にインストールされるため、 easコマンドを実行するには実行するユーザーごとに PATH を通す必要があります。
まだ通していない方は、下記のPATHを環境変数に通しておきましょう。
（例：C:\Users\<ユーザー名>\AppData\Roaming\npm）

2-4-3. EASプロジェクト登録の確認

eas build:configure を初めて実行する際、Expoアカウントにまだプロジェクトが登録されていない場合は、下記のように「このアプリをEASプロジェクトとして作成してよいか？」と確認されます。
その場合は Y を入力して進めましょう。

PS C:\work\qiitaApp\HelloWorldApp> eas build:configure
EAS project not configured.
? Existing EAS project found for @testaccount_ryosuketsuda/HelloWorldApp (id = 4fb97ec9-bdca-48fc-96f3-d50e865eb002). Configure this project? » (Y/n)

2-4-4. プラットフォームの選択

次に、どのプラットフォーム向けにビルド設定を作成するかを聞かれます。
特別な理由がなければ All を選択して、iOS・Android 両方に対応しておくのがおすすめです。

? Which platforms would you like to configure for EAS Build? » - Use arrow-keys. Return to submit.
>   All
    iOS
    Android

2-4-5. eas.jsonの確認

ここまで操作が完了すると、プロジェクトフォルダ下にeas.jsonファイルが生成されるので、確認しましょう。

補足：
eas buildは「どのプロファイルで」「どのターゲット（Android/iOS）」をビルドするかを eas.json を見て判断します。
手動で書いても問題ないですが、eas build:configureで自動生成すればミスなくスタートできます。

2-5. 開発用アプリのビルド（Dev Client）

eas build を実行すると、BLE通信などのネイティブ機能を含んだ開発用のカスタムクライアントアプリ（dev client）を Expo のサーバー上でビルドしてくれます。

2-5-1. ビルドコマンド

下記コマンドをターミナルで実行しましょう。

eas build -p android --profile development

2-5-2. インストールの確認

初めて development プロファイルでビルドを行う際は、
expo-dev-client パッケージがプロジェクトに含まれていないため、下記のようにEAS CLIがインストールを促してくれます。
そのまま Y を選択してインストールを進めましょう。

PS C:\work\qiitaApp\HelloWorldApp> eas build -p android --profile development

You want to build a development client build for platforms: Android
However, we detected that you don't have expo-dev-client installed for your project.
? Do you want EAS CLI to install expo-dev-client for you? » (Y/n)

2-5-3. アプリケーションIDの確認

次に、下記のようにAndroidアプリのアプリケーションIDをどうするか聞かれます。
Androidアプリには必ず一意の「アプリケーションID（パッケージ名）」が必要です。
com.ユーザー名.アプリ名 の形式で自動提案されますが、特にこだわりがなければそのままEnterで問題ありません。

📝  Android application id Learn more: https://expo.fyi/android-package
? What would you like your Android application id to be? » com.testaccount_ryosuketsuda.HelloWorldApp

2-5-4. ビルド完了まで待機

ここまで完了するとビルドが始まるので、数分待ちましょう。

2-5-5. ビルド完了時の選択

ビルドが完了すると、以下のAndroidエミュレータでインストールと実行を行うか聞かれます。
Android Studio などでエミュレータを利用している場合は、ビルド後にエミュレータで起動することもできますが、本記事では実機（Android スマートフォン）での動作確認を目的としているため、n を選択して進めます。

√ Install and run the Android build on an emulator? ... no

2-6. スマートフォンにアプリをインストールする

スマートフォンにアプリをインストールする手段はいくつかありますが、今回はQRコードからインストールする手段を使いたいと思います。

2-6-1. ブラウザでインストール画面を開く

ビルドが完了すると、ビルドしたアプリのインストーラーをインストールできる画面へのリンクが、下記のようにターミナルに表示されますのでブラウザで開きましょう。

🤖 Open this link on your Android devices (or scan the QR code) to install the app:
https://expo.dev/accounts/○○○/projects/○○○/builds/○○○

2-6-2. installボタンをクリック

ブラウザで開くと下記のようなWebページが表示されますので、「Install」をクリックして実行ファイルをダウンロードしましょう。

2-6-3. QRコードを読み取り

「Install」ボタンを押下すると、下記のようにQRコードが表示されますので、こちらをスマートフォンのカメラで読み取り、読み取ったWebページに遷移しましょう。

2-6-4. スマホにダウンロード

QRコードを読み込むと下記のWebページに遷移します。
そうしましたら、「Install」ボタンの下にある３点のボタンを押下し、「Download Build」を押下してください。

2-6-5. インストール確認

ダウンロードすると、下記のように「このアプリをインストールしますか？」というダイアログが表示されますので、「インストール」を押下しましょう。

2-6-6. 完了通知

ダウンロード完了すると、「アプリをインストールしました。」というメッセージがダイアログに表示されます。そうしましたら、「完了」を押下してください。

2-6-7. アイコン確認

インストール完了すると、スマホのアプリアイコン一覧画面にHelloWorldAppのアプリアイコンが下記の生成されますので確認しましょう。

2-7. ソースコードを書く

インストールしたアプリを開いても、まだソースコードを書いていないので、アプリを表示することはできません（Expo Router構成のため）。
なのでアプリを起動する前に、app/(tabs)ディレクトリ下のindex.tsxを下記のHelloWorldを画面表示する処理に書き換えます。

// app/index.tsx
import { View, Text } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello World</Text>
    </View>
  );
}

軽くファイルやソースコードについて解説しますと、

Expo Router構成の場合、app/(tabs)フォルダ下にあるindex.tsxファイルがルート画面になるため、index.tsxでexport defaultを指定しているHomeScreen関数でreturnしたJSX（JavaScript XML）の内容が、アプリ起動時に最初に表示される画面となります。

上記のソースで記述しているJSXの内容としては、react-nativeのViewコンポーネントとTextコンポーネントを用いて「Hello World」の文字列を画面に表示しています。
Viewタグ内のstyleで表示する位置を指定しており、上記のソースコードの例ですと画面中央に文字列を表示するように指定しています。

2-8. アプリを起動する

ソースファイルの配置が完了したら、VSCodeから開発ビルドアプリを起動します。

2-8-1. 起動コマンド

下記のコマンドをVSCodeのターミナルで実行し、開発ビルドアプリを起動しましょう。

npx expo start --dev-client

2-8-2. URL入力

開発ビルドアプリを起動すると、ターミナルに下記のリンクが表示されます。
こちらの「exp+helloworldapp」以降のリンクを開発ビルドアプリで入力する必要があります。

› Metro waiting on exp+helloworldapp://expo-development-client/?url=http%3A%2F%2F192.168.〇〇.〇〇

スマホで、手順「2-2-8. スマートフォンにアプリをインストールする」でインストールした開発ビルドアプリを開きましょう。

開発ビルドアプリを開くと、下記のような画面が表示されますので、「Enter URL manually」をクリックして、ビルド時にターミナルに表示されたURLを入力しましょう。

補足：
手入力するのは大変なので、ターミナルに表示されているQRコードをカメラで読み取ると、URLの文字列を取得できます。

2-8-3. Connectボタン押下

URLを入力出来たら、「Connect」ボタンを押下しましょう。

2-8-4. アプリ表示

「CONNECT」ボタンを押下すると、作成したアプリが下記のように表示されます。

作成した通り、画面中央に「Hello World」の文字列が表示されていますね。
これにてexpo-dev-clientでReact Native(TypeScript)アプリをスマホ実機(Android)に表示する手順は完了となります。

補足：
PCで使用しているWifiとスマホで接続しているWifiが同様でないと表示できない場合があったり、スマホでWifiと5Gを同時接続している場合もスマホに表示できない場合があるので気を付けてください。

おわりに

いかがでしたでしょうか。

長々と手順を書きましたが、最後まで読んでいただきありがとうございました。
本記事がみなさまの助けに少しでもなりましたら、いいねやコメントなどしていただけると助かります。質問やアドバイスも随時待ってます。

次回は、BLE接続関連の記事を書く予定ですので、よかったらフォロー等よろしくお願いします。