※本記事はJavaScriptの勉強がてら、自分達の学んだことを備忘録的に残しておくことが目的です。素人が四苦八苦しながらJavaScriptを学ぶ過程を楽しんでいただければ、そしてそれが、少しでも誰かのためになれば嬉しいです。
また、本記事は備忘録的にまとめていきますので、詳細までは書かないこともあります。ご了承を～
はじめに
さて今回は、JavaScriptのデバック手法と主なエラーについてまとめたいと思います。
プログラムが全て完璧、思い通りに動くなんてことは皆無に等しいですからね。必ずデバックの手法は覚えておくようにしましょう。コーディングをする上で最も重要なスキルと言っても過言はないかもしれませんね。
それでは見ていきましょ～。
デバック手法
「デバック（デバッグ）」とは、プログラム中の不具合（バグ）を見つけ出し、修正する作業を指します。
JavaScriptの開発では、各ブラウザについている「開発者ツール」を活用することで、デバック作業を行っていきます。もう少し具体的に説明すると、「開発者ツール」の「Console（コンソール）」でエラーの内容を確認できます。
ご自身の想定通りに動かない場合は、開発者ツールを開いて何が悪いのか確認するようにしましょう。
開発者ツールの開き方
それでは、Google ChromeとMicrosoft Edgeでの開発者ツールの開き方をまとめておきましょう。
★Google Chromeの場合
「F12」 or 「Ctrl」+「Shift」+「I」
★Microsoft Edge
「Ctrl」+「Shift」+「I」
デバック例
適当に間違えたコードを実行してみて、開発者ツールを確認してみましょうか。
実行するのは以下のコードです。
本来は「alert」と記載すべきところを、わざと「alart」と間違えてみます。まぁあるあるですよね。
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript勉強ログ</title>
</head>
<body>
<script>
var msg = "World";
alart("Hello, " + msg); //正：alert、誤：alart
</script>
</body>
</html>本来は「Hello, World」と表示されてほしいわけですが、表示されません。それはもちろん誤ったコードを書いているからです。
そのうえで、開発者ツールを開いてみてみると以下のようになっているはずです。
「Console」には以下のようなメッセージが書いてありますね。1行ずつ読み取っていきましょう。
Uncaught ReferenceError: alart is not defined
at first_miss.html:9:4「Uncaught ReferenceError」というのがエラーメッセージです。キャッチされなかったReferenceError（参照エラー）と言われていますね。これは、存在しない変数を参照しようとしたときに発生します。
「alart is not defined」というのがエラーの詳細です。直訳してみると、「alartが定義されていません」と表示されていますね。おっしゃる通り！本来は「alert」と記載すべきところを、「alart」と記載しているわけなので当然ですね。
「at first_miss.html:9:4」というのがエラーが発生しているファイル名と行番号を表しています。「first_miss.html」というのがファイル名です。そのうちの「9行目」でエラーが発生しているということですね。
すごく丁寧に説明してくれているのでありがたい！！
console.log()
ちなみに、コンソール画面には好きなメッセージを表示させることもできます。「console.log()」を使いましょう。デバックの際に非常に役立ちます。
<html>
<head>
<meta charset="UTF-8" />
<title>JavaScript勉強ログ</title>
</head>
<body>
コンソールからログを確認。
<script>
var msg = "JavaScript";
console.log("Hello");
console.log(msg);
console.log(2024);
</script>
</body>
</html>実行してみると以下のようにコンソール画面で表示されます。
これらをうまく活用していくことで、エラーが発生した際に変数に何が入っているかなどが一目瞭然ってわけですね。
私はまだ活用の仕方をマスターできていませんが、有効活用していきましょう！
主なエラーの種類
それでは最後に、主なエラーの種類についてまとめたいと思います。
| エラーメッセージ | 概要 |
|---|---|
| SyntaxError | コードが文法的に正しくない場合に発生。 例） ・括弧や波括弧の不一致。 ・セミコロンの付け忘れ。 ・不正な識別子の使用。 ・文字列の閉じ忘れ。 ・構文キーワードの誤用。 |
| ReferenceError | 存在しない変数を参照しようとしたときに発生。 または存在しない命令を記述した場合に発生。 |
| TypeError | 値が期待された型と異なる場合に発生。 |
| RangeError | 値が有効な範囲外の場合に発生。 |
※おまけ：論理エラーとは？？
論理エラーとは、プログラムがコンパイルされ、実行中に異常終了することなく動作しているにもかかわらず、期待通りの結果が得られないエラーのことを指します。このエラーは、コードの構文や文法に誤りはないため、コンパイルエラーや実行時エラーのようには明確に検出されません。しかし、アルゴリズムやプログラムのロジックが間違っているため、望ましい動作をしません。
例えば、if文やループの条件式が正しくない場合、意図した処理が行われず、プログラムが誤った結果を出力することがあります。また、「数値が10未満かつ10以上の項目を抽出する」といった矛盾した条件を設定することも、論理エラーに含まれます切な変数の使用、ロジックの欠陥などが原因で発生します。これらはデバッグや詳細なテストを通じて発見され、修正する必要があります 。
最後に
さて今回は、JavaScriptのデバック手法と主なエラーについてまとめました。
かなり使うスキルだと思うので使い方をマスターしましょう！
★Google Chromeの場合
「F12」 or 「Ctrl」+「Shift」+「I」
★Microsoft Edge
「Ctrl」+「Shift」+「I」
以上！
前回まとめた記事も読んでもらえると嬉しいです！
JavaScript以外の勉強記事も是非！
参考書籍・Udemy
勉強の参考となる参考書やUdemyの動画も載せておきますね。
どれか1冊、1動画を購入し、進めていくのがオススメだと思います。
書籍でも、動画でもOKですので、ご自身に合った方法で学習を進めていきましょう！
コメント