React Native (Expo) デバッグ環境構築まで

背景（読み飛ばし可)

react-native-cli (以下CLI)から Expoへの移行

筆者はReactNativeを始めた当初、「ExpoはNative機能周り(Bluetoothなど)に制限あるよ」と聞いてCLI環境でアプリを一本完成させました。

play.google.com

その後、PC買い替えに伴い改めて環境構築例えばnpm、ruby、typescript、AndroidSDK、CocoaPods、その他諸々のインストールを進めていたところ、「Expoなら環境構築、リリース直前までのビルドなど一発ですよ」とアドバイスを頂きました。

ExpoとCLIの比較サイトなどを見ると、私の作りたい/作るであろうアプリはExpoで十分という判断になりました。

ReactNative、Expoとは？特徴や使い方を調べてみた - NCDC株式会社

環境構築

HelloWorldまで

Expo-cli インストール
下記ページに従って CLIをインストールしました。 ReactNativeの公式サイトだと、プロジェクト作成から始まってますが、Expo公式サイトに従いCLIを入れます。 expo コマンドでビルドや、公開するapkの作成を操作するようです。 docs.expo.dev
プロジェクト作成
下記ページでプロジェクト作成方法が説明されてます。
ただしTypeScriptで作成する場合は、更にその下のページ「Using TypeScript」を参考にすると良さそうです。私はそちらを使います。
https://docs.expo.dev/get-started/create-a-new-app/docs.expo.dev docs.expo.dev

npx create-expo-app -t expo-template-blank-typescript

上記コマンドでプロジェクト完成.

動作確認

npx expo start

上記で動作確認のためのサーバが立ち上がりました。
Expoアプリを入れてればQR読み込みで実機動作が可能。
私はAndroid Studioをインストールし、Androidで動作確認しました。
（私は a キーを押したらエミュレータが起動してアプリが無事動作しました。）

デバッグ環境構築

ブレークポイントを設定して変数をモニタできることを目的に環境を作ります.

環境が完成すると以下のような手順でデバッグが可能になります。
1. エミュレータを起動
　いつもどおりエミュレータを起動します。(npm run start / npm run android / npm run ios)
2. ⌘+M でデバッグモード起動
　エミュレータでデバッグモードにします。
3. デバッガーをアタッチします。
　後の作業で作成する launch.json を実行し、起動中のデバッグモードに接続します。
4. ブレークポイントを設定
5. アプリをリロードしブレークポイントでデバッグ
　'1.'でコマンドを叩いたターミナルで 'r'キーを押しリロードすると、ブレークポイントで止まります.
　具体的な手順です。相変わらず他サイトを引用するだけですみません。

VS Code に React Native Tools プラグインを追加下記サイトの1章です。 qiita.com
launch.json の作成
launch.json の作成方法、キーワードの意味が解説されてます。
作成するまでで大丈夫です。
【VSCode】launch.jsonについて理解する | amateur engineer's blog
launch.json を書き換え
以下サイト様の2章にあるlaunch.json をコピペします。
React Native & Expo デバッグ方法いろいろ - Qiita
正しいport番号を確認し修正
'3.'で紹介下サイトの３章の通り、エミュレータを起動しデバッグモードを起動します。
このとき、ブラウザのURLからポート番号を確認してください。19000や19001と思います。
launch.json の "port" にこれを書き換えます。
デバッグ用に立ち上がったブラウザを閉じる
実行とデバッグから、Attach to packager を実行
デバッグコンソールを確認
以下のように出ていれば正常にアタッチされ、デバッグできる状態になりました。

Attaching to the application
Starting debugger app worker.
プロキシ (パッケージャー) から React Native アプリケーションへの接続を確立しました

ターミナルでRキーを押し、リロード
これで、以下のように変数の値などをブレークポイント箇所で確認できるはずです。

以上です。
リンク切れ、解説のミスなどありましたら指摘ください。
更に便利な機能もコメントで共有ください。

STUDY_LOG_KOTA

IoT, Webプログラミングなどの学習記録をします。