おはようございます、hamatakeBlogです！
プログラミングに関する記事をすでに数回書いていますが、
【JavaScript Clickイベント】HTMLのボタンが押されたときの処理【JavaScript入門】 - hamatakeBlog
おい！記事を真似して書いてみたけど、動かないぞ！どうなってんだ！😠
なんてことになっている方もいらっしゃるんじゃないでしょうか。
そんなプログラミングを始めたはいいものの一歩目からつまずきそうという方必見！
今回はソースコードに不具合がある場合のエラー解決方法をご紹介します。
デバッグ
ところでみなさん、デバッグという言葉を、聞いたことはありますか？
デバッグ（debug）とは、コンピュータプログラムや電気機器中のバグ・欠陥を発見および修正し、動作を仕様通りのものとするための作業である。
うん、かてーこと言ってっけど、平たく言うと、バグやエラーを探して修正する作業のことだな。
ということで今回は、JavaScriptのソースをデバッグしていこうと思います。
開発者ツール（ディベロッパーツール）
JavaScriptデバッグ方法には様々なものがありますが、今回はブラウザの開発者ツールを使ってのデバッグをやっていきます。また本記事では最も利用者が多いChromeブラウザを利用します。
それでは、まずは開発者ツールを開きます。開き方は簡単。下記の方法のいずれかで開くことができます！
- F12キー
- Ctrlキー + Shiftキー + iキー
- 右上の設定メニュー → その他のツール → ディベロッパーツール
開くと下記のような画面が出てきます！
Elements
このElementsでは現在表示しているHTMLを確認することができます。
Elementsの一番左にある矢印マークを押します。
この状態でサイト内のどこ部分でもいいのでクリックしてみてください。
すると、HTML部分がこのように青くフォーカスされます。これは実際にクリックされた部分のHTML部分をフォーカスするようになっています。
さらにそのタグに指定されているスタイルも下部で確認することができます。
もっというとこのa{ }の括弧の内部をダブルクリックするとスタイルを一時的に新規に指定することができます！ほんとこれ初めて見たとき感動しましたｗ
ただ注意してほしいのがあくまで一時的なので、ページの更新やブラウザを落とすと変更したものは消えてしまいます。あくまでこんな感じでデザインやったらどうかなーってやってみてよかったのをソースに反映するって感じで使いましょう！
Console
次にConsoleです。JSのログを出力します。
サンプルとして今回は以前使用したボタンをクリックしたときに出力されるJSの関数を使用します。
// ボタンクリック関数
function butotnClick(){
console.log("デバッグを確認しました！");
// alert()で、アラートを出力
alert('ボタンがクリックされました');
}
JSではconsole.log()でこのConsoleに出力することができます。
ここで文字列を出力するだけでは、あまりメリットはないですが変数を出力するなどすれば非常に効率的にデバッグができます！
Sources
最後にJSデバッグには欠かせない部分を確認していきます。
先ほどのClonsoleと同じソースを使用します。
Saucesをクリックし、console～の部分の左側、３行目をクリックすると、下記の画像のようになります。
これをブレークポイントといいます。ブレークポイントでは実行中の処理を一時停止し宣言中の変数や値の確認をすることができます。
仮にこのようなソースを作りましょう。
let test = 0;
function butotnClick(){
if( test === 0 ){
test ++;
}
console.log( "ログ成功：" + test );
}
では実際にデバッグやっていきましょう！
ブレークポイントでとめた実行は「ステップオーバー」一行ずつ実行できます。
これで一行ずつ確認していくことで、どこ部分でエラーが発生しているかわかりますね。この一時停止中はカーソルを合わせると変数などを値を確認することができます！！
さらに、ステップオーバーのほかにもステップインというものがあり、これは実行中の行の関数の処理の中にさらにはいっていけます！（実際にやってみたらわかるよ）
まとめと書籍紹介
ということで、デバッグのやり方を解説を終了します！
プログラミングというのは、実戦でやってこそ身につくものというのが理解していただければとてもうれしいです！！まさにトライアンドエラーってやつですね！
なんかうまくいかないーぬーーー、このエラーわからないーーって思う前にまずデバッグしてみましょう！
んで、デバッグしてもわからない（全然あるから安心しよｗ）というエラーも実際あります！そのときは、現場の先輩方やコミュニティの方々に質問してみましょう！それで解決しない問題であれば大前提が間違っている可能性があります!（まぁおそらく質問したらその大前提は間違ってるよっていまれますがねｗ）
最後になりますが、JavaScript初心者にお勧めの書籍をご紹介します！
もし独学で勉強して挫折してしまった！って人にもおすすめしたい本です！図解での解説が多く記載されており、わかりやすくまとまったソースサンプルも記載されています！
気になる方はこちらからどうぞ！⇓
|
|
