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

みなさん、こんにちは。
[ラクス Advent Calendar 2020](https://qiita.com/advent-calendar/2020/rakus)16日目の記事を担当します[@t_okkan](https://qiita.com/t_okkan)です。
昨日は、[@miracle-FJSW](https://qiita.com/miracle-FJSW)さんの[開発環境を持たないという選択。GitHub CodespacesとLaravelとVSCodeと。](https://qiita.com/miracle-FJSW/items/e2dbe53b7a59101b23fe)の記事でした。
本日はVisual Studio CodeでReactNativeの環境を構築した際に、ちょっと困ったことをまとめました。

ReactNativeの環境構築した際、[ドキュメント](https://reactnative.dev/)にエディター・IDEの説明が**[1行しかなかった](https://reactnative.dev/docs/more-resources#ides)**ので、VSCodeでの環境構築方法をまとめました。

## 環境

まずは[公式ドキュメント](https://reactnative.dev/docs/environment-setup)にそって、必要なソフトウェアをインストールしてください。

- 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のドキュメントのリンクが切れているので[こちら](https://developer.android.com/studio?hl=ja)からどうぞ）
    - 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のパスを通してください。

```fish:~/.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を使用するので、テンプレートを利用してプロジェクトを作成します。

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

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

```jsx: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](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native)をインストールしてください。

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239179/a4414cff-621b-6421-5285-960da8c7c3a1.png)

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

## エミュレータデバッグ

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

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239179/94e7cab8-7b3d-0b5c-d129-e1f4c153d272.png)


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

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239179/4451beb5-111c-3a9a-a26f-fd788ba28119.png)

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

```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](https://reactnative.dev/docs/debugging#accessing-the-in-app-developer-menu)を起動してください。`Debug`を選択します。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239179/3df39aaa-cb5f-4d5d-cf4d-f75d2915ba10.png)

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

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239179/0c9c38a1-68e8-cac7-c355-5f8a7054de1e.png)


### iOS

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

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239179/4829b1bd-8f5c-df9b-980b-f8e77eb58436.png)


## 実機デバッグ

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

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

```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`をインストールします。

```bash
$ brew install ios-deploy
```

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

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

アプリを選択するとアプリが起動します。[ドキュメント](https://reactnative.dev/docs/debugging#accessing-the-in-app-developer-menu)に載っているように、アプリが起動されたら実機を左右に振ってください。（shaking your device）
以下のような`Developer Menu`が表示されますので、`Debug`を選択してください。デバッグモードに切り替わります。

![IMG_1923.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/239179/3a67a531-4dd7-27f6-573c-67fb09ac42ca.png)

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

## まとめ

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

明日は、[@kashi-tatsu](https://qiita.com/kashi-tatsu)さんの記事です！