JavaScriptでconsole.logを使用したデバッグのやり方【初心者向け】
初心者向けにJavaScriptでconsole.logを使用したデバッグの方法を解説しています。エラーが表示される度にデバッグは重要な知識になるので、ぜひ覚えておきましょう。慣れれば一人で開発作業をしても進められるはずです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
監修してくれたメンター
高田 悠
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptでconsole.logを使用したデバッグを使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
プログラミングを習得する上でも開発業務の中でもよく使うので、自分でも書きながら覚えていきましょう。
目次
- console.logとは
- console.logを使うための準備：コンソールを開く
- console.logで値を出力してみる
- console.logの実用的な使い方
- まとめ
- JavaScriptを学習中の方へ
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
console.logとは
console.logは、プログラム中の変数などの中身を確認することで開発をしやすくしたり、不具合の原因を突き止めるために使うJavaScriptの組み込み関数です。
プログラミングはむやみやたらに書き進めてしまうと、どこで間違えたのか分からない混乱に陥る可能性が非常に大きいです。
そうならないためにも本記事でconsole.logを学習し、プログラムの挙動を少しずつ確認しながら着実に実装をできるようになりましょう！
console.logを使うための準備：コンソールを開く
console.logを使うと、プログラム中の様々な値をブラウザのコンソールという場所に表示できます。
今回は、Web開発でよく使われるGoogle ChromeというブラウザのChrome Developer Toolsを利用してデバッグを行っていきます。
Chrome Developer Toolsを開くには、Windowsの場合は「F12」を押してください。
Macの場合は、「Opt + Cmd + I」を押してください。
次のようなChrome Developer Tools画面が表示されます。
設定によっては次のように、下側に表示されることがありますが同じ機能です。
次に、赤枠のconsoleタブ部分をクリックしてconsole機能画面を表示させます。
consoleタブをクリックすることでコンソールを開くことができました。
console.logで値を出力してみる
Web開発では、HTMLファイルとJavaScriptファイルをそれぞれ用意し、それらをブラウザに読み込ませることで、コンソールとプログラムが連動するようになります。
まずは以下のようなHTMLファイルとJavaScriptファイルを、同一のフォルダの中に作成してください。
その際、HTMLファイルはindex.html、JavaScriptファイルはmain.jsという名前で保存してください。
<!-- index.htmlというファイル名で保存 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>//main.jsというファイル名で保存
console.log("この文章をコンソールに表示します");
次に、作成したindex.htmlファイルを、Google Chromeの画面上にドラッグ&ドロップしてください。
画面は真っ白になりますが、問題ありません。
コンソールを開くと、”この文章をコンソールに表示します”と表示されています。
ブラウザがindex.htmlを読み込み、さらにindex.htmlから読み込まれているmain.jsのコードが実行されたということです。
つまり、console.logは基本的にJavaScriptファイル内に記入し、都度コンソールの表示を確認しながら開発を進めていくことになります。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
console.logの実用的な使い方
本章では実際に、console.logの用例を解説していきます。
console.logには、主に次の2つの用途があります。
1．値が想定通りになっているかを確認する
2．不具合の原因を突き止める（デバッグ）
それぞれ具体的にみていきましょう。
値が想定通りになっているかを確認しする
まずは以下のコードを、先ほど使用したmain.jsに貼り付けてください（先ほどの記述は上書きして大丈夫です）。
const addNumbers = (num1, num2) => {
return num1 + num2;
}
addNumbers(2, 3);上記のコードの意味は次のとおりです。
1． num1とnum2の2つの引数を受け取り、それらを足し算して返り値として返すaddNumbers関数を定義
2．addNumbersに、2と3の数値を渡して、関数を実行
コードは正しく処理されますが、実際にどんな返り値になるのか、プログラマーは見ることができません（暗算はできますが、実際はもっと複雑なプログラムでデバッグします）。
そこで、以下のようにconsole.logの記述を追加してみます。
const addNumbers = (num1, num2) => {
console.log(num1 + num2);
return num1 + num2;
}
addNumbers(2, 3);返り値と同じくnum1 + num2を入れていますが、記述によってコンソールに数字の5が表示されたと思います。
適宜、console.logで処理の結果を確認することで、スムーズに正しいプログラムを書くことができます。
不具合の原因を突き止める（デバッグ）
console.logは、コードが意図しない挙動をしたときの原因究明にも役に立ちます。
以下のようにmain.jsを変更してみてください。
const addNumbers = (num1, num2) => {
console.log(num1 + num2);
return num1 + num2;
}
addNumbers(2); //第二引数の3を消すここではあえて必要な引数を削除していますが、実際の開発中に引数を忘れてしまったということを想定しています。
main.jsを変更した後に再びHTMLを読み込むと、コンソールにはNaNと表示されます。
NaNはNot a Numberの略で、数値計算の結果が数値ではなかったことを示すので、明らかに意図しない結果ですね。
num1 + num2でNaNという結果が出たので、まずnum1とnum2のどちらに原因があるのかを確かめます。
次のようにconsole.logを追加してください。
const addNumbers = (num1, num2) => {
console.log(num1, num2); //ここに1行追加
console.log(num1 + num2); //この行は先ほどのまま
return num1 + num2;
}
addNumbers(2);2行目と3行目はよく似ていますが、2行目は変数をカンマで区切っています。
カンマで区切ることで複数の値を一度にコンソールに表示できます。
さて、出力は2 undefinedとなっているはずです。
これはnum1が2、num2がundefinedであることを示します。
num2が定義されていない = 引数を渡し忘れていないか？と察しがつきますね。
console.logの出力を頼りにおかしいところを見つけていくのが、開発のスピードアップにつながります。
今回は簡単な不具合だったため、console.logを使うまでもなく原因は分かってしまうのですが、実際にはもっと複雑なコードで不具合は起きるものです。
不具合に悩まされた時に少しでも先に進めるよう、console.logは今のうちから積極的に使っていきましょう！
まとめ
今回は、console.logの役割と具体的な使い方を学びました。
要点をまとめると、以下の通りです。
- console.logの出力を見るには、ブラウザのコンソールを開く必要がある
- console.logはJavaScriptのコード内に記述する
- console.logは、値の中身を確認したり、不具合の原因を突き止めたりする際に役立つ
- 不具合が出たら、手がかりになりそうな変数の中身をひとまずconsole.logで確認してみる
console.logを使いこなせるか否かで、実装のスピードは劇的に変わってきます。
JavaScriptで開発をするのであれば必須の技術になるため、早めに習得してしまうことをおすすめします。
本記事は以上です。
JavaScriptを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
