VisualStudioCodeでReactNativeのデバッグ環境を構築する

みなさん、こんにちは。
ラクス Advent Calendar 202016日目の記事を担当します@t_okkanです。
昨日は、@miracle-FJSWさんの開発環境を持たないという選択。GitHub CodespacesとLaravelとVSCodeと。の記事でした。
本日はVisual Studio CodeでReactNativeの環境を構築した際に、ちょっと困ったことをまとめました。

ReactNativeの環境構築した際、ドキュメントにエディター・IDEの説明が**1行しかなかった**ので、VSCodeでの環境構築方法をまとめました。

環境

まずは公式ドキュメントにそって、必要なソフトウェアをインストールしてください。

• OS：macOS Big Sur 11.0.1
• Visual Studio Code：1.52.0
• Node.js：14.15.1
• watchman：4.9.0
• Android
  • JDK：AdoptOpenJDK 11.0.9.1
  • Android Studio：4.1.1（React Nativeのドキュメントのリンクが切れているのでこちらからどうぞ）
  • Android SDK：Android 10（APIレベル29）
  • Android Emulator：APIレベル29のエミュレータ
  • Android SDK Command-line Tools
• iOS
  • Xcode：12.2
  • Cocoapods：1.10.0

※注意

1. Android StudioはデフォルトでAndroid 11（APIレベル30）のSDKがインストールされているので、SDK Managerで切り替えてください。
2. 私はターミナルにfishを利用しています。fishの方は、以下のようにAndroid SDKのパスを通してください。

~/.config/fish/config.fish

set -x ANDROID_HOME $HOME/Library/Android/sdk
set -x PATH $PATH $ANDROID_HOME/emulator
set -x PATH $PATH $ANDROID_HOME/tools
set -x PATH $PATH $ANDROID_HOME/tools/bin
set -x PATH $PATH $ANDROID_HOME/platform-tools

ReactNativeプロジェクトを作成

TypeScriptを使用するので、テンプレートを利用してプロジェクトを作成します。

$ npx react-native init SampleApp --template react-native-template-typescript
$ cd SampleApp/
$ code .

プロジェクトを作成したら、VSCodeを立ち上げてください。デバッグの確認用にApp.tsxだけ変更します。

App.tsx

import React, { useState } from 'react';
import {
  SafeAreaView,
  View,
  StatusBar,
  Button,
  Text
} from 'react-native';

import {
  Header,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {

  const [count, setCount] = useState(0);

  const debugFunc = () => {
    console.log('Debug');
    setCount(count + 1);
  }

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <Header />
        <View >
          <Button title="Debug" onPress={debugFunc} />
          <Text>{count}</Text>
        </View>
      </SafeAreaView>
    </>
  );
};

export default App;

ReactNativeToolsのセットアップ

VSCodeのReactNativeの拡張ツールである、ReactNative Toolsをインストールしてください。

デバッグ環境がと問いましたので、エミュレータと実機でデバッグの設定と実行を行っていきます。

エミュレータデバッグ

VSCodeのサイドバーから、デバッグツールを選択し、Run and Debugを選択します。
Select EnvironmentでReact Nativeを選択してください。

Pick debug configrationsでDebug AndroidとDebug iOSを選択します。

選択しOKを押すと、以下のようなプロジェクトのルートディレクトリに.vscode/launch.jsonが作成されます。

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Android",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "android"
        },
        {
            "name": "Debug iOS",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios"
        }
    ]
}

では、AndroidとiOSのそれぞれでエミュレータでのデバッグをおこないます。

Android

VSCodeのデバッグバーからDebug Androidを選択してデバッグを実行してください。
Androidのエミュレーターが起動され、アプリがデバッグ実行されます。
アプリが実行されたらエミュレーターを選択し、command + Mを押してDeveloper Menuを起動してください。Debugを選択します。

App.tsxのdebugFunc関数内にbreak pointを貼り、アプリの「Debug」ボタンを押してください。
下のように処理が止まればデバッグが成功しています。

iOS

VSCodeのデバッグバーからDebug iOSを選択してデバッグを実行してください。
iOSのシミュレーターが起動され、アプリがデバッグ実行されます。
アプリが実行されたら、App.tsxのdebugFunc関数内にbreak pointを貼り、アプリの「Debug」ボタンを押してください。
下のように処理が止まればデバッグが成功しています。

実機デバッグ

続いては実機デバッグです。

.vscode/launch.jsonを以下のように編集します。

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Android",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "android"
        },
        {
            "name": "Debug iOS",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios"
        },
        // 以下を追加
        {
            "name": "Debug Android Device",   
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "target": "device"
        },
        {
            "name": "Debug iOS Device",   
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "runArguments": ["--device"]
        }
    ]
}

では、AndroidとiOSのそれぞれで実機でのデバッグをおこないます。

Android

諸事情により手元にAndroidのデバイスがありません。手に入れましたら更新します。環境構築のログだけ残っていましたので、載せておきます。

VSCodeのデバッグバーからDebug iOS Deviceを選択してデバッグを実行してください。
接続されている実機にSampleAppがインストールされます。
App.tsxのdebugFunc関数内にbreak pointを貼り、アプリの「Debug」ボタンを押してください。
処理が止まればデバッグが成功しています。

iOS

iOSアプリを実機でデバッグするためのライブラリios-deployをインストールします。

$ brew install ios-deploy

VSCodeのツールバーのデバッグからDebug iOS Deviceを選択してデバッグを実行してください。
接続されている実機にSampleAppがインストールされます。

初回はApple Developmentが認識されていない可能性があります。iPhoneで設定 -> 一般 -> プロファイルとデバイス管理から、ご自身のアカウントを信頼してください。

アプリを選択するとアプリが起動します。ドキュメントに載っているように、アプリが起動されたら実機を左右に振ってください。（shaking your device）
以下のようなDeveloper Menuが表示されますので、Debugを選択してください。デバッグモードに切り替わります。

App.tsxのdebugFunc関数内にbreak pointを貼り、アプリの「Debug」ボタンを押してください。
処理が止まればデバッグが成功しています。

まとめ

今回はExpoを利用せずに、ReactNativeのVSCodeでのデバッグ環境の構築をおこないました。
これからReactNativeの開発をはじめるよ、という方はぜひ参考にしてください。

明日は、@kashi-tatsuさんの記事です！