2026年5月11日
はじめに
当サイトのエラー辞典には98件のエラーが収録されています。この記事では、その中からHTML・CSS・JavaScriptで初心者がとくにつまずきやすい代表的なエラー30件を選び、カテゴリ別に整理して紹介します。
なお本記事の30件は、アクセス数や発生頻度のデータで順位付けしたものではありません。エラー辞典の分類にもとづき、学習の初期段階でよく出会う代表的なパターンを一覧化したものです。「頻度ランキング」ではなく「つまずきやすいエラーの見取り図」として使ってください。
各エラーのリンク先では、原因・解決方法・サンプルコードを詳しく解説しています。
カテゴリ別 エラー分布
まずカテゴリ別のエラー件数を確認してみましょう。
JavaScriptのエラーが最も多いのは、型変換・非同期処理・DOM操作など複雑な概念が多いためです。
頻出エラー一覧（HTML・CSS・JavaScript 30選）
特に初心者がよく遭遇するHTML・CSS・JavaScriptのエラーをまとめました。リンクをクリックすると詳細ページで原因・解決方法・サンプルコードを確認できます。
| No. | エラー名 | カテゴリ | 概要 |
|---|---|---|---|
| 1 | スタイルが反映されない | HTML | CSSファイルが読み込まれていない |
| 2 | 画像が表示されない | HTML | 画像パスが間違っている |
| 3 | ページのレイアウトが崩れる | HTML | タグの閉じ忘れ |
| 4 | Uncaught ReferenceError: xxx is not defined | JavaScript | 変数・関数名のタイポ |
| 5 | Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') | JavaScript | 取得しようとしたHTML要素が見つかっていない |
| 6 | 404 Not Found（スクリプトが読み込まれない） | JavaScript | script の src パスが間違っている |
| 7 | 計算結果が NaN になる | JavaScript | 文字列を数値に変換していない |
| 8 | TypeError: xxx is not a function | JavaScript | 関数でないものを呼び出している |
| 9 | console.log を書いたのに何も表示されない | JavaScript | 開発者ツールを開いていない |
| 10 | リンクをクリックしても何も起きない | HTML | href 属性の書き忘れ |
| 11 | 文字化けする | HTML | charset の指定がない |
| 12 | フォームの送信ボタンが動かない | HTML | type="submit" の書き忘れ |
| 13 | テーブルの表示が崩れる | HTML | tr/td の入れ子が間違っている |
| 14 | スマホで表示が小さい | CSS | viewport meta タグがない |
| 15 | setInterval が止まらない | JavaScript | clearInterval を呼んでいない |
| 16 | 保存しても変更が反映されない | HTML | ブラウザを手動で更新していない |
| 17 | ファイル名に日本語やスペースが含まれている | HTML | ファイル名が原因でエラーになる |
| 18 | 拡張子が表示されない（.html が見えない） | HTML | OS の設定で拡張子が非表示 |
| 19 | Uncaught ReferenceError: Cannot access 'x' before initialization | JavaScript | let/constの宣言前にアクセスしている |
| 20 | RangeError: Invalid array length | JavaScript | 配列の長さに不正な値を指定している |
| 21 | Invalid left-hand side in assignment | JavaScript | 代入できないものに代入しようとしている |
| 22 | favicon（ファビコン）が表示されない | HTML | faviconのパス・形式・キャッシュの問題 |
| 23 | iframeが表示されない | HTML | 埋め込み先がiframeを拒否している |
| 24 | metaタグが反映されない | HTML | metaタグの位置や属性が間違っている |
| 25 | formが送信されない | HTML | action属性やmethod属性が未設定 |
| 26 | imgのalt属性エラー | HTML | alt属性が書かれていない |
| 27 | TypeError: undefined is not an object (evaluating 'obj.name') | JavaScript | 存在しないオブジェクトのプロパティにアクセスしている |
| 28 | Uncaught TypeError: Cannot read properties of undefined (reading 'length') | JavaScript | undefinedに対して.lengthを読んでいる |
| 29 | Uncaught SyntaxError: Identifier 'x' has already been declared | JavaScript | 同じ変数名を2回宣言している |
| 30 | Uncaught SyntaxError: missing ) after argument list | JavaScript | 関数呼び出しの括弧が閉じていない |
※ No.は掲載順であり、発生頻度による順位ではありません。
学ぶ順番の考え方
「どのカテゴリから対策すればいいか」は、Webページの作り方の順番と対応しています。
- HTML — ページの骨組み（見出し・段落・画像・リンクなど）をつくる。タグの閉じ忘れやパスのスペルミスなど、比較的見つけやすいエラーが多い。
- CSS — HTMLに見た目（色・余白・レイアウト）をつける。プロパティ名のミスに加え、複数のスタイルがぶつかる「優先度」の問題が絡むため、原因の切り分けに一手間かかる。
- JavaScript — ページに動きをつける。変数・関数・非同期処理など扱う概念が多く、他の2つより原因の候補が多岐にわたる。
この順番でHTML→CSS→JavaScriptと学ぶのは、後のカテゴリほど前のカテゴリの仕組みの上に成り立っているためです。エラーに詰まったときも、まず土台のHTMLから疑ってみると原因を絞り込みやすくなります。
| カテゴリ | 件数 | 主な原因の傾向 |
|---|---|---|
| HTML | 41件 | タグの閉じ忘れ・パスミス |
| CSS | 3件 | プロパティのスペルミス・優先度の衝突 |
| JavaScript | 27件 | 型変換・非同期処理・DOM操作の理解不足 |
| 環境構築 | 27件 | バージョン・権限・設定ファイル |
解決にかかる時間は環境やコードの規模によって大きく変わるため、ここでは具体的な分数の目安は示していません。
エラーに詰まったときの対処法
エラーが出ても焦らず、次のステップで対処しましょう。
- エラーメッセージをよく読む — 英語でも大丈夫。「何が問題か」のヒントが書いてある
- エラーメッセージをそのままコピーして検索する — 同じエラーで詰まった人が必ずいる
- このサイトのエラー辞典で調べる — カテゴリ別に解決方法を掲載
- コードを少しずつ戻す — 「どこを変えたら起きたか」を特定する
- AIチャット（ChatGPTなど）に聞く — コードを貼り付けて原因を聞く
💡 エラーメッセージは「怖いもの」ではなく「案内」
エラーメッセージは、ブラウザが「ここが原因かもしれません」と教えてくれているだけです。例えば次のメッセージを分解してみましょう。
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') - Uncaught — 「途中で捕まえられずに止まった」という意味。処理がここで中断したことを表す。
- TypeError — エラーの種類。「型（データの種類）に関するエラー」というカテゴリ名。
- Cannot read properties of null — 「nullの中身を読もうとしたけど読めなかった」という説明。取得しようとした要素がそもそも見つかっていないことが多い。
- (reading 'addEventListener') — どのプロパティ・メソッドを読もうとしたかの補足情報。
このように、メッセージは「種類」＋「何が起きたか」＋「補足情報」の組み合わせでできています。全部を暗記する必要はなく、まず種類と説明部分を読む癖をつけましょう。
自己診断チェック：原因を当ててみよう
下の3つのエラーメッセージを見て、原因だと思うものを選んでみましょう。答えは各問題の下にあります（すべてエラー辞典に実際に掲載されているエラーです）。
問題1
Uncaught ReferenceError: xxx is not defined
- A. インターネット接続が切れている
- B. 変数・関数名のタイポ
- C. ブラウザのバージョンが古い
答え：B。詳しい解説はこちら →
問題2
計算結果が NaN になる
- A. 文字列を数値に変換していない
- B. サーバーが落ちている
- C. HTMLのタグを閉じ忘れている
答え：A。詳しい解説はこちら →
問題3
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
- A. CSSのファイルが読み込まれていない
- B. 変数名にタイポがある
- C. 取得しようとしたHTML要素が見つかっていない
答え：C。詳しい解説はこちら →
カテゴリ別 頻出エラーの予防策
HTMLエラーの予防策
- タグは必ずペアで書く（開きタグと閉じタグ）
- VSCodeの拡張機能「Auto Rename Tag」でタグを自動で揃える
- ファイル名は小文字・半角英数字・ハイフンだけを使う（パスミス防止）
- HTMLバリデーター（W3C Validator）でチェックする習慣をつける
CSSエラーの予防策
- スペルミスに注意（
colourじゃなくcolor、backgrondじゃなくbackground） - セミコロン（
;）を忘れない - ブラウザの開発者ツール（F12）でスタイルが適用されているか確認する
- 詳細度（specificity）を理解して優先順位の問題を防ぐ
JavaScriptエラーの予防策
- 変数名のスペルミスに注意（大文字・小文字も区別される）
console.log()で値を確認する習慣をつける- DOM操作は
document.getElementById()などが正しく要素を取得しているか確認する - 非同期処理（
async/await、Promise）は特に注意して学ぶ
まとめ
- ✅ エラーは「出会う前に知っておく」ことで解決スピードが上がる
- ✅ 学ぶ順番はHTML→CSS→JavaScript。土台から疑うと原因を絞りやすい
- ✅ エラーメッセージは「種類」＋「何が起きたか」＋「補足情報」の組み合わせ
- ✅ まず検索、次にエラー辞典、次にAIに相談
- ✅ 代表的な30件のパターンを知っておくだけで多くのつまずきを予防できる
各エラーの詳しい原因と直し方は、リンク先のエラー辞典ページで解説しています。