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

[前回] Django+Reactで学ぶプログラミング基礎(20): Reactチュートリアル(データ受渡しと状態記憶)

はじめに

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

今回の内容

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

デバッグとその重要性

試行錯誤(Trial & Error)とは
1. コードを書く
2. 動かしてみる
3. エラー原因を特定し修正する
Trial & Errorの高速な繰り返しにより、開発生産性を向上
- エラー原因を特定し修正する方法
  - デバッグを行う
デバッグとは
- プログラムの中のバグ/欠陥を特定し取り除き、仕様通り動作させるための作業
  - エラー時だけでなく、コード解析にも役立つ
デバッグ方法
- 方法1: 実行ログにデバッグ内容を追加出力
- 方法2: ブレークポイントで処理を止め、ステップ実行

Reactアプリをデバッグ

VS Codeで、前回作成したmy-appアプリを開く
- .vscodeディレクトリを作成

デバッグに必要なファイルを作成

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}にブレークポイント設定
VS Code左サイドで、実行とデバッグ(Ctrl+Shift+D)を選択、左上の▷をクリックし実行(またはF5)
- すると、ブレークポイントで実行が止まる
- マウスを、変数iに当てると、値が表示される

ステップ実行方法

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

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

便利なデバッグ方法

変数(Variables)
- 実行ビューに、現在フレームの変数一覧が表示される
- 変数をダブルクリック(またはF2)し、値を変更可能
- 用途
  - 変数を操作し、実行ロジックを制御(選択ブロックに入る/入らない)
  - 変数に不正な値をセットし、例外発生時の挙動を確認
ウォッチ式(Watch)
- 評価式をリアルタイムに確認可能
  - 例えば、変数iに1を足す
デバッグコンソール
- 現在フレーム内で、式を実行可能
- メソッドや変数の補完機能が有効