エラー辞典
初心者がよく遭遇するエラーと対処法をまとめました。症状に合うものを探して、対処法を試してみてください。
⌘K
97件 / 4カテゴリ / 随時追加中 プログラミング初心者がよく遭遇するエラーを97件以上収録しています。HTML・CSS・JavaScriptの文法エラーから、Git・npm・デプロイのトラブルまで、症状・原因・直し方をコード例付きで解説しています。エラーメッセージをそのまま検索バーに貼り付けて、解決方法を見つけてください。
🌐 HTML 41件
HTMLタグの閉じ忘れ・属性の書き間違い・パスの指定ミスなど、ページが正しく表示されないときのエラーと対処法
🎨 CSS 3件
スタイルが効かない・レイアウトが崩れる・アニメーションが動かないなど、見た目に関するエラーと対処法
⚡ JavaScript 27件
SyntaxError・ReferenceError・TypeErrorなど、コンソールに表示されるエラーメッセージの原因と直し方
📦 Git 13件
コミット・プッシュ・マージで発生するエラーと、リポジトリのトラブル対処法
🟢 Node.js / npm 4件
パッケージのインストール失敗・バージョン不一致・環境変数のエラーと対処法
🛠️ ツール 5件
VS Code・Live Server・ESLintなど開発ツールのエラーと設定方法
🌐HTML41件
スタイルが反映されない HTML
🔥 CSSファイルが読み込まれていない
CSS ファイルを作ったのに、文字色や背景色が変わらない。HTMLとCSSを別ファイルで作り始めたばかりの初学者がよく遭遇するよ。
⚠️ よくある原因
ブラウザはHTMLファイルだけでは外部CSSファイルの存在を知らないよ。<head>内に<link>タグを書いてHTMLとCSSを「つなぐ」必要があるんだ。<link>タグがない、またはhref属性のファイル名にスペルミスがあると、CSSが読み込まれずスタイルが反映されないよ。
ブラウザはHTMLファイルだけでは外部CSSファイルの存在を知らないよ。<head>内に<link>タグを書いてHTMLとCSSを「つなぐ」必要があるんだ。<link>タグがない、またはhref属性のファイル名にスペルミスがあると、CSSが読み込まれずスタイルが反映されないよ。
✅ 直しかた
1. <head>の中に<link rel="stylesheet" href="style.css">があるか確認する。 2. hrefのファイル名と実際のCSSファイル名が完全に一致しているか確認（大文字小文字も区別される）。 3. CSSファイルがHTMLファイルと同じフォルダにあるか確認。別フォルダなら href="css/style.css" のようにパスを書く。 4. ブラウザの開発者ツール（F12）→Networkタブで、CSSファイルが404エラーになっていないか確認する。
1. <head>の中に<link rel="stylesheet" href="style.css">があるか確認する。 2. hrefのファイル名と実際のCSSファイル名が完全に一致しているか確認（大文字小文字も区別される）。 3. CSSファイルがHTMLファイルと同じフォルダにあるか確認。別フォルダなら href="css/style.css" のようにパスを書く。 4. ブラウザの開発者ツール（F12）→Networkタブで、CSSファイルが404エラーになっていないか確認する。
🔍 CSS 反映されない link タグ
詳しく見る → 画像が表示されない HTML
🖼️ 画像パスが間違っている
<img> タグを書いたのに、画像の代わりに「×」や空白が表示される。画像ファイルを追加した直後によく起きるよ。
⚠️ よくある原因
ブラウザはsrc属性に書かれたパスの場所に画像を探しに行くよ。そのパスが間違っていたり、画像ファイルがその場所に存在しなかったりすると、画像を見つけられず表示できないんだ。ファイル名の大文字小文字の違い、拡張子の違い（.JPGと.jpg）、フォルダ階層の間違いが主な原因だよ。
ブラウザはsrc属性に書かれたパスの場所に画像を探しに行くよ。そのパスが間違っていたり、画像ファイルがその場所に存在しなかったりすると、画像を見つけられず表示できないんだ。ファイル名の大文字小文字の違い、拡張子の違い（.JPGと.jpg）、フォルダ階層の間違いが主な原因だよ。
✅ 直しかた
1. 画像ファイルがプロジェクトフォルダ内に存在するか確認する。 2. src="photo.jpg"のファイル名が実際のファイル名と完全に一致しているか確認（大文字小文字、拡張子含む）。 3. 画像が別フォルダにある場合はパスを正しく書く（例: src="images/photo.jpg"）。 4. 開発者ツール（F12）→Networkタブで画像が404エラーになっていないか確認する。
1. 画像ファイルがプロジェクトフォルダ内に存在するか確認する。 2. src="photo.jpg"のファイル名が実際のファイル名と完全に一致しているか確認（大文字小文字、拡張子含む）。 3. 画像が別フォルダにある場合はパスを正しく書く（例: src="images/photo.jpg"）。 4. 開発者ツール（F12）→Networkタブで画像が404エラーになっていないか確認する。
🔍 HTML 画像 表示されない src パス
詳しく見る → ページのレイアウトが崩れる HTML
💥 タグの閉じ忘れ
文字が変な場所に表示される、ページ全体の見た目がおかしい。HTMLを書き始めたばかりで閉じタグの概念に慣れていないときに起きやすいよ。
⚠️ よくある原因
HTMLのタグは開始タグ（<p>）と終了タグ（</p>）がセットになっているよ。終了タグを書き忘れると、ブラウザは「ここからここまでが段落」という区切りがわからなくなり、後続の要素が意図しない場所に配置されてしまうんだ。
HTMLのタグは開始タグ（<p>）と終了タグ（</p>）がセットになっているよ。終了タグを書き忘れると、ブラウザは「ここからここまでが段落」という区切りがわからなくなり、後続の要素が意図しない場所に配置されてしまうんだ。
✅ 直しかた
1. 開発者ツール（F12）の「Elements」タブでHTMLの構造を確認する。 2. 開いたタグに対応する閉じタグがあるか見直す。 3. VS Codeの自動閉じタグ機能を活用する（Auto Close Tag拡張機能）。 4. HTMLバリデーター（validator.w3.org）でチェックすると閉じ忘れを教えてくれるよ。
1. 開発者ツール（F12）の「Elements」タブでHTMLの構造を確認する。 2. 開いたタグに対応する閉じタグがあるか見直す。 3. VS Codeの自動閉じタグ機能を活用する（Auto Close Tag拡張機能）。 4. HTMLバリデーター（validator.w3.org）でチェックすると閉じ忘れを教えてくれるよ。
🔍 HTML タグ 閉じ忘れ レイアウト崩れ
詳しく見る → リンクをクリックしても何も起きない HTML
🔗 href 属性の書き忘れ
<a> タグを書いたのに、クリックしてもページが移動しない。リンクを初めて作るときに遭遇しやすいよ。
⚠️ よくある原因
ブラウザは<a>タグのhref属性を見て「クリックしたらどこに移動するか」を判断するよ。href属性が書かれていない、空になっている、またはhrefのスペルミス（herfなど）があると、リンクとして機能しないんだ。
ブラウザは<a>タグのhref属性を見て「クリックしたらどこに移動するか」を判断するよ。href属性が書かれていない、空になっている、またはhrefのスペルミス（herfなど）があると、リンクとして機能しないんだ。
✅ 直しかた
1. <a>タグにhref属性があるか確認する。 2. href="https://example.com" のように移動先URLを正しく書く。 3. ページ内リンクなら href="#セクションid" と書く。 4. 開発者ツールでa要素を選択し、href属性の値を確認する。
1. <a>タグにhref属性があるか確認する。 2. href="https://example.com" のように移動先URLを正しく書く。 3. ページ内リンクなら href="#セクションid" と書く。 4. 開発者ツールでa要素を選択し、href属性の値を確認する。
🔍 HTML リンク 動かない href 忘れ
詳しく見る → 文字化けする HTML
🔤 charset の指定がない
ブラウザで開くと日本語が「�」や「æ–‡å—」のように表示される。HTMLファイルを新規作成したときに起きやすいよ。
⚠️ よくある原因
ブラウザはHTMLファイルの文字コード（エンコーディング）を知る必要があるよ。<meta charset="UTF-8">が書かれていないと、ブラウザが文字コードを誤って判定し、日本語が正しく表示されないんだ。また、ファイル自体がUTF-8以外（Shift-JIS等）で保存されている場合も文字化けするよ。
ブラウザはHTMLファイルの文字コード（エンコーディング）を知る必要があるよ。<meta charset="UTF-8">が書かれていないと、ブラウザが文字コードを誤って判定し、日本語が正しく表示されないんだ。また、ファイル自体がUTF-8以外（Shift-JIS等）で保存されている場合も文字化けするよ。
✅ 直しかた
1. <head>の最初の行に<meta charset="UTF-8">を追加する。 2. VS Codeの右下に表示されるエンコーディングが「UTF-8」になっているか確認する。 3. 「UTF-8」以外なら、右下のエンコーディング表示をクリック→「エンコード付きで保存」→「UTF-8」を選択する。
1. <head>の最初の行に<meta charset="UTF-8">を追加する。 2. VS Codeの右下に表示されるエンコーディングが「UTF-8」になっているか確認する。 3. 「UTF-8」以外なら、右下のエンコーディング表示をクリック→「エンコード付きで保存」→「UTF-8」を選択する。
🔍 HTML 文字化け charset UTF-8
詳しく見る → フォームの送信ボタンが動かない HTML
📝 type="submit" の書き忘れ
フォームの送信ボタンを押しても何も起きない。フォームを初めて作るときに遭遇しやすいよ。
⚠️ よくある原因
ブラウザはform内のtype="submit"ボタンがクリックされたときにフォームを送信するよ。buttonタグのtype属性が"button"になっていたり、そもそもformタグで囲まれていなかったりすると、送信処理が発動しないんだ。JavaScriptでpreventDefault()が呼ばれている場合も送信されないよ。
ブラウザはform内のtype="submit"ボタンがクリックされたときにフォームを送信するよ。buttonタグのtype属性が"button"になっていたり、そもそもformタグで囲まれていなかったりすると、送信処理が発動しないんだ。JavaScriptでpreventDefault()が呼ばれている場合も送信されないよ。
✅ 直しかた
1. <button type="submit">送信</button>とtype属性を確認する。 2. ボタンが<form>タグの中にあるか確認する。 3. JavaScriptでe.preventDefault()が呼ばれていないか確認する。 4. formタグにaction属性（送信先URL）が指定されているか確認する。
1. <button type="submit">送信</button>とtype属性を確認する。 2. ボタンが<form>タグの中にあるか確認する。 3. JavaScriptでe.preventDefault()が呼ばれていないか確認する。 4. formタグにaction属性（送信先URL）が指定されているか確認する。
🔍 HTML フォーム 送信 ボタン 動かない
詳しく見る → テーブルの表示が崩れる HTML
📊 tr/td の入れ子が間違っている
テーブルのセルが変な位置に表示される。HTMLテーブルを初めて作るときに構造を間違えやすいよ。
⚠️ よくある原因
HTMLのテーブルは<table>→<tr>（行）→<td>（セル）という入れ子構造が必須だよ。<table>の直下に<td>を書いたり、<tr>を省略したりすると、ブラウザが構造を正しく解釈できずレイアウトが崩れるんだ。
HTMLのテーブルは<table>→<tr>（行）→<td>（セル）という入れ子構造が必須だよ。<table>の直下に<td>を書いたり、<tr>を省略したりすると、ブラウザが構造を正しく解釈できずレイアウトが崩れるんだ。
✅ 直しかた
1. <table>→<tr>→<td>の正しい入れ子構造になっているか確認する。 2. 見出しセルは<td>ではなく<th>を使う。 3. 開発者ツールのElementsタブでテーブル構造を確認する。 4. 行（<tr>）ごとに同じ数のセル（<td>）があるか確認する。
1. <table>→<tr>→<td>の正しい入れ子構造になっているか確認する。 2. 見出しセルは<td>ではなく<th>を使う。 3. 開発者ツールのElementsタブでテーブル構造を確認する。 4. 行（<tr>）ごとに同じ数のセル（<td>）があるか確認する。
🔍 HTML テーブル 崩れる tr td 入れ子
詳しく見る → 保存しても変更が反映されない HTML
💾 ブラウザを手動で更新していない
ファイルを保存したのに、ブラウザの表示が変わらない。コードを書き始めたばかりの初学者が最初に戸惑うポイントだよ。
⚠️ よくある原因
ファイルを保存しただけではブラウザは自動で画面を更新しないよ。ブラウザは「表示を更新して」と言われるまで、前に読み込んだ内容をそのまま表示し続けるんだ。Live Serverを使っていない場合は手動でリロードが必要だよ。
ファイルを保存しただけではブラウザは自動で画面を更新しないよ。ブラウザは「表示を更新して」と言われるまで、前に読み込んだ内容をそのまま表示し続けるんだ。Live Serverを使っていない場合は手動でリロードが必要だよ。
✅ 直しかた
1. ブラウザでCtrl+R（MacはCmd+R）を押してページを更新する。 2. それでも反映されない場合はCtrl+Shift+R（スーパーリロード）を試す。 3. VS CodeのLive Server拡張機能をインストールすると、保存のたびに自動更新されるようになるよ。
1. ブラウザでCtrl+R（MacはCmd+R）を押してページを更新する。 2. それでも反映されない場合はCtrl+Shift+R（スーパーリロード）を試す。 3. VS CodeのLive Server拡張機能をインストールすると、保存のたびに自動更新されるようになるよ。
🔍 保存 反映されない ブラウザ 更新 Live Server
詳しく見る → ファイル名に日本語やスペースが含まれている HTML
📁 ファイル名が原因でエラーになる
ファイルが読み込めない、リンクが動かない。ファイル名に日本語やスペースを使ったときに起きやすいよ。
⚠️ よくある原因
ブラウザやサーバーはファイルパスを処理するとき、日本語やスペースを特殊な文字（%E3%81%82等）に変換する必要があるよ。この変換がうまくいかないとファイルが見つからなくなるんだ。特にスペースは%20に変換されるため、パスの指定でミスが起きやすいよ。
ブラウザやサーバーはファイルパスを処理するとき、日本語やスペースを特殊な文字（%E3%81%82等）に変換する必要があるよ。この変換がうまくいかないとファイルが見つからなくなるんだ。特にスペースは%20に変換されるため、パスの指定でミスが起きやすいよ。
✅ 直しかた
1. ファイル名を半角英数字とハイフン（-）のみに変更する。 2. スペースの代わりにハイフンを使う（例: my-page.html）。 3. HTMLやCSS内のパス参照も新しいファイル名に合わせて修正する。 4. フォルダ名も同様に半角英数字のみにする。
1. ファイル名を半角英数字とハイフン（-）のみに変更する。 2. スペースの代わりにハイフンを使う（例: my-page.html）。 3. HTMLやCSS内のパス参照も新しいファイル名に合わせて修正する。 4. フォルダ名も同様に半角英数字のみにする。
🔍 ファイル名 日本語 スペース エラー パス
詳しく見る → 拡張子が表示されない（.html が見えない） HTML
👁️ OS の設定で拡張子が非表示
ファイル名が index だけで .html が見えない。ファイルの種類がわからない。OSの初期設定で拡張子が隠されているときに起きるよ。
⚠️ よくある原因
WindowsやMacのデフォルト設定では、ファイルの拡張子（.html, .css, .js）が非表示になっているよ。そのため、style.css.txtのように二重拡張子になっていても気づけず、ブラウザがファイルを正しく認識できないんだ。
WindowsやMacのデフォルト設定では、ファイルの拡張子（.html, .css, .js）が非表示になっているよ。そのため、style.css.txtのように二重拡張子になっていても気づけず、ブラウザがファイルを正しく認識できないんだ。
✅ 直しかた
1. Windows: エクスプローラーの「表示」→「ファイル名拡張子」にチェックを入れる。 2. Mac: Finderの「設定」→「詳細」→「すべてのファイル名拡張子を表示」にチェック。 3. 拡張子が表示されたら、ファイル名が正しいか確認する（style.css.txtになっていないか等）。
1. Windows: エクスプローラーの「表示」→「ファイル名拡張子」にチェックを入れる。 2. Mac: Finderの「設定」→「詳細」→「すべてのファイル名拡張子を表示」にチェック。 3. 拡張子が表示されたら、ファイル名が正しいか確認する（style.css.txtになっていないか等）。
🔍 拡張子 表示されない html 見えない Windows Mac
詳しく見る → favicon（ファビコン）が表示されない HTML
🌐 faviconのパス・形式・キャッシュの問題
ブラウザのタブにアイコンが表示されない。faviconを設置したのに反映されないときに起きるよ。原因の多くはパスのミスかブラウザのキャッシュだよ。
⚠️ よくある原因
<link rel="icon">タグのhrefパスが間違っている、ファイル形式がブラウザに対応していない、またはキャッシュが残っていて古い状態が表示されているよ。faviconはブラウザが特に強くキャッシュするので、正しく直しても反映されにくいんだ。GitHub Pagesのプロジェクトページ（URLが /リポジトリ名/ で始まる）では、href="/favicon.ico" がリポジトリの外を指してしまい表示されないこともあるよ。
<link rel="icon">タグのhrefパスが間違っている、ファイル形式がブラウザに対応していない、またはキャッシュが残っていて古い状態が表示されているよ。faviconはブラウザが特に強くキャッシュするので、正しく直しても反映されにくいんだ。GitHub Pagesのプロジェクトページ（URLが /リポジトリ名/ で始まる）では、href="/favicon.ico" がリポジトリの外を指してしまい表示されないこともあるよ。
✅ 直しかた
1. <head>内に<link rel="icon" href="/favicon.ico">があるか確認する。 2. ファイルが指定した場所に実在するか、URLを直接開いて確認する（例: https://自分のサイト/favicon.ico）。 3. PNG形式ならtype="image/png"を追加する。 4. シークレットウィンドウで開いて表示されるならキャッシュが原因。href="favicon.ico?v=2"のようにクエリを付けて強制更新する。 5. GitHub Pagesのプロジェクトページでは href="./favicon.ico" のような相対パスか、/リポジトリ名/favicon.ico を使う。
1. <head>内に<link rel="icon" href="/favicon.ico">があるか確認する。 2. ファイルが指定した場所に実在するか、URLを直接開いて確認する（例: https://自分のサイト/favicon.ico）。 3. PNG形式ならtype="image/png"を追加する。 4. シークレットウィンドウで開いて表示されるならキャッシュが原因。href="favicon.ico?v=2"のようにクエリを付けて強制更新する。 5. GitHub Pagesのプロジェクトページでは href="./favicon.ico" のような相対パスか、/リポジトリ名/favicon.ico を使う。
🔍 HTML favicon ファビコン 表示されない アイコン link rel タブ キャッシュ GitHub Pages
詳しく見る → iframeが表示されない HTML
🖼️ 埋め込み先がiframeを拒否している
<iframe>を書いたのに中身が表示されない。外部サイトを埋め込もうとしたときに起きやすいよ。
⚠️ よくある原因
多くのWebサイトはセキュリティのためにX-Frame-Optionsヘッダーで他サイトからのiframe埋め込みを禁止しているよ。これはクリックジャッキング攻撃を防ぐための対策なんだ。埋め込みを許可していないサイトはiframeで表示できないよ。
多くのWebサイトはセキュリティのためにX-Frame-Optionsヘッダーで他サイトからのiframe埋め込みを禁止しているよ。これはクリックジャッキング攻撃を防ぐための対策なんだ。埋め込みを許可していないサイトはiframeで表示できないよ。
✅ 直しかた
1. 埋め込み先のサイトがiframe表示を許可しているか確認する。 2. YouTubeやGoogleマップなどは公式の「埋め込みコード」を使う。 3. 自分のサイト同士なら問題なく表示できる。 4. 開発者ツールのConsoleタブでX-Frame-Options関連のエラーが出ていないか確認する。
1. 埋め込み先のサイトがiframe表示を許可しているか確認する。 2. YouTubeやGoogleマップなどは公式の「埋め込みコード」を使う。 3. 自分のサイト同士なら問題なく表示できる。 4. 開発者ツールのConsoleタブでX-Frame-Options関連のエラーが出ていないか確認する。
🔍 HTML iframe 表示されない X-Frame-Options 埋め込み
詳しく見る → metaタグが反映されない HTML
🏷️ metaタグの位置や属性が間違っている
OGP画像やdescriptionがSNSで表示されない。サイトをSNSでシェアしたときに起きるよ。
⚠️ よくある原因
metaタグが<head>の外（<body>内など）に書かれている、property/name属性の書き方が間違っている、またはSNS側のキャッシュが古い情報を保持しているよ。OGPタグは<head>内に正しい形式で書かないとSNSのクローラーが認識できないんだ。
metaタグが<head>の外（<body>内など）に書かれている、property/name属性の書き方が間違っている、またはSNS側のキャッシュが古い情報を保持しているよ。OGPタグは<head>内に正しい形式で書かないとSNSのクローラーが認識できないんだ。
✅ 直しかた
1. metaタグが<head>内に書かれているか確認する。 2. OGPはproperty="og:title"の形式で書く（nameではなくproperty）。 3. og:imageは絶対URL（https://〜）で指定する。 4. SNSのキャッシュクリアツール（Twitter Card Validator、Facebook Sharing Debugger）で確認・更新する。
1. metaタグが<head>内に書かれているか確認する。 2. OGPはproperty="og:title"の形式で書く（nameではなくproperty）。 3. og:imageは絶対URL（https://〜）で指定する。 4. SNSのキャッシュクリアツール（Twitter Card Validator、Facebook Sharing Debugger）で確認・更新する。
🔍 HTML meta OGP 反映されない SNS description
詳しく見る → formが送信されない HTML
📝 action属性やmethod属性が未設定
フォームの送信ボタンを押してもデータが送られない。フォームのaction属性やJavaScriptの設定に問題があるときに起きるよ。
⚠️ よくある原因
<form>タグにaction属性（送信先URL）が書かれていないと、ブラウザはデータをどこに送ればいいかわからないよ。また、JavaScriptでsubmitイベントにpreventDefault()が呼ばれていると、フォームのデフォルト送信動作が止められているんだ。
<form>タグにaction属性（送信先URL）が書かれていないと、ブラウザはデータをどこに送ればいいかわからないよ。また、JavaScriptでsubmitイベントにpreventDefault()が呼ばれていると、フォームのデフォルト送信動作が止められているんだ。
✅ 直しかた
1. <form action="/submit" method="POST">のようにactionとmethodを指定する。 2. JavaScriptでpreventDefault()が呼ばれていないか確認する。 3. JSで制御する場合はfetch()やXMLHttpRequestで手動送信する。 4. 開発者ツールのNetworkタブでリクエストが送信されているか確認する。
1. <form action="/submit" method="POST">のようにactionとmethodを指定する。 2. JavaScriptでpreventDefault()が呼ばれていないか確認する。 3. JSで制御する場合はfetch()やXMLHttpRequestで手動送信する。 4. 開発者ツールのNetworkタブでリクエストが送信されているか確認する。
🔍 HTML form 送信されない action method submit
詳しく見る → imgのalt属性エラー HTML
🖼️ alt属性が書かれていない
HTMLバリデーターやリンターでalt属性のエラーが出る。imgタグを書くときに忘れがちなポイントだよ。
⚠️ よくある原因
<img>タグにalt属性が書かれていないよ。alt属性は画像が表示できないときの代替テキストで、スクリーンリーダー（視覚障害者向けの読み上げソフト）がこのテキストを読み上げるんだ。アクセシビリティとSEOの両方の観点から必須とされているよ。
<img>タグにalt属性が書かれていないよ。alt属性は画像が表示できないときの代替テキストで、スクリーンリーダー（視覚障害者向けの読み上げソフト）がこのテキストを読み上げるんだ。アクセシビリティとSEOの両方の観点から必須とされているよ。
✅ 直しかた
1. すべての<img>タグにalt属性を追加する。 2. 画像の内容を簡潔に説明するテキストを書く（例: alt="夕日の富士山"）。 3. 装飾目的の画像（ボーダーや背景パターン等）はalt=""と空にする。 4. ESLintのjsx-a11yプラグインを使うと自動で警告してくれるよ。
1. すべての<img>タグにalt属性を追加する。 2. 画像の内容を簡潔に説明するテキストを書く（例: alt="夕日の富士山"）。 3. 装飾目的の画像（ボーダーや背景パターン等）はalt=""と空にする。 4. ESLintのjsx-a11yプラグインを使うと自動で警告してくれるよ。
🔍 HTML img alt 属性 エラー アクセシビリティ
詳しく見る → input要素のtype属性ミスで入力欄が意図通りにならない HTML
🔥 type属性のスペルミス
input要素のtype属性にタイプミスがあり、デフォルトのtext入力として表示される。type属性の値を間違えたときに起きるよ。
⚠️ よくある原因
ブラウザはtype属性の値を認識できないと、デフォルトのtype="text"として表示するよ。例えばtype="emal"（emailのスペルミス）と書くと、メール入力欄ではなく普通のテキスト入力欄になってしまうんだ。エラーは出ないから気づきにくいよ。
ブラウザはtype属性の値を認識できないと、デフォルトのtype="text"として表示するよ。例えばtype="emal"（emailのスペルミス）と書くと、メール入力欄ではなく普通のテキスト入力欄になってしまうんだ。エラーは出ないから気づきにくいよ。
✅ 直しかた
1. type属性の値が正しいスペルか確認する。 2. 有効な値: text, number, email, password, date, checkbox, radio, file, tel, url, search, range, color等。 3. MDNのinput要素のドキュメントで正しい値を確認する。
1. type属性の値が正しいスペルか確認する。 2. 有効な値: text, number, email, password, date, checkbox, radio, file, tel, url, search, range, color等。 3. MDNのinput要素のドキュメントで正しい値を確認する。
🔍 HTML input type 効かない スペルミス
詳しく見る → リスト要素が正しくネストされない HTML
🔥 ul/olの直下にli以外の要素がある
ul/olの直下にli以外の要素を置いてレイアウトが崩れる。リスト構造を正しく書けていないときに起きるよ。
⚠️ よくある原因
HTMLの仕様では<ul>や<ol>の直接の子要素は<li>のみ許可されているよ。<ul>の直下に<div>や<p>を置いたり、<li>の外にテキストを書いたりすると、ブラウザが構造を正しく解釈できずレイアウトが崩れるんだ。
HTMLの仕様では<ul>や<ol>の直接の子要素は<li>のみ許可されているよ。<ul>の直下に<div>や<p>を置いたり、<li>の外にテキストを書いたりすると、ブラウザが構造を正しく解釈できずレイアウトが崩れるんだ。
✅ 直しかた
1. <ul>/<ol>の直下には<li>のみ配置する。 2. リスト内に追加コンテンツが必要なら<li>の中に入れる。 3. ネストしたリスト（入れ子リスト）は<li>の中に<ul>/<ol>を入れる。 4. HTMLバリデーターで構造エラーがないか確認する。
1. <ul>/<ol>の直下には<li>のみ配置する。 2. リスト内に追加コンテンツが必要なら<li>の中に入れる。 3. ネストしたリスト（入れ子リスト）は<li>の中に<ul>/<ol>を入れる。 4. HTMLバリデーターで構造エラーがないか確認する。
🔍 HTML リスト ul ol li ネスト 崩れる
詳しく見る → buttonクリックでページがリロードされる HTML
🔥 form内のbuttonがデフォルトでsubmitになる
form内のbuttonにtype属性を指定しないとページがリロードされる。ボタンクリックで意図しないリロードが起きるときはこれが原因だよ。
⚠️ よくある原因
form内の<button>はtype属性を省略するとデフォルトでtype="submit"になるよ。そのため、クリックするとフォームが送信されてページがリロードされてしまうんだ。送信目的でないボタン（キャンセルボタン等）にはtype="button"を明示する必要があるよ。
form内の<button>はtype属性を省略するとデフォルトでtype="submit"になるよ。そのため、クリックするとフォームが送信されてページがリロードされてしまうんだ。送信目的でないボタン（キャンセルボタン等）にはtype="button"を明示する必要があるよ。
✅ 直しかた
1. 送信しないボタンにはtype="button"を明示する。 2. 送信ボタンにはtype="submit"を明示する（省略してもOKだが明示が推奨）。 3. JavaScriptでe.preventDefault()を使う方法もあるが、type属性で制御する方がシンプルだよ。
1. 送信しないボタンにはtype="button"を明示する。 2. 送信ボタンにはtype="submit"を明示する（省略してもOKだが明示が推奨）。 3. JavaScriptでe.preventDefault()を使う方法もあるが、type属性で制御する方がシンプルだよ。
🔍 HTML button submit リロード type form
詳しく見る → 外部CSSが読み込まれない HTML
🔗 link要素のrel="stylesheet"の書き忘れ
link要素のrel="stylesheet"を書き忘れてCSSが適用されない。CSSファイルを読み込むときに起きやすいミスだよ。
⚠️ よくある原因
ブラウザは<link>タグのrel属性を見て「このファイルは何の役割か」を判断するよ。rel="stylesheet"がないと、ブラウザはそのファイルをCSSとして認識せず、スタイルが適用されないんだ。relのスペルミスも同じ結果になるよ。
ブラウザは<link>タグのrel属性を見て「このファイルは何の役割か」を判断するよ。rel="stylesheet"がないと、ブラウザはそのファイルをCSSとして認識せず、スタイルが適用されないんだ。relのスペルミスも同じ結果になるよ。
✅ 直しかた
1. <link rel="stylesheet" href="style.css">のようにrel="stylesheet"が正しく書かれているか確認する。 2. relのスペルミスがないか確認する。 3. 開発者ツールのNetworkタブでCSSファイルが読み込まれているか確認する。
1. <link rel="stylesheet" href="style.css">のようにrel="stylesheet"が正しく書かれているか確認する。 2. relのスペルミスがないか確認する。 3. 開発者ツールのNetworkタブでCSSファイルが読み込まれているか確認する。
🔍 HTML link rel stylesheet CSS 読み込まれない
詳しく見る → 特殊文字がそのまま表示されない（<や>） HTML
🔥 HTMLの特殊文字をエスケープしていない
HTML内で<, >, &などの特殊文字がタグとして解釈されてしまう。コード例を表示したいときに起きやすいよ。
⚠️ よくある原因
HTMLでは<, >, &は特別な意味を持つ文字（メタ文字）だよ。<はタグの開始、>はタグの終了、&はエンティティの開始として解釈されるんだ。これらの文字をそのまま表示したい場合は、HTMLエンティティに変換する必要があるよ。
HTMLでは<, >, &は特別な意味を持つ文字（メタ文字）だよ。<はタグの開始、>はタグの終了、&はエンティティの開始として解釈されるんだ。これらの文字をそのまま表示したい場合は、HTMLエンティティに変換する必要があるよ。
✅ 直しかた
1. < を表示したい場合は < と書く。 2. > を表示したい場合は > と書く。 3. & を表示したい場合は & と書く。 4. コードブロック内に書く場合は<code>タグや<pre>タグを使い、中の特殊文字をエスケープする。
1. < を表示したい場合は < と書く。 2. > を表示したい場合は > と書く。 3. & を表示したい場合は & と書く。 4. コードブロック内に書く場合は<code>タグや<pre>タグを使い、中の特殊文字をエスケープする。
🔍 HTML 特殊文字 エスケープ lt gt amp エンティティ
詳しく見る → video/audio が自動再生されない HTML
🎬 ブラウザの自動再生ポリシーでブロックされている
autoplay 属性を付けたのに、動画や音声が自動再生されない。メディア要素を埋め込んだときに起きやすいよ。
⚠️ よくある原因
モダンブラウザはユーザー体験を保護するため、音声付きメディアの自動再生をデフォルトでブロックするよ。ユーザーが意図しない音声が突然流れるのを防ぐためのブラウザのポリシーなんだ。muted（ミュート）状態なら自動再生が許可されるよ。
モダンブラウザはユーザー体験を保護するため、音声付きメディアの自動再生をデフォルトでブロックするよ。ユーザーが意図しない音声が突然流れるのを防ぐためのブラウザのポリシーなんだ。muted（ミュート）状態なら自動再生が許可されるよ。
✅ 直しかた
1. muted属性を追加する（<video autoplay muted>）。ミュート状態なら自動再生が許可される。 2. 音声付きで再生したい場合は、ユーザーのクリック操作をトリガーにしてJavaScriptでplay()を呼ぶ。 3. playsinline属性も追加するとモバイルでの互換性が上がるよ。
1. muted属性を追加する（<video autoplay muted>）。ミュート状態なら自動再生が許可される。 2. 音声付きで再生したい場合は、ユーザーのクリック操作をトリガーにしてJavaScriptでplay()を呼ぶ。 3. playsinline属性も追加するとモバイルでの互換性が上がるよ。
🔍 HTML video autoplay 再生されない muted
詳しく見る → videoタグで動画が再生されない HTML
🎬 ファイルパスまたはフォーマットの問題
<video>タグを書いたのに動画が表示・再生されない。動画を埋め込むときに起きやすいよ。
⚠️ よくある原因
src属性のパスが間違っている、ブラウザが対応していない動画フォーマットを使っている、またはcontrols属性がないため再生ボタンが表示されていないよ。ブラウザによって対応フォーマットが異なるため、MP4（H.264）が最も互換性が高いよ。
src属性のパスが間違っている、ブラウザが対応していない動画フォーマットを使っている、またはcontrols属性がないため再生ボタンが表示されていないよ。ブラウザによって対応フォーマットが異なるため、MP4（H.264）が最も互換性が高いよ。
✅ 直しかた
1. src属性のパスが正しいか確認する（開発者ツールのNetworkタブで404が出ていないか）。 2. MP4形式（H.264コーデック）を使う。 3. controls属性を追加して再生ボタンを表示する（<video src="movie.mp4" controls>）。 4. 複数フォーマットに対応するなら<source>タグを使う。
1. src属性のパスが正しいか確認する（開発者ツールのNetworkタブで404が出ていないか）。 2. MP4形式（H.264コーデック）を使う。 3. controls属性を追加して再生ボタンを表示する（<video src="movie.mp4" controls>）。 4. 複数フォーマットに対応するなら<source>タグを使う。
🔍 HTML video 再生されない 表示されない controls mp4
詳しく見る → required属性が効かない（フォームバリデーション） HTML
📝 送信のしかたがバリデーションを通っていない
required属性を付けたのに空欄のまま送信できてしまう。HTMLのバリデーションは「submitによる送信」のときだけ発動する、というのがポイントだよ。
⚠️ よくある原因
ブラウザのバリデーション（required・pattern・type="email"など）は、<form>がsubmitで送信されるときにだけ発動するよ。効かない原因は4つ。(1) inputが<form>タグの外にある。 (2) ボタンが type="button" になっていて、JavaScriptで form.submit() を呼んでいる——form.submit() はバリデーションを完全にスキップするんだ。 (3) formタグに novalidate 属性が付いている。 (4) JSのsubmitイベントで preventDefault() してから独自送信している。
ブラウザのバリデーション（required・pattern・type="email"など）は、<form>がsubmitで送信されるときにだけ発動するよ。効かない原因は4つ。(1) inputが<form>タグの外にある。 (2) ボタンが type="button" になっていて、JavaScriptで form.submit() を呼んでいる——form.submit() はバリデーションを完全にスキップするんだ。 (3) formタグに novalidate 属性が付いている。 (4) JSのsubmitイベントで preventDefault() してから独自送信している。
✅ 直しかた
1. input要素が<form>タグの中にあるか確認する。 2. 送信ボタンを <button type="submit"> にする（type="button"＋form.submit()はバリデーションが動かない）。 3. JSから送信したいときは form.submit() ではなく form.requestSubmit() を使う（バリデーションが動く）。 4. formタグの novalidate 属性を外す。 5. 手動でチェックしたいときは form.reportValidity() を呼ぶとエラーメッセージ付きで検証できるよ。
1. input要素が<form>タグの中にあるか確認する。 2. 送信ボタンを <button type="submit"> にする（type="button"＋form.submit()はバリデーションが動かない）。 3. JSから送信したいときは form.submit() ではなく form.requestSubmit() を使う（バリデーションが動く）。 4. formタグの novalidate 属性を外す。 5. 手動でチェックしたいときは form.reportValidity() を呼ぶとエラーメッセージ付きで検証できるよ。
🔍 HTML required 効かない フォーム バリデーション novalidate submit requestSubmit
詳しく見る → loading="lazy"が効かない HTML
🖼️ ファーストビューの画像に指定している
画像にloading="lazy"を付けたのに遅延読み込みされない。画像の最適化をしようとしたときに起きるよ。
⚠️ よくある原因
ブラウザはファーストビュー（最初に画面に見える範囲）の画像に対してはloading="lazy"を無視するよ。すぐに表示する必要がある画像を遅延させると逆に表示が遅くなるからだ。また、width/heightが未指定だとブラウザが画像の位置を計算できず、遅延読み込みが正しく動作しないことがあるよ。
ブラウザはファーストビュー（最初に画面に見える範囲）の画像に対してはloading="lazy"を無視するよ。すぐに表示する必要がある画像を遅延させると逆に表示が遅くなるからだ。また、width/heightが未指定だとブラウザが画像の位置を計算できず、遅延読み込みが正しく動作しないことがあるよ。
✅ 直しかた
1. ファーストビューの画像にはloading="lazy"を付けない（スクロールしないと見えない画像にのみ使う）。 2. <img>にwidth/height属性を指定する（レイアウトシフト防止にもなる）。 3. 開発者ツールのNetworkタブで画像の読み込みタイミングを確認する。
1. ファーストビューの画像にはloading="lazy"を付けない（スクロールしないと見えない画像にのみ使う）。 2. <img>にwidth/height属性を指定する（レイアウトシフト防止にもなる）。 3. 開発者ツールのNetworkタブで画像の読み込みタイミングを確認する。
🔍 HTML loading lazy 効かない 遅延読み込み ファーストビュー
詳しく見る → dialogタグが表示されない HTML
💬 showModal()を呼んでいない
<dialog>タグを書いたのにモーダルが表示されない。dialog要素を初めて使うときに起きやすいよ。
⚠️ よくある原因
dialog要素はHTMLに書いただけではデフォルトで非表示（display: none相当）だよ。表示するにはJavaScriptでshowModal()メソッドまたはshow()メソッドを呼ぶ必要があるんだ。open属性を直接付けることもできるけど、モーダルとしての機能（背景のオーバーレイ等）は得られないよ。
dialog要素はHTMLに書いただけではデフォルトで非表示（display: none相当）だよ。表示するにはJavaScriptでshowModal()メソッドまたはshow()メソッドを呼ぶ必要があるんだ。open属性を直接付けることもできるけど、モーダルとしての機能（背景のオーバーレイ等）は得られないよ。
✅ 直しかた
1. JavaScriptでdocument.querySelector("dialog").showModal()を呼んで表示する。 2. 閉じるにはdialog.close()メソッドを使う。 3. showModal()はモーダル（背景操作不可）、show()は非モーダル（背景操作可能）として表示する。 4. ::backdrop疑似要素でオーバーレイのスタイルをカスタマイズできるよ。
1. JavaScriptでdocument.querySelector("dialog").showModal()を呼んで表示する。 2. 閉じるにはdialog.close()メソッドを使う。 3. showModal()はモーダル（背景操作不可）、show()は非モーダル（背景操作可能）として表示する。 4. ::backdrop疑似要素でオーバーレイのスタイルをカスタマイズできるよ。
🔍 HTML dialog 表示されない showModal モーダル
詳しく見る → details/summaryが開閉しない HTML
📋 summary要素が正しく配置されていない
<details>タグを書いたのにクリックしても開閉しない。アコーディオンUIを作ろうとしたときに起きやすいよ。
⚠️ よくある原因
details要素が正しく動作するには、直接の子要素としてsummary要素が必要だよ。summaryがdetailsの直接の子になっていない（別の要素で囲まれている等）場合や、CSSでpointer-events: noneが指定されている場合、クリックイベントが無効になって開閉しないんだ。
details要素が正しく動作するには、直接の子要素としてsummary要素が必要だよ。summaryがdetailsの直接の子になっていない（別の要素で囲まれている等）場合や、CSSでpointer-events: noneが指定されている場合、クリックイベントが無効になって開閉しないんだ。
✅ 直しかた
1. <details><summary>タイトル</summary><p>内容</p></details>の構造になっているか確認する。 2. summaryがdetailsの最初の直接の子要素であることを確認する。 3. CSSでpointer-events: noneやuser-select: noneが指定されていないか確認する。 4. JavaScriptでclickイベントがpreventDefault()されていないか確認する。
1. <details><summary>タイトル</summary><p>内容</p></details>の構造になっているか確認する。 2. summaryがdetailsの最初の直接の子要素であることを確認する。 3. CSSでpointer-events: noneやuser-select: noneが指定されていないか確認する。 4. JavaScriptでclickイベントがpreventDefault()されていないか確認する。
🔍 HTML details summary 開閉しない クリック 折りたたみ
詳しく見る → フォームの送信ボタンが反応しない（buttonのtype属性） HTML
📄 ボタンとformの紐づきに問題がある
送信ボタンを押しても何も起きない。buttonのtype属性、ボタンとformの位置関係、JavaScript側のエラーの3つを順に確認すれば原因がわかるよ。
⚠️ よくある原因
原因は3系統あるよ。(1) buttonのtype属性：<button>は<form>内ではデフォルトでsubmitとして動くけど、type="button"と書かれていると送信しない。<input type="button">も同様。 (2) 位置関係：ボタンが<form>タグの外にあると送信をトリガーできない。 (3) JavaScript：submitイベントでpreventDefault()している、またはonclickの処理がエラーで止まっている場合も「押しても無反応」に見えるよ（Consoleに赤いエラーが出ていないか確認）。
原因は3系統あるよ。(1) buttonのtype属性：<button>は<form>内ではデフォルトでsubmitとして動くけど、type="button"と書かれていると送信しない。<input type="button">も同様。 (2) 位置関係：ボタンが<form>タグの外にあると送信をトリガーできない。 (3) JavaScript：submitイベントでpreventDefault()している、またはonclickの処理がエラーで止まっている場合も「押しても無反応」に見えるよ（Consoleに赤いエラーが出ていないか確認）。
✅ 直しかた
1. <button type="submit">送信</button> とtype="submit"を明示する。 2. ボタンが<form>タグの中にあるか確認する。外に置きたい場合は <button type="submit" form="myForm"> とform属性でidを指定する。 3. F12のConsoleタブでエラーが出ていないか確認する。 4. JSで送信を止めている場合は、処理の最後に form.requestSubmit() を呼ぶか preventDefault() を外す。
1. <button type="submit">送信</button> とtype="submit"を明示する。 2. ボタンが<form>タグの中にあるか確認する。外に置きたい場合は <button type="submit" form="myForm"> とform属性でidを指定する。 3. F12のConsoleタブでエラーが出ていないか確認する。 4. JSで送信を止めている場合は、処理の最後に form.requestSubmit() を呼ぶか preventDefault() を外す。
🔍 HTML form submit ボタン 反応しない type button 送信できない preventDefault
詳しく見る → labelをクリックしてもinputにフォーカスしない HTML
📄 labelとinputが紐づいていない
ラベルをクリックしても入力欄にカーソルが移動しない。labelとinputの紐づけが正しくないときに起きるよ。
⚠️ よくある原因
labelのfor属性とinputのid属性が一致していないよ。ブラウザはfor属性の値と同じidを持つinput要素を探して紐づけるんだ。値が一致していないとラベルクリックでフォーカスが移動しないよ。
labelのfor属性とinputのid属性が一致していないよ。ブラウザはfor属性の値と同じidを持つinput要素を探して紐づけるんだ。値が一致していないとラベルクリックでフォーカスが移動しないよ。
✅ 直しかた
1. <label for="email">と<input id="email">のように、forとidを同じ値にする。 2. または<label><input>テキスト</label>のようにlabelでinputを囲む方法もある。 3. for/idの値にスペースや特殊文字を使わないようにする。
1. <label for="email">と<input id="email">のように、forとidを同じ値にする。 2. または<label><input>テキスト</label>のようにlabelでinputを囲む方法もある。 3. for/idの値にスペースや特殊文字を使わないようにする。
🔍 label for input id フォーカス 紐づけ
詳しく見る → セマンティックHTMLでアクセシビリティ警告 HTML
📄 見出しの階層が飛んでいる
Lighthouseで「Heading elements are not in a sequentially-descending order」と出る。
⚠️ よくある原因
h1の次にh3を使うなど、見出しレベルを飛ばしているよ。HTMLの見出し（h1〜h6）は文書の階層構造を表すもので、h1→h2→h3の順番で使う必要があるんだ。スクリーンリーダーは見出し構造でページをナビゲーションするから、飛ばすとアクセシビリティに問題が出るよ。
h1の次にh3を使うなど、見出しレベルを飛ばしているよ。HTMLの見出し（h1〜h6）は文書の階層構造を表すもので、h1→h2→h3の順番で使う必要があるんだ。スクリーンリーダーは見出し構造でページをナビゲーションするから、飛ばすとアクセシビリティに問題が出るよ。
✅ 直しかた
1. h1→h2→h3の順番で使い、レベルを飛ばさない。 2. 見た目のサイズを変えたいならCSSのfont-sizeで調整する。 3. 1ページにh1は1つだけにする。 4. 開発者ツールのAccessibilityタブで見出し構造を確認できるよ。
1. h1→h2→h3の順番で使い、レベルを飛ばさない。 2. 見た目のサイズを変えたいならCSSのfont-sizeで調整する。 3. 1ページにh1は1つだけにする。 4. 開発者ツールのAccessibilityタブで見出し構造を確認できるよ。
🔍 見出し h1 h2 h3 アクセシビリティ Lighthouse 階層
詳しく見る → メタディスクリプションが検索結果に反映されない HTML
📄 Googleによる書き換えか、タグ・クロールの問題
meta descriptionを設定したのにGoogleの検索結果に表示されない・別の文章が出る。実は「Googleが別の文を選ぶ」のは正常動作で、原因は大きく3つに分かれるよ。
⚠️ よくある原因
原因は3系統あるよ。(1) Googleによる書き換え：Googleは検索キーワードに合わせてページ内の別のテキストを説明文に使うことがあり、これは公式に認められている正常動作なんだ。descriptionがページ内容とズレている・キーワードの羅列になっている・全ページ同じ文章、のときに書き換えられやすいよ。(2) タグの書き方ミス：name="description" のスペルミス、headの外に書いている、同じタグが2つある。(3) まだ再クロールされていない：変更が検索結果に出るまで数日〜数週間かかるよ。
原因は3系統あるよ。(1) Googleによる書き換え：Googleは検索キーワードに合わせてページ内の別のテキストを説明文に使うことがあり、これは公式に認められている正常動作なんだ。descriptionがページ内容とズレている・キーワードの羅列になっている・全ページ同じ文章、のときに書き換えられやすいよ。(2) タグの書き方ミス：name="description" のスペルミス、headの外に書いている、同じタグが2つある。(3) まだ再クロールされていない：変更が検索結果に出るまで数日〜数週間かかるよ。
✅ 直しかた
1. まずタグを確認する：<head>内に <meta name="description" content="..."> が1つだけあるか、スペルが正しいか。 2. ページごとに固有で、内容と一致した80〜120文字程度の説明に書き直す（キーワード羅列はNG）。 3. Google Search ConsoleのURL検査でインデックス登録をリクエストし、数日待つ。 4. それでも別の文が出る場合は、検索キーワードに応じたGoogleの書き換え＝正常動作なので、ページ本文の冒頭文を要約として磨くのが実質的な対策だよ。
1. まずタグを確認する：<head>内に <meta name="description" content="..."> が1つだけあるか、スペルが正しいか。 2. ページごとに固有で、内容と一致した80〜120文字程度の説明に書き直す（キーワード羅列はNG）。 3. Google Search ConsoleのURL検査でインデックス登録をリクエストし、数日待つ。 4. それでも別の文が出る場合は、検索キーワードに応じたGoogleの書き換え＝正常動作なので、ページ本文の冒頭文を要約として磨くのが実質的な対策だよ。
🔍 メタディスクリプション meta description 反映されない 検索結果 書き換え Google SEO
詳しく見る → lang属性の未設定 HTML
📄 html要素にlang属性がない
Lighthouseで「html element does not have a [lang] attribute」と出る。アクセシビリティ対応で見落としやすいポイントだよ。
⚠️ よくある原因
htmlタグにlang属性が設定されていないよ。スクリーンリーダーはlang属性を見てページの言語を判定し、適切な音声エンジンで読み上げるんだ。lang属性がないと、英語の音声エンジンで日本語を読み上げようとして正しく発音できないよ。
htmlタグにlang属性が設定されていないよ。スクリーンリーダーはlang属性を見てページの言語を判定し、適切な音声エンジンで読み上げるんだ。lang属性がないと、英語の音声エンジンで日本語を読み上げようとして正しく発音できないよ。
✅ 直しかた
1. <html lang="ja">のように言語コードを設定する。 2. 日本語ページなら"ja"、英語なら"en"を指定する。 3. 多言語ページは部分的にlang属性を追加する（<span lang="en">Hello</span>）。
1. <html lang="ja">のように言語コードを設定する。 2. 日本語ページなら"ja"、英語なら"en"を指定する。 3. 多言語ページは部分的にlang属性を追加する（<span lang="en">Hello</span>）。
🔍 html lang 属性 アクセシビリティ Lighthouse 言語
詳しく見る → 音声が自動再生されない HTML
🔊 autoplay がブラウザにブロックされている
audioタグにautoplayを付けたのに音が鳴らない。ブラウザのポリシーで止められているよ。
⚠️ よくある原因
多くのブラウザはユーザー操作なしの音声自動再生をブロックするよ。これはユーザー体験を守るためのポリシーで、autoplay属性だけでは音声付きメディアは再生されないんだ。muted属性を付けるか、ユーザーのクリック後に再生する必要があるよ。
多くのブラウザはユーザー操作なしの音声自動再生をブロックするよ。これはユーザー体験を守るためのポリシーで、autoplay属性だけでは音声付きメディアは再生されないんだ。muted属性を付けるか、ユーザーのクリック後に再生する必要があるよ。
✅ 直しかた
1. muted属性を付ければ自動再生できる（音は出ない）。 2. ユーザーのクリックイベント内でplay()を呼ぶ。 3. どうしても自動再生したい場合はmutedで開始し、ユーザー操作後にミュート解除する。
1. muted属性を付ければ自動再生できる（音は出ない）。 2. ユーザーのクリックイベント内でplay()を呼ぶ。 3. どうしても自動再生したい場合はmutedで開始し、ユーザー操作後にミュート解除する。
🔍 HTML audio 自動再生 されない autoplay
詳しく見る → iframeの高さが合わない HTML
📐 iframe の高さが固定されている
iframeの中身に合わせて高さを変えたいのに、スクロールバーが出てしまう。高さ指定の問題だよ。
⚠️ よくある原因
iframeはデフォルトで固定の高さ（150px）を持つよ。中のコンテンツが大きくてもiframe自体は自動で伸びないんだ。CSSでheight:100%にしても親要素の高さが決まっていないと効かないよ。
iframeはデフォルトで固定の高さ（150px）を持つよ。中のコンテンツが大きくてもiframe自体は自動で伸びないんだ。CSSでheight:100%にしても親要素の高さが決まっていないと効かないよ。
✅ 直しかた
1. iframe に十分な height を直接指定する。 2. 同一オリジンなら JS で中身の高さを取得して iframe の高さを動的に設定する。 3. aspect-ratio を使って比率で指定する方法もあるよ。
1. iframe に十分な height を直接指定する。 2. 同一オリジンなら JS で中身の高さを取得して iframe の高さを動的に設定する。 3. aspect-ratio を使って比率で指定する方法もあるよ。
🔍 HTML iframe 高さ 自動調整 されない
詳しく見る → 画像が遅延読み込みされない HTML
🖼️ loading="lazy" が効いていない
loading="lazy"を付けたのに画像が最初から全部読み込まれる。条件が揃っていないときに起きるよ。
⚠️ よくある原因
loading="lazy"はビューポートから離れた画像にのみ効果があるよ。ファーストビュー内の画像には効かないんだ。また、width/height属性がないとブラウザがレイアウトを計算できず、遅延読み込みが正しく動作しないことがあるよ。
loading="lazy"はビューポートから離れた画像にのみ効果があるよ。ファーストビュー内の画像には効かないんだ。また、width/height属性がないとブラウザがレイアウトを計算できず、遅延読み込みが正しく動作しないことがあるよ。
✅ 直しかた
1. img に width と height 属性を指定する。 2. ファーストビュー外の画像にのみ loading="lazy" を付ける。 3. ファーストビューの画像には付けない（逆に遅くなる）。
1. img に width と height 属性を指定する。 2. ファーストビュー外の画像にのみ loading="lazy" を付ける。 3. ファーストビューの画像には付けない（逆に遅くなる）。
🔍 HTML loading lazy 効かない 画像
詳しく見る → datalistの候補が表示されない HTML
📋 input と datalist の紐付けが間違っている
datalistで候補リストを作ったのに、入力欄に候補が出ない。idの紐付けミスで起きるよ。
⚠️ よくある原因
inputのlist属性の値とdatalistのid属性の値が一致していないよ。この2つが一致して初めてブラウザが候補を表示するんだ。また、datalistをinputの外に置いても動くけど、idの不一致が最も多い原因だよ。
inputのlist属性の値とdatalistのid属性の値が一致していないよ。この2つが一致して初めてブラウザが候補を表示するんだ。また、datalistをinputの外に置いても動くけど、idの不一致が最も多い原因だよ。
✅ 直しかた
1. input の list 属性と datalist の id が完全に一致しているか確認する。 2. datalist 内の option に value 属性を付ける。 3. ブラウザの対応状況を確認する。
1. input の list 属性と datalist の id が完全に一致しているか確認する。 2. datalist 内の option に value 属性を付ける。 3. ブラウザの対応状況を確認する。
🔍 HTML datalist 候補 表示されない
詳しく見る → picture要素で画像が切り替わらない HTML
🖼️ source の記述順が間違っている
pictureタグでレスポンシブ画像を設定したのに切り替わらない。sourceの順番が原因だよ。
⚠️ よくある原因
ブラウザはsource要素を上から順に評価し、最初にマッチしたものを使うよ。media属性の条件が広いものを先に書くと、それが常にマッチして他のsourceが使われないんだ。また、img要素はpicture内に必須で、フォールバックとして機能するよ。
ブラウザはsource要素を上から順に評価し、最初にマッチしたものを使うよ。media属性の条件が広いものを先に書くと、それが常にマッチして他のsourceが使われないんだ。また、img要素はpicture内に必須で、フォールバックとして機能するよ。
✅ 直しかた
1. source を条件が狭い順（大きい画面→小さい画面）に並べる。 2. 各 source に media 属性を正しく書く。 3. 最後に img 要素をフォールバックとして置く。
1. source を条件が狭い順（大きい画面→小さい画面）に並べる。 2. 各 source に media 属性を正しく書く。 3. 最後に img 要素をフォールバックとして置く。
🔍 HTML picture source 切り替わらない
詳しく見る → metaタグのviewportが効かない HTML
📱 viewport の指定が間違っている
スマホで見るとページが小さく表示される。viewportの設定が正しくないときに起きるよ。
⚠️ よくある原因
viewport メタタグが head 内にないか、content属性の値が間違っているよ。このタグがないとブラウザはPC向けの幅（通常980px）でページを描画し、スマホでは縮小表示されるんだ。
viewport メタタグが head 内にないか、content属性の値が間違っているよ。このタグがないとブラウザはPC向けの幅（通常980px）でページを描画し、スマホでは縮小表示されるんだ。
✅ 直しかた
1. head 内に <meta name="viewport" content="width=device-width, initial-scale=1"> を追加する。 2. content の値にスペルミスがないか確認する。 3. body 内ではなく head 内に書く。
1. head 内に <meta name="viewport" content="width=device-width, initial-scale=1"> を追加する。 2. content の値にスペルミスがないか確認する。 3. body 内ではなく head 内に書く。
🔍 HTML viewport 効かない レスポンシブ
詳しく見る → aタグのtarget="_blank"でリンクが開かない HTML
🔗 ポップアップブロッカーに止められている
target="_blank"を付けたのに新しいタブが開かない。ブラウザの設定やJSからの呼び出しが原因だよ。
⚠️ よくある原因
ブラウザのポップアップブロッカーが新しいタブの表示を止めている場合があるよ。特にJavaScriptのwindow.open()はユーザー操作なしだとブロックされやすいんだ。また、href属性が空や"#"だとリンク先がないため遷移しないよ。
ブラウザのポップアップブロッカーが新しいタブの表示を止めている場合があるよ。特にJavaScriptのwindow.open()はユーザー操作なしだとブロックされやすいんだ。また、href属性が空や"#"だとリンク先がないため遷移しないよ。
✅ 直しかた
1. href 属性に正しい URL が入っているか確認する。 2. rel="noopener noreferrer" を付けてセキュリティも確保する。 3. JS から開く場合はクリックイベント内で window.open() を呼ぶ。
1. href 属性に正しい URL が入っているか確認する。 2. rel="noopener noreferrer" を付けてセキュリティも確保する。 3. JS から開く場合はクリックイベント内で window.open() を呼ぶ。
🔍 HTML target blank リンク 開かない
詳しく見る → input の autocomplete が効かない HTML
📝 inputのautocomplete属性が効かない
autocomplete='off'を指定してもブラウザが自動入力してくる。ブラウザの仕様を理解しよう。
⚠️ よくある原因
多くのブラウザはセキュリティ上の理由でautocomplete='off'を無視することがあるよ。特にログインフォームのパスワード欄は、ブラウザが強制的に自動入力する仕様になっている。
多くのブラウザはセキュリティ上の理由でautocomplete='off'を無視することがあるよ。特にログインフォームのパスワード欄は、ブラウザが強制的に自動入力する仕様になっている。
✅ 直しかた
1. autocomplete='new-password'を使う（新規パスワード用）。 2. name属性をユニークな値にする。 3. readonly属性をつけてfocus時に解除する。
1. autocomplete='new-password'を使う（新規パスワード用）。 2. name属性をユニークな値にする。 3. readonly属性をつけてfocus時に解除する。
🔍 HTML input autocomplete off 効かない ブラウザ 自動入力
詳しく見る → iframe の sandbox で JS が動かない HTML
🔒 iframeのsandbox属性でJSが動かない
iframeにsandbox属性をつけたら中のJavaScriptが動かなくなった。allow-scriptsを追加しよう。
⚠️ よくある原因
sandbox属性を指定すると、デフォルトでスクリプト実行・フォーム送信・ポップアップなどすべてが制限されるよ。必要な権限を個別にallow-xxxで許可する必要がある。
sandbox属性を指定すると、デフォルトでスクリプト実行・フォーム送信・ポップアップなどすべてが制限されるよ。必要な権限を個別にallow-xxxで許可する必要がある。
✅ 直しかた
1. sandbox='allow-scripts'を追加する。 2. 必要に応じてallow-same-origin、allow-formsも追加。 3. sandbox属性自体を外す（セキュリティが不要な場合）。
1. sandbox='allow-scripts'を追加する。 2. 必要に応じてallow-same-origin、allow-formsも追加。 3. sandbox属性自体を外す（セキュリティが不要な場合）。
🔍 HTML iframe sandbox JavaScript 動かない allow-scripts
詳しく見る → tabindex の順序が期待通りにならない HTML
⌨️ tabindexの順序が期待通りにならない
tabindexで順序を指定したのにTab移動が期待通りにならない。正の値は避けて0か-1を使おう。
⚠️ よくある原因
tabindexに正の値（1, 2, 3...）を使うと、DOM順序ではなくtabindex値の昇順でフォーカスが移動するよ。複雑になりやすく、後から要素を追加すると順序が崩れる。
tabindexに正の値（1, 2, 3...）を使うと、DOM順序ではなくtabindex値の昇順でフォーカスが移動するよ。複雑になりやすく、後から要素を追加すると順序が崩れる。
✅ 直しかた
1. tabindex='0'を使う（DOM順序でフォーカス）。 2. tabindex='-1'でフォーカス対象から外す。 3. 正の値は使わず、HTML構造の順序で制御する。
1. tabindex='0'を使う（DOM順序でフォーカス）。 2. tabindex='-1'でフォーカス対象から外す。 3. 正の値は使わず、HTML構造の順序で制御する。
🔍 HTML tabindex 順序 フォーカス Tab キーボード アクセシビリティ
詳しく見る → 🎨CSS3件
スマホで表示が小さい CSS
📱 viewport meta タグがない
スマホで見るとページ全体が縮小されて表示される。レスポンシブ対応を始めるときに起きやすいよ。
⚠️ よくある原因
HTMLの<head>にviewportのmetaタグが書かれていないよ。このタグがないとブラウザはページをPC幅（通常980px）で描画し、スマホの小さな画面に縮小して表示するんだ。そのため文字が小さくなり読めなくなるよ。
HTMLの<head>にviewportのmetaタグが書かれていないよ。このタグがないとブラウザはページをPC幅（通常980px）で描画し、スマホの小さな画面に縮小して表示するんだ。そのため文字が小さくなり読めなくなるよ。
✅ 直しかた
1. <head>に<meta name="viewport" content="width=device-width, initial-scale=1.0">を追加する。 2. CSSでwidth: 100%やmax-widthを使い、固定幅(px)を避ける。 3. スマホの実機またはDevToolsのデバイスモードで表示を確認する。
1. <head>に<meta name="viewport" content="width=device-width, initial-scale=1.0">を追加する。 2. CSSでwidth: 100%やmax-widthを使い、固定幅(px)を避ける。 3. スマホの実機またはDevToolsのデバイスモードで表示を確認する。
🔍 CSS レスポンシブ スマホ 小さい viewport
詳しく見る → CSSのgapが効かない（Flexbox） CSS
🎨 gapを書く場所か親のdisplay設定に問題がある
gapを指定したのにアイテムの間隔が空かない。gapはdisplay:flexまたはgridの「親要素」にしか効かないのが原因のほとんどだよ。
⚠️ よくある原因
gapはFlexコンテナまたはGridコンテナ（display:flex / grid を指定した親要素）専用のプロパティだよ。よくある原因は、(1) 親要素にdisplay:flexを書き忘れている、(2) gapを子要素（アイテム側）に書いている、(3) gapを指定した要素とdisplay:flexを指定した要素が別、の3つ。なお主要ブラウザは2021年以降Flexboxのgapに対応済みなので、最近の環境でブラウザ対応が原因になることはまれだよ。
gapはFlexコンテナまたはGridコンテナ（display:flex / grid を指定した親要素）専用のプロパティだよ。よくある原因は、(1) 親要素にdisplay:flexを書き忘れている、(2) gapを子要素（アイテム側）に書いている、(3) gapを指定した要素とdisplay:flexを指定した要素が別、の3つ。なお主要ブラウザは2021年以降Flexboxのgapに対応済みなので、最近の環境でブラウザ対応が原因になることはまれだよ。
✅ 直しかた
1. gapと同じ要素にdisplay:flex（またはgrid）があるか確認する。 2. gapが子要素に書かれていたら親要素に移動する。 3. DevToolsのElementsで親要素を選び、Stylesにgapが取り消し線なしで表示されているか確認する（取り消し線があれば無効＝書く場所が違う）。 4. アイテムが1つしかないと間隔は見えない。2つ以上で確認する。
1. gapと同じ要素にdisplay:flex（またはgrid）があるか確認する。 2. gapが子要素に書かれていたら親要素に移動する。 3. DevToolsのElementsで親要素を選び、Stylesにgapが取り消し線なしで表示されているか確認する（取り消し線があれば無効＝書く場所が違う）。 4. アイテムが1つしかないと間隔は見えない。2つ以上で確認する。
🔍 CSS Flexbox gap 効かない display flex 間隔 margin
詳しく見る → Invalid property value（CSSの値が無効） CSS
⚠️ プロパティが受け付けない値を書いている
DevToolsのStylesでスタイルに取り消し線と⚠アイコンが付き、「Invalid property value」と表示される。プロパティに使えない値を書いているのが原因で、その行はまるごと無視されているよ。
⚠️ よくある原因
プロパティに対して無効な値を指定しているよ。よくあるのは、(1) width: 100 のように数値に単位を付け忘れた（0以外は単位必須）、(2) display: flexbox のように存在しない値を書いた（正しくは flex）、(3) calc(100%-20px) のように calc() の演算子の前後にスペースを入れ忘れた（calc(100% - 20px) が正しい）、(4) 色名やプロパティ値のタイポ。無効な値の行はブラウザに無視されるだけでエラーは出ないので、「書いたのに効かない」という形で気づくことが多いよ。
プロパティに対して無効な値を指定しているよ。よくあるのは、(1) width: 100 のように数値に単位を付け忘れた（0以外は単位必須）、(2) display: flexbox のように存在しない値を書いた（正しくは flex）、(3) calc(100%-20px) のように calc() の演算子の前後にスペースを入れ忘れた（calc(100% - 20px) が正しい）、(4) 色名やプロパティ値のタイポ。無効な値の行はブラウザに無視されるだけでエラーは出ないので、「書いたのに効かない」という形で気づくことが多いよ。
✅ 直しかた
1. DevToolsのElementsで要素を選び、Stylesパネルで取り消し線＋⚠が付いている行を探す（そこが無効な行）。 2. 数値に単位（px・%・remなど）を付ける。 3. calc()は演算子の前後にスペースを入れる：calc(100% - 20px)。 4. 正しい値が分からないときはMDNでプロパティのページを確認するか、VS Codeの補完候補から選ぶ。
1. DevToolsのElementsで要素を選び、Stylesパネルで取り消し線＋⚠が付いている行を探す（そこが無効な行）。 2. 数値に単位（px・%・remなど）を付ける。 3. calc()は演算子の前後にスペースを入れる：calc(100% - 20px)。 4. 正しい値が分からないときはMDNでプロパティのページを確認するか、VS Codeの補完候補から選ぶ。
🔍 CSS Invalid property value 効かない 取り消し線 単位 calc display
詳しく見る → ⚡JavaScript27件
Uncaught ReferenceError: xxx is not defined JavaScript
🚨 変数・関数名のタイポ
コンソールに ReferenceError: xxx is not defined と表示される。変数名や関数名を間違えたときに起きやすいよ。
⚠️ よくある原因
JavaScriptエンジンが指定された名前の変数や関数をスコープ内で見つけられないよ。変数名のタイポ（スペルミス）、大文字小文字の間違い、宣言する前に使おうとしている、別のスコープで宣言した変数にアクセスしようとしている、のいずれかが原因だよ。
JavaScriptエンジンが指定された名前の変数や関数をスコープ内で見つけられないよ。変数名のタイポ（スペルミス）、大文字小文字の間違い、宣言する前に使おうとしている、別のスコープで宣言した変数にアクセスしようとしている、のいずれかが原因だよ。
✅ 直しかた
1. エラーメッセージのxxxの部分を確認し、let/const/functionで宣言しているか確認する。 2. 大文字・小文字が完全に一致しているか確認する（myVar と myvar は別物）。 3. 変数の宣言位置が使用位置より前にあるか確認する。 4. 別ファイルの変数ならimportしているか確認する。
1. エラーメッセージのxxxの部分を確認し、let/const/functionで宣言しているか確認する。 2. 大文字・小文字が完全に一致しているか確認する（myVar と myvar は別物）。 3. 変数の宣言位置が使用位置より前にあるか確認する。 4. 別ファイルの変数ならimportしているか確認する。
🔍 JavaScript ReferenceError is not defined
詳しく見る → Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') JavaScript
🚨 取得しようとしたHTML要素が見つかっていない
addEventListenerやtextContentを使った行で「Cannot read properties of null」と出る。getElementByIdなどが要素を見つけられずnullを返しているのが原因だよ。
⚠️ よくある原因
document.getElementById('xxx')で指定したidがHTMLに存在しないよ。ブラウザはidが見つからないとnullを返すんだ。そのnullに対して.addEventListener()や.textContentなどのプロパティを読もうとするとこのエラーが出るよ。原因はほぼ2つ：(1) idのタイポ（大文字小文字・ハイフンの違いも別物）、(2) <script>がHTML要素より前にあって、要素が作られる前にJSが実行されている。reading の部分が 'textContent' や 'value' や 'style' でも原因と直し方は同じだよ。
document.getElementById('xxx')で指定したidがHTMLに存在しないよ。ブラウザはidが見つからないとnullを返すんだ。そのnullに対して.addEventListener()や.textContentなどのプロパティを読もうとするとこのエラーが出るよ。原因はほぼ2つ：(1) idのタイポ（大文字小文字・ハイフンの違いも別物）、(2) <script>がHTML要素より前にあって、要素が作られる前にJSが実行されている。reading の部分が 'textContent' や 'value' や 'style' でも原因と直し方は同じだよ。
✅ 直しかた
1. JavaScriptのid名とHTMLのid="..."が完全に一致しているか確認する。 2. <script>タグを</body>の直前に移動するか、defer属性を付ける。 3. console.log(document.getElementById("ID名"))でnullが出たら取得失敗と確定できる。 4. 要素が無い場合もあり得るページでは if (el) や el?.addEventListener で安全にアクセスする。
1. JavaScriptのid名とHTMLのid="..."が完全に一致しているか確認する。 2. <script>タグを</body>の直前に移動するか、defer属性を付ける。 3. console.log(document.getElementById("ID名"))でnullが出たら取得失敗と確定できる。 4. 要素が無い場合もあり得るページでは if (el) や el?.addEventListener で安全にアクセスする。
🔍 JavaScript Uncaught TypeError Cannot read properties of null reading addEventListener textContent getElementById
詳しく見る → 404 Not Found（スクリプトが読み込まれない） JavaScript
🔗 script の src パスが間違っている
コンソールに 404 エラーが出て、JavaScript が動かない。scriptタグのパスを間違えたときに起きるよ。
⚠️ よくある原因
HTMLの<script src="...">に書いたファイルパスが間違っているよ。ブラウザは指定されたパスにJSファイルを探しに行くけど、見つからないと404エラーを返すんだ。ファイル名のスペルミス、拡張子の間違い、フォルダ階層の間違いが主な原因だよ。
HTMLの<script src="...">に書いたファイルパスが間違っているよ。ブラウザは指定されたパスにJSファイルを探しに行くけど、見つからないと404エラーを返すんだ。ファイル名のスペルミス、拡張子の間違い、フォルダ階層の間違いが主な原因だよ。
✅ 直しかた
1. <script src="script.js">のファイル名と実際の.jsファイル名が一致しているか確認する。 2. .jsファイルがHTMLファイルと同じフォルダにあるか確認する。 3. 別フォルダならパスを正しく書く（例: src="js/app.js"）。 4. 開発者ツールのNetworkタブで404が出ているファイルを特定する。
1. <script src="script.js">のファイル名と実際の.jsファイル名が一致しているか確認する。 2. .jsファイルがHTMLファイルと同じフォルダにあるか確認する。 3. 別フォルダならパスを正しく書く（例: src="js/app.js"）。 4. 開発者ツールのNetworkタブで404が出ているファイルを特定する。
🔍 JavaScript 404 script 読み込めない
詳しく見る → 計算結果が NaN になる JavaScript
🔢 文字列を数値に変換していない
エラーは出ないのに、計算結果が NaN（Not a Number）と表示される。文字列と数値の計算で起きやすいよ。
⚠️ よくある原因
数値のつもりの変数が実は文字列になっているよ。JavaScriptではinput.valueで取得した値は常に文字列型だから、そのまま計算すると文字列結合になったりNaNになったりするんだ。"100円" * 2 のように数値に変換できない文字列を計算するとNaNになるよ。
数値のつもりの変数が実は文字列になっているよ。JavaScriptではinput.valueで取得した値は常に文字列型だから、そのまま計算すると文字列結合になったりNaNになったりするんだ。"100円" * 2 のように数値に変換できない文字列を計算するとNaNになるよ。
✅ 直しかた
1. Number(値)やparseInt(値)で数値に変換してから計算する。 2. console.log(typeof 変数名)で型を確認する。 3. input.valueは常に文字列なのでNumber(input.value)で変換する。 4. isNaN(値)でNaNかどうかチェックできる。
1. Number(値)やparseInt(値)で数値に変換してから計算する。 2. console.log(typeof 変数名)で型を確認する。 3. input.valueは常に文字列なのでNumber(input.value)で変換する。 4. isNaN(値)でNaNかどうかチェックできる。
🔍 JavaScript NaN 原因 文字列 数値変換
詳しく見る → TypeError: xxx is not a function JavaScript
🚨 関数でないものを呼び出している
コンソールに TypeError: xxx is not a function と表示される。関数でないものを呼び出そうとしたときに起きるよ。
⚠️ よくある原因
関数ではないもの（数値、文字列、undefined等）に()を付けて呼び出そうとしているよ。変数名と関数名が同じになっている、関数の定義を忘れている、オブジェクトのメソッド名を間違えている、などが原因だよ。
関数ではないもの（数値、文字列、undefined等）に()を付けて呼び出そうとしているよ。変数名と関数名が同じになっている、関数の定義を忘れている、オブジェクトのメソッド名を間違えている、などが原因だよ。
✅ 直しかた
1. エラーのxxxの部分を確認し、それがfunctionで定義されているか確認する。 2. console.log(typeof xxx)で"function"と表示されるか確認する。 3. 変数名と関数名が衝突していないか確認する。 4. メソッド名のスペルミスがないか確認する（例: tostring→toString）。
1. エラーのxxxの部分を確認し、それがfunctionで定義されているか確認する。 2. console.log(typeof xxx)で"function"と表示されるか確認する。 3. 変数名と関数名が衝突していないか確認する。 4. メソッド名のスペルミスがないか確認する（例: tostring→toString）。
🔍 JavaScript TypeError is not a function
詳しく見る → console.log を書いたのに何も表示されない JavaScript
👻 開発者ツールを開いていない
console.log() を書いたのに、ブラウザに何も表示されない。開発者ツールを開いていないときに起きるよ。
⚠️ よくある原因
console.log()はブラウザの画面ではなく開発者ツールのコンソールに表示されるよ。開発者ツールを開いていない、「Console」タブが選ばれていない、またはそもそもスクリプトファイルが読み込まれていない（パスミス）場合に「何も表示されない」状態になるよ。
console.log()はブラウザの画面ではなく開発者ツールのコンソールに表示されるよ。開発者ツールを開いていない、「Console」タブが選ばれていない、またはそもそもスクリプトファイルが読み込まれていない（パスミス）場合に「何も表示されない」状態になるよ。
✅ 直しかた
1. F12キー（MacはCmd+Option+I）で開発者ツールを開く。 2. 「Console」タブをクリックする。 3. それでも表示されない場合は<script>タグのファイルパスが正しいか確認する。 4. Networkタブでスクリプトが404になっていないか確認する。
1. F12キー（MacはCmd+Option+I）で開発者ツールを開く。 2. 「Console」タブをクリックする。 3. それでも表示されない場合は<script>タグのファイルパスが正しいか確認する。 4. Networkタブでスクリプトが404になっていないか確認する。
🔍 JavaScript console.log 表示されない 開発者ツール
詳しく見る → setInterval が止まらない JavaScript
⏱️ clearInterval を呼んでいない
setInterval で始めた処理が止まらない。タイマー処理を制御したいときに起きやすいよ。
⚠️ よくある原因
setIntervalの戻り値（タイマーID）を変数に保存していない、またはclearIntervalを呼んでいないよ。setIntervalは指定した間隔で永遠に実行し続けるから、明示的に停止しないと止まらないんだ。IDを保存しないとclearIntervalで指定できないよ。
setIntervalの戻り値（タイマーID）を変数に保存していない、またはclearIntervalを呼んでいないよ。setIntervalは指定した間隔で永遠に実行し続けるから、明示的に停止しないと止まらないんだ。IDを保存しないとclearIntervalで指定できないよ。
✅ 直しかた
1. const id = setInterval(関数, 1000);でIDを変数に保存する。 2. 停止したいタイミングでclearInterval(id);を呼ぶ。 3. コンポーネントのアンマウント時やページ離脱時にもclearIntervalする。 4. setTimeoutで再帰的に呼ぶ方が制御しやすい場合もあるよ。
1. const id = setInterval(関数, 1000);でIDを変数に保存する。 2. 停止したいタイミングでclearInterval(id);を呼ぶ。 3. コンポーネントのアンマウント時やページ離脱時にもclearIntervalする。 4. setTimeoutで再帰的に呼ぶ方が制御しやすい場合もあるよ。
🔍 JavaScript setInterval 止まらない clearInterval
詳しく見る → Uncaught ReferenceError: Cannot access 'x' before initialization JavaScript
🚨 let/constの宣言前にアクセスしている
変数を使った行で「Cannot access 'x' before initialization」と表示される。let/constで宣言した変数を、宣言より前の行で使っているのが原因だよ。
⚠️ よくある原因
let/constで宣言した変数を、宣言行より前で使おうとしているよ。これはTDZ（Temporal Dead Zone）と呼ばれる仕組みで、let/constの変数は宣言行に到達するまでアクセスできないんだ。わかりにくいのは「関数の中で同じ名前の変数を宣言している」ケースで、関数の外に同名の変数があっても、関数内のlet宣言が優先されて（シャドーイング）、その宣言行より上ではこのエラーになるよ。varと違ってlet/constは巻き上げられても初期化されないのがポイントだよ。
let/constで宣言した変数を、宣言行より前で使おうとしているよ。これはTDZ（Temporal Dead Zone）と呼ばれる仕組みで、let/constの変数は宣言行に到達するまでアクセスできないんだ。わかりにくいのは「関数の中で同じ名前の変数を宣言している」ケースで、関数の外に同名の変数があっても、関数内のlet宣言が優先されて（シャドーイング）、その宣言行より上ではこのエラーになるよ。varと違ってlet/constは巻き上げられても初期化されないのがポイントだよ。
✅ 直しかた
1. エラーメッセージの変数名（'x'の部分）で検索し、宣言（let/const）を使用行より前に移動する。 2. 関数の中で同名の変数を宣言していないか確認する。外の変数を使いたいなら関数内の宣言の名前を変える。 3. varなら巻き上げでundefinedになるだけでエラーは出ないが、バグの温床なのでvarには戻さず宣言の位置を直すこと。
1. エラーメッセージの変数名（'x'の部分）で検索し、宣言（let/const）を使用行より前に移動する。 2. 関数の中で同名の変数を宣言していないか確認する。外の変数を使いたいなら関数内の宣言の名前を変える。 3. varなら巻き上げでundefinedになるだけでエラーは出ないが、バグの温床なのでvarには戻さず宣言の位置を直すこと。
🔍 JavaScript Uncaught ReferenceError Cannot access before initialization TDZ let const シャドーイング
詳しく見る → RangeError: Invalid array length JavaScript
🚨 配列の長さに不正な値を指定している
new Array() に負の数や小数を渡すとエラーになる。配列の作成で起きるよ。
⚠️ よくある原因
new Array(-1)やnew Array(1.5)のように、配列の長さとして無効な値を指定しているよ。配列の長さは0以上の整数（0〜2^32-1）でなければならないんだ。変数の値が意図せず負数や小数になっている場合にも発生するよ。
new Array(-1)やnew Array(1.5)のように、配列の長さとして無効な値を指定しているよ。配列の長さは0以上の整数（0〜2^32-1）でなければならないんだ。変数の値が意図せず負数や小数になっている場合にも発生するよ。
✅ 直しかた
1. 配列の長さには0以上の整数を指定する。 2. 変数を使う場合はMath.max(0, Math.floor(値))で安全な値にする。 3. 配列リテラル[1,2,3]を使う方がnew Array()より安全で読みやすい。
1. 配列の長さには0以上の整数を指定する。 2. 変数を使う場合はMath.max(0, Math.floor(値))で安全な値にする。 3. 配列リテラル[1,2,3]を使う方がnew Array()より安全で読みやすい。
🔍 JavaScript RangeError Invalid array length
詳しく見る → Invalid left-hand side in assignment JavaScript
🚨 代入できないものに代入しようとしている
「Invalid left-hand side in assignment」と表示される。ほとんどの場合、比較のつもりで === を = と書いてしまったのが原因だよ。SyntaxErrorで出ることもReferenceErrorで出ることもあるけど、見るべき場所は同じ。
⚠️ よくある原因
代入の左辺（=の左側）には、変数やオブジェクトのプロパティなど「値を入れられるもの」しか書けないよ。圧倒的に多いのは、if (score = 100) のように比較演算子（===）を代入演算子（=）と書き間違えるケース。ほかには、5 = x のように左辺が値になっている、a + b = c のように左辺が計算式になっている場合もあるよ。ブラウザや書き方によってSyntaxErrorまたはReferenceErrorとして表示されるけど、原因と直し方は共通だよ。
代入の左辺（=の左側）には、変数やオブジェクトのプロパティなど「値を入れられるもの」しか書けないよ。圧倒的に多いのは、if (score = 100) のように比較演算子（===）を代入演算子（=）と書き間違えるケース。ほかには、5 = x のように左辺が値になっている、a + b = c のように左辺が計算式になっている場合もあるよ。ブラウザや書き方によってSyntaxErrorまたはReferenceErrorとして表示されるけど、原因と直し方は共通だよ。
✅ 直しかた
1. エラー行の = を確認する。比較なら === に直す（= は代入、=== は比較）。 2. 左辺が変数・プロパティになっているか確認する（値や計算式は左辺に置けない）。 3. if / while の括弧の中でうっかり代入していないか重点的に見る。ESLintのno-cond-assignルールで自動検出もできるよ。
1. エラー行の = を確認する。比較なら === に直す（= は代入、=== は比較）。 2. 左辺が変数・プロパティになっているか確認する（値や計算式は左辺に置けない）。 3. if / while の括弧の中でうっかり代入していないか重点的に見る。ESLintのno-cond-assignルールで自動検出もできるよ。
🔍 JavaScript Invalid left-hand side in assignment SyntaxError ReferenceError === = 比較 代入
詳しく見る → TypeError: undefined is not an object (evaluating 'obj.name') JavaScript
🚨 存在しないオブジェクトのプロパティにアクセスしている
undefinedな変数にドット記法でアクセスしてエラーになる。オブジェクトの初期化忘れで起きやすいよ。
⚠️ よくある原因
変数がundefinedのままプロパティにアクセスしているよ。オブジェクトの初期化忘れ、関数の戻り値がundefined（returnを書き忘れ）、非同期処理の結果がまだ届いていない、などが原因だよ。undefinedのプロパティにアクセスするとTypeErrorになるよ。
変数がundefinedのままプロパティにアクセスしているよ。オブジェクトの初期化忘れ、関数の戻り値がundefined（returnを書き忘れ）、非同期処理の結果がまだ届いていない、などが原因だよ。undefinedのプロパティにアクセスするとTypeErrorになるよ。
✅ 直しかた
1. アクセス前にオブジェクトが存在するか確認する（if (obj) obj.name）。 2. オプショナルチェーン（?.）を使う：obj?.name。 3. 変数の初期化を確認する（let arr; → let arr = [];）。 4. 関数にreturn文があるか確認する。
1. アクセス前にオブジェクトが存在するか確認する（if (obj) obj.name）。 2. オプショナルチェーン（?.）を使う：obj?.name。 3. 変数の初期化を確認する（let arr; → let arr = [];）。 4. 関数にreturn文があるか確認する。
🔍 JavaScript undefined is not an object プロパティ
詳しく見る → Uncaught TypeError: Cannot read properties of undefined (reading 'length') JavaScript
🚨 undefinedに対して.lengthを読んでいる
.lengthを使った行でこのエラーが出る。「.lengthが使えない」のではなく、その手前の変数がundefinedになっているのが本当の原因だよ。
⚠️ よくある原因
エラーの主役は .length ではなく、その手前にある変数だよ。data.length なら data がundefinedになっているんだ。よくあるのは、(1) 変数を宣言しただけで配列や文字列を代入していない、(2) 関数にreturnを書き忘れて戻り値がundefined、(3) fetchなど非同期処理の結果が届く前にアクセスしている、(4) オブジェクトのプロパティ名のタイポ（items を item と書くなど）、の4つ。reading の部分が 'map' や 'forEach' でも原因と直し方は同じだよ。
エラーの主役は .length ではなく、その手前にある変数だよ。data.length なら data がundefinedになっているんだ。よくあるのは、(1) 変数を宣言しただけで配列や文字列を代入していない、(2) 関数にreturnを書き忘れて戻り値がundefined、(3) fetchなど非同期処理の結果が届く前にアクセスしている、(4) オブジェクトのプロパティ名のタイポ（items を item と書くなど）、の4つ。reading の部分が 'map' や 'forEach' でも原因と直し方は同じだよ。
✅ 直しかた
1. エラー行の .length の手前の変数を console.log して、undefinedになっていることを確かめる。 2. その変数がどこで値を受け取るはずだったかをさかのぼる（初期化忘れ・returnの書き忘れ・プロパティ名のタイポ）。 3. 非同期データなら await やコールバックの中でアクセスする。 4. 値が無い場合もあり得るなら data?.length（オプショナルチェーン）や if (data) でガードする。
1. エラー行の .length の手前の変数を console.log して、undefinedになっていることを確かめる。 2. その変数がどこで値を受け取るはずだったかをさかのぼる（初期化忘れ・returnの書き忘れ・プロパティ名のタイポ）。 3. 非同期データなら await やコールバックの中でアクセスする。 4. 値が無い場合もあり得るなら data?.length（オプショナルチェーン）や if (data) でガードする。
🔍 JavaScript Uncaught TypeError Cannot read properties of undefined reading length map forEach
詳しく見る → Uncaught SyntaxError: Identifier 'x' has already been declared JavaScript
🚨 同じ変数名を2回宣言している
letやconstで同じ名前の変数を2回宣言するとこのエラーが出る。ブラウザのConsoleに同じコードを貼り直したときにも起きるよ。
⚠️ よくある原因
同じスコープ内でletやconstの同名変数を2回宣言しているよ。let/constは再宣言を禁止しているんだ。コードを書いていて起きる場合は、長いファイルでの名前の重複やコピペが原因。コードは正しいのにDevToolsのConsoleで起きる場合は、Consoleに let を含むコードを2回以上貼り付けたのが原因だよ（Consoleは前回の宣言を覚えている）。同じJSファイルを<script>タグで2回読み込んでいるときにも起きるよ。
同じスコープ内でletやconstの同名変数を2回宣言しているよ。let/constは再宣言を禁止しているんだ。コードを書いていて起きる場合は、長いファイルでの名前の重複やコピペが原因。コードは正しいのにDevToolsのConsoleで起きる場合は、Consoleに let を含むコードを2回以上貼り付けたのが原因だよ（Consoleは前回の宣言を覚えている）。同じJSファイルを<script>タグで2回読み込んでいるときにも起きるよ。
✅ 直しかた
1. エラーメッセージの変数名でファイル内を検索し、2回目の宣言を削除するか名前を変える。 2. 再代入したいなら2回目は let を付けずに代入だけ書く（let x = 1; x = 2; はOK）。 3. Consoleで起きたならページをリロードするか、コードを { } で囲って貼り付ける。 4. HTMLに同じJSファイルの<script>タグが2つないか確認する。
1. エラーメッセージの変数名でファイル内を検索し、2回目の宣言を削除するか名前を変える。 2. 再代入したいなら2回目は let を付けずに代入だけ書く（let x = 1; x = 2; はOK）。 3. Consoleで起きたならページをリロードするか、コードを { } で囲って貼り付ける。 4. HTMLに同じJSファイルの<script>タグが2つないか確認する。
🔍 JavaScript Uncaught SyntaxError Identifier has already been declared let const 再宣言 console
詳しく見る → Uncaught SyntaxError: missing ) after argument list JavaScript
🚨 関数呼び出しの括弧が閉じていない
関数を呼び出した行で「missing ) after argument list」と出る。閉じ括弧 ) の数が足りないか、引数のカンマ・クォートが欠けているのが原因だよ。
⚠️ よくある原因
関数呼び出しの閉じ括弧 ) が足りないよ。よくあるのは、(1) console.logやalertの最後の ) を書き忘れた、(2) 引数の間のカンマを忘れた、(3) 文字列のクォートを閉じ忘れて、そこから先が全部文字列扱いになった、の3つ。括弧のネストが深い式（関数の中で関数を呼ぶなど）で特に起きやすいんだ。エラーメッセージの行番号は実際のミス箇所より後ろを指すことがあるので、表示された行の少し上も見るのがコツだよ。
関数呼び出しの閉じ括弧 ) が足りないよ。よくあるのは、(1) console.logやalertの最後の ) を書き忘れた、(2) 引数の間のカンマを忘れた、(3) 文字列のクォートを閉じ忘れて、そこから先が全部文字列扱いになった、の3つ。括弧のネストが深い式（関数の中で関数を呼ぶなど）で特に起きやすいんだ。エラーメッセージの行番号は実際のミス箇所より後ろを指すことがあるので、表示された行の少し上も見るのがコツだよ。
✅ 直しかた
1. エラー行とその少し上で、( と ) の数が合っているか確認する（VS Codeで括弧をクリックすると対応相手が光る）。 2. 引数が複数あるならカンマがあるか確認する。 3. 文字列のクォート（" や '）が閉じているか確認する（エディタの色分けが変なら閉じ忘れ）。 4. Prettierで整形すると崩れた場所が浮かび上がる。複雑な式は変数に分けて書くと防ぎやすいよ。
1. エラー行とその少し上で、( と ) の数が合っているか確認する（VS Codeで括弧をクリックすると対応相手が光る）。 2. 引数が複数あるならカンマがあるか確認する。 3. 文字列のクォート（" や '）が閉じているか確認する（エディタの色分けが変なら閉じ忘れ）。 4. Prettierで整形すると崩れた場所が浮かび上がる。複雑な式は変数に分けて書くと防ぎやすいよ。
🔍 JavaScript Uncaught SyntaxError missing ) after argument list 括弧 閉じ忘れ カンマ
詳しく見る → Uncaught TypeError: Cannot set properties of null (setting 'textContent') JavaScript
🚨 nullに対してプロパティを設定しようとしている
textContentやinnerHTMLに代入した行でこのエラーが出る。getElementByIdが要素を見つけられずnullを返しているのが原因で、多くはid名の不一致かscriptタグの位置だよ。
⚠️ よくある原因
document.getElementByIdなどでnullが返っているのに、そのままtextContentやinnerHTMLなどのプロパティに代入しようとしたよ。原因は2つに絞れることが多くて、(1) HTMLのid属性とJSに書いた文字列が一致していない（大文字小文字やハイフンの違いも別物扱い）、(2) scriptタグがHTML要素より前にあって、要素が作られる前にJSが実行されている、のどちらかだよ。setting の部分が 'innerHTML' や 'src' や 'value' になっていても原因と直し方は同じ。読み取りで失敗すると Cannot read properties of null という別のエラーになるよ。
document.getElementByIdなどでnullが返っているのに、そのままtextContentやinnerHTMLなどのプロパティに代入しようとしたよ。原因は2つに絞れることが多くて、(1) HTMLのid属性とJSに書いた文字列が一致していない（大文字小文字やハイフンの違いも別物扱い）、(2) scriptタグがHTML要素より前にあって、要素が作られる前にJSが実行されている、のどちらかだよ。setting の部分が 'innerHTML' や 'src' や 'value' になっていても原因と直し方は同じ。読み取りで失敗すると Cannot read properties of null という別のエラーになるよ。
✅ 直しかた
1. HTMLのid属性とJSの文字列が完全一致しているか確認する（sendBtn と send-btn は別物）。 2. scriptタグをbodyの閉じタグ直前に移動するか、<script defer src="..."> とdeferを付ける。 3. DOMContentLoadedイベントの中で実行する。 4. console.log(document.getElementById('ID名')) でnullかどうか確かめる。
1. HTMLのid属性とJSの文字列が完全一致しているか確認する（sendBtn と send-btn は別物）。 2. scriptタグをbodyの閉じタグ直前に移動するか、<script defer src="..."> とdeferを付ける。 3. DOMContentLoadedイベントの中で実行する。 4. console.log(document.getElementById('ID名')) でnullかどうか確かめる。
🔍 JavaScript Uncaught TypeError Cannot set properties of null setting textContent innerHTML
詳しく見る → Expected an assignment or function call JavaScript
🚨 式を書いただけで代入も呼び出しもしていない
比較演算子（===）と代入演算子（=）を混同している。式文の書き方で起きるよ。
⚠️ よくある原因
式を書いただけで、代入も関数呼び出しもしていないよ。例えばa === 1;と書いても比較結果を使っていないから意味がないんだ。if(a === 1)のように条件式の中で使うか、const result = a === 1;のように結果を変数に入れる必要があるよ。
式を書いただけで、代入も関数呼び出しもしていないよ。例えばa === 1;と書いても比較結果を使っていないから意味がないんだ。if(a === 1)のように条件式の中で使うか、const result = a === 1;のように結果を変数に入れる必要があるよ。
✅ 直しかた
1. 比較結果を変数に代入するか、if文の条件に使う。 2. 代入したいなら=を使う（a = 1）。 3. 比較したいならif文やreturn文の中で使う。 4. ESLintのno-unused-expressionsルールで検出できる。
1. 比較結果を変数に代入するか、if文の条件に使う。 2. 代入したいなら=を使う（a = 1）。 3. 比較したいならif文やreturn文の中で使う。 4. ESLintのno-unused-expressionsルールで検出できる。
🔍 JavaScript Expected an assignment or function call ESLint 式 代入
詳しく見る → Uncaught RangeError: Invalid time value JavaScript
🚨 Invalid Date に対して日付メソッドを呼んでいる
toISOString()やtoLocaleDateString()を呼んだ行で「Invalid time value」と出る。本当の原因はその前——new Date()に渡した日付文字列が無効で、Invalid Date になっているんだ。
⚠️ よくある原因
new Date('無効な文字列') は例外を投げずに「Invalid Date」という特殊な値を返すよ。エラーになるのはその後、toISOString() などのメソッドを呼んだ瞬間。だからエラー行だけ見ても原因がわからないんだ。無効になりやすいのは、(1) '2024/1/1' のようなスラッシュ区切り（ブラウザによって解釈が違い、Safariでは無効になることがある）、(2) '2024-1-1' のようなゼロ埋めなし、(3) 存在しない日付（2月30日など）、(4) APIから来た値が undefined や空文字のままDateに渡っているケースだよ。
new Date('無効な文字列') は例外を投げずに「Invalid Date」という特殊な値を返すよ。エラーになるのはその後、toISOString() などのメソッドを呼んだ瞬間。だからエラー行だけ見ても原因がわからないんだ。無効になりやすいのは、(1) '2024/1/1' のようなスラッシュ区切り（ブラウザによって解釈が違い、Safariでは無効になることがある）、(2) '2024-1-1' のようなゼロ埋めなし、(3) 存在しない日付（2月30日など）、(4) APIから来た値が undefined や空文字のままDateに渡っているケースだよ。
✅ 直しかた
1. エラー行ではなく、new Date(...) に渡している値を console.log で確認する。 2. 日付文字列は 'YYYY-MM-DD'（ISO 8601）形式にする（例: '2024-01-01'）。 3. 数値で指定する方法も確実：new Date(2024, 0, 1)（月だけ0始まりに注意）。 4. 外部データを使う前に isNaN(date.getTime()) で有効な日付かチェックする。
1. エラー行ではなく、new Date(...) に渡している値を console.log で確認する。 2. 日付文字列は 'YYYY-MM-DD'（ISO 8601）形式にする（例: '2024-01-01'）。 3. 数値で指定する方法も確実：new Date(2024, 0, 1)（月だけ0始まりに注意）。 4. 外部データを使う前に isNaN(date.getTime()) で有効な日付かチェックする。
🔍 JavaScript Uncaught RangeError Invalid time value Invalid Date toISOString new Date
詳しく見る → async/awaitで待機されない JavaScript
⏳ awaitを付け忘れている
awaitを書いたのに非同期処理の結果を待たずに次の行が実行される。async/awaitの使い方で起きやすいよ。
⚠️ よくある原因
関数にasyncを付けていない、awaitを付け忘れている、またはforEachの中でawaitを使っているよ。forEachはコールバック関数の戻り値（Promise）を待たないから、中でawaitを書いても並列実行されてしまうんだ。順番に実行したいならfor...ofを使う必要があるよ。
関数にasyncを付けていない、awaitを付け忘れている、またはforEachの中でawaitを使っているよ。forEachはコールバック関数の戻り値（Promise）を待たないから、中でawaitを書いても並列実行されてしまうんだ。順番に実行したいならfor...ofを使う必要があるよ。
✅ 直しかた
1. 関数宣言にasyncキーワードが付いているか確認する。 2. 非同期関数の呼び出しにawaitが付いているか確認する。 3. forEach内のawaitはfor...ofループに書き換える。 4. 並列実行したい場合はPromise.all()を使う。
1. 関数宣言にasyncキーワードが付いているか確認する。 2. 非同期関数の呼び出しにawaitが付いているか確認する。 3. forEach内のawaitはfor...ofループに書き換える。 4. 並列実行したい場合はPromise.all()を使う。
🔍 JavaScript async await 待機されない forEach
詳しく見る → localStorageからnullが返る JavaScript
💾 キー名が一致していない
localStorage.getItem()で保存したはずのデータがnullになる。localStorageのキー管理で起きやすいよ。
⚠️ よくある原因
setItemとgetItemのキー名が一致していない、別のドメイン（オリジン）で保存したデータにアクセスしようとしている、またはブラウザの設定でストレージが無効になっているよ。localStorageはオリジンごとに分離されるから、localhost:3000とlocalhost:5173は別のストレージだよ。
setItemとgetItemのキー名が一致していない、別のドメイン（オリジン）で保存したデータにアクセスしようとしている、またはブラウザの設定でストレージが無効になっているよ。localStorageはオリジンごとに分離されるから、localhost:3000とlocalhost:5173は別のストレージだよ。
✅ 直しかた
1. setItem('key', value)とgetItem('key')のキー名が完全一致しているか確認する（大文字小文字も区別）。 2. 同じオリジン（URL）でアクセスしているか確認する。 3. 開発者ツールのApplicationタブ→Local Storageで保存されているデータを確認する。 4. JSON.stringify/parseでオブジェクトを保存・復元する。
1. setItem('key', value)とgetItem('key')のキー名が完全一致しているか確認する（大文字小文字も区別）。 2. 同じオリジン（URL）でアクセスしているか確認する。 3. 開発者ツールのApplicationタブ→Local Storageで保存されているデータを確認する。 4. JSON.stringify/parseでオブジェクトを保存・復元する。
🔍 JavaScript localStorage null getItem setItem キー
詳しく見る → addEventListenerが発火しない JavaScript
🔇 DOMの読み込み前にイベントを登録している
イベントリスナーを設定したのにクリックしても何も起きない。DOM要素の取得タイミングで起きやすいよ。
⚠️ よくある原因
scriptタグがhead内にあり、DOM要素が存在する前にaddEventListenerを実行しているよ。ブラウザはHTMLを上から順に読むから、scriptがheadにあると、bodyの要素がまだ作られていない状態でJSが実行されるんだ。存在しない要素にイベントは登録できないよ。
scriptタグがhead内にあり、DOM要素が存在する前にaddEventListenerを実行しているよ。ブラウザはHTMLを上から順に読むから、scriptがheadにあると、bodyの要素がまだ作られていない状態でJSが実行されるんだ。存在しない要素にイベントは登録できないよ。
✅ 直しかた
1. scriptタグを</body>の直前に移動する。 2. またはscriptタグにdefer属性を付ける。 3. DOMContentLoadedイベント内でリスナーを登録する。 4. console.log(element)でnullが返っていないか確認する。
1. scriptタグを</body>の直前に移動する。 2. またはscriptタグにdefer属性を付ける。 3. DOMContentLoadedイベント内でリスナーを登録する。 4. console.log(element)でnullが返っていないか確認する。
🔍 JavaScript addEventListener 発火しない DOMContentLoaded
詳しく見る → import文でエラーが出る JavaScript
📦 モジュール設定がされていない
import文を書いたら「Cannot use import statement outside a module」と表示される。モジュール設定で起きるよ。
⚠️ よくある原因
HTMLのscriptタグにtype="module"が指定されていない、またはNode.jsでpackage.jsonに"type":"module"がないよ。ブラウザやNode.jsはデフォルトでスクリプトを「クラシックモード」として扱い、import/export構文を認識しないんだ。モジュールモードに切り替える必要があるよ。
HTMLのscriptタグにtype="module"が指定されていない、またはNode.jsでpackage.jsonに"type":"module"がないよ。ブラウザやNode.jsはデフォルトでスクリプトを「クラシックモード」として扱い、import/export構文を認識しないんだ。モジュールモードに切り替える必要があるよ。
✅ 直しかた
1. ブラウザ: <script type="module" src="app.js"></script>とtype="module"を追加する。 2. Node.js: package.jsonに"type": "module"を追加する。 3. またはファイル拡張子を.mjsにする。 4. CommonJSのrequire()とESMのimportは混在できないので統一する。
1. ブラウザ: <script type="module" src="app.js"></script>とtype="module"を追加する。 2. Node.js: package.jsonに"type": "module"を追加する。 3. またはファイル拡張子を.mjsにする。 4. CommonJSのrequire()とESMのimportは混在できないので統一する。
🔍 JavaScript import module Cannot use import statement
詳しく見る → Uncaught TypeError: Assignment to constant variable. JavaScript
🟡 constで宣言した変数に再代入しようとした
変数に値を入れ直そうとしたら「Assignment to constant variable.」と出る。constで宣言した変数への再代入が原因だよ。値を変えたい変数はletで宣言しよう。
⚠️ よくある原因
constで宣言した変数に新しい値を代入しようとしているよ。constは「再代入不可」の宣言で、一度設定した値を別の値に変えられないんだ。count++ や count += 1 も再代入なのでエラーになるよ。見落としやすいのは、constで宣言した変数を関数の引数やループの中で書き換えようとしているケース。ちなみに、constで宣言したオブジェクトや配列の「中身」（プロパティや要素）は変更できるよ。禁止されているのは変数そのものへの再代入だけなんだ。
constで宣言した変数に新しい値を代入しようとしているよ。constは「再代入不可」の宣言で、一度設定した値を別の値に変えられないんだ。count++ や count += 1 も再代入なのでエラーになるよ。見落としやすいのは、constで宣言した変数を関数の引数やループの中で書き換えようとしているケース。ちなみに、constで宣言したオブジェクトや配列の「中身」（プロパティや要素）は変更できるよ。禁止されているのは変数そのものへの再代入だけなんだ。
✅ 直しかた
1. 値を変更する必要がある変数は let で宣言し直す（const count → let count）。 2. 配列やオブジェクトの中身を変えるだけなら const のままでOK（const arr = []; arr.push(1); は合法）。 3. 「基本はconst、再代入が必要なときだけlet」の使い分けにすると、意図しない上書きをエラーで検知できて安全だよ。
1. 値を変更する必要がある変数は let で宣言し直す（const count → let count）。 2. 配列やオブジェクトの中身を変えるだけなら const のままでOK（const arr = []; arr.push(1); は合法）。 3. 「基本はconst、再代入が必要なときだけlet」の使い分けにすると、意図しない上書きをエラーで検知できて安全だよ。
🔍 JavaScript Uncaught TypeError Assignment to constant variable const let 再代入
詳しく見る → fetch failed: NetworkError JavaScript
🟡 fetchでネットワークエラー
fetchでAPIを呼んだらNetworkErrorが出る。サーバー接続の問題で起きやすいよ。
⚠️ よくある原因
URLが間違っている、サーバーが起動していない、ネットワーク接続がない、またはCORSで拒否されているよ。fetchはネットワークレベルのエラー（サーバーに到達できない）の場合にNetworkErrorを投げるんだ。HTTPエラー（404等）とは異なり、そもそも通信できていない状態だよ。
URLが間違っている、サーバーが起動していない、ネットワーク接続がない、またはCORSで拒否されているよ。fetchはネットワークレベルのエラー（サーバーに到達できない）の場合にNetworkErrorを投げるんだ。HTTPエラー（404等）とは異なり、そもそも通信できていない状態だよ。
✅ 直しかた
1. URLが正しいか確認する（スペルミス、ポート番号）。 2. サーバーが起動しているか確認する。 3. ブラウザのDevToolsのNetworkタブでエラー詳細を見る。 4. try-catchでエラーをキャッチし、ユーザーに適切なメッセージを表示する。
1. URLが正しいか確認する（スペルミス、ポート番号）。 2. サーバーが起動しているか確認する。 3. ブラウザのDevToolsのNetworkタブでエラー詳細を見る。 4. try-catchでエラーをキャッチし、ユーザーに適切なメッセージを表示する。
🔍 fetch NetworkError CORS API サーバー
詳しく見る → SyntaxError: Unexpected token '<' JavaScript
🟡 JSONの代わりにHTMLが返ってきた
fetchのレスポンスをJSON.parseしたら「Unexpected token '<'」と出る。APIのURL間違いで起きやすいよ。
⚠️ よくある原因
APIのURLが間違っていて、HTMLページ（404ページやログインページなど）が返ってきているよ。JSON.parse()やresponse.json()はJSON文字列を期待しているのに、HTMLの<で始まる文字列が来るとパースに失敗するんだ。
APIのURLが間違っていて、HTMLページ（404ページやログインページなど）が返ってきているよ。JSON.parse()やresponse.json()はJSON文字列を期待しているのに、HTMLの<で始まる文字列が来るとパースに失敗するんだ。
✅ 直しかた
1. fetchのURLが正しいか確認する。 2. response.okをチェックしてからjson()を呼ぶ（if (!res.ok) throw new Error(...)）。 3. DevToolsのNetworkタブでレスポンスの中身を確認する。 4. Content-Typeヘッダーがapplication/jsonか確認する。
1. fetchのURLが正しいか確認する。 2. response.okをチェックしてからjson()を呼ぶ（if (!res.ok) throw new Error(...)）。 3. DevToolsのNetworkタブでレスポンスの中身を確認する。 4. Content-Typeヘッダーがapplication/jsonか確認する。
🔍 JSON parse Unexpected token HTML fetch
詳しく見る → Uncaught SyntaxError: Illegal return statement JavaScript
🚨 関数の外でreturnを使っている
returnを書いた行で「Illegal return statement」と表示される。returnが関数の外にあるときに起きるよ。波括弧の閉じ忘れが原因のことも多いよ。
⚠️ よくある原因
return文は関数の中でしか使えないよ。ファイルのトップレベル（関数の外）にreturnを書くとこのエラーになるんだ。見落としやすいのは波括弧{}の対応ミスで、関数の途中で}を1つ多く書いてしまうと、それ以降のreturnが「関数の外」扱いになるよ。if文だけで囲んだコードにreturnを書いたときにも起きるよ（if文は関数ではないからね）。
return文は関数の中でしか使えないよ。ファイルのトップレベル（関数の外）にreturnを書くとこのエラーになるんだ。見落としやすいのは波括弧{}の対応ミスで、関数の途中で}を1つ多く書いてしまうと、それ以降のreturnが「関数の外」扱いになるよ。if文だけで囲んだコードにreturnを書いたときにも起きるよ（if文は関数ではないからね）。
✅ 直しかた
1. エラー行のreturnが関数の中にあるか確認する。 2. 波括弧の対応をチェックする（VS Codeなら括弧をクリックすると対応相手が光る）。 3. トップレベルで処理を止めたいなら、returnではなくif/elseで分岐させるか、コード全体を関数に包んで呼び出す。 4. 値を外に渡したいなら変数に代入する。
1. エラー行のreturnが関数の中にあるか確認する。 2. 波括弧の対応をチェックする（VS Codeなら括弧をクリックすると対応相手が光る）。 3. トップレベルで処理を止めたいなら、returnではなくif/elseで分岐させるか、コード全体を関数に包んで呼び出す。 4. 値を外に渡したいなら変数に代入する。
🔍 JavaScript Uncaught SyntaxError Illegal return statement 関数の外 波括弧
詳しく見る → Uncaught TypeError: x.forEach is not a function JavaScript
🟡 forEachできない値に対してforEachしている
forEachを書いた行で「is not a function」と出る。forEachの手前にある値が配列じゃないのが原因だよ。getElementsByClassNameの戻り値やawaitのし忘れでよく起きるよ。
⚠️ よくある原因
forEachの手前の値が配列（またはNodeList）になっていないよ。よくあるのは3パターン。(1) getElementsByClassName() / getElementsByTagName() の戻り値はHTMLCollectionで、forEachが使えない（querySelectorAll() のNodeListなら使える）。 (2) fetchの結果に await を付け忘れて、配列ではなくPromiseが入っている。 (3) JSONの中身が配列ではなくオブジェクト（{}）になっている。Array.isArray(x) で配列かどうか確かめられるよ。
forEachの手前の値が配列（またはNodeList）になっていないよ。よくあるのは3パターン。(1) getElementsByClassName() / getElementsByTagName() の戻り値はHTMLCollectionで、forEachが使えない（querySelectorAll() のNodeListなら使える）。 (2) fetchの結果に await を付け忘れて、配列ではなくPromiseが入っている。 (3) JSONの中身が配列ではなくオブジェクト（{}）になっている。Array.isArray(x) で配列かどうか確かめられるよ。
✅ 直しかた
1. console.log(x) と console.log(Array.isArray(x)) で中身を確認する。 2. HTML要素の一覧なら querySelectorAll() に変えるか、Array.from(collection) で配列に変換する。 3. 非同期の結果なら await を付ける。 4. JSONがオブジェクトなら、配列が入っているプロパティ（例: data.items）を指定する。
1. console.log(x) と console.log(Array.isArray(x)) で中身を確認する。 2. HTML要素の一覧なら querySelectorAll() に変えるか、Array.from(collection) で配列に変換する。 3. 非同期の結果なら await を付ける。 4. JSONがオブジェクトなら、配列が入っているプロパティ（例: data.items）を指定する。
🔍 JavaScript Uncaught TypeError forEach is not a function NodeList HTMLCollection Array.from await
詳しく見る → 配列のコピーが元の配列も変わる JavaScript
📋 参照のコピーになっている
配列をコピーして変更したら元の配列も変わってしまった。参照の仕組みが原因だよ。
⚠️ よくある原因
const copy = original のように代入すると、配列の中身ではなく「参照（メモリ上の場所）」がコピーされるよ。copy と original は同じ配列を指しているので、片方を変更するともう片方も変わるんだ。
const copy = original のように代入すると、配列の中身ではなく「参照（メモリ上の場所）」がコピーされるよ。copy と original は同じ配列を指しているので、片方を変更するともう片方も変わるんだ。
✅ 直しかた
1. スプレッド構文でコピーする: const copy = [...original] 2. Array.from() を使う: const copy = Array.from(original) 3. ネストした配列は structuredClone() で深いコピーをする。
1. スプレッド構文でコピーする: const copy = [...original] 2. Array.from() を使う: const copy = Array.from(original) 3. ネストした配列は structuredClone() で深いコピーをする。
🔍 JavaScript 配列 コピー 元 変わる 参照
詳しく見る → 🛠️環境構築26件
VS Codeの拡張機能が動かない・反映されない 環境構築
🧩 再起動・有効化・追加設定のどれかが足りていない
拡張機能をインストールしたのに機能しない。原因のほとんどは「再起動していない」「無効になっている」「追加設定が必要」の3つだよ。
⚠️ よくある原因
よくある原因は4つ。(1) インストール後にVS Codeを再起動していない——言語サーバー系（Python等）やフォーマッター系は再起動するまで有効にならないことがあるよ。 (2) 拡張機能が無効になっている（グローバルでは有効でも、ワークスペース単位で無効になっていることがある）。 (3) 追加設定が必要——例えばPrettierは「既定のフォーマッター」に指定しないと保存時整形が動かない。 (4) 同じ機能の拡張が複数入っていて競合している。
よくある原因は4つ。(1) インストール後にVS Codeを再起動していない——言語サーバー系（Python等）やフォーマッター系は再起動するまで有効にならないことがあるよ。 (2) 拡張機能が無効になっている（グローバルでは有効でも、ワークスペース単位で無効になっていることがある）。 (3) 追加設定が必要——例えばPrettierは「既定のフォーマッター」に指定しないと保存時整形が動かない。 (4) 同じ機能の拡張が複数入っていて競合している。
✅ 直しかた
1. Ctrl+Shift+P →「Reload Window」でVS Codeを再読み込みする（まずこれ）。 2. サイドバーの拡張機能アイコンから対象を開き、「無効にする」表示＝有効、「有効にする」表示＝無効なので有効化する。 3. 拡張機能のページ（README）に追加設定の指示がないか確認する。 4. 同機能の拡張が複数入っていたら片方を無効にする。 5. 最後の手段として、アンインストール→VS Code再起動→再インストール。
1. Ctrl+Shift+P →「Reload Window」でVS Codeを再読み込みする（まずこれ）。 2. サイドバーの拡張機能アイコンから対象を開き、「無効にする」表示＝有効、「有効にする」表示＝無効なので有効化する。 3. 拡張機能のページ（README）に追加設定の指示がないか確認する。 4. 同機能の拡張が複数入っていたら片方を無効にする。 5. 最後の手段として、アンインストール→VS Code再起動→再インストール。
🔍 VS Code 拡張機能 動かない 反映されない 有効にならない 再起動 Prettier
詳しく見る → Live Serverが起動しない 環境構築
🖥️ Live Server 拡張機能が正しく動作していない
VS Code で「Go Live」ボタンを押しても、ブラウザが開かない。Live Serverを初めて使うときに起きやすいよ。
⚠️ よくある原因
HTMLファイルを開いていない状態で起動しようとしている、またはポート番号が他のアプリと競合しているよ。Live ServerはHTMLファイルが開かれている状態でないと起動できないんだ。また、デフォルトのポート5500が別のアプリに使われていると起動に失敗するよ。
HTMLファイルを開いていない状態で起動しようとしている、またはポート番号が他のアプリと競合しているよ。Live ServerはHTMLファイルが開かれている状態でないと起動できないんだ。また、デフォルトのポート5500が別のアプリに使われていると起動に失敗するよ。
✅ 直しかた
1. HTMLファイルを開いた状態で右下の「Go Live」をクリックする（フォルダごと開いていないと出ないことがある→「ファイル→フォルダーを開く」）。 2. 動かない場合はVS Codeを再起動する。 3. ポート競合（EADDRINUSE）の場合は設定で liveServer.settings.port を5501等に変更する。使用中プロセスは Mac: lsof -i :5500 / Windows: netstat -ano | findstr :5500 で確認できる。 4. 出力パネル（Output）でLive Serverのエラーメッセージを確認する。
1. HTMLファイルを開いた状態で右下の「Go Live」をクリックする（フォルダごと開いていないと出ないことがある→「ファイル→フォルダーを開く」）。 2. 動かない場合はVS Codeを再起動する。 3. ポート競合（EADDRINUSE）の場合は設定で liveServer.settings.port を5501等に変更する。使用中プロセスは Mac: lsof -i :5500 / Windows: netstat -ano | findstr :5500 で確認できる。 4. 出力パネル（Output）でLive Serverのエラーメッセージを確認する。
🔍 Live Server 起動しない Go Live ポート 競合 5500 EADDRINUSE VS Code
詳しく見る → Permission denied (publickey) 環境構築
🔑 SSH鍵が設定されていない
git pushすると「Permission denied (publickey)」と表示される。SSH設定で起きやすいよ。
⚠️ よくある原因
GitHubにSSH鍵が登録されていない、またはHTTPS URLを使うべきところでSSH URLを使っているよ。GitHubはpush時に「あなたは誰？」と認証するんだけど、SSH鍵が設定されていないと認証に失敗するんだ。
GitHubにSSH鍵が登録されていない、またはHTTPS URLを使うべきところでSSH URLを使っているよ。GitHubはpush時に「あなたは誰？」と認証するんだけど、SSH鍵が設定されていないと認証に失敗するんだ。
✅ 直しかた
1. リモートURLをHTTPSに変更する：git remote set-url origin https://github.com/ユーザー名/リポジトリ名.git 2. またはSSH鍵を生成してGitHubに登録する（ssh-keygen → GitHubのSettings→SSH keys）。 3. git remote -vで現在のURLを確認する。 4. SSH設定後は ssh -T [email protected] で接続テストできる（successfully authenticated と出ればOK）。
1. リモートURLをHTTPSに変更する：git remote set-url origin https://github.com/ユーザー名/リポジトリ名.git 2. またはSSH鍵を生成してGitHubに登録する（ssh-keygen → GitHubのSettings→SSH keys）。 3. git remote -vで現在のURLを確認する。 4. SSH設定後は ssh -T [email protected] で接続テストできる（successfully authenticated と出ればOK）。
🔍 Git Permission denied publickey SSH
詳しく見る → npm installが失敗する 環境構築
📦 パッケージのインストールでエラーが出る
npm installを実行するとエラーで止まる。Node.js環境のセットアップで起きやすいよ。
⚠️ よくある原因
Node.jsのバージョンが古い、ネットワークエラー、権限の問題、package.jsonの構文エラーなどが原因だよ。npmはpackage.jsonに書かれたパッケージをインターネットからダウンロードするから、ネットワーク接続やレジストリへのアクセスが必要なんだ。
Node.jsのバージョンが古い、ネットワークエラー、権限の問題、package.jsonの構文エラーなどが原因だよ。npmはpackage.jsonに書かれたパッケージをインターネットからダウンロードするから、ネットワーク接続やレジストリへのアクセスが必要なんだ。
✅ 直しかた
1. node -vでバージョンを確認し、最新LTSに更新する。 2. node_modulesとpackage-lock.jsonを削除してnpm installを再実行する。 3. ネットワーク接続を確認する。 4. 権限エラーならsudoを使わず、npmのグローバルディレクトリを変更する。
1. node -vでバージョンを確認し、最新LTSに更新する。 2. node_modulesとpackage-lock.jsonを削除してnpm installを再実行する。 3. ネットワーク接続を確認する。 4. 権限エラーならsudoを使わず、npmのグローバルディレクトリを変更する。
🔍 npm install 失敗 エラー node_modules
詳しく見る → node_modules削除後にエラーが出る 環境構築
📁 node_modulesを削除したが再インストールしていない
node_modulesフォルダを削除したらプロジェクトが動かなくなった。依存パッケージの管理で起きやすいよ。
⚠️ よくある原因
node_modulesを削除しただけでnpm installを実行していないよ。node_modulesにはプロジェクトが必要とする全ての依存パッケージが入っていて、これがないとimportやrequireが失敗するんだ。package.jsonがあれば再インストールで復元できるよ。
node_modulesを削除しただけでnpm installを実行していないよ。node_modulesにはプロジェクトが必要とする全ての依存パッケージが入っていて、これがないとimportやrequireが失敗するんだ。package.jsonがあれば再インストールで復元できるよ。
✅ 直しかた
1. プロジェクトフォルダでnpm installを実行する。 2. package.jsonがあれば依存パッケージが再インストールされる。 3. package-lock.jsonも削除した場合はバージョンが変わる可能性があるので注意。 4. エラーが出る場合はnpm cache clean --forceしてから再試行する。
1. プロジェクトフォルダでnpm installを実行する。 2. package.jsonがあれば依存パッケージが再インストールされる。 3. package-lock.jsonも削除した場合はバージョンが変わる可能性があるので注意。 4. エラーが出る場合はnpm cache clean --forceしてから再試行する。
🔍 node_modules 削除 エラー npm install 再インストール
詳しく見る → .gitignoreが効かない・無視されない 環境構築
📄 追跡済みファイルには効かない／パターンの書き方ミス
.gitignoreに書いたのにgit statusに出続ける。原因は「すでに追跡済みのファイルには効かない」というGitの仕様か、パターンの書き方ミスのどちらかだよ。
⚠️ よくある原因
原因は2系統。(1) 一度git add / commitしたファイルは、.gitignoreに追加しても追跡され続けるよ。.gitignoreが効くのは「まだ追跡されていないファイル」だけなんだ。 (2) パターンの書き方ミス——node_modules と書くべきところを /src/node_modules のような実情に合わないパスにしている、.gitignoreをリポジトリのルート以外に置いている、など。どちらが原因かは git check-ignore -v ファイル名 で確認できるよ（何も表示されなければ無視されていない）。
原因は2系統。(1) 一度git add / commitしたファイルは、.gitignoreに追加しても追跡され続けるよ。.gitignoreが効くのは「まだ追跡されていないファイル」だけなんだ。 (2) パターンの書き方ミス——node_modules と書くべきところを /src/node_modules のような実情に合わないパスにしている、.gitignoreをリポジトリのルート以外に置いている、など。どちらが原因かは git check-ignore -v ファイル名 で確認できるよ（何も表示されなければ無視されていない）。
✅ 直しかた
1. git check-ignore -v ファイル名 を実行して、無視ルールが効いているか確かめる。 2. 効いていてgit statusに出るなら追跡済みが原因。git rm --cached ファイル名（フォルダなら -r 付き）で追跡を解除し、git commitする（ファイル自体は消えない）。 3. 効いていないならパターンを見直す。フォルダ全体は node_modules/、特定拡張子は *.log、どの階層でもは **/secret.txt のように書く。 4. .gitignoreがリポジトリのルートにあるか確認する。
1. git check-ignore -v ファイル名 を実行して、無視ルールが効いているか確かめる。 2. 効いていてgit statusに出るなら追跡済みが原因。git rm --cached ファイル名（フォルダなら -r 付き）で追跡を解除し、git commitする（ファイル自体は消えない）。 3. 効いていないならパターンを見直す。フォルダ全体は node_modules/、特定拡張子は *.log、どの階層でもは **/secret.txt のように書く。 4. .gitignoreがリポジトリのルートにあるか確認する。
🔍 gitignore 効かない 無視されない 追跡済み git rm cached check-ignore node_modules
詳しく見る → Failed to save: Unable to write file (NoPermissions) 環境構築
💻 ファイルに書き込み権限がない
VS Codeでファイルを保存しようとすると権限エラーが出る。ファイルの権限設定で起きるよ。
⚠️ よくある原因
ファイルやフォルダに書き込み権限がない、または管理者権限が必要なディレクトリ（Program Files等）で作業しているよ。OSはファイルごとに読み取り/書き込み/実行の権限を管理していて、権限がないと保存できないんだ。
ファイルやフォルダに書き込み権限がない、または管理者権限が必要なディレクトリ（Program Files等）で作業しているよ。OSはファイルごとに読み取り/書き込み/実行の権限を管理していて、権限がないと保存できないんだ。
✅ 直しかた
1. プロジェクトフォルダをデスクトップやドキュメントなど、権限のある場所に移動する。 2. Mac/Linux: chmod 755 フォルダ名 で権限を変更する。 3. Windows: フォルダを右クリック→プロパティ→セキュリティで権限を確認する。 4. sudoやRunAsAdministratorは最終手段（セキュリティリスクあり）。
1. プロジェクトフォルダをデスクトップやドキュメントなど、権限のある場所に移動する。 2. Mac/Linux: chmod 755 フォルダ名 で権限を変更する。 3. Windows: フォルダを右クリック→プロパティ→セキュリティで権限を確認する。 4. sudoやRunAsAdministratorは最終手段（セキュリティリスクあり）。
🔍 VS Code 保存できない 権限 NoPermissions Unable to write file
詳しく見る → Live Serverで日本語ファイル名が文字化けする 環境構築
💻 ファイル名に日本語を使っている
ファイル名に日本語を使うとLive ServerのURLで問題が起きる。日本語ファイル名で起きるよ。
⚠️ よくある原因
ファイル名やフォルダ名に日本語を使うと、Live ServerのURLエンコードで問題が起きるよ。URLは基本的にASCII文字（半角英数字）しか使えないから、日本語はパーセントエンコーディング（%E3%81%82等）に変換されるんだ。この変換がうまくいかないとファイルが見つからなくなるよ。
ファイル名やフォルダ名に日本語を使うと、Live ServerのURLエンコードで問題が起きるよ。URLは基本的にASCII文字（半角英数字）しか使えないから、日本語はパーセントエンコーディング（%E3%81%82等）に変換されるんだ。この変換がうまくいかないとファイルが見つからなくなるよ。
✅ 直しかた
1. ファイル名・フォルダ名を半角英数字とハイフンのみに変更する。 2. 日本語フォルダ内にプロジェクトがある場合は、英語名のフォルダに移動する。 3. ユーザー名が日本語の場合はパスに影響するので、英語名のユーザーを作成することも検討する。
1. ファイル名・フォルダ名を半角英数字とハイフンのみに変更する。 2. 日本語フォルダ内にプロジェクトがある場合は、英語名のフォルダに移動する。 3. ユーザー名が日本語の場合はパスに影響するので、英語名のユーザーを作成することも検討する。
🔍 Live Server 日本語 ファイル名 文字化け 404
詳しく見る → GitHub Pagesで404が表示される 環境構築
💻 Pages設定またはindex.htmlの配置が間違っている
GitHub Pagesで公開したのに404エラーが表示される。GitHub Pagesの設定で起きやすいよ。
⚠️ よくある原因
リポジトリのSettings > PagesでSourceが設定されていない、またはindex.htmlがルートにないよ。GitHub Pagesは指定したブランチの指定したフォルダからファイルを配信するんだ。設定が正しくないとファイルが見つからず404になるよ。
リポジトリのSettings > PagesでSourceが設定されていない、またはindex.htmlがルートにないよ。GitHub Pagesは指定したブランチの指定したフォルダからファイルを配信するんだ。設定が正しくないとファイルが見つからず404になるよ。
✅ 直しかた
1. Settings→Pages→Sourceで正しいブランチ（main）とフォルダ（/ root）を選択する。 2. index.htmlがリポジトリのルートに存在することを確認する。 3. 変更をpushしてから数分待つ（反映に時間がかかる）。 4. URLが https://ユーザー名.github.io/リポジトリ名/ になっているか確認する。
1. Settings→Pages→Sourceで正しいブランチ（main）とフォルダ（/ root）を選択する。 2. index.htmlがリポジトリのルートに存在することを確認する。 3. 変更をpushしてから数分待つ（反映に時間がかかる）。 4. URLが https://ユーザー名.github.io/リポジトリ名/ になっているか確認する。
🔍 GitHub Pages 404 公開できない 表示されない 設定 index.html
詳しく見る → ERR_CONNECTION_REFUSED 環境構築
🌐 接続が拒否された
ブラウザで「ERR_CONNECTION_REFUSED」と表示されてページが開けない。サーバー接続で起きやすいよ。
⚠️ よくある原因
アクセス先のサーバーが起動していない、またはポート番号が間違っているよ。ブラウザは指定されたIPアドレスとポートに接続を試みるけど、そこでサーバーが待ち受けていないと「接続拒否」になるんだ。開発サーバーの起動忘れが最も多い原因だよ。
アクセス先のサーバーが起動していない、またはポート番号が間違っているよ。ブラウザは指定されたIPアドレスとポートに接続を試みるけど、そこでサーバーが待ち受けていないと「接続拒否」になるんだ。開発サーバーの起動忘れが最も多い原因だよ。
✅ 直しかた
1. 開発サーバーが起動しているか確認する（npm run dev等）。 2. URLのポート番号が正しいか確認する（localhost:3000等）。 3. ファイアウォールがブロックしていないか確認する。 4. サーバーのログでエラーが出ていないか確認する。
1. 開発サーバーが起動しているか確認する（npm run dev等）。 2. URLのポート番号が正しいか確認する（localhost:3000等）。 3. ファイアウォールがブロックしていないか確認する。 4. サーバーのログでエラーが出ていないか確認する。
🔍 ERR_CONNECTION_REFUSED サーバー 起動 ポート
詳しく見る → Permission denied 環境構築
🔒 権限が不足している
ファイル操作やnpmコマンドで「Permission denied」と表示される。権限の問題で起きるよ。
⚠️ よくある原因
ファイルやフォルダへのアクセス権限がないよ。過去にsudoでnpm installした結果、node_modulesの所有者がrootに変わってしまったケースが多いんだ。また、システムディレクトリ（/usr/local等）への書き込みは管理者権限が必要だよ。
ファイルやフォルダへのアクセス権限がないよ。過去にsudoでnpm installした結果、node_modulesの所有者がrootに変わってしまったケースが多いんだ。また、システムディレクトリ（/usr/local等）への書き込みは管理者権限が必要だよ。
✅ 直しかた
1. sudo chown -R $(whoami) node_modules で権限を修正する。 2. npm installにsudoは使わない（根本原因）。 3. npmのグローバルディレクトリを変更する：npm config set prefix ~/.npm-global。 4. nvmを使えばグローバルインストールの権限問題が解消される。
1. sudo chown -R $(whoami) node_modules で権限を修正する。 2. npm installにsudoは使わない（根本原因）。 3. npmのグローバルディレクトリを変更する：npm config set prefix ~/.npm-global。 4. nvmを使えばグローバルインストールの権限問題が解消される。
🔍 Permission denied 権限 sudo npm EACCES ターミナル
詳しく見る → refusing to merge unrelated histories 環境構築
🔀 関連のない履歴をマージしようとしている
git pullで「refusing to merge unrelated histories」と表示される。新規リポジトリの設定で起きやすいよ。
⚠️ よくある原因
ローカルとリモートのリポジトリに共通の祖先コミットがないよ。GitHubで新規リポジトリを作るときにREADMEを追加すると、ローカルのgit initとは別の履歴が作られるんだ。Gitは関連のない2つの履歴をマージすることをデフォルトで拒否するよ。
ローカルとリモートのリポジトリに共通の祖先コミットがないよ。GitHubで新規リポジトリを作るときにREADMEを追加すると、ローカルのgit initとは別の履歴が作られるんだ。Gitは関連のない2つの履歴をマージすることをデフォルトで拒否するよ。
✅ 直しかた
1. git pull origin main --allow-unrelated-histories を実行する。 2. コンフリクトがあれば解決してcommitする。 3. 今後は空のリポジトリ（README追加なし）を作ってからpushするのがおすすめ。
1. git pull origin main --allow-unrelated-histories を実行する。 2. コンフリクトがあれば解決してcommitする。 3. 今後は空のリポジトリ（README追加なし）を作ってからpushするのがおすすめ。
🔍 Git refusing merge unrelated histories pull
詳しく見る → Your branch is behind 環境構築
🔀 リモートに新しいコミットがある
git statusで「Your branch is behind」と表示される。リモートに新しい変更があるときに起きるよ。
⚠️ よくある原因
他の人がリモートにpushした変更がローカルに取り込まれていないよ。ローカルのブランチがリモートより古い状態で、最新の変更を取り込む必要があるんだ。チーム開発では頻繁に起きる正常な状態だよ。
他の人がリモートにpushした変更がローカルに取り込まれていないよ。ローカルのブランチがリモートより古い状態で、最新の変更を取り込む必要があるんだ。チーム開発では頻繁に起きる正常な状態だよ。
✅ 直しかた
1. git pullで最新の変更を取り込む。 2. コンフリクトが起きたら手動で解決してcommitする。 3. 定期的にgit pullして最新を保つ習慣をつける。
1. git pullで最新の変更を取り込む。 2. コンフリクトが起きたら手動で解決してcommitする。 3. 定期的にgit pullして最新を保つ習慣をつける。
🔍 Git branch behind pull リモート 遅れている
詳しく見る → error: pathspec '...' did not match any file(s) known to git 環境構築
🔀 指定したファイル・ブランチが見つからない
git commit / checkout / add で「pathspec did not match any file(s)」と表示される。コミットメッセージの引用符忘れ、ファイル名・ブランチ名のタイポで起きるよ。
⚠️ よくある原因
いちばん多いのは git commit -m のメッセージを引用符（""）で囲み忘れたケースだよ。「git commit -m Fix bug」と書くと、Gitは「Fix」をメッセージ、「bug」をファイル名だと解釈して、bugというファイルを探しに行ってしまうんだ。ほかには、ファイル名・ブランチ名のタイポ（大文字小文字の違いも区別される）、.gitignoreで除外されているファイルの指定、git fetchしていないリモートブランチへのcheckoutでも起きるよ。
いちばん多いのは git commit -m のメッセージを引用符（""）で囲み忘れたケースだよ。「git commit -m Fix bug」と書くと、Gitは「Fix」をメッセージ、「bug」をファイル名だと解釈して、bugというファイルを探しに行ってしまうんだ。ほかには、ファイル名・ブランチ名のタイポ（大文字小文字の違いも区別される）、.gitignoreで除外されているファイルの指定、git fetchしていないリモートブランチへのcheckoutでも起きるよ。
✅ 直しかた
1. git commit のときは メッセージを必ず "" で囲む（git commit -m "Fix bug"）。 2. ファイル名・ブランチ名のスペルを確認する（大文字小文字も）。 3. git status で追跡対象のファイル名を確認する。 4. git branch -a でブランチ一覧を確認し、リモートブランチなら先に git fetch する。 5. .gitignore で除外されていないか確認する。
1. git commit のときは メッセージを必ず "" で囲む（git commit -m "Fix bug"）。 2. ファイル名・ブランチ名のスペルを確認する（大文字小文字も）。 3. git status で追跡対象のファイル名を確認する。 4. git branch -a でブランチ一覧を確認し、リモートブランチなら先に git fetch する。 5. .gitignore で除外されていないか確認する。
🔍 Git pathspec did not match any files commit checkout ファイル ブランチ 引用符
詳しく見る → PermissionError: [Errno 13] Permission denied (Python) 環境構築
🐍 ファイルへのアクセス権限がない
Pythonのopen()などで「PermissionError: [Errno 13] Permission denied」が出る。ファイルの権限不足のほか、ファイルを別のアプリで開いたままにしているときにも起きるよ。
⚠️ よくある原因
ファイルやフォルダへのアクセス権限がないよ。よくあるのは、(1) WindowsでCSVをExcelで開いたままPythonから書き込もうとした、(2) C:\Program Files など管理者権限が必要な場所に書き込もうとした、(3) open()に指定したパスがファイルではなくフォルダだった、の3パターンだよ。情報Ⅰのデータ分析でCSVを扱うときに(1)で遭遇する人が多いんだ。
ファイルやフォルダへのアクセス権限がないよ。よくあるのは、(1) WindowsでCSVをExcelで開いたままPythonから書き込もうとした、(2) C:\Program Files など管理者権限が必要な場所に書き込もうとした、(3) open()に指定したパスがファイルではなくフォルダだった、の3パターンだよ。情報Ⅰのデータ分析でCSVを扱うときに(1)で遭遇する人が多いんだ。
✅ 直しかた
1. 対象ファイルをExcelなど他のアプリで開いていたら閉じる。 2. 書き込み先をデスクトップやドキュメントなど自分のフォルダに変える。 3. open()のパスがフォルダになっていないか確認する（ファイル名まで書く）。 4. Mac/Linuxなら ls -la で権限を確認し、必要なら chmod で変更する。
1. 対象ファイルをExcelなど他のアプリで開いていたら閉じる。 2. 書き込み先をデスクトップやドキュメントなど自分のフォルダに変える。 3. open()のパスがフォルダになっていないか確認する（ファイル名まで書く）。 4. Mac/Linuxなら ls -la で権限を確認し、必要なら chmod で変更する。
🔍 Python PermissionError Errno 13 Permission denied ファイル 権限 CSV Excel
詳しく見る → Parsing error: Unexpected token (ESLint) 環境構築
🔍 ESLintがコードを解析できない
ESLintに「Parsing error: Unexpected token」と言われる。コードのバグではなく、ESLint側の設定（パーサーや対応する構文のバージョン）が追いついていないのが原因のことが多いよ。
⚠️ よくある原因
ESLintのパーサー設定が、書いているコードの構文に対応していないよ。よくあるのは3つ。(1) TypeScript（.ts/.tsx）やJSXを、デフォルトのJavaScript用パーサーで解析しようとしている。 (2) 設定のecmaVersionが古くて、?.（オプショナルチェーン）など新しい構文を知らない。 (3) import/exportを使っているのにsourceTypeがmoduleになっていない。つまり「コードが間違っている」のではなく「ESLintの設定がコードに追いついていない」ケースが大半だよ。ただし本当に構文ミス（括弧の閉じ忘れ等）の場合もあるので、エラー位置のコードも一応確認しよう。
ESLintのパーサー設定が、書いているコードの構文に対応していないよ。よくあるのは3つ。(1) TypeScript（.ts/.tsx）やJSXを、デフォルトのJavaScript用パーサーで解析しようとしている。 (2) 設定のecmaVersionが古くて、?.（オプショナルチェーン）など新しい構文を知らない。 (3) import/exportを使っているのにsourceTypeがmoduleになっていない。つまり「コードが間違っている」のではなく「ESLintの設定がコードに追いついていない」ケースが大半だよ。ただし本当に構文ミス（括弧の閉じ忘れ等）の場合もあるので、エラー位置のコードも一応確認しよう。
✅ 直しかた
1. TypeScriptなら @typescript-eslint/parser をインストールし（npm install -D @typescript-eslint/parser）、設定の parser に指定する。 2. JSXなら parserOptions に ecmaFeatures: { jsx: true } を追加する。 3. 新しい構文でエラーになるなら parserOptions の ecmaVersion を "latest" にする。 4. import/export を使うなら sourceType: "module" を設定する。 5. eslint.config.js（flat config）と .eslintrc では書き方が違うので、自分のプロジェクトがどちらかを確認して公式ドキュメントに従う。
1. TypeScriptなら @typescript-eslint/parser をインストールし（npm install -D @typescript-eslint/parser）、設定の parser に指定する。 2. JSXなら parserOptions に ecmaFeatures: { jsx: true } を追加する。 3. 新しい構文でエラーになるなら parserOptions の ecmaVersion を "latest" にする。 4. import/export を使うなら sourceType: "module" を設定する。 5. eslint.config.js（flat config）と .eslintrc では書き方が違うので、自分のプロジェクトがどちらかを確認して公式ドキュメントに従う。
🔍 ESLint Parsing error Unexpected token parser TypeScript JSX ecmaVersion sourceType
詳しく見る → ERR_CERT_DATE_INVALID 環境構築
🔒 証明書の日付が無効
ブラウザに「ERR_CERT_DATE_INVALID」と表示される。証明書の日付問題で起きるよ。
⚠️ よくある原因
SSL証明書の有効期限が切れている、またはPCの時計がずれているよ。ブラウザは証明書の有効期間とPCの現在時刻を比較して検証するんだ。PCの時計が大幅にずれていると、有効な証明書でも「期限切れ」と判定されることがあるよ。
SSL証明書の有効期限が切れている、またはPCの時計がずれているよ。ブラウザは証明書の有効期間とPCの現在時刻を比較して検証するんだ。PCの時計が大幅にずれていると、有効な証明書でも「期限切れ」と判定されることがあるよ。
✅ 直しかた
1. PCの日時設定を確認する（自動設定が有効か）。 2. 証明書が期限切れなら更新する。 3. 開発環境ならhttp://localhostを使う（証明書不要）。 4. 開発用にmkcertでローカル証明書を作成する方法もある。
1. PCの日時設定を確認する（自動設定が有効か）。 2. 証明書が期限切れなら更新する。 3. 開発環境ならhttp://localhostを使う（証明書不要）。 4. 開発用にmkcertでローカル証明書を作成する方法もある。
🔍 ERR_CERT_DATE_INVALID SSL 証明書 日付 時計
詳しく見る → ETIMEDOUT 環境構築
🌐 接続タイムアウト
ネットワーク接続で「ETIMEDOUT」が出る。接続タイムアウトで起きるよ。
⚠️ よくある原因
サーバーが応答しない、ファイアウォールでブロックされている、またはネットワーク障害だよ。クライアントは接続を試みるけど、一定時間内にサーバーから応答がないとタイムアウトエラーを返すんだ。サーバーがダウンしている場合やネットワーク経路に問題がある場合に発生するよ。
サーバーが応答しない、ファイアウォールでブロックされている、またはネットワーク障害だよ。クライアントは接続を試みるけど、一定時間内にサーバーから応答がないとタイムアウトエラーを返すんだ。サーバーがダウンしている場合やネットワーク経路に問題がある場合に発生するよ。
✅ 直しかた
1. サーバーの稼働状態を確認する（ping、curl等）。 2. ファイアウォール設定を確認する（ポートが開いているか）。 3. タイムアウト値を増やす（接続先が遠い場合）。 4. VPN接続が必要な場合は接続状態を確認する。
1. サーバーの稼働状態を確認する（ping、curl等）。 2. ファイアウォール設定を確認する（ポートが開いているか）。 3. タイムアウト値を増やす（接続先が遠い場合）。 4. VPN接続が必要な場合は接続状態を確認する。
🔍 ETIMEDOUT timeout ネットワーク 接続 ファイアウォール
詳しく見る → 環境変数が読み込めない（.env） 環境構築
💻 .envファイルの変数がundefined
process.env.XXXがundefinedになる。プロジェクトを初めてセットアップするときや、フロントエンドで環境変数を使おうとしたときに起きやすいよ。
⚠️ よくある原因
dotenvの読み込みが実行されていない、またはフロントエンドでprocess.envは使えないよ。環境変数とは「アプリの設定値（APIキー等）をコードの外に保存する仕組み」のことだよ。Node.jsではdotenv.config()を呼ばないと.envファイルが読み込まれないんだ。また、ブラウザ環境ではprocess.envは存在しないから、フレームワーク固有の方法（プレフィックス付き変数名）を使う必要があるよ。
dotenvの読み込みが実行されていない、またはフロントエンドでprocess.envは使えないよ。環境変数とは「アプリの設定値（APIキー等）をコードの外に保存する仕組み」のことだよ。Node.jsではdotenv.config()を呼ばないと.envファイルが読み込まれないんだ。また、ブラウザ環境ではprocess.envは存在しないから、フレームワーク固有の方法（プレフィックス付き変数名）を使う必要があるよ。
✅ 直しかた
1. Node.js: ファイルの先頭で require('dotenv').config() を呼ぶ（これで.envが読み込まれる）。 2. Vite: import.meta.env.VITE_変数名 を使う（VITE_ プレフィックスが必須）。 3. Next.js: NEXT_PUBLIC_ プレフィックスを付ける（ブラウザで使う場合）。 4. .env ファイルがプロジェクトルート（package.jsonと同じ場所）にあるか確認する。
1. Node.js: ファイルの先頭で require('dotenv').config() を呼ぶ（これで.envが読み込まれる）。 2. Vite: import.meta.env.VITE_変数名 を使う（VITE_ プレフィックスが必須）。 3. Next.js: NEXT_PUBLIC_ プレフィックスを付ける（ブラウザで使う場合）。 4. .env ファイルがプロジェクトルート（package.jsonと同じ場所）にあるか確認する。
🔍 .env 環境変数 undefined dotenv process.env
詳しく見る → HEAD detached at 環境構築
🔓 HEADが切り離された状態（detached HEAD）
ブランチではなく特定のコミットを直接見ている状態。新しいブランチを作れば安全だよ。
⚠️ よくある原因
git checkout でコミットハッシュやタグを直接指定したよ。この状態でコミットすると、どのブランチにも属さない「迷子のコミット」になってしまうんだ。
git checkout でコミットハッシュやタグを直接指定したよ。この状態でコミットすると、どのブランチにも属さない「迷子のコミット」になってしまうんだ。
✅ 直しかた
1. git switch -c 新しいブランチ名 で新しいブランチを作る。 2. 元のブランチに戻るなら git switch main。 3. 変更を保存したい場合は必ずブランチを作ってからコミットする。 4. すでにこの状態でコミットしてしまい見失った場合は、git reflog で迷子のコミットを見つけて git switch -c 救出ブランチ名 コミットID で回収できるよ。
1. git switch -c 新しいブランチ名 で新しいブランチを作る。 2. 元のブランチに戻るなら git switch main。 3. 変更を保存したい場合は必ずブランチを作ってからコミットする。 4. すでにこの状態でコミットしてしまい見失った場合は、git reflog で迷子のコミットを見つけて git switch -c 救出ブランチ名 コミットID で回収できるよ。
🔍 Git detached HEAD ブランチ 切り離し checkout
詳しく見る → error: failed to push some refs 環境構築
⬆️ pushが拒否された
リモートに自分が持っていない変更がある。先にpullしてからpushしよう。
⚠️ よくある原因
リモートリポジトリに、ローカルにない新しいコミットがあるよ。よくあるのは2パターン。(1) リポジトリ作成時に『Add a README file』にチェックを入れたため、リモートに自分が持っていないコミットが最初からある。 (2) チーム開発で他の人が先にpushした。どちらもGitが「上書き事故を防ぐために、まず取り込んで」と言っている状態だよ。
リモートリポジトリに、ローカルにない新しいコミットがあるよ。よくあるのは2パターン。(1) リポジトリ作成時に『Add a README file』にチェックを入れたため、リモートに自分が持っていないコミットが最初からある。 (2) チーム開発で他の人が先にpushした。どちらもGitが「上書き事故を防ぐために、まず取り込んで」と言っている状態だよ。
✅ 直しかた
1. git pull --rebase origin main で最新を取り込む（履歴が一直線になる。通常のgit pullでもOK）。 2. コンフリクトが出たら該当ファイルを直して git add → git rebase --continue（pullの場合はcommit）。 3. もう一度 git push origin main。 4. 作りたてのリポジトリでREADMEだけが原因なら git pull origin main --allow-unrelated-histories で履歴を結合できるよ。
1. git pull --rebase origin main で最新を取り込む（履歴が一直線になる。通常のgit pullでもOK）。 2. コンフリクトが出たら該当ファイルを直して git add → git rebase --continue（pullの場合はcommit）。 3. もう一度 git push origin main。 4. 作りたてのリポジトリでREADMEだけが原因なら git pull origin main --allow-unrelated-histories で履歴を結合できるよ。
🔍 Git error failed to push some refs rejected push できない リモート README pull rebase
詳しく見る → fatal: refusing to merge unrelated histories 環境構築
🚫 無関係な履歴のマージが拒否された
共通の祖先がない2つのリポジトリをマージしようとした。--allow-unrelated-historiesで許可できるよ。
⚠️ よくある原因
GitHubでREADME付きのリポジトリを作り、ローカルでもgit initして別々に履歴を作ってしまったよ。2つの履歴に共通の起点がないので、Gitが「これは別物では？」と警告するんだ。
GitHubでREADME付きのリポジトリを作り、ローカルでもgit initして別々に履歴を作ってしまったよ。2つの履歴に共通の起点がないので、Gitが「これは別物では？」と警告するんだ。
✅ 直しかた
1. git pull origin main --allow-unrelated-histories で強制マージする。 2. コンフリクトがあれば解決する。 3. 今後はGitHubでリポジトリを作るときREADMEを追加しないか、cloneしてから作業する。
1. git pull origin main --allow-unrelated-histories で強制マージする。 2. コンフリクトがあれば解決する。 3. 今後はGitHubでリポジトリを作るときREADMEを追加しないか、cloneしてから作業する。
🔍 Git unrelated histories マージ 拒否 allow 無関係
詳しく見る → error: Your local changes would be overwritten by checkout / merge 環境構築
💾 コミットしていない変更が消えるのをGitが防いでいる
ブランチ切り替えやgit pullで「Your local changes would be overwritten」と止められる。これはエラーというより、コミットしていない変更が消えるのをGitが守ってくれている状態だよ。
⚠️ よくある原因
コミットしていない変更があるファイルを、操作で上書きしそうになっているよ。「by checkout」ならブランチ切り替え時、「by merge」ならgit pullやmerge時に出るんだ。どちらも意味は同じで、「今の作業中の変更をどうするか決めてから操作してね」というGitからの確認だよ。チーム開発でgit pullしたら止められた、というのが定番のパターン。
コミットしていない変更があるファイルを、操作で上書きしそうになっているよ。「by checkout」ならブランチ切り替え時、「by merge」ならgit pullやmerge時に出るんだ。どちらも意味は同じで、「今の作業中の変更をどうするか決めてから操作してね」というGitからの確認だよ。チーム開発でgit pullしたら止められた、というのが定番のパターン。
✅ 直しかた
1. 変更を残したいなら git stash で一時退避 → 切り替えやpullを実行 → git stash pop で復元する。 2. 区切りがいいなら git add . && git commit で確定してから操作する。 3. 変更を捨てていいなら git restore ファイル名（全部捨てるなら git restore .）。捨てた変更は戻せないので注意。
1. 変更を残したいなら git stash で一時退避 → 切り替えやpullを実行 → git stash pop で復元する。 2. 区切りがいいなら git add . && git commit で確定してから操作する。 3. 変更を捨てていいなら git restore ファイル名（全部捨てるなら git restore .）。捨てた変更は戻せないので注意。
🔍 Git Your local changes would be overwritten by checkout merge pull stash commit ブランチ切り替え
詳しく見る → error: pathspec did not match any files 環境構築
📄 指定したファイルが見つからない
git addやcheckoutで指定したファイル名が間違っている。パスとスペルを確認しよう。
⚠️ よくある原因
指定したファイル名やパスが存在しないよ。スペルミス、大文字/小文字の間違い、ファイルがまだ作成されていない、のどれかだよ。
指定したファイル名やパスが存在しないよ。スペルミス、大文字/小文字の間違い、ファイルがまだ作成されていない、のどれかだよ。
✅ 直しかた
1. ファイル名のスペルを確認する。 2. ls でファイルの存在を確認する。 3. git status で追跡対象のファイルを確認する。 4. 大文字/小文字を正確に合わせる。
1. ファイル名のスペルを確認する。 2. ls でファイルの存在を確認する。 3. git status で追跡対象のファイルを確認する。 4. 大文字/小文字を正確に合わせる。
🔍 Git pathspec did not match ファイル 見つからない パス
詳しく見る → warning: LF will be replaced by CRLF 環境構築
↩️ 改行コードが自動変換される警告
WindowsとMac/Linuxで改行コードが違う。設定で自動変換を制御できるよ。
⚠️ よくある原因
Windowsは改行にCRLF（\r\n）、Mac/LinuxはLF（\n）を使うよ。Gitがこの違いを自動変換しようとして警告を出しているんだ。チーム開発で混在すると差分が大量に出ることがあるよ。
Windowsは改行にCRLF（\r\n）、Mac/LinuxはLF（\n）を使うよ。Gitがこの違いを自動変換しようとして警告を出しているんだ。チーム開発で混在すると差分が大量に出ることがあるよ。
✅ 直しかた
1. .gitattributes ファイルで改行コードを統一する。 2. git config core.autocrlf を設定する（Windowsはtrue、Mac/Linuxはinput）。 3. 警告自体は無害なので無視してもOK。
1. .gitattributes ファイルで改行コードを統一する。 2. git config core.autocrlf を設定する（Windowsはtrue、Mac/Linuxはinput）。 3. 警告自体は無害なので無視してもOK。
🔍 Git LF CRLF 改行コード 警告 Windows Mac autocrlf
詳しく見る → fatal: unable to access 環境構築
🌐 リモートリポジトリに接続できない
GitHubに接続できない。ネットワーク、URL、認証情報を確認しよう。
⚠️ よくある原因
インターネットに接続されていない、リポジトリのURLが間違っている、認証トークンが期限切れ、プロキシの設定が必要、のどれかだよ。
インターネットに接続されていない、リポジトリのURLが間違っている、認証トークンが期限切れ、プロキシの設定が必要、のどれかだよ。
✅ 直しかた
1. インターネット接続を確認する。 2. git remote -v でURLが正しいか確認する。 3. GitHubのPersonal Access Tokenを再生成する。 4. HTTPSではなくSSHを試す。
1. インターネット接続を確認する。 2. git remote -v でURLが正しいか確認する。 3. GitHubのPersonal Access Tokenを再生成する。 4. HTTPSではなくSSHを試す。
🔍 Git fatal unable to access 接続 ネットワーク 認証 token
詳しく見る → エラーメッセージを貼り付けて自動診断
エラーメッセージをそのままコピーして貼り付けると、原因と直し方を自動で絞り込みます。
🙋
解決しなかった場合
1. エラーメッセージをそのままコピーして検索する
2.「JavaScript ○○エラー 解決」のように日本語で検索する
3. コードを少しずつ削って、どこでエラーが起きているか絞り込む
2.「JavaScript ○○エラー 解決」のように日本語で検索する
3. コードを少しずつ削って、どこでエラーが起きているか絞り込む