JavaScriptのコードのよくある問題を解決する

JavaScript のコードが正しく動作しないので修正したい、というような場合にみられる、よくある問題の解決方法へのリンクを以下に示します。

初学者がよく陥る誤り

スペル、大文字小文字を訂正する

コードが正しく動かない場合や、何かが未定義であるとブラウザーがエラーを出した場合、変数名や関数名のスペルが正しいか確認してください。

ブラウザーの組み込み関数についての正誤例:

正 誤
getElementsByTagName() getElementbyTagName()
getElementsByName() getElementByName()
getElementsByClassName() getElementByClassName()
getElementById() getElementsById()

セミコロンの位置

セミコロンの位置に誤りがないか確認してください。

例:

正 誤
elem.style.color = 'red'; elem.style.color = 'red;'

関数

関数についての誤りは何点かあります。

よくある誤りの一つとして、関数を定義したがどこからも呼び出していない、というものがあります。

例:

js

function myFunction() {
  alert("This is my function.");
}

上記のコードで定義した関数は、例えば以下のように呼び出さないかぎり何もしません。

js

myFunction();

関数のスコープ

関数は関数自身のスコープを持ちます。変数をグローバルに（関数の外で）定義するか、戻り値として変数の値を関数の外に返さないかぎり、関数の外から関数の中で定義された変数にアクセスすることはできません。

return 文の後ろのコードの実行

return 文で関数から値を返したとき、JavaScript のインタプリタはその関数を終了します。return 文の後ろのコードは実行されません。

Firefox などのいくつかのブラウザーは、return 文の後ろにコードが存在する場合、開発者ツールのコンソールにエラーメッセージを出力します。Firefox が出力するメッセージは "unreachable code after return statement" です。

オブジェクトリテラル記法 vs 代入

通常、JavaScript で代入する場合、等号を使います。

例:

js

var myNumber = 0;

オブジェクトの場合は、メンバー名とその値をコロンで区切り、メンバー間をカンマで区切る必要があります。

例:

js

var myObject = {
  name: "Chris",
  age: 38,
};

基本的な定義

初級のユースケース

全般

変数

数学

文字列

配列

JavaScript のデバッグ

JavaScript のデバッグに関する詳細については、JavaScript のよくある問題を扱うを参照してください。よくあるエラーの説明についてはその他のよくあるエラーを参照してください。

コード内での決定

ループ/イテレーション

中級のユースケース

関数

オブジェクト

JSON

イベント

オブジェクト指向 JavaScript

Web API