JavaScript 実行の監視

学習の目的

この単元を完了すると、次のことができるようになります。

JavaScript 変数を追跡する。
JavaScript 変数を操作する。

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

JavaScript のトラブルシューティングに慣れている人なら、console.log() コマンドも使い慣れていることでしょう。JavaScript の実行中に何が起きているかを教えてくれる便利なツールです。スクリプトのさまざまな状態において、変数が何をしているかを教えてくれます。実は、その情報をもっと速く、もっと見やすく提供してくれるツールがあるのです。それが DevTools Watch です。では、詳しく見ていきます。

一緒にトレイルを進みましょう

エキスパートの説明を見ながらこのステップを実行したい場合は、次の動画をご覧ください。これは Trailhead Live の「Trail Together」(一緒にトレイル) シリーズの一部です。

(この動画は 39:54 の時点から始まります。戻して手順の最初から見直す場合はご注意ください。)

Watch 機能を使う

ブレークポイントを設定する方法とコードのフローや変数の値を見る方法を学習しました。コードの実行中の特定のタイミングでこれらの変数と値を監視するには、もっと便利な方法があります。JavaScript デバッグペインで Watch を使用することです。

Solutions アプリケーションを 2 つずつ数える

前の単元では、Solutions アプリケーションで [+1] をクリックするたびに数が 1 つ増えるのを見ました。次は、[Control Option (制御オプション)] を使用して、2 つずつ数えるようにしましょう。

ブラウザーでページを更新します。ブレークポイントは表示されたままです。
まだ display.js を開いていなければ DevTools で開きます。
handleAugmentorChange(event) 関数を見つけます。
JavaScript デバッグペインで [Watch] を展開し、[Add watch expression (ウォッチ式を追加)] をクリックします。
event.target.value と入力して Enter を押します。
Watch に event.target.value:<not available> と表示されます。

ブレークポイントを設定してイベントを起動しましょう。

this.augmentor = event.target.value; 行の番号をクリックしてブレークポイントを設定します。
Solutions アプリケーションの [Control Option (制御オプション)] で [2] を選択します。Watch に event.target.value が “2” と表示されます。
handleAugmentorChange イベントハンドラーでコードの実行を一時停止しているため、event.target.value が有効で、Watch にはその値が表示されています。

JavaScript デバッグペインで、this.augmentor を Watch に追加します。
this.augmentor の値は 1 のままであるのは、このコード行がまだ実行されていないためです。

[Step (ステップ)] () をクリックしてこの行を実行し、次の行に移動します。
ブレークポイントが設定されている行の後でコードの実行が一時停止しているため、Watch には次のように表示されます。
event.target.value:"2"
this.augmentor:"2"

[Resume script execution (スクリプトの実行を再開)] をクリックします。Solutions アプリケーションの [Controls (制御)] ボタンが [-2] と [+2] に変更されています。

Solutions アプリケーションが 2 つずつ数えられるのを見る

Solutions アプリケーションの [Display (表示)] では、[Count (数)] は現在 0 になっています。Solutions アプリケーションで [+2] ボタンをクリックすると、変数がどのように変化するかを見てみましょう。

[+2] をクリックします。ブレークポイントによって handleIncrement 関数の最初の行でコードの実行が一時停止します。
Watch には次のように表示されます。
event.target.value:undefined
this.augmentor:"2"

operand と this.counter を Watch に追加します。operand は <not available> で、this.counter は 0 です。
Watch には次のように表示されます。
event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:0

[Resume script execution (スクリプトの実行を再開)] をクリックします。
次のブレークポイントでは一時停止しなかったため、operand の値の変化を確認できました。Solutions アプリケーションの [Count (数)] は 2 になっています。もう一度やってみましょう。今回は一時停止するはずです。
[+2] をクリックします。
この時点で Watch には次のように表示されます。
event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"02"

[Resume script execution (スクリプトの実行を再開)] をクリックします。スクリプトが再び一時停止すると、
Watch には次のように表示されます。
event.target.value:undefined
this.augmentor:"2"
operand:"2"
this.counter:"02"

[Resume script execution (スクリプトの実行を再開)] をクリックします。うまく行きました。ここで、Solutions アプリケーションの [Count (数)] 値を確認してみましょう。

なぜ数が 4 ではなく 22 なのでしょうか? どうやら、Solutions アプリケーションは数値を加算するのではなく、テキストを連結してしまっているようです。これが Watch の面白い点です。

Watch は式とプロパティを監視する

[+2] ボタンが更新する変数のデータ型を確認しましょう。

typeof operand を Watch に追加します。typeof operand は undefined です。
[+2] をクリックします。
Watch には次のように表示されます。
event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"022"
typeof operand:<not available>

[Resume script execution (スクリプトの実行を再開)] をクリックします。
Watch には次のように表示されます。
event.target.value:undefined
this.augmentor:"2"
operand:<not available>
this.counter:"022"
typeof operand:"string"
これです! operand 変数は、文字列型として定義されていたのです。

Watch がトラブルシューティングで発揮する力を見ましたので次は実際に問題を特定して修復方法を見つける方法を学びます。

コンソール

この問題を詳しく調べるには DevTools コンソールを使用します。

ブラウザーでページを更新します。ブレークポイントと監視した項目は表示されたままです。
Solutions アプリケーションで [+1] をクリックします。
Watch で this.augmentor と this.counter の値を確認します。
Watch には次のように表示されます。
event.target.value:undefined
this.augmentor:1
operand:<not available>
this.counter:0
typeof operand:<not available>
this.counter と this.augmentor のどちらも数値に見えますが、いちおう確認してみましょう。

typeof this.counter と typeof this.augmentor を Watch に追加します。
Watch にはこれらが数値型であることが示されています。
event.target.value:undefined
this.augmentor:1
operand:<not available>
this.counter:0
typeof operand:<not available>
typeof this.counter:"number"
typeof this.augmentor:"number"

[Step (ステップ)] () をクリックして次の行に移動します。
Watch には次のように表示されます。
event.target.value:undefined
this.augmentor:1
operand:1
this.counter:0
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
すべて数値です。ここまでは問題ありません。

[Step (ステップ)] () をクリックして次の行に移動します。
Watch には次のように表示されます。
event.target.value:undefined
this.augmentor:1
operand:1
this.counter:1
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"

this.counter が 0 から 1 に変わっています。もう一度やってみて、どうなるかを確認しましょう。

[Resume script execution (スクリプトの実行を再開)] をクリックします。Solutions アプリケーションの [Count (数)] は 1 になっています。
Solutions アプリケーションで [+1] をクリックします。
コードをステップ実行すると、数値は数値のままで、this.counter は正しく 2 になっています。
すべてが想定どおりに機能しているようです。

制御オプションを使用して値の変化を見る

[Resume script execution (スクリプトの実行を再開)] をクリックします。Solutions アプリケーションの [Count (数)] は 2 になっています。
Solutions アプリケーションの [Control Option (制御オプション)] で [2] を選択します。スクリプトが handleAugmentorChange 関数のブレークポイントまで実行されます。
スクリプトは関数内で一時停止しますが、ブレークポイントの行はまだ実行されていません。event.target.value は文字列のように見えることに注意してください。

typeof event.target.value を Watch に追加します。
event.target.value:undefined
this.augmentor:1
operand:1
this.counter:1
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
typeof event.target.value:"string"
たしかに文字列です。そのため、Solutions アプリケーションは数値を加算すべきところでテキストを連結してしまったわけです。

では、コンソールを使用して値を操作し、どうなるかを見てみましょう。

[Console (コンソール)] タブをクリックします。
コンソールに event.target.value と入力して Enter を押します。
コンソールは ‘2’ を返します。2 が引用符で囲まれているのは文字列であることを示すためです。まだブレークポイントで一時停止していますので、変数を現在の状態で使用できます。

this.augmentor = event.target.value と入力して Enter を押します。コンソールは再び ‘2’ を返します。これは想定した結果ではありません。コードが何らかの理由で this.augmentor を数値から文字列に変更してしまったようです。解決策を探しましょう。
this.augmentor = 1 と入力して Enter を押し、数値に戻します。
this.augmentor = parseInt(event.target.value) と入力して Enter を押します。値が 2 に変わり、数値のままになります。これでコードの修正方法がわかりました。
this.augmentor = 1 と入力して元の値に戻します。
[Sources (ソース)] パネルに戻ります。
[Step (ステップ)] () をクリックして次の行に移動し、this.augmentor の値を確認します。
Watch には次のように表示されます。
event.target.value:"2"
this.augmentor:"2"
operand:<not available>
this.counter:2
typeof operand:"undefined"
typeof this.counter:"number"
typeof this.augmentor:"string"
typeof event.target.value:"string"
文字列です。

この単元を一時休止する

この単元の最後までスクロールして、ハンズオン Challenge を完了してください。Challenge を完了したら、ここに戻って、Trailhead Playground でソリューションを試します。

この単元を再開する

では、Solutions アプリケーションが想定どおりに動作することを確認しましょう。

ブラウザーでページを更新します。
Solutions アプリケーションの [Control Option (制御オプション)] で [2] を選択します。スクリプトが handleAugmentorChange 関数のブレークポイントまで実行されます。

[Step (ステップ)] () をクリックして次の行に移動します。
this.augmentor の値を確認します。

数値のままです! うまく行っています。

[Resume script execution (スクリプトの実行を再開)] をクリックします。
Solutions アプリケーションで [+2] をクリックします。
[Step (ステップ)] () をクリックして次の行に移動します。
Watch には次のように表示されます。
event.target.value:undefined
this.augmentor:2
operand:2
this.counter:0
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"number"
typeof event.target.value:"undefined"
[Step (ステップ)] () をクリックします。
Watch には次のように表示されます。
event.target.value:undefined
this.augmentor:2
operand:2
this.counter:2
typeof operand:"number"
typeof this.counter:"number"
typeof this.augmentor:"string"
typeof event.target.value:"undefined"
[Resume script execution (スクリプトの実行を再開)] をクリックします。Solutions アプリケーションの [Count (数)] は 2 です。
Solutions アプリケーションで [+2] をクリックします。
[Resume script execution (スクリプトの実行を再開)] をクリックします。スクリプトが条件付きブレークポイントまで実行されて一時停止します。this.counter は 2 のままです。
[Resume script execution (スクリプトの実行を再開)] をクリックし、Solutions アプリケーションの [Count (数)] が正しい値の 4 であることを確認します。成功しました。