【初心者向け】 JavaScriptの エラーの直し方
自分が作ったコードがうまく動かないってこと、プログラミングで本当によく起きますよね？
私なんて、10回トライして9回エラーでうまくいかないなんてこともよくあります。
でもそんなときどこが間違っているか、自分の目ですべて探すことは面倒くさいですよね…？
そんな時に簡単にエラーがどこにあるかわかる方法があります！
またそのエラーがどのような間違いで起きているのかを知る方法も一緒に学んでいきたいと思います！
ここで学んだことは、JavaScriptだけでなくほかの言語でも活用できますし、エラーを直すことができたら一気にコードを書く時間が減るので、頑張って覚えましょう！
エラーの見つけ方
まずはエラーが起きているか、起きていないかを確認する方法を教えます！
まず適当に間違ったコードを書いて見ましょう！
<script>
alert(“こんにちは！);
</script>
alertというのはその名の通りアラートを出すものですが、「"」を「こんにちは！」の後につけるのを忘れていますね！
これをブラウザで確認してみると、間違っているのでエラーとなり、何も起きません。
ここで本当にエラーが起きているか確認してみましょう！
使っているブラウザで変わってくるので、ブラウザにあった方法で試してください！
Internet Explorer
Chrome
Firefox
Safari
自分にあったのをクリックすれば飛べます！
Internet Explorerの場合
画面のどこかを右クリック→「要素の検査」→下のタブの「コンソール」
Chromeの場合
画面のどこかを右クリック→「検証」→「Console」
Firefox
画面のどこかを右クリック→「要素を調査」→「コンソール」
Safari
左上のメニューバーの「Safari」→「環境設定」→「詳細」→「メニューバーに”開発”メニューを表示」にチェック→メニューバーの「開発」→「Webインスペクタ」→「コンソール」
コンソールを確認してみよう！
先ほどの過程で、コンソールを開いたはずです！
ここにエラーが起きていたら赤文字でエラーメッセージが出てきますので、コンソールの開き方は早めに覚えましょう！
（逆に赤文字が出ていないのに思っているように動かないときは、普通に間違っている可能性があります！ケアレスミスなどないか確認してみましょう！）
先ほどの間違ったコードのエラーがコンソールに表示されているはずです。
以下がそのエラーメッセージです。
Uncaught SyntaxError: Invalid or unexpected token
自分がつけた名前.html:14
下の「html」と書かれているものも、赤文字のエラーメッセージの右側にあるはずです。
こちらも大事なので解説します！
まず一つ目の方では、「:」のより後の方が大切です！
今回は、「invalid or unexpected token」、直訳すると、「無効、予期しない記号」となり、例えば「}」「;」などの記号をつけ忘れていたり、全角と半角（例えば英語の「;」と日本語の「；」）を間違っていたりした場合にでるエラーメッセージです。
そして二つ目では、自分の作ったHTMLの名前がついているはずです。そして、その名前の横についてある数字が、間違っている場所を指しています！
メモ帳で一番上から14行目を数えてみると、間違えている部分になるはずです！
これでエラーの確認方法は理解できましたね！
代表的なエラーを二つほど見てみましょう！
変数の宣言を忘れている （＝変数を作るのを忘れている）
let a = 0;
if (a > b) {
}
Uncaught ReferenceError: b is not defined at error.html:16
16行目の b は作られていませんよというエラーですね。
書き方が間違っている
let a = 0;
if ( a > 5) {
Uncaught SyntaxError: Unexpected end of input
ifは「{}」で囲まないとだめですよね！
ifだけでなく、switchであったりforなども忘れがちなので、忘れないようにしましょう！
最後に
エラーはどれだけ気を付けていても人間である限り絶対出てきます。
ではどのようにエラーを少なくできるでしょうか。
下の二つのコードを見てましょう！
let a = 0;
if(a>=0){if(a<= 5){
a = 5;}}
let a = 0;
if( a >= 0) {
if ( a <= 5) {
a = 5;
}
}
コンピュータは、改行やスペースは上の例のように最小限にしても同じように動くのですが、人間にとっては明らかに下の例の方が見やすいですよね。
このようにスペースや改行を面倒くさがらず入れることがとても重要です！
これをするだけでエラーがぐんと減ります！
このようなスペースが入れるのが面倒だと感じる人には、エディターを用いましょう！
別の記事で詳しくまとめていますのでよければそちらも見てください！
まだこの記事は非公開です。
投稿されるまでお待ちください
今回はここまで！
エラーはプログラミングにつきものですが、減らすように努力すれば必ず減ります！
また、様々なエラーを経験して、同じミスをできるだけしないように心がけましょう！