JavaScript

【JavaScript】変数の中身を確認する方法【デバッグ方法】

どうも、つよぽんです!

今回は、JavaScriptでの変数の中身を確認する方法を解説します。

今回の記事は次のような方に向けて書きました。

想定読者
  • 作成した変数の中身を確認するにはどうすれば良いの?
  • 問題解決スキルを身に着けたい
  • 簡単なプログラムミスの解決に消費している時間を減らしたい

JavaScriptに限らず、プログラミングをしていて意図したとおりにプログラムが動かないときに「変数の中身を確認したい」場面にたくさん遭遇します。

変数の中身を確認して問題を解決する」という問題解決スキルエンジニアとして重要なスキルとなります。

初心者の段階からもこの問題解決スキルを身に着けておくと、簡単なミスもすぐに解決出来るようになるので、学習スピードが上がります

今回の記事は以下の学習コンテンツのスライドを詳しく解説した記事となります。以下の記事と合わせて読むことでより理解度を深めていただけるかと思います。

あわせて読みたい
JavaScriptで値を確認する方法(デバッグ方法)プログラミングをしていて不具合が発生したときに、その不具合の原因を突き止める作業が重要になります。この作業のことを「デバッグ」と呼び、変数の中身や関数の実行結果の値を確認する必要があります。今回はデバッグする際に便利な機能の使い方を紹介します。...

それでは次の内容で話を進めていきます。

今回の内容
  1. デバッグとは
  2. alertの使い方
  3. console.logの使い方

 

デバッグとは

この章では「デバッグ」について解説します。

デバッグとは、「変数の値関数の動作などを確認して、問題がある箇所(=バグ)の修正を行うこと」を言います。

つまり、プログラミングの学習をしているときや、実際にWebサービスやアプリケーションを作成しているときに遭遇する不具合を解決するための手段のことです。

記事の冒頭でも説明しましたが、プログラムの不具合を解決スキルはエンジニアにとって重要なスキルです。

「デバッグが出来るか出来ないか」によって開発・学習スピードに大きな差が出てきます。

そのため、効率よくプログラミングの学習や開発を行いたいのであれば、初心者の段階からも「デバッグ方法」を身に着けておくことを強くオススメします。

デバッグ方法を身につけるのってなんだか難しそう。。」と思われるかもしれませんが、とてもカンタンなので心配しなくても大丈夫です

JavaScriptのデバッグ方法は次の章以降で解説する、「①alert」「②console.log」の2つの内いずれかを使うことが一般的です。

それでは1つずつ見ていきましょう。

alertの使い方

この章では「alert」の使い方の説明をします。

「alert」を使うことで変数の中身(=値)をWebブラウザ上に「アラートダイアログ」の形式で表示することが出来ます。

言葉だけだとイメージがつきづらいと思うので、以下の画像をつかって説明します。

alertを使って変数の中身を確認するサンプルalertを使って変数の中身を確認するサンプル

画像ではデベロッパーツールを使って「alert」を実行しています。

デベロッパーツール内(Webページの下側)のオレンジ枠内で「変数message」を作成して「’アラートメッセージで表示する値‘」という文字列を代入しています。

その後、緑枠内で「alert(message)」を実行することで、画面上部の赤枠内で「アラートダイアログ」を表示します。

このとき、変数messageの中身(=’アラートメッセージで表示する値‘)がアラートダイアログ上に表示されているのが確認できます。

このように、alertを使うと変数の中身をアラートダイアログ上に表示することが出来るのです。

デベロッパーツールを使うことで、今すぐにalertの挙動を体験することが出来るので、体験してみたい方は以下の記事を参考にデベロッパーツールを使っていただけたらと思います。

あわせて読みたい
【入門】JavaScriptを実行する【デベロッパーツール編】JavaScriptを勉強したいなと思ったときにはまずは実行してみて体験してみると良いでしょう。JavaScriptを実行する方法はプログラミングしたファイルを用意する方法もありますがデベロッパーツールを使うのが手っ取り早いです。...

console.logの使い方

次に「console.log」の使い方の説明をします。

「console.log」を使うことで変数の中身(=値)をデベロッパーツール上に出力させることが出来ます。

こちらも言葉だけだとイメージがつきづらいと思うので、以下の画像をつかって説明します。

console.logを使って変数の中身を確認するサンプルconsole.logを使って変数の中身を確認するサンプル

「console.log」でも基本的には「alert」のときと同様に「console.log(中身を確認した変数名)」の形式で使います。

alertと異なる点は次の2つです。

alertと異なる点
  1. 変数の中身はデベロッパーツールのConsoleに出力される (alertではアラートダイアログ上に出力される)
  2. 複数の変数の中身を同時に確認できる(alertでは1度に1つの変数の中身しか確認できない)

上記のの挙動を確認するために上の画像に戻りましょう。

緑枠内を確認すると「console.log(value1)」を実行して、次の行で「変数value1」の中身が確認できていることがわかります。(変数value1はデベロッパーツールの1行目で定義されています。)

そして、青枠内を見るとカンマ区切りで「console.log(value1, value2, value3)」複数の変数がconsole.logにセットされているのがわかります。

その結果、次の行で「value1」「value2」「value3」の変数の中身が出力されているのが確認できます。

このように、alertと比べるとconsole.logは複数の値の確認も出来て、「アラートダイアログ」を毎回閉じる必要も無いので、基本的にはconsole.logを使うようにしておけば良いでしょう。

まとめ

今回の話をまとめると次のとおりです。

今回のまとめ
  1. デバッグとは「プログラムの不具合があったときに、①変数の値などを確認して、②問題の原因を突き止めて、③問題を解決する」作業のことである
  2. alertを使うことで、変数の中身をアラートダイアログに表示することが出来る
  3. console.logを使うことで、変数の中身をデベロッパーツールのConsoleに表示することが出来る
  4. console.logはalertと異なり、同時に複数の変数の中身を確認できるため、基本的にはconsole.logを使うことをオススメする (alertは1度に1つの変数(=値)の確認しか出来ない)

今回の内容は以下の記事内のスライドの補足資料として作成しました。スライドの全部を確認したい方は以下の記事も参照して頂けたらと思います。

あわせて読みたい
JavaScriptで値を確認する方法(デバッグ方法)プログラミングをしていて不具合が発生したときに、その不具合の原因を突き止める作業が重要になります。この作業のことを「デバッグ」と呼び、変数の中身や関数の実行結果の値を確認する必要があります。今回はデバッグする際に便利な機能の使い方を紹介します。...
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか?

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る

 

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です