【React Native】Expo環境VSCodeデバック

# はじめに
Expo環境のVSCodeによるデバック方法を投稿します。
使用環境は、MacOSです。

## この投稿で扱う内容
Expoプロジェクト作成からVSCodeでデバックするまでを扱います。
　1. Expoプロジェクト作成
　2. VSCodeデバック設定
　3. Expoアプリ実行
　4. デバック開始、実行

# １．Expoプロジェクト作成
Expoプロジェクトを作成します。
>
```
#expo init プロジェクト名
```
プロジェクト名やテンプレートは自由に指定

# ２．VSCodeデバック設定

## （1）React Native Toolsプラグインをインストール
React Native Toolsをインストールします。
<img width="942" alt="plugin_react_native_tool.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/baf242c1-b8bd-5614-4979-fb6bf07a33ff.png">

## （２）デバック構成を追加
VSCode上部のデバック横の「構成がありません」欄をクリックします。
<img width="768" alt="debug_config_add2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/78dc70a6-60f4-dcac-b5eb-0dfbbb37b411.png">

「構成の追加」を選択すると、選択候補があらわれるため、React Native: Attach to packagerを選択します。
![スクリーンショット 2019-07-15 午後11.06.27 午前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/8285266b-b3fe-fa6e-5e9d-83ad8aa9edc8.png)


launch.jsonファイルが自動作成されます。
<img width="1125" alt="スクリーンショット 2019-07-15 午後11.04.51 午前.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/306463af-7674-698f-c7c8-aaf51388476e.png">


## （３）setting.jsonにExpo使用ポートを追記
Expoで使用するポートをVSCode設定ファイルに追記します。
>"react-native.packager.port": 19001

メニューのCode>設定をクリックし、設定を表示します。
<img width="793" alt="port_add_19001.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/b82de636-d6b7-6683-d85d-f36c5efc6526.png">
VSCodeの画面右上の　{}　をクリックし、設定内容をテキスト表示します。
<img width="1427" alt="port_add_19001_2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/4a4f5c35-35a4-4832-770c-551693b30996.png">

`,"react-native.packager.port": 19001`　を追記します。
設定内容の区切り文字のカンマも忘れずに入力します。
<img width="555" alt="settings.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/fe28b80b-aaa8-632e-e899-249ef0312a06.png">

# 3. Expoアプリ実行
ターミナルからExpoアプリを起動します。

```
iOSの場合
npm run ios

Andoridの場合
npm run android
```
>以降の説明では、iOSの場合を例に記載します。

ExpoのWebコンソールとシミュレーターが起動します。
<img width="788" alt="expo client browser.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/0493217a-424d-16e7-bfdd-3917789c6969.png">

iOSシミュレーターが起動すると、Expoアプリがシミュレーター上に自動インストールされます。

Expoでアプリを開いてよいか確認ダイアログがでるので、Openをクリックします。
<img width="538" alt="simullator1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/bbdd8ff3-2207-a881-baac-247bf71d7976.png">

アプリが起動します。
<img width="538" alt="vscode_debug３.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/8f2111e6-a5f9-d4fb-a9b2-09863f35bd3e.png">

# 4. デバック開始、実行
VSCode上部の`Attach Pacage`を選択し、`緑ボタン`をクリックし、ExpoアプリのプロセスにVSCodeからアタッチします。
<img width="293" alt="Attach to pacager.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/25e5f01c-82a3-9969-1482-aa88795f2403.png">

VSCode上部にデバック制御ウインドウが表示されます。
![68747470733a2f2f71696974612d696d6167652d73746f7265.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/4a45e2f5-7b7f-4b40-6208-a416a08db409.png)


シミュレーター上でデバック設定画面を表示し、`Debug Remote JS`をクリックし、デバックモードを有効にします。
<img width="538" alt="simulator.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/a7e39072-f574-9e1d-b52f-a1e8b60eeb96.png">
>シミュレーター上にデバック設定画面が表示されていない場合、Command＋dで表示します。


Command＋dで、デバック設定画面を閉じて、Expoアプリに戻ります。
<img width="538" alt="２２２.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/c7c15224-4e84-9f09-cab4-0ae419d3148d.png">

<img width="538" alt="vscode_debug３.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/8f2111e6-a5f9-d4fb-a9b2-09863f35bd3e.png">


ソースにブレークポイントを入れます。
<img width="1552" alt="vscode_debug４.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/0b2d6e4a-c667-9ba8-2dc3-7cae5cfbbd4c.png">

アプリ画面を再読込するため、`Command+r`で画面を再読込します。
![ipho.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/d078f5ea-898d-6e84-7047-50b00679544a.png)


アプリ画面の再読込で、ブレークポイントで停止し、デバックが可能になっています。
<img width="1552" alt="vscode_debug６.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/c44c6fbe-dac4-a31e-d841-f50374d1595f.png">

>VSCODEの下記画面で、ブレークポイントに対して、レジューム実行、ステップ実行、デバック停止が可能です。
<img width="213" alt="vscode_debug８.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/74e8aab3-8871-125d-9b4b-25b162b8169d.png">


　

> デバックがうまくいかない場合
以前のデバック実行がプロセスを掴んでいる可能性やExpoのプロセスが不安定な時があります。この場合、Expo再起動、VSCode再起動、パソコン再起動、シミュレータの初期化や再起動等を試して下さい。これらのどれかでデバックが修復するケースがあります。
<img width="538" alt="vscode_debug７.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/117828/4f6ac754-39f8-1adb-f76c-4be15f498a81.png">