JavaScriptの主なエラーと解決方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptの主なエラーと解決方法について現役エンジニアが解説しています。エラーで多いのがシンタックスエラー(構文エラー)です。他に値が未定義だったり数値ではないなどの場合です。IE,Chrome,Firefox,Edgeなどの各ブラウザの開発者向けツールで解決しましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptの主なエラーと解決方法について、テックアカデミーのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

目次

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptの主なエラーと解決方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptの主なエラーと意味

JavaScriptのプログラムが想定どおりに動作しない場合、エラーが出ていないか確認すると良いでしょう。

JavaScriptのエラーには、大きく分けて以下の2種類があります。

 

シンタックスエラー(文法エラー)

文法が間違っている場合に起こるエラーです。
シンタックスエラーが起きるとプログラムが動かなくなるので、エラーに気づきやすく、また、解決も比較的容易とされています。

 

以下の例を見てみましょう。

document.rite("テックアカデミー");

 

実行結果をコンソールログで確認すると、エラーが出ているのがわかります。

Uncaught TypeError: document.rite is not a function

 

これは“document.rite”という関数名はありませんという内容です。
正しい関数名は”document.write”です。

他にも、クォーテーションの記述漏れ全角スペースの混在など、さまざまな要因で発生します。
たいていの場合は単純なタイプミスが原因なので、エラー内容をしっかりと確認し、不明な場合はGoogle検索を利用しましょう。

 

JavaScriptの関数について詳しく知りたい方は、JavaScriptで関数を使う方法の記事をご覧ください。

 

論理のエラー

文法は正しくても、コードが意図したとおりに動かないエラーです。
シンタックスエラーと違い、論理エラーはプログラムの実行中にエラーが表示されないことがほとんどです。
そのためエラーに気づきにくく、修正が難しい場合があります。

では具体的な例を見ていきましょう。

const score = 70;

if (score < 60) { console.log("不合格です!がんばりましょう!") ; } else if (60 >= score && score < 80) {
    console.log("惜しい!もう一息です。")
}

 

このような条件式がある場合、本来であればコンソールに「惜しい!もう一息です。」と表示されるはずです。

ところがデベロッパーツールで確認しても、何も表示されていません。

これはelse ifの条件式がまちがっているためです。

else if (60 >= score && score < 80)

 

正しくは【60 >= score】の部分の不等号が <= でなければなりません。

このようにロジックに問題があると、プログラムが意図したとおりに動作しません。
論理のエラーはエラーメッセージが出ないケースが多いため、ついつい見落としがちです。

対策としてconsole.log()やalert()などを活用し、意図している処理が行われているかこまめにチェックする必要があるでしょう。

 

その他のエラー

上記で挙げた2種類以外にも、以下のようにたくさんのエラーが存在します。

  • 変数やオブジェクトの未定義
  • 数値として適切ではない
  • オブジェクトの使用方法の誤り

この他のエラーなどについては、以下の記事を参考にしてください。

JavaScriptエラーリファレンス

 

主なエラーの解決方法

エラーを解決するには、以下のような方法があります。

 

目視でチェックする

エラーのほとんどはシンタックスエラーです。
まずはソースコードをじっくりと確認し、間違いがないかチェックしましょう。

ここで大切なのは正しいインデント(字下げ)です。
ソースコードを記述する際には、適切にインデントを取るよう心がけましょう。

エディタのドキュメントフォーマット機能を使うのもおすすめです。

 

「console.log」メソッドを使用する

変数やオブジェクトの値を確認したい時は「console.log」メソッドを使うと便利です。

出力結果はコンソールに表示されます。

ブラウザが Google Chromeであればデベロッパーツールで確認できます。

 

ブラウザの検証ツールを使用する

Webサイトを実行しながら、HTML要素の状態やJavaScriptの変数の値などをリアルタイムで確認できます。

Google Chromeのデベロッパーツールでは、ブラウザ上でJavaScriptエラーのデバッグが行えるので、ぜひ試してみましょう。

 

[PR] フロントエンドで挫折しない学習方法を動画で公開中

デベロッパーツールでのデバッグ方法

JavaScriptのエラー解決に役立つツールと言えば、ブラウザの開発者向けツールです。
ブラウザがGoogle Chromeであれば「その他のツール>デベロッパーツール」で起動できます。

まずはデバッグ時に活用するタブの役割をご紹介します。

 

Elements

現在画面に表示されているHTML要素に対応したソースコードが表示されます。
HTMLの記述やCSSの適用が適切かの確認に便利です。

 

Console

JavaScriptでエラーが発生した場合、ここに表示されます。
また、簡単な JavaScript プログラムを実行することも可能です。

 

Sources

Webサイトを構成するすべてのファイルが表示されます。
デバッグを行う際は、こちらの「Sources」タブで行います。

以下は、ブレークポイントを設定し、デバッグ実行を行った例です。

SourcesタブでJavaScriptコードを開き、行番号(この場合は18行目)をクリックしてブレークポイントを設定します。

Webサイトを操作して該当箇所のコードを実行すると処理が一時停止し、その時点での変数の値などがリアルタイムで確認できます。

とても便利なので活用しましょう。

 

執筆してくれたメンター

太田和樹(おおたかずき)

ITベンチャー企業のPM兼エンジニア

普段は主に、Web系アプリケーション開発のプロジェクトマネージャーとプログラミング講師を行っている。守備範囲はフロントエンド、モバイル、サーバサイド、データサイエンティストと幅広い。その幅広い知見を生かして、複数の領域を組み合わせた新しい提案をするのが得意。

開発実績:画像認識技術を活用した駐車場混雑状況把握(実証実験)、音声認識を活用したヘルプデスク支援システム、Pepperを遠隔操作するアプリの開発、大規模基幹系システムの開発・導入マネジメント

地方在住。仕事のほとんどをリモートオフィスで行う。通勤で消耗する代わりに趣味のDIYや家庭菜園、家族との時間を楽しんでいる。

 

大石ゆかり

内容が分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

  • つまずかず「効率的に」学びたい
  • 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか?

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします!