エラー辞典

初心者がよく遭遇するエラーと対処法をまとめました。症状に合うものを探して、対処法を試してみてください。

98件 / 4カテゴリ / 随時追加中

プログラミング初心者がよく遭遇するエラーを98件以上収録しています。HTML・CSS・JavaScriptの文法エラーから、Git・npm・デプロイのトラブルまで、症状・原因・直し方をコード例付きで解説しています。エラーメッセージをそのまま検索バーに貼り付けて、解決方法を見つけてください。

🌐 HTML 41件

HTMLタグの閉じ忘れ・属性の書き間違い・パスの指定ミスなど、ページが正しく表示されないときのエラーと対処法

🎨 CSS 3件

スタイルが効かない・レイアウトが崩れる・アニメーションが動かないなど、見た目に関するエラーと対処法

⚡ JavaScript 27件

SyntaxError・ReferenceError・TypeErrorなど、コンソールに表示されるエラーメッセージの原因と直し方

📦 Git 13件

コミット・プッシュ・マージで発生するエラーと、リポジトリのトラブル対処法

🟢 Node.js / npm 5件

パッケージのインストール失敗・バージョン不一致・環境変数のエラーと対処法

🛠️ ツール 5件

VS Code・Live Server・ESLintなど開発ツールのエラーと設定方法

🌐 ネットワーク 3件

CORS・SSL・CSPなど通信に関するエラーと対処法

🌐HTML41件
スタイルが反映されない HTML
CSS ファイルを作ったのに、文字色や背景色が変わらない。HTMLとCSSを別ファイルで作り始めたばかりの初学者がよく遭遇するよ。
原因と直し方を見る →
画像が表示されない HTML
<img> タグを書いたのに、画像の代わりに「×」や空白が表示される。画像ファイルを追加した直後によく起きるよ。
原因と直し方を見る →
ページのレイアウトが崩れる HTML
文字が変な場所に表示される、ページ全体の見た目がおかしい。HTMLを書き始めたばかりで閉じタグの概念に慣れていないときに起きやすいよ。
原因と直し方を見る →
リンクをクリックしても何も起きない HTML
<a> タグを書いたのに、クリックしてもページが移動しない。リンクを初めて作るときに遭遇しやすいよ。
原因と直し方を見る →
文字化けする HTML
ブラウザで開くと日本語が「�」や「文字」のように表示される。HTMLファイルを新規作成したときに起きやすいよ。
原因と直し方を見る →
フォームの送信ボタンが動かない HTML
フォームの送信ボタンを押しても何も起きない。フォームを初めて作るときに遭遇しやすいよ。
原因と直し方を見る →
テーブルの表示が崩れる HTML
テーブルのセルが変な位置に表示される。HTMLテーブルを初めて作るときに構造を間違えやすいよ。
原因と直し方を見る →
保存しても変更が反映されない HTML
ファイルを保存したのに、ブラウザの表示が変わらない。コードを書き始めたばかりの初学者が最初に戸惑うポイントだよ。
原因と直し方を見る →
ファイル名に日本語やスペースが含まれている HTML
ファイルが読み込めない、リンクが動かない。ファイル名に日本語やスペースを使ったときに起きやすいよ。
原因と直し方を見る →
拡張子が表示されない(.html が見えない) HTML
ファイル名が index だけで .html が見えない。ファイルの種類がわからない。OSの初期設定で拡張子が隠されているときに起きるよ。
原因と直し方を見る →
favicon(ファビコン)が表示されない HTML
ブラウザのタブにアイコンが表示されない。faviconを設置したのに反映されないときに起きるよ。原因の多くはパスのミスかブラウザのキャッシュだよ。
原因と直し方を見る →
iframeが表示されない HTML
<iframe>を書いたのに中身が表示されない。外部サイトを埋め込もうとしたときに起きやすいよ。
原因と直し方を見る →
metaタグが反映されない HTML
OGP画像やdescriptionがSNSで表示されない。サイトをSNSでシェアしたときに起きるよ。
原因と直し方を見る →
formが送信されない HTML
フォームの送信ボタンを押してもデータが送られない。フォームのaction属性やJavaScriptの設定に問題があるときに起きるよ。
原因と直し方を見る →
imgのalt属性エラー HTML
HTMLバリデーターやリンターでalt属性のエラーが出る。imgタグを書くときに忘れがちなポイントだよ。
原因と直し方を見る →
input要素のtype属性ミスで入力欄が意図通りにならない HTML
input要素のtype属性にタイプミスがあり、デフォルトのtext入力として表示される。type属性の値を間違えたときに起きるよ。
原因と直し方を見る →
リスト要素が正しくネストされない HTML
ul/olの直下にli以外の要素を置いてレイアウトが崩れる。リスト構造を正しく書けていないときに起きるよ。
原因と直し方を見る →
buttonクリックでページがリロードされる HTML
form内のbuttonにtype属性を指定しないとページがリロードされる。ボタンクリックで意図しないリロードが起きるときはこれが原因だよ。
原因と直し方を見る →
外部CSSが読み込まれない HTML
link要素のrel="stylesheet"を書き忘れてCSSが適用されない。CSSファイルを読み込むときに起きやすいミスだよ。
原因と直し方を見る →
特殊文字がそのまま表示されない(<や>) HTML
HTML内で<, >, &などの特殊文字がタグとして解釈されてしまう。コード例を表示したいときに起きやすいよ。
原因と直し方を見る →
video/audio が自動再生されない HTML
autoplay 属性を付けたのに、動画や音声が自動再生されない。メディア要素を埋め込んだときに起きやすいよ。
原因と直し方を見る →
videoタグで動画が再生されない HTML
<video>タグを書いたのに動画が表示・再生されない。動画を埋め込むときに起きやすいよ。
原因と直し方を見る →
required属性が効かない(フォームバリデーション) HTML
required属性を付けたのに空欄のまま送信できてしまう。HTMLのバリデーションは「submitによる送信」のときだけ発動する、というのがポイントだよ。
原因と直し方を見る →
loading="lazy"が効かない HTML
画像にloading="lazy"を付けたのに遅延読み込みされない。画像の最適化をしようとしたときに起きるよ。
原因と直し方を見る →
dialogタグが表示されない HTML
<dialog>タグを書いたのにモーダルが表示されない。dialog要素を初めて使うときに起きやすいよ。
原因と直し方を見る →
details/summaryが開閉しない HTML
<details>タグを書いたのにクリックしても開閉しない。アコーディオンUIを作ろうとしたときに起きやすいよ。
原因と直し方を見る →
フォームの送信ボタンが反応しない(buttonのtype属性) HTML
送信ボタンを押しても何も起きない。buttonのtype属性、ボタンとformの位置関係、JavaScript側のエラーの3つを順に確認すれば原因がわかるよ。
原因と直し方を見る →
labelをクリックしてもinputにフォーカスしない HTML
ラベルをクリックしても入力欄にカーソルが移動しない。labelとinputの紐づけが正しくないときに起きるよ。
原因と直し方を見る →
セマンティックHTMLでアクセシビリティ警告 HTML
Lighthouseで「Heading elements are not in a sequentially-descending order」と出る。
原因と直し方を見る →
メタディスクリプションが検索結果に反映されない HTML
meta descriptionを設定したのにGoogleの検索結果に表示されない・別の文章が出る。実は「Googleが別の文を選ぶ」のは正常動作で、原因は大きく3つに分かれるよ。
原因と直し方を見る →
lang属性の未設定 HTML
Lighthouseで「html element does not have a [lang] attribute」と出る。アクセシビリティ対応で見落としやすいポイントだよ。
原因と直し方を見る →
音声が自動再生されない HTML
audioタグにautoplayを付けたのに音が鳴らない。ブラウザのポリシーで止められているよ。
原因と直し方を見る →
iframeの高さが合わない HTML
iframeの中身に合わせて高さを変えたいのに、スクロールバーが出てしまう。高さ指定の問題だよ。
原因と直し方を見る →
画像が遅延読み込みされない HTML
loading="lazy"を付けたのに画像が最初から全部読み込まれる。条件が揃っていないときに起きるよ。
原因と直し方を見る →
datalistの候補が表示されない HTML
datalistで候補リストを作ったのに、入力欄に候補が出ない。idの紐付けミスで起きるよ。
原因と直し方を見る →
picture要素で画像が切り替わらない HTML
pictureタグでレスポンシブ画像を設定したのに切り替わらない。sourceの順番が原因だよ。
原因と直し方を見る →
metaタグのviewportが効かない HTML
スマホで見るとページが小さく表示される。viewportの設定が正しくないときに起きるよ。
原因と直し方を見る →
aタグのtarget="_blank"でリンクが開かない HTML
target="_blank"を付けたのに新しいタブが開かない。ブラウザの設定やJSからの呼び出しが原因だよ。
原因と直し方を見る →
input の autocomplete が効かない HTML
autocomplete='off'を指定してもブラウザが自動入力してくる。ブラウザの仕様を理解しよう。
原因と直し方を見る →
iframe の sandbox で JS が動かない HTML
iframeにsandbox属性をつけたら中のJavaScriptが動かなくなった。allow-scriptsを追加しよう。
原因と直し方を見る →
tabindex の順序が期待通りにならない HTML
tabindexで順序を指定したのにTab移動が期待通りにならない。正の値は避けて0か-1を使おう。
原因と直し方を見る →
🎨CSS3件
スマホで表示が小さい CSS
スマホで見るとページ全体が縮小されて表示される。レスポンシブ対応を始めるときに起きやすいよ。
原因と直し方を見る →
CSSのgapが効かない(Flexbox) CSS
gapを指定したのにアイテムの間隔が空かない。gapはdisplay:flexまたはgridの「親要素」にしか効かないのが原因のほとんどだよ。
原因と直し方を見る →
Invalid property value(CSSの値が無効) CSS
DevToolsのStylesでスタイルに取り消し線と⚠アイコンが付き、「Invalid property value」と表示される。プロパティに使えない値を書いているのが原因で、その行はまるごと無視されているよ。
原因と直し方を見る →
JavaScript27件
Uncaught ReferenceError: xxx is not defined JavaScript
コンソールに ReferenceError: xxx is not defined と表示される。変数名や関数名を間違えたときに起きやすいよ。
原因と直し方を見る →
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') JavaScript
addEventListenerやtextContentを使った行で「Cannot read properties of null」と出る。getElementByIdなどが要素を見つけられずnullを返しているのが原因だよ。
原因と直し方を見る →
404 Not Found(スクリプトが読み込まれない) JavaScript
コンソールに 404 エラーが出て、JavaScript が動かない。scriptタグのパスを間違えたときに起きるよ。
原因と直し方を見る →
計算結果が NaN になる JavaScript
エラーは出ないのに、計算結果が NaN(Not a Number)と表示される。文字列と数値の計算で起きやすいよ。
原因と直し方を見る →
TypeError: xxx is not a function JavaScript
コンソールに TypeError: xxx is not a function と表示される。関数でないものを呼び出そうとしたときに起きるよ。
原因と直し方を見る →
console.log を書いたのに何も表示されない JavaScript
console.log() を書いたのに、ブラウザに何も表示されない。開発者ツールを開いていないときに起きるよ。
原因と直し方を見る →
setInterval が止まらない JavaScript
setInterval で始めた処理が止まらない。タイマー処理を制御したいときに起きやすいよ。
原因と直し方を見る →
Uncaught ReferenceError: Cannot access 'x' before initialization JavaScript
変数を使った行で「Cannot access 'x' before initialization」と表示される。let/constで宣言した変数を、宣言より前の行で使っているのが原因だよ。
原因と直し方を見る →
RangeError: Invalid array length JavaScript
new Array() に負の数や小数を渡すとエラーになる。配列の作成で起きるよ。
原因と直し方を見る →
Invalid left-hand side in assignment JavaScript
「Invalid left-hand side in assignment」と表示される。ほとんどの場合、比較のつもりで === を = と書いてしまったのが原因だよ。SyntaxErrorで出ることもReferenceErrorで出ることもあるけど、見るべき場所は同じ。
原因と直し方を見る →
TypeError: undefined is not an object (evaluating 'obj.name') JavaScript
undefinedな変数にドット記法でアクセスしてエラーになる。オブジェクトの初期化忘れで起きやすいよ。
原因と直し方を見る →
Uncaught TypeError: Cannot read properties of undefined (reading 'length') JavaScript
.lengthを使った行でこのエラーが出る。「.lengthが使えない」のではなく、その手前の変数がundefinedになっているのが本当の原因だよ。
原因と直し方を見る →
Uncaught SyntaxError: Identifier 'x' has already been declared JavaScript
letやconstで同じ名前の変数を2回宣言するとこのエラーが出る。ブラウザのConsoleに同じコードを貼り直したときにも起きるよ。
原因と直し方を見る →
Uncaught SyntaxError: missing ) after argument list JavaScript
関数を呼び出した行で「missing ) after argument list」と出る。閉じ括弧 ) の数が足りないか、引数のカンマ・クォートが欠けているのが原因だよ。
原因と直し方を見る →
Uncaught TypeError: Cannot set properties of null (setting 'textContent') JavaScript
textContentやinnerHTMLに代入した行でこのエラーが出る。getElementByIdが要素を見つけられずnullを返しているのが原因で、多くはid名の不一致かscriptタグの位置だよ。
原因と直し方を見る →
Expected an assignment or function call JavaScript
比較演算子(===)と代入演算子(=)を混同している。式文の書き方で起きるよ。
原因と直し方を見る →
Uncaught RangeError: Invalid time value JavaScript
toISOString()やtoLocaleDateString()を呼んだ行で「Invalid time value」と出る。本当の原因はその前——new Date()に渡した日付文字列が無効で、Invalid Date になっているんだ。
原因と直し方を見る →
async/awaitで待機されない JavaScript
awaitを書いたのに非同期処理の結果を待たずに次の行が実行される。async/awaitの使い方で起きやすいよ。
原因と直し方を見る →
localStorageからnullが返る JavaScript
localStorage.getItem()で保存したはずのデータがnullになる。localStorageのキー管理で起きやすいよ。
原因と直し方を見る →
addEventListenerが発火しない JavaScript
イベントリスナーを設定したのにクリックしても何も起きない。DOM要素の取得タイミングで起きやすいよ。
原因と直し方を見る →
import文でエラーが出る JavaScript
import文を書いたら「Cannot use import statement outside a module」と表示される。モジュール設定で起きるよ。
原因と直し方を見る →
Uncaught TypeError: Assignment to constant variable. JavaScript
変数に値を入れ直そうとしたら「Assignment to constant variable.」と出る。constで宣言した変数への再代入が原因だよ。値を変えたい変数はletで宣言しよう。
原因と直し方を見る →
fetch failed: NetworkError JavaScript
fetchでAPIを呼んだらNetworkErrorが出る。サーバー接続の問題で起きやすいよ。
原因と直し方を見る →
SyntaxError: Unexpected token '<' JavaScript
fetchのレスポンスをJSON.parseしたら「Unexpected token '<'」と出る。APIのURL間違いで起きやすいよ。
原因と直し方を見る →
Uncaught SyntaxError: Illegal return statement JavaScript
returnを書いた行で「Illegal return statement」と表示される。returnが関数の外にあるときに起きるよ。波括弧の閉じ忘れが原因のことも多いよ。
原因と直し方を見る →
Uncaught TypeError: x.forEach is not a function JavaScript
forEachを書いた行で「is not a function」と出る。forEachの手前にある値が配列じゃないのが原因だよ。getElementsByClassNameの戻り値やawaitのし忘れでよく起きるよ。
原因と直し方を見る →
配列のコピーが元の配列も変わる JavaScript
配列をコピーして変更したら元の配列も変わってしまった。参照の仕組みが原因だよ。
原因と直し方を見る →
🛠️環境構築27件
VS Codeの拡張機能が動かない・反映されない 環境構築
拡張機能をインストールしたのに機能しない。原因のほとんどは「再起動していない」「無効になっている」「追加設定が必要」の3つだよ。
原因と直し方を見る →
npx: command not found 環境構築
npxを実行したら「command not found」と出る。古いNode.jsを使っているときや、nvmでバージョンを切り替えた直後に起きやすいよ。
原因と直し方を見る →
Live Serverが起動しない 環境構築
VS Code で「Go Live」ボタンを押しても、ブラウザが開かない。Live Serverを初めて使うときに起きやすいよ。
原因と直し方を見る →
Permission denied (publickey) 環境構築
git pushすると「Permission denied (publickey)」と表示される。SSH設定で起きやすいよ。
原因と直し方を見る →
npm installが失敗する 環境構築
npm installを実行するとエラーで止まる。Node.js環境のセットアップで起きやすいよ。
原因と直し方を見る →
node_modules削除後にエラーが出る 環境構築
node_modulesフォルダを削除したらプロジェクトが動かなくなった。依存パッケージの管理で起きやすいよ。
原因と直し方を見る →
.gitignoreが効かない・無視されない 環境構築
.gitignoreに書いたのにgit statusに出続ける。原因は「すでに追跡済みのファイルには効かない」というGitの仕様か、パターンの書き方ミスのどちらかだよ。
原因と直し方を見る →
Failed to save: Unable to write file (NoPermissions) 環境構築
VS Codeでファイルを保存しようとすると権限エラーが出る。ファイルの権限設定で起きるよ。
原因と直し方を見る →
Live Serverで日本語ファイル名が文字化けする 環境構築
ファイル名に日本語を使うとLive ServerのURLで問題が起きる。日本語ファイル名で起きるよ。
原因と直し方を見る →
GitHub Pagesで404が表示される 環境構築
GitHub Pagesで公開したのに404エラーが表示される。GitHub Pagesの設定で起きやすいよ。
原因と直し方を見る →
ERR_CONNECTION_REFUSED 環境構築
ブラウザで「ERR_CONNECTION_REFUSED」と表示されてページが開けない。サーバー接続で起きやすいよ。
原因と直し方を見る →
Permission denied 環境構築
ファイル操作やnpmコマンドで「Permission denied」と表示される。権限の問題で起きるよ。
原因と直し方を見る →
refusing to merge unrelated histories 環境構築
git pullで「refusing to merge unrelated histories」と表示される。新規リポジトリの設定で起きやすいよ。
原因と直し方を見る →
Your branch is behind 環境構築
git statusで「Your branch is behind」と表示される。リモートに新しい変更があるときに起きるよ。
原因と直し方を見る →
error: pathspec '...' did not match any file(s) known to git 環境構築
git commit / checkout / add で「pathspec did not match any file(s)」と表示される。コミットメッセージの引用符忘れ、ファイル名・ブランチ名のタイポで起きるよ。
原因と直し方を見る →
PermissionError: [Errno 13] Permission denied (Python) 環境構築
Pythonのopen()などで「PermissionError: [Errno 13] Permission denied」が出る。ファイルの権限不足のほか、ファイルを別のアプリで開いたままにしているときにも起きるよ。
原因と直し方を見る →
Parsing error: Unexpected token (ESLint) 環境構築
ESLintに「Parsing error: Unexpected token」と言われる。コードのバグではなく、ESLint側の設定(パーサーや対応する構文のバージョン)が追いついていないのが原因のことが多いよ。
原因と直し方を見る →
ERR_CERT_DATE_INVALID 環境構築
ブラウザに「ERR_CERT_DATE_INVALID」と表示される。証明書の日付問題で起きるよ。
原因と直し方を見る →
ETIMEDOUT 環境構築
ネットワーク接続で「ETIMEDOUT」が出る。接続タイムアウトで起きるよ。
原因と直し方を見る →
環境変数が読み込めない(.env) 環境構築
process.env.XXXがundefinedになる。プロジェクトを初めてセットアップするときや、フロントエンドで環境変数を使おうとしたときに起きやすいよ。
原因と直し方を見る →
HEAD detached at 環境構築
ブランチではなく特定のコミットを直接見ている状態。新しいブランチを作れば安全だよ。
原因と直し方を見る →
error: failed to push some refs 環境構築
リモートに自分が持っていない変更がある。先にpullしてからpushしよう。
原因と直し方を見る →
fatal: refusing to merge unrelated histories 環境構築
共通の祖先がない2つのリポジトリをマージしようとした。--allow-unrelated-historiesで許可できるよ。
原因と直し方を見る →
error: Your local changes would be overwritten by checkout / merge 環境構築
ブランチ切り替えやgit pullで「Your local changes would be overwritten」と止められる。これはエラーというより、コミットしていない変更が消えるのをGitが守ってくれている状態だよ。
原因と直し方を見る →
error: pathspec did not match any files 環境構築
git addやcheckoutで指定したファイル名が間違っている。パスとスペルを確認しよう。
原因と直し方を見る →
warning: LF will be replaced by CRLF 環境構築
WindowsとMac/Linuxで改行コードが違う。設定で自動変換を制御できるよ。
原因と直し方を見る →
fatal: unable to access 環境構築
GitHubに接続できない。ネットワーク、URL、認証情報を確認しよう。
原因と直し方を見る →

エラーメッセージを貼り付けて自動診断

エラーメッセージをそのままコピーして貼り付けると、原因と直し方を自動で絞り込みます。

エラーを診断 →
🙋
解決しなかった場合 1. エラーメッセージをそのままコピーして検索する
2.「JavaScript ○○エラー 解決」のように日本語で検索する
3. コードを少しずつ削って、どこでエラーが起きているか絞り込む