Ne:Code道場~JavaScript Chrome開発者ツール・Sourcesの巻~


Ne:Code道場~JavaScript Chrome開発者ツール・Sourcesの巻~

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptの開発時に役に立つ、ブラウザに付属している開発者ツール(デベロッパーツール)を活用する際の学習ポイントについて紹介します。

目次
  1. はじめに
  2. 「うまく動かなかった場合の該当箇所を確認」とはどういうことニャ?
  3. 「コードをデバッグ」の「デバッグ」って何ニャ?
  4. 改めて「コードをデバッグ」とはどういうことニャ?
  5. まずは、「ブレークポイント」について教えてニャ
  6. 次は、「ステップ実行」について教えてニャ
  7. 最後に、「ウォッチ」について教えてニャ
  8. 最後に

はじめに

image この記事では、前回に引き続き、JavaScriptの開発時に役に立つ、ブラウザに付属している開発者ツール(デベロッパーツール)について、概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、ブラウザ付属の開発者ツールのSourcesについて理解を深めてゆきましょう。
Sourcesを用いると「うまく動かなかった場合の該当箇所を確認」できたり「コードをデバッグ」できたりします。
それぞれ順を追って確認してみましょう。

「うまく動かなかった場合の該当箇所を確認」とはどういうことニャ?

前回取り上げたConsoleを用いるできることの1つに、「うまく動かなかった場合の原因を確認」というのを上げました。
下記画面のイメージをその際に掲載しましたが、この画面を見てみると右上に「index.html:8」という文字が下線付きであるのを確認できますね。
下線付きということは、リンクできそうな気配が濃厚だと感じられるかと思います。
また、エラーメッセージ部分も、前回は端折りましたが、末尾に「 at index.html:8」というように右上と同じ記載を確認できます。
つまり、エラーが起きている場所は、「index.htmlファイルの8行目だよ」と教えてくれているのですね。
image そして、このリンクをクリックすると、Chrome開発者ツールのConsoleタブから、Sourcesタブに切り替わり、該当ファイルの該当行がハイライトされます。
image Consoleで確認できるエラーメッセージでも、どういう箇所がまずいのかピンとくるかもしれませんが、更に具体的なエラー箇所をSourcesで確認できるのですね。
また、Consoleで表示されているエラーメッセージが良くわからないな?という場合なども、メッセージを調べるのと並行して、該当エラー箇所のコードを見ることで、そのエラーについての理解もより深まるかと思います。
image

「コードをデバッグ」の「デバッグ」って何ニャ?

プログラミングは、書いた後、「正しく動いているかどうかを確認すること」がとても重要になってきます。その確認をした結果、そもそもエラーが起きていたり、また、エラーは起きていないけれど期待する結果になっていなかったりと、正しく動いていないという結果を見つけたら、それを正しく動くように修正することが必要になってきます。
このように、正しく動かない問題を、バグ(虫)と見立てて、そのバグを取り除くという意味で、デバッグと言います。
特に学習している最中は、まだコードに書きなれていない故に、「正しく動かない」というシーンに遭遇することも多いでしょう。そんな時は、ここぞとばかりにデバッグスキルを鍛えつつ、問題解決にあたってゆきましょう。
 
バグを取り除くにあたって、色々方法があります。イメージしやすいように実際に虫を退治する例で上げますと、古典的な虫たたきを用いたりする方法もあれば、効果てきめんなスプレーを用いたりすることもできるでしょう。デバッグも複数の手段がありますから、状況によって使い分けてゆくことが重要になります。
その際に、「使い分け」をしてゆくためには、そもそも知識として使い分けるための手法を知っていないといけませんね。この次の節で、Sourcesを用いるデバッグの手法を、引き出しの一つに加えることで、必要に応じて活用できるように備えていきましょう。
image

改めて「コードをデバッグ」とはどういうことニャ?

こちらの記事では概要として、以下の3つに絞ってとりあげます。
まずは、目にも留まらぬ速さで動いているプログラミングの処理に、「待った!」をかけて一息ついてもらう、「ブレークポイント」。
次に、一息ついてもらった後に、どのように処理が行われているのかを、人間の目でも追えるように順に実行することができる「ステップ実行」。
そして、データの入れ物である変数の中身がどうなっているのかを、探偵よろしく逐一監視してゆくことのできる「ウォッチ」。
それぞれ、Chrome開発者ツールのSourcesで「何ができるのか」と、「どのようにやるのか」について、順に見てゆきましょう。
image

まずは、「ブレークポイント」について教えてニャ

まずは「何ができるのか」について取り上げます。
JavaScriptで書いた処理は、瞬く間に実行されますね。沢山処理や、分岐や、繰り返しなどを書いていたとしても、実行してみるとあっという間です。
そんなJavaScriptの処理を一旦停止することができるのが、この「ブレークポイント」になります。
その名前に「ポイント」が含まれていますが、止めたい「ポイント」を定めてそこで処理を一旦停止することができます。
 
