JavaScriptの注意点

プログラミングを始めたばかりのときに、つまずきやすい点をまとめています。プログラムは、1文字違うだけで動きません。エラーが出たら、慌てずに次の順で確認します。

  1. ブラウザのConsole(F12)を開いて、赤いエラーを読む。
  2. エラーの右側のファイル名:行番号をクリックして、その行を見る。
  3. 下の表で、エラーの文章から原因を探す。

エラーはその行の少し前が原因のこともあります。

エラーの文章から探す

Consoleの表示たいていの原因見る場所
Invalid or unexpected token全角の文字、引用符の閉じ忘れ2. 全角の文字が混ざっている
Unexpected identifier; の忘れ、カンマ・演算子の抜け6. 行末の ; を忘れる
Unexpected end of input / Unexpected token '}'かっこ { } ( ) の閉じ忘れ・多すぎ5. かっこ ( ) { } [ ] の閉じ忘れ
missing ) after argument list) の忘れ、引用符の閉じ忘れ3. 引用符 " " の閉じ忘れ・種類の不一致
〇〇 is not definedつづり違い、大文字小文字、" " の付け忘れ9. 変数名・関数名のつづり違い(is not defined)
〇〇 is not a function大文字小文字の違い、関数ではないものに ( ) を付けた8. 大文字と小文字の違い
Assignment to constant variableconst に別の値を入れた10. const に別の値を入れる
Identifier '〇〇' has already been declared同じ名前を let で2回作った11. 同じ名前の変数を、もう一度 let で作る
Unexpected token 'const' など(予約語の名前)予約語を変数名にした12. 予約語を変数名にする
Cannot set / read properties of null要素が見つからない(コードの位置、# や . の忘れ)15. 要素が見つからない(null)
エラーは出ないが、動きがおかしい= と ===、入力は文字列、( ) の有無、保存・再読み込み7. = と === の間違い

1. 保存していない・再読み込みしていない

コードを直したのに画面が変わらないとき、最初に疑います。

2. 全角の文字が混ざっている

日本語入力がONのまま打つと、スペース・かっこ・引用符・セミコロンが全角になります。コードはすべて半角で書きます。全角は見た目が似ていて気づきにくく、エラーの原因として非常に多いものです。

× 悪い例

let score = 10;　// ← 前に全角スペース
console.log（score）；
alert(“こんにちは”);

○ 良い例

let score = 10;
console.log(score);
alert("こんにちは");

3. 引用符 " " の閉じ忘れ・種類の不一致

文字列は、始めと終わりを同じ種類の引用符で囲みます。

× 悪い例

console.log("こんにちは);
console.log("こんにちは');

○ 良い例

console.log("こんにちは");
console.log('こんにちは');

Consoleには Invalid or unexpected token や missing ) after argument list と出ます。エディタの色が、閉じ忘れた箇所から先すべて「文字列の色」になっていたら、閉じ忘れです。

4. 文字列と変数の区別(" " で囲むかどうか)

囲むと文字、囲まないと変数名として扱われます。

× 悪い例

let user = "マリモ";
console.log(こんにちは);  // 変数として探して、エラー
console.log("user");     // 文字の user が出る

○ 良い例

let user = "マリモ";
console.log("こんにちは"); // 文字
console.log(user);         // 変数の中身(マリモ)

文字を表示したいのに is not defined が出たら、" " の付け忘れを疑います。

5. かっこ ( ) { } [ ] の閉じ忘れ

開いたかっこは、必ず閉じます。{ } は、if や for、関数の中身のまとまりを囲みます。

× 悪い例

if (score >= 80) {
  console.log("合格");

console.log("おわり");

○ 良い例

if (score >= 80) {
  console.log("合格");
}
console.log("おわり");

6. 行末の ; を忘れる

JavaScriptは ; を省略しても動く場合が多いですが、1行の終わりには ; を付ける習慣にします。付けないと、動かない場合や、思わぬ動きになる場合があります。

× 悪い例

let a = 1 let b = 2     // 1行に2つ書くと、エラー

○ 良い例

let a = 1;
let b = 2;

Consoleには Unexpected identifier と出ます。; は、if や for の { } のあとには付けません。

if (score >= 80) {
  console.log("合格");
}   // ← } のあとには付けない

7. = と === の間違い

= は「右の値を左に入れる(代入)」、=== は「同じか調べる(比較)」です。if の条件に = を書くと、エラーにならないまま、値が書き換わります。

× 悪い例

let score = 50;
if (score = 100) {     // 100 が代入されて、いつも成り立つ
  console.log("満点");
}

○ 良い例

let score = 50;
if (score === 100) {
  console.log("満点");
}

比較には ===(同じでない場合は !==)を使います。== は使いません。

8. 大文字と小文字の違い

JavaScriptは、大文字と小文字を区別します。

× 悪い例

math.random();           // ReferenceError: math is not defined
console.Log(10);          // TypeError: console.Log is not a function
let Score = 10;
console.log(score);       // score は無い

○ 良い例

Math.random();
console.log(10);
let score = 10;
console.log(score);

Math(M)、console.log(l)、querySelector(S)、addEventListener(E・L)など、大文字の位置を覚えます。エディタの候補表示(補完)から選ぶと、間違いません。

9. 変数名・関数名のつづり違い(is not defined)

つづりが1文字違うだけで、別の名前として扱われます。

× 悪い例

let playerLife = 3;
console.log(playerLfe);   // ReferenceError: playerLfe is not defined

〇〇 is not defined は、「〇〇という名前を知らない」という意味です。〇〇のつづり、大文字小文字、" " の付け忘れ、宣言(let)を忘れていないかを確認します。

10. const に別の値を入れる

const の変数は、あとで書き換えられません。書き換えたい変数は let で作ります。

× 悪い例

const life = 3;
life = 2;   // TypeError: Assignment to constant variable.

○ 良い例

let life = 3;
life = 2;

11. 同じ名前の変数を、もう一度 let で作る

変数を作る let は、同じ名前につき1回だけです。2回目からは let を付けずに、値だけ入れます。

× 悪い例

let score = 0;
let score = 10;   // SyntaxError: Identifier 'score' has already been declared

○ 良い例

let score = 0;
score = 10;

コードをコピーして足したときに起きやすいミスです。

12. 予約語を変数名にする

if const class などは、JavaScriptが特別な意味で使っているので、変数名にできません。

× 悪い例

let class = "A";   // SyntaxError: Unexpected token 'class'

○ 良い例

let className = "A";

一覧はJavaScript予約語一覧にあります。

13. 関数の ( ) を忘れる・付けてはいけないところに付ける

関数は、名前の後ろに ( ) を付けるとその場で実行されます。

× 悪い例

function showMessage() {
  console.log("こんにちは");
}
showMessage;     // 呼び出されない(何も起きない)

// クリックしたときに実行したいのに、すぐ実行されてしまう
button.addEventListener("click", showMessage());

○ 良い例

showMessage();   // 呼び出す

// クリックしたときに実行する(名前だけ渡す)
button.addEventListener("click", showMessage);

14. 入力された値は文字列

prompt() や入力欄の value で受け取る値は、数字を入力しても文字列です。そのまま計算すると、足し算が連結になります。

× 悪い例

let count = prompt("何個？");   // 3 と入力
console.log(count + 1);          // "31"

○ 良い例

let count = Number(prompt("何個？"));  // 3 と入力
console.log(count + 1);                 // 4

Number() で数値に変換します。

15. 要素が見つからない(null)

HTMLの要素を取得するコードは、その要素より後に書きます。先に実行すると、要素がまだなく、null になります。

× 悪い例

<script>
  let title = document.querySelector("#title");
  title.textContent = "こんにちは"; // Cannot set properties of null
</script>
<h1 id="title"></h1>

○ 良い例

<h1 id="title"></h1>
<script>
  let title = document.querySelector("#title");
  title.textContent = "こんにちは";
</script>

16. 配列の番号は 0 から

配列の最初の要素は [0] です。要素数と同じ番号の要素は存在しません。

let items = ["A", "B", "C"];
console.log(items[0]);             // "A"(最初)
console.log(items[2]);             // "C"(最後)
console.log(items[items.length]);  // undefined(3番は無い)
console.log(items[items.length - 1]); // "C"(最後を取る)

17. ファイルの読み込み(ファイル名・場所)

HTMLからCSSやJavaScriptのファイルを読み込むとき、ファイル名と場所が違うと、何も起きません。

<!-- app.js が index.html と同じフォルダにあるとき -->
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">

書く場所の考え方はHTML・CSS・JavaScriptの書く場所にあります。

困ったときは