続！Javascriptの入門で役に立

｜ 7690 PV ｜ 2019.09.03

favorite_border

以前、厳選！Javascriptの入門で役に立つ10サイト+1でJavascriptとは何なのか？など基本的な内容に触れました。

今回は中級編ということでもう少し実践的に役立つ情報をお届けします。

Javascriptデバッグ

デバッグとは、コンピュータのプログラムの誤り（＝バグ）を見つけ、手直しをすること。デバッギング。虫取り。

とのこと。せっかく書いたコードをブラウザで確認しても、「あれ？なんで動作しないの？」となった場合の原因点を突き止めることです。

特にJavascriptに関しては似たような記号を使うことが多く、半角スペースと全角スペースを間違うだけでも正しく動作しなくなってしまうのでデバッグ方法を知っておくのは有効でしょう。

JavascriptのChromeでのデバッグ方法個人的まとめ2016

このページで一番最初に紹介されているchromeの機能ですが実際に試してみるとこうなります。

※このコードはドットインストールで無料で受講できるJavascript講座で紹介されたものを基に記述したものです。

    <meta charset="utf-8">
    <title>Javascript Practice</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: skyblue;
            cursor: pointer;
        }   
    </style>
</head>
<body>
    <div class="box" id="target">

        <script>
        'use strict';

            document.getElementById('target').addEventlistner('click', () => {
                document.getElementByID('target').style.background = 'pink';
            });
        </script>
    </div>
</body>
</html>

このコードは正しく動作すれば、ブラウザに表示された水色の正方形がクリックするとピンク色に変わるというものです。しかし、クリックしても色が変わりません。

そこでDeveloper Toolsを起動→Consoleタブで確認するとこのようなエラー表示がでました。

このエラーメッセージによると、index.htmlファイルの22行目に問題があるようです。そこで怪しそうな”document.getElementByID”を検索してみると実はdocument.getElementByIDではなくdocument.getElementByIdだったことがわかりました！

コードを修正すると正しく動作するようになりました。

たった一文字、大文字と小文字を間違えただけでも動作しなくなるとは…。Javascriptにとってデバッグ方法を知っておくことは有効であることがお分かりいただけたでしょうか。

まずは無料の14講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする