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



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

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

目次
  1. はじめに
  2. ブラウザ付属の開発者ツールって何ニャ?
  3. 「お試しコードの実行」とはどういうことニャ?
  4. 「うまく動かなかった場合の原因を確認」とはどういうことニャ?
  5. 「どのような処理が実行されているのかをログで確認」とはどういうことニャ?
  6. 最後に

はじめに

image この記事ではJavaScriptの開発時に役に立つ、ブラウザに付属している開発者ツール(デベロッパーツール)について、概要について取り上げつつ、躓きポイント を補足しています。 各節ごとに、Ne:Code道場(猫de道場)の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。 それらのポイントを中心に、ブラウザ付属の開発者ツールについて理解を深めてゆきましょう。

ブラウザ付属の開発者ツールって何ニャ?

今回の記事においては、ブラウザの中でもChromeの開発者ツールを用いながら説明したいと思います。実は、今までのNe:Code道場でも、開発者ツールの実行結果をキャプチャとして用いていました。例えば、for文の説明で漫画内で利用した雑巾がけのシーンがあげられます。
今回は上記の漫画内でも用いたConsoleについて説明します。
Consoleを用いると「お試しコードを実行」してみたり「うまく動かなかった場合の原因を確認」できたり「どのような処理が実行されているのかをログで確認」できたりします。
それぞれ順を追って確認してみましょう。
image

「お試しコードの実行」とはどういうことニャ?

Consoleを用いると実際にコードを書いて実行することができます。
まずは論より証拠で、Chromeを用いて実際の流れを追ってみましょう。
ブラウザの新しいタブを開き、ブラウザ上で右クリックをするとメニューの中に「検証」という項目が表示されます。その「検証」を選択すると、ブラウザ上に見慣れないエリアが表示されるのを確認できるでしょう。この手順で開いた状態ですと、Chrome開発者ツールの「Elements」というページが選択されています。「Console」はその横にありますから、そちらを選択しましょう。
(ちなみに、開発者ツールを開く方法は「検証」を選択する以外にも存在します。その方法の中にはショートカットキーを用いるものもあり、慣れてくるとショートカットキーを用いるやり方のほうがサクッと開くことができ便利だと思います。興味があればその方法について調べてみましょう)
 
「Console」上で「clear()」と入力し、Enterキーを押すとConsoleエリアの出力内容をスッキリすることができます。ごちゃごちゃ表示されていて見づらいな、という場合はこれらの機能を活用しましょう。
では、実際に動かしているgif画像を最初にお見せしつつ、その後に順を追って猫弟子の感想を記載してゆきます。
image

// 変数の宣言、普通に実行することができたニャ!
let priceList = [100, 80, 150, 240, 125, 210];
 
// 変数名をポコッと書くことによって、その変数の中身がどうなっているかを確認できたニャ!
// これは便利ニャ~
priceList
 
// 配列の変数である、priceListの後に、ドットを書くと配列の変数で利用できる便利機能をさっと選択できたニャ!
// タイプミスとか発生しなさそうニャ☆
// 要素数を取得するlengthを用いると、現在の要素数が幾つになるのかが表示されたニャ!
priceList.length
 
// 配列に要素を追加するpushを利用するときにも、ドットの後に「p」を入力すると候補に表示されたニャ!
// pushした結果の配列の中身はちゃんと変わっていたニャ!
// 対話式で処理を記載できるから、動きの流れを追いやすい気がするニャ♪
priceList.push(1)

Consoleで実際にコードを書くと、変数の中身がどうなっているのか、その変数だからこそ用いられる機能にどういうものがあるのか、また、その機能を用いた結果がどうなるのかを都度都度確認できることを取り上げました。
猫弟子も言っていましたが、とても便利でちょっとした動作確認や、学習用のお試しコードの記載などでも重宝しそうですね。
image

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

コードを書いているときには、間違いはつきものです。特に学習時に書いているコードは、学びたての内容で間違えてしまう可能性が高まっているため、書いたけれどうまく動かないというシーンに遭遇する確率は高まっているでしょう。
例えば、猫弟子が以下のコードを書いてそれを実行しようとしたとします。

// 「半か丁か」ゲームをするために、2つだけの値(0と1)をランダムに受け取るニャ
let random = Math.floor(Math.random() * 2);
 
// 0の時は丁、1の時は半ニャ!
// ・・・の、はずニャ。。?ちゃんと動いていないニャ?!
// (小声)後で気づいたニャ!randomって、o(オー)を書かなければいけないのに、0(ゼロ)になっていたニャ。。
// (小声)・・・キーボードの場所が近いし、形も似ているからだニャ。。!は!師匠がすごい視線でこっちを見ているニャ!言い訳はやめるニャ!! 
if (rand0m === 0) {
    console.log("丁だニャ!");
} else {
    console.log("半だニャ!");
}

「(小声)」で自己解決までしてくれた猫弟子でしたが、順を追って原因を見てゆきましょう。宣言済の変数を使っているつもりでも、名前を間違えてしまったら全く別物になってしまうので、「そんな変数宣言されていないよ?」とJavaScriptにツッコまれていたのが上のコードですね。実際このコードを実行した後、Consoleを見てみると、「Uncaught ReferenceError: rand0m is not defined」というエラーが確認できるかと思います。
エラーは英語で出力されますが、身構えずにその文章を読んでみたり、検索したりしながらどいういうエラーがおきているのかを把握するのがポイントですね。
今回のようにシンプルなエラーでは、そのまま翻訳すれば「rand0mっていう変数は宣言されていません!」と確認できます。
 
ただ、あえて、これを検索して調べるとした場合のポイントについても補足します。出力されたメッセージの内、自分の環境固有の部分は除去して、それ以外のキーワードで検索してみると最初の取っ掛かりを得られるかと思います。
今回の例で言えば、「rand0m」というのは、自分の環境固有の記載ですよね。ネットの他の人がまさに同じ変数名で間違えてしまっている可能性は限りなくゼロに近いでしょうから、固有部分を除きつつ、言語を先頭につけるなどして調べてみるのも良いと思います。例えば、「JavaScript Uncaught ReferenceError: is not defined」のようにしてみるイメージです。
image

「どのような処理が実行されているのかをログで確認」とはどういうことニャ?

Ne:Code道場では、今までサンプルコードでずっと、「console.log()」を出力用に用いてきました。まさにこの書き方が今回の「ログ」に該当します。console.log()で出力した結果は、ブラウザ上には表示されません。開発者ツールのConsoleエリアに出力されるものなのですね。
作ったシステムが複雑になると、どのような順番で処理が動いているのかや、その時の変数の値がどうなっているのか等が把握しにくくなります。その際にconsole.logとして出力することで、どういう値になっているのかを確認してゆくことができます。
ただ、console.logを上記のような動作の把握や変数の中身の把握等でお試しに書く場合は、それはあくまでお試しになるので、最終的にはコードから不要な処理(行)になるため、削除してあげる必要があります。ただ、削除は忘れてしまう可能性もありますし、少し面倒臭いですよね。
そのようなポイントを心に留めつつ、次回は、「Sources」を用いることで「どのような処理が実行されているのかを確認」する方法について補足してゆきます。
image

最後に

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

  1. Consoleを用いることで、対話形式でJavaScriptとお話できるニャ
    1. 打てば響くように結果を返してくれたり、予測候補を教えてくれることで、直感的に学習してゆくことも可能になると思うニャ
    2. 間違いを書いたら、そのタイミングでエラーとして教えてくれることも嬉しい限りニャ
  2. 実行したコードがうまくいかない場合は、まずはConsoleでエラーが起きていないかをチェックするニャ
    1. エラーが起きていたとなったら、むしろラッキーだニャ。エラーを解決すれば良いという足がかりを得ることができるニャ。
    2. エラーメッセージは情報の宝庫だニャ。うまいこと活用しつつ問題解決につなげたいところだニャ
  3. 処理の流れを追ったり、変数の中身を確認したりにもログは使えるニャ
    1. ログの情報はConsoleに表示されるから、ブラウザの表示結果とは別に確認できるニャ
    2. ただ、詳細に流れを追ったり、その都度変数の中身がどうなっているかを確認する場合には、この次の記事で取り上げるSorcesの方が軍配が上がるシーンが多いかと思うニャ

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

関連記事

小泉七菜
この記事を書いた人
小泉七菜
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp