JavaScriptのコードのよくある問題を解決する
JavaScript のコードが正しく動作しないので修正したい、というような場合にみられる、よくある問題の解決方法へのリンクを以下に示します。
初学者がよく陥る誤り
スペル、大文字小文字を訂正する
コードが正しく動かない場合や、何かが未定義であるとブラウザーがエラーを出した場合、変数名や関数名のスペルが正しいか確認してください。
ブラウザーの組み込み関数についての正誤例:
正 | 誤 |
---|---|
getElementsByTagName() |
getElementbyTagName() |
getElementsByName() |
getElementByName() |
getElementsByClassName() |
getElementByClassName() |
getElementById() |
getElementsById() |
セミコロンの位置
セミコロンの位置に誤りがないか確認してください。
例:
正 | 誤 |
---|---|
elem.style.color = 'red'; |
elem.style.color = 'red;' |
関数
関数についての誤りは何点かあります。
よくある誤りの一つとして、関数を定義したがどこからも呼び出していない、というものがあります。
例:
function myFunction() {
alert('This is my function.');
};
上記のコードで定義した関数は、例えば以下のように呼び出さないかぎり何もしません。
myFunction();
関数のスコープ
関数は関数自身のスコープを持ちます。変数をグローバルに(関数の外で)定義するか、戻り値として変数の値を関数の外に返さないかぎり、関数の外から関数の中で定義された変数にアクセスすることはできません。
return 文の後ろのコードの実行
return文で関数から値を返したとき、JavaScript のインタプリタはその関数を終了します。return文の後ろのコードは実行されません。
Firefox などのいくつかのブラウザーは、return文の後ろにコードが存在する場合、開発者ツールのコンソールにエラーメッセージを出力します。Firefox が出力するメッセージは "unreachable code after return statement" です。
オブジェクトリテラル記法 vs 代入
通常、JavaScript で代入する場合、等号を使います。
例:
var myNumber = 0;
オブジェクトの場合は、メンバー名とその値をコロンで区切り、メンバー間をカンマで区切る必要があります。
例:
var myObject = {
name : 'Chris',
age : 38
}
基本的な定義
初級のユースケース
全般
変数
- 変数を宣言するには
- 変数を値で初期化するには
- 変数の値を変更するには(代入演算子についても参照してください)
- JavaScript のデータ型とは
- 「弱い型付け」とは
数学
- Web開発で扱わなければならない数値型とは
- JavaScript での基本的な算術演算の方法とは
- JavaScript での演算子の優先順位とは
- JavaScript で値をインクリメント、デクリメントするには
- JavaScript で値を比較するには(どちらが大きいか、ある値が別の値と等しいか、など)
文字列
配列
- 配列を作成するには
- 配列内の要素を取得したり変更したりするには(多次元配列の場合についても含む)
- 配列の長さを調べるには
- 配列に要素を追加する、もしくは、配列から要素を削除するには
- 文字列を分割して配列にするには、もしくは配列を連結して一つの文字列にするには
JavaScript のデバッグ
JavaScript のデバッグに関する詳細については、JavaScript のよくある問題を扱うを参照してください。よくあるエラーの説明についてはその他のよくあるエラーを参照してください。
コード内での決定
- 変数の値やその他の条件によって異なるコードブロックのうちどれを実行するか決定するには
- if...else文を使用するには
- 条件判定のブロックを別のブロックに入れ子にするには
- AND や OR、NOT を JavaScript で使用するには
- 多くの選択肢を一つの条件として手軽に扱うには
- true/false の判定によって 2 つの選択肢から 1 つを手早く選択するのに、三項演算子を使用するには
ループ/イテレーション
- 同一のコード片を繰り返し実行するには
- 終了条件にマッチする前に、ループを終了させるには
- 次の繰り返し処理にスキップするには
- while ループ、do ... while ループを使用するには
- 配列内の要素を反復処理する方法
- 多次元配列の要素を反復処理する方法
- オブジェクト内のメンバーを反復処理する方法
- 配列内にネストされたオブジェクトのメンバーを反復処理する方法
中級のユースケース
関数
- ブラウザー内での関数を調べるには
- 関数とメソッドの違いとは
- 独自の関数を作成するには
- 関数を呼び出すには
- 匿名関数とは
- 関数を実行するときに引数を指定するには
- 関数のスコープとは
- 戻り値とは何か、どのように戻り値を返すか
オブジェクト
- オブジェクトを作成するには
- ドット記法とは
- 角括弧を用いた記法とは
- オブジェクトのメソッドやプロパティを取得、設定するには
- オブジェクトのコンテキストにおける
this
とは何か - オブジェクト指向プログラミングとは
- コンストラクターやインスタンスとは何か、それらをどのように作成するか
- JavaScript でオブジェクトを作成する方法にはどのようなものがあるか
JSON
イベント
- イベントハンドラとは何か、どのように使うのか
- インラインイベントハンドラとは
addEventListener()
関数は何をするものか、どのように使うのか- 自分のページにイベントのコードを追加するのに、どの方法を使用すべきか
- イベントオブジェクトとは何か、どのように使うのか
- 既定のイベントの挙動を抑制するには
- ネストされた要素でどのようにイベントが発火するか(イベントの伝播、キャプチャ、バブリング)
- イベントのデリゲートとは何か、どのように動作するか
オブジェクト指向 JavaScript
- オブジェクトのプロトタイプとは何か
- コンストラクタープロパティとは何か、どのように使用するか
- どのようにコンストラクターにメソッドを追加するか
- 継承元からメンバーを引き継いで新しいコンストラクターを作成するには
- JavaScript で継承を使用すべきときはいつか
Web API