Sourcesで「どのようにやるのか」は、とっても簡単です。
Sourcesで一旦停止したいJavaScriptが書いてあるファイルを開き、止めたい位置で行番号をクリックしてみましょう。
行番号のところにタグのようなマークが付くのを確認できます。これが、「ブレークポイント」です。(解除したい場合は、もう一度同じところをクリックすれば、解除できます)
下記の画面イメージは、ブレークポイントをつけた後、実行した際のものです。
image  処理が7行目でストップしているのが、確認できますね。8行目のコードにはまだ到達していないため、エラーが起きていないことも合わせて確認できるかと思います。
image

次は、「ステップ実行」について教えてニャ

まずは「何ができるのか」について取り上げます。
このステップ実行やこの後のウォッチは、ブレークポイントで止めた後に活用してゆく機能になります。一旦停止した処理を自分の任意に実行してゆくことができるのが、このステップ実行です。
自分の期待通りに処理が実行されているのかをステップ実行で確認してゆくことができます。
そしてこの機能は、学習初期において、コードがどのように動いているのかを把握するのにも役立ちます。例えばfor文では繰り返している間、確かに何度もfor文が実行されているなというのを、実際に実行しながら確認することもできます。また、if文で条件に合致しない処理は通過しないというのも動かしてみてみると気づけることも多いでしょう。
 
Sourcesで「どのようにやるのか」は、下記画像のボタンとキーワードをまずは抑えてゆきましょう。
image 黄色にハイライトしているところに2つのボタンがありますね。
再生マークのボタンをクリックすると、一時停止している状態が解消され、処理が再開されます。再開後にブレークポイントが別にあった場合はそこでまた止まりますが、特にブレークポイントがない場合はそのまま処理が実行されてゆきます。
丸を超えてゆく矢印は、「ステップオーバー」とも呼びます。処理を順番に実行してゆくことができ、関数など別の場所にジャンプする処理であっても、あえてジャンプしない実行が可能です。(今回あえて端折った更に横のボタンは、その関数にジャンプしていったり、戻ってきたりなどに活用することができます)
image

最後に、「ウォッチ」について教えてニャ

まずは「何ができるのか」について取り上げます。
プログラミングで刻一刻とその中身を変えてゆく変数は処理を作ってゆく際の立役者になると同時に、期待する値になっていなかった故に正しく動かないなどの問題発生源にもなりがちです。今までの記事で取り上げたようにconsole.logを仕込むことで、変数の中身がどうなっているかなどの確認は可能ですが、ウォッチを用いるとそのような「確認のための行」を追加することなく、変数の中身をウォッチしてゆくことが可能です。
 
Sourcesで「どのようにやるのか」は、「Watch」エリアを認識するところから始めてゆきましょう。
この「Watch」に変数を追加することで、その変数の値を監視してくれるようになります。
最もベーシックな追加方法は、「Watch」エリアのプラスマークを押し、監視したい変数名を入力することで可能です。
サンプルコードのエラー部分を解消し、random変数をウォッチしているのが下記の画像になります。
「Watch」エリアに追加したら、後は値が変わったら都度都度そちらに反映されるようになりますので、そこを確認するだけで変数の中身の遷移を追ってゆくことができます。
image また、最後に、今回取り上げたのはChrome開発者ツールのSources機能のほんの一部です。例えば変数の中身を確認する場合は、そもそもウォッチに入れなくても、変数の部分にマウスのカーソルを当てるだけでもポップアップで表示されたりします。
何度も確認するものはウォッチに残しておき、この瞬間パッと見れれば良いものは上記の方法で確認するなど、それぞれを用途ごとに使い分けることで、更にデバッグスキルは高まってゆくでしょう。
今回の記事では、「まずはここから」という初歩的な内容でまとめていますので、慣れてきたら、是非「他にどんなことができるのだろう」と意欲的に学習の幅を広げていってください。
※また、説明にあたり、見やすいようにChrome開発者ツールを拡大して表示しています。ですので、ステップ実行のボタンやウォッチの位置などが画面下になっています。表示位置は拡大の有無などでも変わってきますので、ご自身のSourcesで確認する際には位置ではなく、アイコンや文言で識別するようにしてください。
image

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

最後に

Chromeの開発者ツールのSourcesについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

  1. Sourcesを用いることで、デバッグが捗るニャ
    1. エラーが起きている具体的なコードを特定したり、その上で、エラー近辺にあたりをつけながら原因特定に臨んでゆけるニャ
  2. Sourcesでデバッグする際の、まずはここからは、「ブレークポイント」だニャ
    1. 処理を一旦止めることによって、その先の処理がどのように実行されているのかを視覚的に確認できる契機を得ることができるニャ
  3. ブレークポイントで止めた処理を順に実行しながら確認することで問題解決がしやすくなるニャ
    1. ステップ実行を用いることで、実行の仕方を制御できて効率よく動作確認してゆけるニャ
    2. ウォッチを用いることでパッと見確認しにくい変数の中身を明らかにしながら処理を追えるニャ

ある程度JavaScriptの学習記事を書き進めて来ましたので、それを踏まえてブラウザ付属の開発者ツール、今回は特に、Chromeの開発者ツールのSourcesについて学びました。Sourcesを用いデバッグできることを知ることでツールとしての活用幅がぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Chromeの開発者ツールのSourcesの活用方法をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
image


関連記事

小泉七菜
この記事を書いた人
小泉七菜
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp