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

[前回] 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を足す
      

• デバッグコンソール

  • 現在フレーム内で、式を実行可能
  • メソッドや変数の補完機能が有効
    

おわりに

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

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