JavaScriptでconsole.logを使用したデバッグのやり方【初心者向け】
初心者向けにJavaScriptでconsole.logを使用したデバッグの方法を解説しています。エラーが表示される度にデバッグは重要な知識になるので、ぜひ覚えておきましょう。慣れれば一人で開発作業をしても進められるはずです。
TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptでconsole.logを使用したデバッグを使う方法について解説します。
プログラミングを習得する上でも開発業務の中でもよく使うので、自分でも書きながら覚えていきましょう。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
デバッグとは
デバッグとは、JavaScriptを使用したプログラミングを行う中で、プログラムのエラーを発見するために必要な作業です。
デバッグを行わずにプログラミングを進めていくと、実際動かそうという時点になってエラーがたくさん出てきてしまいます。
実際動かすときに修正するのではなく、プログラミングを行って行く中で、頻繁にデバッグを行うことで、エラーの早期発見・早期修正を行うことが可能になります。
最初は、デバッグを行う事自体を手間に感じるかもしれませんが、エラーの早期発見・早期修正が可能となり、結果的にはプログラム完成が早くなります。
console.logを使用したデバッグの例
今回は、Googleが提供しているChromeというブラウザのChrome Developer Toolsを利用してデバッグを行っていきます。
Windowsの場合は「F12」を押してください。Macの場合は、「Opt + Cmd + I」を押してください。
すると次のようなChrome Developer Tools画面が表示されます。
設定によっては次のように、下側に表示されることがありますが同じ機能です。
次に、赤枠のconsoleタブ部分をクリックしてconsole機能画面を表示させます。
そして、赤枠のようにconsole.log(“テスト”)と入力します。
最後にEnterキーを押すと赤枠のように「テスト」と表示されます。これがconsole.logデバッグの一例です。
[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中
デバッグするプログラムを用意する
先程はGoogleのページをChrome Developer Toolで開き、console.log上で入力したテストという文字をconsole.log上で表示しました。
ここからは、実際に作成したJavaScriptの変数を表示します。
今回は現在日時を表示させるJavaScriptプログラムを使用したデバッグを行います。
ソースコードは次のとおりです。
html
<!DOCTYPE html> <html> <body> <div id="box"></div> <script src="main.js"></script> </body> </html>
JavaScript
var day = new Date().toLocaleString();
document.getElementById("box").innerHTML = day;
このプログラムを実行すると現在日時がChrome上に表示されます。
実際にデバッグしてみる
先程の日時表示プログラムをChrome Developer Toolで開いてデバッグします。
日時表示された画面をChrome Developer Toolで開きconsoleにconsole.log(day)と入力します。
このページの最初では、console.log(“テスト”)のように””で囲んで入力しました。
これは、””で囲った文字をそのまま出力させる処理でした。
今回は、””で囲まず、JavaScriptのプログラム内で使用している「day」という変数を表示させます。
入力後Enterで実行すると次のように現在日時が表示されます。
つまり、プログラムとしては問題なく現在日時を取得できていることがわかります。
ここで、今回使用している変数dayではなく、使用していない変数daysを入力してデバッグしてみます。
赤い枠で囲まれた部分でconsole.log(days)と入力しています。
すると、赤文字でdaysという変数が定義されていないというエラーが表示されます。
このように、すべてのプログラムが完成する前にデバッグすることで、少しづつエラーを発見し修正することが可能です。
以上、JavaScriptでデバッグを行う方法について解説しました。
エラーが出てもすぐ解決できるようにconsole.logの使い方を理解しておきましょう。
また、TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。
現役エンジニアのメンターに毎日質問することができます。
