JavaScriptがうまく動かない？開発者ツールでデバッグしてみよう
「JavaScriptをなんとなく書き始めてみたけど、どうもうまく動かない」
「いろいろ書いたけどコードのどこでつまづいてるのかわからない」
「変数の中身が知りたい」
「思ったように処理が流れてるか確認したい」
もし、こんなようなお悩みを抱えている方はこの記事を読むと解決するでしょう。
今回はWebフロントエンド開発ではほぼ必須となるブラウザの開発者ツールを使ったデバッグの方法を紹介します。
デバッグ？
デバッグとはプログラムのミス(以下、バグといいます)を発見すること、そしてバグを直すことをいいます。
具体的には書いたプログラムの中にブレークポイントを置いて処理を中断させて変数の中身を見たり、ステップ実行で1行ずつ処理を再開させていき、思ったとおりに処理が分岐しているかを確認してバグの原因を見つけます。バグの原因がわかれば直すことができます。
ブレークポイントが置けない場合は少々面倒になりますが、プログラミング言語に備わっている出力関数をプログラムに仕込んで確認することになります。
JavaScriptであればconsole.log()、PHPであればecho()やvar_dump()、JavaであればSystem.out.println()などの出力関数があります。
プログラミングは1発で完璧なソースコードを書くことはなかなか難しいです。
人間がやることなのでどうしてもミスが生じてしまうのです。
なので、デバッグをして思ったとおりに作れているか確認しながらプログラミングを進めていくわけですね。
作った後もバグが潜んでいるかもしれないのでリリース前にテストをしてバグを潰していくのですが、それでも潰しきれずに運用が始まってから発覚することもよくあります。(アプリのリリース履歴に「軽微な不具合改修」のように書いてあることもまあまああることです。)
なのでデバッグはプログラマーにとって必須の作業になります。
具体的なデバッグ方法はプログラミング言語や開発環境によって異なりますが、今回はJavaScriptでのデバッグ方法を紹介します。
JavaScriptはブラウザ上で動作するプログラミング言語
見出しを見て「そんなの知ってるよ」という方はこのセクションは読み飛ばしてください。
改めてになりますが、プログラミング言語にはサーバーサイドの言語とクライアントサイドの言語があります。
Webの世界はサーバーとクライアントの関係に成り立っています。
サーバーサイドというのはサービスを提供する側のコンピュータのことを指し、
クライアントサイドというのはそのサービスを利用する側のコンピュータのことを指します。
例えばGoogleはサーバーサイドでGoogle検索する人のPCやスマホはクライアントサイドになります。
このブログを発信しているのはサーバーサイド、そして読者はクライアントサイドです。
プログラムはすべてサーバー側に保管されているのですが、その中にはサーバーサイドで動くものとクライアントサイドで動くものがあります。
クライアントサイドで動くプログラムにはHTML、CSS、JavaScriptなどがあります。
サーバーサイドで動くプログラムにはJavaやPHP、Pythonなどがあります。
例えばあなたがGoogleのページを開こうとしたときにGoogleのサーバーからあなたのブラウザにHTML、CSS、JavaScriptなどのプログラムが送信されます。
そしてそのプログラムをあなたのブラウザが解析することでWebページが表示できています。
なので、JavaScriptはクライアントサイド(ユーザーのブラウザ上)で動作するプログラミング言語ということになります。
ちなみにサーバーサイドのプログラムはというと、JavaScriptなどのクライアントサイドから指令を受けて、サーバーが保管しているデータ渡してあげたり、データを登録してあげたりという裏方作業を役目を担っています。
前置きが長くなりましたが、言いたかったのはJavaScriptはクライアントのブラウザ上で動作するプログラミング言語なので、デバッグもお使いのブラウザでできるということです。
たいていのブラウザには開発者ツールという機能が備わっていて、そちらでデバッグをすることができます。
開発者ツール？
Webプログラミングに関わりのない人はほとんど見たこともないでしょう。
実はブラウザにはプログラマーの作業を助けるための開発者ツールという機能が備わっています。
例えばGoogle Chromeというブラウザを開いてWindowsであればF12キー、MacであればCommand+Option+iキーで開くことができます。(Chrome以外にもほとんどのブラウザで同じ方法で開けると思います。)
今回はGoogle Chromeの開発者ツールを使ってデバッグの方法を紹介します。
ブレークポイントを置いてみよう
上記でも少し触れましたがプログラムにブレークポイントを仕込むとそこで処理を一時停止させることができます。
ブレークポイントを置くには「debugger」と書きます。
ちょっとサンプルコードを書いてみましょう。
HTML
<html>
<head>
<script>
window.onload = function() {
const p = document.getElementById('test')
const num = 12345 * 23456
// ここにブレークポイント！
debugger
if (num > 200000000) {
p.innerText = '2億より大きい'
}
else {
p.innerText = '2億以下'
}
}
</script>
</head>
<body>
<p id="test"></p>
</body>
</html>
上記のプログラムは12345と23456をかけた数字が2億より大きいかどうかを判定してPタグに結果を埋め込んでいます。
if文での判定前に「debugger」と書いてブレークポイントを置いています。
Chromeで開発者ツールを開いた状態でこのHTMLを表示してみましょう。
ブラウザの表示が一時停止され、開発者ツールのSourcesタブにプログラムが表示されており、ちょうど「debugger」の部分に色が当たってるのがわかるでしょうか。
これがブレークポイントによって処理が一時的に止まっている状態です。
そして右側のScope欄に定義した変数numのデータが表示されているのがわかるでしょうか。
開発者ツールではこのように変数の中身を見ることができます。
便利ですね！
この時点で次のif文では289564320 > 200000000という比較をすることになるとわかりますね。
では1行ずつ処理を進めてif文でどのように処理が通るのか見てみましょう。
1行ずつ進めることをステップ実行といいますが、ステップ実行は上の画像の右上にある青い再生ボタンの右隣にある右矢印ボタンを押します。
elseのほうではなくifの中を通ったことがわかりますね。
これでpタグには「2億より大きい」という文字が表示されることがハッキリしました。
もういいから処理再開したいよという場合は画面右上の青い再生ボタンを押します。
もし、後続処理にも「debugger」が埋まっている場合はそこまで処理を再開します。
HTML
<html>
<head>
<script>
window.onload = function() {
const p = document.getElementById('test')
const num = 12345 * 23456
debugger
p.innerText = getText(num)
}
function getText(num) {
if (num > 200000000) {
return '2億より大きい'
}
else {
return '2億以下'
}
}
</script>
</head>
<body>
<p id="test"></p>
</body>
</html>
ちょっとプログラムを変えてPタグに埋め込む文字を別関数で判定するようにしました。
このように途中で関数が出てきた場合、上記の手順では関数の中までは通りませんが通ることもできます。
関数呼び出しの行まで進めて下矢印のボタンを押してください。
ご覧のとおり、getText関数の中に入りましたね。
この中でステップ実行することができます。
関数の呼び出し元に戻りたい場合は上矢印ボタンを押します。
また、このボタンの使い分けめんどくさい！とにかく作った処理の中を関数の中も含めて全部みたいんじゃ！という場合はその右の左矢印ボタンを押すと関数の中も含めて1行ずつ処理を進めることができます。
出力関数を使ってデバッグする方法
ブレークポイントを使えばデバッグをすることができるのですが、アプリの作りによってはブレークポイントだと都合が悪い場合もあります。
たとえば何回もその処理を呼び出されてしまう場合です。
いちいち止まっては再開させてをボタンをポチポチ押しまくるのはなんとも面倒な話です。
そのような場合は「debugger」を使うより「console.log()」を使ったほうが楽かもしれません。
これは開発者ツールのConsoleタブに出力する関数です。
以下のサンプルコードをご覧ください。
JavaScript
window.onload = function() {
let count = 0
setInterval(function() {
count++
console.log(count)
},1000)
}
これは秒を数える処理をしてます。
1秒ごとにconsole.log()を呼び出してコンソールに出力しています。
開発者ツールのConsoleタブを開くと出力結果を確認できます。
ブレークポイントを置くと辛い場合や置くまでもなくちょっと確認したい時などに活用ください。
まとめ
デバッグはプログラミングでは必須となる作業で、デバッグをすることでプログラムの品質を高めることができます。
慣れると簡単ですし、これができるようになるとプログラミングが少し好きになるかもしれません。
JavaScriptのデバッグには大きく分けて「debugger」を使う方法と「console.log()」を使う方法があります。
それぞれの状況に応じて使い分けてください。
したっけ！
- JavaScriptのデバッグはブラウザの開発者ツールで出来る
- debuggerと書くとブレークポイントを置ける
- 慎重にゆっくり調査をしたい時はdebugger、そうでない時はconsole.log()を使うといいかも
- console.log()の出力結果は開発者ツールのConsoleタブで確認できる
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy