Django+Reactで学ぶプログラミング基礎(21): Reactアプリのデバッグ

##### [前回] [Django+Reactで学ぶプログラミング基礎(20): Reactチュートリアル(データ受渡しと状態記憶)](https://qiita.com/mingchun_zhao/items/1d71f513626dd8225a32)

## はじめに

前回は、Reactの重要な概念`props`と`state`を勉強しました。
今回は、少しチュートリアルを離れ、プログラミングに欠かせない`デバッグ`の勉強です。

## 今回の内容

- デバッグとその重要性
- Reactアプリをデバッグ

## デバッグとその重要性

- 試行錯誤(`Trial & Error`)とは
    1. コードを書く
    2. 動かしてみる
    3. エラー原因を特定し修正する

- `Trial & Error`の高速な繰り返しにより、開発生産性を向上
    - `エラー原因を特定し修正する`方法
        - デバッグを行う

- デバッグとは
    - プログラムの中のバグ/欠陥を特定し取り除き、仕様通り動作させるための作業
        - エラー時だけでなく、コード解析にも役立つ

- デバッグ方法
    - 方法1: 実行ログにデバッグ内容を追加出力
    - 方法2: ブレークポイントで処理を止め、ステップ実行

## Reactアプリをデバッグ

- VS Codeで、前回作成した`my-app`アプリを開く
    - `.vscode`ディレクトリを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/bcfe6a3a-65be-1d3c-ff36-b2ab8ac2b44e.png)

### デバッグに必要なファイルを作成
- `tasks.json`を使用し、Reactアプリを起動
    - アプリ起動コマンド`npm start`を実行するタスク`react-start`を作成
```.vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "react-start",
      "detail": "react-scripts start for debug",
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": [
        {
          "pattern": [
            {
              "regexp": ".",
              "file": 1,
              "line": 1,
              "message": 1
            }
          ],
          "background": {
            "activeOnStart": true,
            "beginsPattern": "^Starting.*$",
            "endsPattern": "^Compiled.*$"
          },
        }
      ],
      "options": {
        "env": {
          "BROWSER": "none"
        }
      }
    },
    {
      "label": "terminate-react-start",
      "command": "${input:terminate}",
      "type": "shell",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "react-start"
    }
  ]
}
```
- `launch.json`を使用し、デバッグ構成を作成
    - `preLaunchTask`で指定した`react-start`が実行される
        - `react-start`は`tasks.json`で作成したもの
    - デバッグポートを有効にし、Google Chromeを起動
        - ReactアプリのURLが開かれる
    - Google ChromeのデバッグポートにVS Codeのデバッグが接続される
```.vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "debug react",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "preLaunchTask": "react-start",
      "postDebugTask": "terminate-react-start",
    }
  ]
}
```

### デバッグ構成を起動

- コードにブレークポイントを設定
    - `index.js`を開き、19行目の`{this.state.value}`にブレークポイント設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/665114e2-7a94-3bbb-d827-9eb48bd673b3.png)

- VS Code左サイドで、`実行とデバッグ(Ctrl+Shift+D)`を選択、左上の`▷`をクリックし実行(またはF5)
    - すると、ブレークポイントで実行が止まる
    - マウスを、変数`i`に当てると、値が表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/06b5567d-ae2e-9f14-494a-bef6841c3273.png)


### ステップ実行方法

- 下記ショートカットキー、または右上に表示されるツールバーでステップ実行

|キー|操作|動き|
|:--:|:--:|:--:|
|F10|ステップオーバー|行単位実行|
|F11|ステップイン|関数内に入って実行|
|Shift+F11|ステップイン|関数から抜け呼び出し元に戻る|
|F5|続行|次のブレークポイントまで一気に実行|

### 便利なデバッグ方法

- 変数(Variables)
    - 実行ビューに、現在フレームの変数一覧が表示される
    - 変数をダブルクリック(またはF2)し、値を変更可能
    - 用途
        - 変数を操作し、実行ロジックを制御(選択ブロックに入る/入らない)
        - 変数に不正な値をセットし、例外発生時の挙動を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/db03a279-0f61-b6b2-d4d4-66b212614388.png)

- ウォッチ式(Watch)
    - 評価式をリアルタイムに確認可能
        - 例えば、変数`i`に`1`を足す
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/b644d1c2-a81c-ad45-4263-0df7d0a962c2.png)

- デバッグコンソール
    - 現在フレーム内で、式を実行可能
    - メソッドや変数の補完機能が有効
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2523098/4d63ac82-1597-9bab-7434-f1ded5c79c18.png)

## おわりに

Reactアプリのデバッグを勉強しました。
次回も続きます。お楽しみに。

##### [次回] [Django+Reactで学ぶプログラミング基礎(22): Reactチュートリアル(stateを親コンポーネントで管理)](https://qiita.com/mingchun_zhao/items/fa11a1d6d2491b7f68f8)