エラー辞典
初心者がよく遭遇するエラーと対処法をまとめました。症状に合うものを探して、対処法を試してみてください。
⌘K
103件 / 4カテゴリ / 随時追加中 プログラミング初心者がよく遭遇するエラーを103件以上収録しています。HTML・CSS・JavaScriptの文法エラーから、Git・npm・デプロイのトラブルまで、症状・原因・直し方をコード例付きで解説しています。エラーメッセージをそのまま検索バーに貼り付けて、解決方法を見つけてください。
🌐 HTML 42件
HTMLタグの閉じ忘れ・属性の書き間違い・パスの指定ミスなど、ページが正しく表示されないときのエラーと対処法
⚡ JavaScript 29件
SyntaxError・ReferenceError・TypeErrorなど、コンソールに表示されるエラーメッセージの原因と直し方
📦 Git 17件
コミット・プッシュ・マージで発生するエラーと、リポジトリのトラブル対処法
🟢 Node.js / npm 5件
パッケージのインストール失敗・バージョン不一致・環境変数のエラーと対処法
🛠️ ツール 6件
VS Code・Live Server・ESLintなど開発ツールのエラーと設定方法
🌐HTML42件
スタイルが反映されない 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はブラウザが強くキャッシュするため、変更が反映されにくいんだ。
<link rel="icon">タグのhrefパスが間違っている、ファイル形式がブラウザに対応していない、またはキャッシュが残っていて古い状態が表示されているよ。faviconはブラウザが強くキャッシュするため、変更が反映されにくいんだ。
✅ 直しかた
1. <head>内に<link rel="icon" href="/favicon.ico">を追加する。 2. ファイルがルートディレクトリ（/）に置かれているか確認する。 3. PNG形式ならtype="image/png"を追加する。 4. キャッシュが原因の場合はブラウザのキャッシュをクリアするか、href="favicon.ico?v=2"のようにクエリパラメータを付けて強制更新する。
1. <head>内に<link rel="icon" href="/favicon.ico">を追加する。 2. ファイルがルートディレクトリ（/）に置かれているか確認する。 3. PNG形式ならtype="image/png"を追加する。 4. キャッシュが原因の場合はブラウザのキャッシュをクリアするか、href="favicon.ico?v=2"のようにクエリパラメータを付けて強制更新する。
🔍 HTML favicon 表示されない アイコン link rel
詳しく見る → 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
詳しく見る → フォームバリデーションが効かない HTML
📝 formタグの外にinputがある
required属性を付けたのに空欄で送信できてしまう。フォームバリデーションが効かないときに起きるよ。
⚠️ よくある原因
HTMLのフォームバリデーション（required等）が効かない原因は主に2つ。1つはinput要素がform要素の外にある場合、もう1つはJavaScriptでsubmitイベントにpreventDefault()が呼ばれていてブラウザのバリデーションが発動しない場合だよ。formタグにnovalidate属性が付いている場合もバリデーションが無効になるよ。
HTMLのフォームバリデーション（required等）が効かない原因は主に2つ。1つはinput要素がform要素の外にある場合、もう1つはJavaScriptでsubmitイベントにpreventDefault()が呼ばれていてブラウザのバリデーションが発動しない場合だよ。formタグにnovalidate属性が付いている場合もバリデーションが無効になるよ。
✅ 直しかた
1. input要素が<form>タグの中にあるか確認する。 2. formタグにnovalidate属性が付いていないか確認する。 3. JavaScriptでフォーム送信を制御している場合はform.checkValidity()を呼んでバリデーションを手動実行する。 4. reportValidity()を使うとエラーメッセージも表示されるよ。
1. input要素が<form>タグの中にあるか確認する。 2. formタグにnovalidate属性が付いていないか確認する。 3. JavaScriptでフォーム送信を制御している場合はform.checkValidity()を呼んでバリデーションを手動実行する。 4. reportValidity()を使うとエラーメッセージも表示されるよ。
🔍 HTML form required バリデーション 効かない 空欄 送信
詳しく見る → 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 開閉しない クリック 折りたたみ
詳しく見る → フォームの送信ボタンが反応しない HTML
📄 formのsubmitが動作しない
フォームの送信ボタンを押しても何も起きない。buttonのtype属性やformとの関係に問題があるときに起きるよ。
⚠️ よくある原因
buttonのtype属性が"submit"ではなく"button"になっている、またはボタンがform要素の外に配置されているよ。formの外にあるボタンはフォーム送信をトリガーできないんだ。
buttonのtype属性が"submit"ではなく"button"になっている、またはボタンがform要素の外に配置されているよ。formの外にあるボタンはフォーム送信をトリガーできないんだ。
✅ 直しかた
1. <button type="submit">送信</button>のようにtype="submit"を指定する。 2. ボタンが<form>タグの中にあるか確認する。 3. formの外に置く必要がある場合はform属性でformのidを指定する（<button type="submit" form="myForm">）。
1. <button type="submit">送信</button>のようにtype="submit"を指定する。 2. ボタンが<form>タグの中にあるか確認する。 3. formの外に置く必要がある場合はform属性でformのidを指定する（<button type="submit" form="myForm">）。
🔍 form submit button type 送信 反応しない
詳しく見る → 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 フォーカス 紐づけ
詳しく見る → required属性が効かない HTML
📄 フォームの必須チェックが動かない
inputにrequiredを付けたのに空でも送信できてしまう。フォームの必須チェックが効かないときに起きるよ。
⚠️ よくある原因
formタグにnovalidate属性が付いているとブラウザのバリデーションが全て無効になるよ。また、JavaScriptでformをsubmitしている場合もブラウザのバリデーションが発動しないんだ。
formタグにnovalidate属性が付いているとブラウザのバリデーションが全て無効になるよ。また、JavaScriptでformをsubmitしている場合もブラウザのバリデーションが発動しないんだ。
✅ 直しかた
1. formタグにnovalidate属性が付いていないか確認し、あれば削除する。 2. JSでsubmitする場合はform.checkValidity()を呼んでバリデーションを手動実行する。 3. reportValidity()を使うとエラーメッセージも表示されるよ。
1. formタグにnovalidate属性が付いていないか確認し、あれば削除する。 2. JSでsubmitする場合はform.checkValidity()を呼んでバリデーションを手動実行する。 3. reportValidity()を使うとエラーメッセージも表示されるよ。
🔍 required 効かない novalidate checkValidity フォーム
詳しく見る → セマンティック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 階層
詳しく見る → meta descriptionが検索結果に反映されない HTML
📄 メタディスクリプションが無視される
meta descriptionを設定したのにGoogleの検索結果に表示されない。SEO対策をしているときに気になるポイントだよ。
⚠️ よくある原因
Googleは必ずしもmeta descriptionをそのまま使わないよ。ページの内容と一致しない場合や、検索クエリに対してより適切なテキストがページ内にある場合、Googleが自動生成した説明文を表示することがあるんだ。
Googleは必ずしもmeta descriptionをそのまま使わないよ。ページの内容と一致しない場合や、検索クエリに対してより適切なテキストがページ内にある場合、Googleが自動生成した説明文を表示することがあるんだ。
✅ 直しかた
1. 120〜160文字で魅力的かつページ内容と一致する説明を書く。 2. 各ページに固有のdescriptionを設定する。 3. 反映には数日〜数週間かかることがある。 4. Google Search Consoleで確認する。
1. 120〜160文字で魅力的かつページ内容と一致する説明を書く。 2. 各ページに固有のdescriptionを設定する。 3. 反映には数日〜数週間かかることがある。 4. Google Search Consoleで確認する。
🔍 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 キーボード アクセシビリティ
詳しく見る → 🎨CSS1件
スマホで表示が小さい 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
詳しく見る → ⚡JavaScript31件
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 JavaScript
🚨 getElementById の id が存在しない
コンソールに TypeError: Cannot read properties of null と表示される。DOM要素の取得に失敗したときに起きやすいよ。
⚠️ よくある原因
document.getElementById('xxx')で指定したidがHTMLに存在しないよ。ブラウザはidが見つからないとnullを返すんだ。そのnullに対して.addEventListener()や.textContentなどのプロパティにアクセスしようとするとこのエラーが出るよ。idのタイポか、scriptがHTML読み込み前に実行されているのが原因だよ。
document.getElementById('xxx')で指定したidがHTMLに存在しないよ。ブラウザはidが見つからないとnullを返すんだ。そのnullに対して.addEventListener()や.textContentなどのプロパティにアクセスしようとするとこのエラーが出るよ。idのタイポか、scriptがHTML読み込み前に実行されているのが原因だよ。
✅ 直しかた
1. JavaScriptのid名とHTMLのid="..."が完全に一致しているか確認する。 2. <script>タグが</body>の直前にあるか確認する（またはdefer属性を付ける）。 3. console.log(element)を追加してnullが出たら取得失敗。 4. オプショナルチェーン（element?.addEventListener）で安全にアクセスする。
1. JavaScriptのid名とHTMLのid="..."が完全に一致しているか確認する。 2. <script>タグが</body>の直前にあるか確認する（またはdefer属性を付ける）。 3. console.log(element)を追加してnullが出たら取得失敗。 4. オプショナルチェーン（element?.addEventListener）で安全にアクセスする。
🔍 JavaScript Cannot read properties of null 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 読み込めない
詳しく見る → ボタンを押しても何も起きない JavaScript
🔇 getElementById の id 不一致
ボタンを押しても何も起きない。コンソールにエラーも出ない。idの不一致で要素取得に失敗しているときに起きるよ。
⚠️ よくある原因
document.getElementById('xxx')のid名がHTMLと一致していないよ。nullが返っているけど、nullに対してイベントリスナーを追加してもエラーにならない（無視される）ため、エラーが出ずに「何も起きない」状態になるんだ。
document.getElementById('xxx')のid名がHTMLと一致していないよ。nullが返っているけど、nullに対してイベントリスナーを追加してもエラーにならない（無視される）ため、エラーが出ずに「何も起きない」状態になるんだ。
✅ 直しかた
1. JavaScriptのgetElementById('xxx')とHTMLのid="xxx"を見比べる。 2. console.log(element)を追加してnullが出たら取得失敗。 3. if (element) element.addEventListener(...)のようにnullチェックを入れる。 4. 開発者ツールのElementsタブでidを検索して確認する。
1. JavaScriptのgetElementById('xxx')とHTMLのid="xxx"を見比べる。 2. console.log(element)を追加してnullが出たら取得失敗。 3. if (element) element.addEventListener(...)のようにnullチェックを入れる。 4. 開発者ツールのElementsタブでidを検索して確認する。
🔍 JavaScript getElementById null 取得できない
詳しく見る → 計算結果が 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
詳しく見る → error: failed to push some refs JavaScript
🚀 リモートに新しいコミットがある
git pushすると「error: failed to push some refs」と表示される。リモートに先に変更があるときに起きるよ。
⚠️ よくある原因
GitHubのリポジトリにローカルにない変更がある（READMEを追加した等）よ。Gitは「リモートの方が新しいから、まず最新を取り込んでからpushして」と言っているんだ。これはデータの上書き防止のための安全機能だよ。
GitHubのリポジトリにローカルにない変更がある（READMEを追加した等）よ。Gitは「リモートの方が新しいから、まず最新を取り込んでからpushして」と言っているんだ。これはデータの上書き防止のための安全機能だよ。
✅ 直しかた
1. git pull origin main で最新を取り込む。 2. コンフリクトがあれば解決してcommitする。 3. その後git push origin mainを実行する。 4. 新規リポジトリでREADMEを追加した場合はgit pull origin main --allow-unrelated-historiesを使う。
1. git pull origin main で最新を取り込む。 2. コンフリクトがあれば解決してcommitする。 3. その後git push origin mainを実行する。 4. 新規リポジトリでREADMEを追加した場合はgit pull origin main --allow-unrelated-historiesを使う。
🔍 Git failed to push some refs
詳しく見る → Permission denied (publickey) JavaScript
🔑 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を確認する。
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を確認する。
🔍 Git Permission denied publickey SSH
詳しく見る → TypeError: Assignment to constant variable JavaScript
🚨 constで宣言した変数に再代入している
constで宣言した変数に値を入れ直すとエラーになる。const/letの使い分けで起きやすいよ。
⚠️ よくある原因
constは「再代入不可」の変数宣言だよ。一度値を設定したら別の値を代入できないんだ。ただし、constで宣言したオブジェクトや配列の中身（プロパティや要素）は変更できるよ。再代入と中身の変更は別の概念だよ。
constは「再代入不可」の変数宣言だよ。一度値を設定したら別の値を代入できないんだ。ただし、constで宣言したオブジェクトや配列の中身（プロパティや要素）は変更できるよ。再代入と中身の変更は別の概念だよ。
✅ 直しかた
1. 値を変更する必要がある変数はletで宣言する。 2. constは再代入しない値（定数、設定値等）に使う。 3. 配列やオブジェクトの中身を変えるだけならconstのままでOK（const arr = []; arr.push(1);は合法）。
1. 値を変更する必要がある変数はletで宣言する。 2. constは再代入しない値（定数、設定値等）に使う。 3. 配列やオブジェクトの中身を変えるだけならconstのままでOK（const arr = []; arr.push(1);は合法）。
🔍 JavaScript Assignment to constant variable const let
詳しく見る → ReferenceError: Cannot access before initialization JavaScript
🚨 let/constの宣言前にアクセスしている
変数を使おうとすると「Cannot access before initialization」と表示される。変数の宣言順序で起きるよ。
⚠️ よくある原因
let/constで宣言した変数を、宣言より前の行で使おうとしているよ。これはTDZ（Temporal Dead Zone）と呼ばれる仕組みで、let/constは宣言行に到達するまでアクセスできないんだ。varと違いlet/constは巻き上げ（ホイスティング）されても初期化されないよ。
let/constで宣言した変数を、宣言より前の行で使おうとしているよ。これはTDZ（Temporal Dead Zone）と呼ばれる仕組みで、let/constは宣言行に到達するまでアクセスできないんだ。varと違いlet/constは巻き上げ（ホイスティング）されても初期化されないよ。
✅ 直しかた
1. 変数の宣言（let/const）を、使用する行より前に書く。 2. 関数内で使う変数は関数の先頭で宣言する習慣をつける。 3. varは巻き上げされるがundefinedになるだけでエラーにならない（ただしvarは使わない方がよい）。
1. 変数の宣言（let/const）を、使用する行より前に書く。 2. 関数内で使う変数は関数の先頭で宣言する習慣をつける。 3. varは巻き上げされるがundefinedになるだけでエラーにならない（ただしvarは使わない方がよい）。
🔍 JavaScript 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
詳しく見る → TypeError: Cannot read properties of null（null参照） JavaScript
🚨 nullのプロパティにアクセスしている
nullに対して.や[]でアクセスするとエラーになる。DOM要素の取得失敗で起きやすいよ。
⚠️ よくある原因
querySelectorやgetElementByIdの結果がnull（要素が見つからない）なのに、そのままプロパティにアクセスしているよ。JavaScriptではnullやundefinedのプロパティにアクセスするとTypeErrorが発生するんだ。
querySelectorやgetElementByIdの結果がnull（要素が見つからない）なのに、そのままプロパティにアクセスしているよ。JavaScriptではnullやundefinedのプロパティにアクセスするとTypeErrorが発生するんだ。
✅ 直しかた
1. if (element !== null)で存在確認してからアクセスする。 2. オプショナルチェーン（?.）を使う：element?.textContent。 3. nullが返る原因（IDミス、DOM未構築等）を根本的に修正する。 4. console.log(element)でnullかどうか確認する。
1. if (element !== null)で存在確認してからアクセスする。 2. オプショナルチェーン（?.）を使う：element?.textContent。 3. nullが返る原因（IDミス、DOM未構築等）を根本的に修正する。 4. console.log(element)でnullかどうか確認する。
🔍 JavaScript Cannot read properties of null querySelector
詳しく見る → SyntaxError: Invalid left-hand side in assignment JavaScript
🚨 代入できないものに代入しようとしている
代入文を書くと「Invalid left-hand side in assignment」と表示される。=と===の混同で起きやすいよ。
⚠️ よくある原因
if(a = 1)のように比較演算子（===）を代入演算子（=）と間違えている、または5 = xのようにリテラル値に代入しようとしているよ。代入の左辺（=の左側）には変数や配列要素など「代入可能なもの」しか書けないんだ。
if(a = 1)のように比較演算子（===）を代入演算子（=）と間違えている、または5 = xのようにリテラル値に代入しようとしているよ。代入の左辺（=の左側）には変数や配列要素など「代入可能なもの」しか書けないんだ。
✅ 直しかた
1. 比較には===を使う。=は代入、===は比較。if(a === 1)が正しい。 2. 代入の左辺が変数になっているか確認する。 3. ESLintのno-cond-assignルールで条件式内の代入を検出できる。
1. 比較には===を使う。=は代入、===は比較。if(a === 1)が正しい。 2. 代入の左辺が変数になっているか確認する。 3. ESLintのno-cond-assignルールで条件式内の代入を検出できる。
🔍 JavaScript Invalid left-hand side assignment === =
詳しく見る → 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 プロパティ
詳しく見る → TypeError: Cannot read properties of undefined (reading 'length') JavaScript
🚨 undefinedに対して.lengthを呼んでいる
配列や文字列を代入し忘れた変数に.lengthを使ってエラーになる。変数の初期化忘れで起きるよ。
⚠️ よくある原因
undefinedな変数に対して.lengthを呼んでいるよ。配列や文字列を代入し忘れている、関数の戻り値がundefined、非同期処理の結果がまだセットされていない、などが原因だよ。
undefinedな変数に対して.lengthを呼んでいるよ。配列や文字列を代入し忘れている、関数の戻り値がundefined、非同期処理の結果がまだセットされていない、などが原因だよ。
✅ 直しかた
1. 変数が正しく初期化されているか確認する（let data; → let data = [];）。 2. 関数の戻り値がundefinedになっていないかチェックする。 3. 非同期データの場合はデータ取得後にアクセスする。 4. if (data) console.log(data.length)のようにガードする。
1. 変数が正しく初期化されているか確認する（let data; → let data = [];）。 2. 関数の戻り値がundefinedになっていないかチェックする。 3. 非同期データの場合はデータ取得後にアクセスする。 4. if (data) console.log(data.length)のようにガードする。
🔍 JavaScript undefined length Cannot read properties
詳しく見る → SyntaxError: Identifier 'x' has already been declared JavaScript
🚨 同じ変数名を2回宣言している
同じスコープ内でletやconstで同名の変数を2回宣言してエラーになる。変数の重複宣言で起きるよ。
⚠️ よくある原因
同じスコープ内でletやconstで同名の変数を2回宣言しているよ。let/constは同じスコープ内での再宣言を禁止しているんだ。長いファイルで同じ変数名を使ってしまったり、コピペで重複したりすることが原因だよ。
同じスコープ内でletやconstで同名の変数を2回宣言しているよ。let/constは同じスコープ内での再宣言を禁止しているんだ。長いファイルで同じ変数名を使ってしまったり、コピペで重複したりすることが原因だよ。
✅ 直しかた
1. 2回目の宣言を削除するか、変数名を変える。 2. 再代入したいならletで宣言して代入のみ行う（let x = 1; x = 2;はOK）。 3. VS Codeの「変数のハイライト」機能で同名変数を確認する。
1. 2回目の宣言を削除するか、変数名を変える。 2. 再代入したいならletで宣言して代入のみ行う（let x = 1; x = 2;はOK）。 3. VS Codeの「変数のハイライト」機能で同名変数を確認する。
🔍 JavaScript Identifier already declared let const
詳しく見る → SyntaxError: missing ) after argument list JavaScript
🚨 関数呼び出しの括弧が閉じていない
括弧の閉じ忘れやカンマ忘れでSyntaxErrorになる。複雑な式を書いたときに起きやすいよ。
⚠️ よくある原因
関数呼び出しの括弧が閉じていない、引数の間のカンマ忘れ、文字列のクォートが閉じていないよ。ネストが深い式（関数の中に関数を書く等）で特に起きやすいんだ。エラーメッセージの行番号は実際のミス箇所とずれることがあるよ。
関数呼び出しの括弧が閉じていない、引数の間のカンマ忘れ、文字列のクォートが閉じていないよ。ネストが深い式（関数の中に関数を書く等）で特に起きやすいんだ。エラーメッセージの行番号は実際のミス箇所とずれることがあるよ。
✅ 直しかた
1. 括弧の対応を確認する（VS Codeで括弧をクリックすると対応がハイライトされる）。 2. エディタの括弧ハイライト機能を活用する。 3. Prettierで整形するとエラー箇所が見つけやすい。 4. 複雑な式は変数に分割して書く。
1. 括弧の対応を確認する（VS Codeで括弧をクリックすると対応がハイライトされる）。 2. エディタの括弧ハイライト機能を活用する。 3. Prettierで整形するとエラー箇所が見つけやすい。 4. 複雑な式は変数に分割して書く。
🔍 JavaScript missing parenthesis SyntaxError 括弧
詳しく見る → TypeError: Cannot set properties of null (setting 'textContent') JavaScript
🚨 nullに対してプロパティを設定しようとしている
getElementByIdでnullが返っているのにプロパティを設定してエラーになる。DOM操作で起きやすいよ。
⚠️ よくある原因
document.getElementByIdなどでnullが返っているのに、そのままtextContentやinnerHTMLなどのプロパティを設定しようとしたよ。IDのタイプミスやスクリプトの読み込み順（DOM構築前に実行）が原因だよ。
document.getElementByIdなどでnullが返っているのに、そのままtextContentやinnerHTMLなどのプロパティを設定しようとしたよ。IDのタイプミスやスクリプトの読み込み順（DOM構築前に実行）が原因だよ。
✅ 直しかた
1. IDが正しいか確認する（HTMLのid属性とJSの文字列が完全一致）。 2. scriptタグをbodyの末尾に置くか、defer属性を付ける。 3. DOMContentLoadedイベント内で実行する。 4. if (el) el.textContent = '...'のようにnullチェックする。
1. IDが正しいか確認する（HTMLのid属性とJSの文字列が完全一致）。 2. scriptタグをbodyの末尾に置くか、defer属性を付ける。 3. DOMContentLoadedイベント内で実行する。 4. if (el) el.textContent = '...'のようにnullチェックする。
🔍 JavaScript Cannot set properties null textContent
詳しく見る → 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 assignment expression 代入
詳しく見る → RangeError: Invalid time value JavaScript
🚨 new Date()に無効な日付文字列を渡している
不正なフォーマットの日付文字列でDateオブジェクトを作ろうとしてエラーになる。日付処理で起きるよ。
⚠️ よくある原因
new Date()に無効な日付文字列を渡しているよ。ブラウザによって解釈が異なるフォーマット（例: '2024/1/1'はSafariで無効）や、存在しない日付（2月30日等）を渡すとInvalid Dateになるんだ。
new Date()に無効な日付文字列を渡しているよ。ブラウザによって解釈が異なるフォーマット（例: '2024/1/1'はSafariで無効）や、存在しない日付（2月30日等）を渡すとInvalid Dateになるんだ。
✅ 直しかた
1. 日付文字列のフォーマットを「YYYY-MM-DD」形式（ISO 8601）にする。 2. または個別に年月日を指定する：new Date(2024, 0, 1)（月は0始まり）。 3. date-fnsやdayjsなどのライブラリを使うとパースが安全。
1. 日付文字列のフォーマットを「YYYY-MM-DD」形式（ISO 8601）にする。 2. または個別に年月日を指定する：new Date(2024, 0, 1)（月は0始まり）。 3. date-fnsやdayjsなどのライブラリを使うとパースが安全。
🔍 JavaScript Invalid time value Date RangeError
詳しく見る → 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
詳しく見る → Assignment to constant variable JavaScript
🟡 constで宣言した変数に再代入しようとした
変数に値を入れようとしたら「Assignment to constant variable」と出る。const/letの使い分けで起きるよ。
⚠️ よくある原因
constで宣言した変数に新しい値を代入しようとしているよ。constは「再代入不可」の宣言で、一度設定した値を別の値に変えることができないんだ。ただし、constで宣言したオブジェクトや配列の中身（プロパティや要素）は変更できるよ。
constで宣言した変数に新しい値を代入しようとしているよ。constは「再代入不可」の宣言で、一度設定した値を別の値に変えることができないんだ。ただし、constで宣言したオブジェクトや配列の中身（プロパティや要素）は変更できるよ。
✅ 直しかた
1. 値を変更する必要があるならletで宣言する。 2. 配列やオブジェクトの中身を変えるだけならconstのままでOK（const arr = []; arr.push(1);は合法）。 3. ループカウンタなど値が変わる変数はletを使う。
1. 値を変更する必要があるならletで宣言する。 2. 配列やオブジェクトの中身を変えるだけならconstのままでOK（const arr = []; arr.push(1);は合法）。 3. ループカウンタなど値が変わる変数はletを使う。
🔍 const let Assignment constant variable
詳しく見る → 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
詳しく見る → Cannot access before initialization JavaScript
🟡 変数の宣言前にアクセスした
変数を使おうとしたら「Cannot access before initialization」と出る。変数の宣言順序で起きるよ。
⚠️ よくある原因
letやconstで宣言した変数を、宣言より前の行で使おうとしているよ（TDZ: Temporal Dead Zone）。let/constは宣言行に到達するまでアクセスできない「一時的なデッドゾーン」があるんだ。varと違いlet/constは巻き上げされても初期化されないよ。
letやconstで宣言した変数を、宣言より前の行で使おうとしているよ（TDZ: Temporal Dead Zone）。let/constは宣言行に到達するまでアクセスできない「一時的なデッドゾーン」があるんだ。varと違いlet/constは巻き上げされても初期化されないよ。
✅ 直しかた
1. 変数の宣言を使用箇所より前に移動する。 2. 関数内で使う変数は関数の先頭で宣言する。 3. varは巻き上げされるがundefinedになるだけ（ただしvarは使わない方がよい）。
1. 変数の宣言を使用箇所より前に移動する。 2. 関数内で使う変数は関数の先頭で宣言する。 3. varは巻き上げされるがundefinedになるだけ（ただしvarは使わない方がよい）。
🔍 Cannot access before initialization let const TDZ
詳しく見る → 配列のコピーが元の配列も変わる 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 配列 コピー 元 変わる 参照
詳しく見る → 🛠️環境構築29件
VS Code拡張が動かない 環境構築
🧩 拡張機能が正しくインストールされていない
VS Code に拡張機能を入れたのに、機能が動かない。拡張機能を初めてインストールしたときに起きやすいよ。
⚠️ よくある原因
拡張機能のインストール後にVS Codeを再起動していない、または拡張機能が無効になっているよ。一部の拡張機能はインストールだけでは有効にならず、VS Codeの再起動（ウィンドウのリロード）が必要なんだ。また、ワークスペース設定で無効化されている場合もあるよ。
拡張機能のインストール後にVS Codeを再起動していない、または拡張機能が無効になっているよ。一部の拡張機能はインストールだけでは有効にならず、VS Codeの再起動（ウィンドウのリロード）が必要なんだ。また、ワークスペース設定で無効化されている場合もあるよ。
✅ 直しかた
1. VS Codeを完全に閉じてから再起動する（Ctrl+Shift+P→Reload Window でもOK）。 2. サイドバーの拡張機能アイコンで「有効」になっているか確認する。 3. それでも動かない場合は一度アンインストールして再インストールする。 4. 拡張機能の設定（歯車アイコン）で必要な設定がされているか確認する。
1. VS Codeを完全に閉じてから再起動する（Ctrl+Shift+P→Reload Window でもOK）。 2. サイドバーの拡張機能アイコンで「有効」になっているか確認する。 3. それでも動かない場合は一度アンインストールして再インストールする。 4. 拡張機能の設定（歯車アイコン）で必要な設定がされているか確認する。
🔍 VS Code 拡張機能 動かない インストール 再起動
詳しく見る → 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. ポート競合なら設定でliveServer.settings.portを5501等に変更する。 4. 出力パネル（Output）でLive Serverのエラーメッセージを確認する。
1. HTMLファイルを開いた状態で右下の「Go Live」をクリックする。 2. 動かない場合はVS Codeを再起動する。 3. ポート競合なら設定でliveServer.settings.portを5501等に変更する。 4. 出力パネル（Output）でLive Serverのエラーメッセージを確認する。
🔍 Live Server 起動しない Go Live ポート VS Code
詳しく見る → 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が効かない 環境構築
📄 既にGitで追跡されているファイルは無視されない
.gitignoreに追加したのにファイルがGitに表示され続ける。Git管理で起きやすい問題だよ。
⚠️ よくある原因
一度git addやcommitしたファイルは、.gitignoreに追加しても追跡が続くよ。.gitignoreは「まだ追跡されていないファイル」を無視する設定で、既に追跡中のファイルには効かないんだ。追跡を解除するには別のコマンドが必要だよ。
一度git addやcommitしたファイルは、.gitignoreに追加しても追跡が続くよ。.gitignoreは「まだ追跡されていないファイル」を無視する設定で、既に追跡中のファイルには効かないんだ。追跡を解除するには別のコマンドが必要だよ。
✅ 直しかた
1. git rm --cached ファイル名 で追跡を解除する（ファイル自体は削除されない）。 2. git commitで変更を記録する。 3. その後.gitignoreが有効になる。 4. フォルダ全体を解除する場合はgit rm -r --cached フォルダ名。
1. git rm --cached ファイル名 で追跡を解除する（ファイル自体は削除されない）。 2. git commitで変更を記録する。 3. その後.gitignoreが有効になる。 4. フォルダ全体を解除する場合はgit rm -r --cached フォルダ名。
🔍 gitignore 効かない 追跡 git rm cached
詳しく見る → VS Code拡張が動かない（再起動必要） 環境構築
🧩 拡張機能のインストール後に再起動していない
VS Codeに拡張機能を入れたが機能しない。再起動が必要な拡張機能で起きるよ。
⚠️ よくある原因
一部の拡張機能はインストール後にVS Codeの再起動が必要だよ。言語サーバー系（TypeScript、Python等）やフォーマッター系の拡張は、VS Codeのプロセスに組み込まれるため再起動しないと有効にならないんだ。また、ワークスペースの設定で無効になっている場合もあるよ。
一部の拡張機能はインストール後にVS Codeの再起動が必要だよ。言語サーバー系（TypeScript、Python等）やフォーマッター系の拡張は、VS Codeのプロセスに組み込まれるため再起動しないと有効にならないんだ。また、ワークスペースの設定で無効になっている場合もあるよ。
✅ 直しかた
1. VS Codeを完全に閉じて再起動する。 2. 拡張機能の設定でワークスペースごとに有効/無効を確認する。 3. 拡張機能のREADMEで追加設定が必要か確認する。 4. 競合する拡張機能がないか確認する（同じ機能の拡張が複数入っていないか）。
1. VS Codeを完全に閉じて再起動する。 2. 拡張機能の設定でワークスペースごとに有効/無効を確認する。 3. 拡張機能のREADMEで追加設定が必要か確認する。 4. 競合する拡張機能がないか確認する（同じ機能の拡張が複数入っていないか）。
🔍 VS Code 拡張機能 動かない 再起動 ワークスペース
詳しく見る → Live Serverが起動しない（ポート競合） 環境構築
🖥️ ポートが他のプロセスに使われている
Live Serverの「Go Live」を押してもブラウザが開かない。ポート競合で起きやすいよ。
⚠️ よくある原因
デフォルトのポート5500が他のアプリに使われている、またはHTMLファイルを開いていない状態で起動しようとしているよ。1つのポートは1つのアプリしか使えないから、別のLive Serverインスタンスや他のサーバーが同じポートを使っていると起動できないんだ。
デフォルトのポート5500が他のアプリに使われている、またはHTMLファイルを開いていない状態で起動しようとしているよ。1つのポートは1つのアプリしか使えないから、別のLive Serverインスタンスや他のサーバーが同じポートを使っていると起動できないんだ。
✅ 直しかた
1. HTMLファイルを開いた状態で「Go Live」をクリックする。 2. VS Codeの設定でliveServer.settings.portを5501等に変更する。 3. 他のターミナルでサーバーが動いていないか確認する。 4. Mac: lsof -i :5500、Windows: netstat -ano | findstr :5500 でポート使用状況を確認する。
1. HTMLファイルを開いた状態で「Go Live」をクリックする。 2. VS Codeの設定でliveServer.settings.portを5501等に変更する。 3. 他のターミナルでサーバーが動いていないか確認する。 4. Mac: lsof -i :5500、Windows: netstat -ano | findstr :5500 でポート使用状況を確認する。
🔍 Live Server 起動しない ポート 競合 5500
詳しく見る → 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
詳しく見る → 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
詳しく見る → HEAD detached at 環境構築
👻 デタッチドHEAD状態
「You are in 'detached HEAD' state」と表示される。特定のコミットに直接チェックアウトしたときに起きるよ。
⚠️ よくある原因
特定のコミットやタグに直接チェックアウトしたよ。通常はブランチ（main等）を指しているHEADが、ブランチではなく特定のコミットを直接指している状態なんだ。この状態で新しいコミットを作ると、ブランチに属さない「迷子のコミット」になってしまうよ。
特定のコミットやタグに直接チェックアウトしたよ。通常はブランチ（main等）を指しているHEADが、ブランチではなく特定のコミットを直接指している状態なんだ。この状態で新しいコミットを作ると、ブランチに属さない「迷子のコミット」になってしまうよ。
✅ 直しかた
1. git checkout main（またはブランチ名）でブランチに戻る。 2. 変更を残したい場合はgit checkout -b 新ブランチ名 で新しいブランチを作る。 3. git branchで現在のブランチを確認する。 4. 迷子のコミットはgit reflogで見つけられる。
1. git checkout main（またはブランチ名）でブランチに戻る。 2. 変更を残したい場合はgit checkout -b 新ブランチ名 で新しいブランチを作る。 3. git branchで現在のブランチを確認する。 4. 迷子のコミットはgit reflogで見つけられる。
🔍 git detached HEAD checkout ブランチ
詳しく見る → 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
詳しく見る → .gitignoreが効かない（追跡済み） 環境構築
📄 既にGit追跡されたファイル
.gitignoreに書いたファイルがgit statusに表示され続ける。既に追跡されたファイルで起きるよ。
⚠️ よくある原因
一度commitしたファイルは.gitignoreに追加しても追跡が続くよ。.gitignoreは「まだGitに追跡されていないファイル」を無視する設定で、既にcommit済みのファイルには効かないんだ。追跡を解除するにはgit rm --cachedが必要だよ。
一度commitしたファイルは.gitignoreに追加しても追跡が続くよ。.gitignoreは「まだGitに追跡されていないファイル」を無視する設定で、既にcommit済みのファイルには効かないんだ。追跡を解除するにはgit rm --cachedが必要だよ。
✅ 直しかた
1. git rm --cached ファイル名 で追跡を解除する（ファイル自体は削除されない）。 2. git commitで変更を記録する。 3. その後.gitignoreが有効になる。 4. .gitignoreのパターンが正しいか確認する（/node_modules/ 等）。
1. git rm --cached ファイル名 で追跡を解除する（ファイル自体は削除されない）。 2. git commitで変更を記録する。 3. その後.gitignoreが有効になる。 4. .gitignoreのパターンが正しいか確認する（/node_modules/ 等）。
🔍 gitignore 効かない 追跡済み git rm cached
詳しく見る → 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 リモート 遅れている
詳しく見る → Permission denied (publickey) - Git 環境構築
🔑 SSH鍵が設定されていない（Git）
git push/pullで「Permission denied (publickey)」と表示される。SSH認証の設定で起きるよ。
⚠️ よくある原因
GitHubにSSH鍵が登録されていない、または鍵のパスが間違っているよ。GitHubはSSH接続時に公開鍵で認証するんだけど、鍵が登録されていないと「あなたは誰？」と拒否するんだ。HTTPS URLを使えばSSH鍵なしでもアクセスできるよ。
GitHubにSSH鍵が登録されていない、または鍵のパスが間違っているよ。GitHubはSSH接続時に公開鍵で認証するんだけど、鍵が登録されていないと「あなたは誰？」と拒否するんだ。HTTPS URLを使えばSSH鍵なしでもアクセスできるよ。
✅ 直しかた
1. HTTPS URLに切り替える：git remote set-url origin https://github.com/user/repo.git。 2. またはSSH鍵を生成してGitHubに登録する（ssh-keygen → GitHub Settings → SSH keys）。 3. ssh -T [email protected] で接続テストする。
1. HTTPS URLに切り替える：git remote set-url origin https://github.com/user/repo.git。 2. またはSSH鍵を生成してGitHubに登録する（ssh-keygen → GitHub Settings → SSH keys）。 3. ssh -T [email protected] で接続テストする。
🔍 Git Permission denied publickey SSH HTTPS
詳しく見る → failed to push some refs (Git) 環境構築
🔀 pushが拒否された
git pushで「failed to push some refs」と表示される。リモートとの同期で起きるよ。
⚠️ よくある原因
リモートにローカルにない変更があるよ。Gitは「リモートの方が新しいから、まず最新を取り込んでからpushして」と言っているんだ。これはデータの上書き防止のための安全機能で、先にpullする必要があるよ。
リモートにローカルにない変更があるよ。Gitは「リモートの方が新しいから、まず最新を取り込んでからpushして」と言っているんだ。これはデータの上書き防止のための安全機能で、先にpullする必要があるよ。
✅ 直しかた
1. git pull --rebase origin main を実行する（履歴がきれいになる）。 2. コンフリクトがあれば解決する。 3. その後git pushを実行する。 4. --rebaseが不安ならgit pull origin mainでもOK。
1. git pull --rebase origin main を実行する（履歴がきれいになる）。 2. コンフリクトがあれば解決する。 3. その後git pushを実行する。 4. --rebaseが不安ならgit pull origin mainでもOK。
🔍 Git failed push refs リモート pull rebase
詳しく見る → pathspec did not match any files 環境構築
🔀 指定したファイルが見つからない
git checkout/addで「pathspec did not match」と表示される。ファイル名の指定ミスで起きるよ。
⚠️ よくある原因
ファイル名やブランチ名のタイポ、または.gitignoreで除外されているファイルを指定しているよ。Gitは指定されたパスに一致するファイルやブランチを探すけど、見つからないとこのエラーを出すんだ。大文字小文字の違いも原因になるよ。
ファイル名やブランチ名のタイポ、または.gitignoreで除外されているファイルを指定しているよ。Gitは指定されたパスに一致するファイルやブランチを探すけど、見つからないとこのエラーを出すんだ。大文字小文字の違いも原因になるよ。
✅ 直しかた
1. ファイル名・ブランチ名のスペルを確認する（大文字小文字も）。 2. git statusで追跡対象のファイルを確認する。 3. git branchでブランチ一覧を確認する。 4. .gitignoreで除外されていないか確認する。
1. ファイル名・ブランチ名のスペルを確認する（大文字小文字も）。 2. git statusで追跡対象のファイルを確認する。 3. git branchでブランチ一覧を確認する。 4. .gitignoreで除外されていないか確認する。
🔍 Git pathspec did not match ファイル ブランチ
詳しく見る → 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. 変更を保存したい場合は必ずブランチを作ってからコミットする。
1. git switch -c 新しいブランチ名 で新しいブランチを作る。 2. 元のブランチに戻るなら git switch main。 3. 変更を保存したい場合は必ずブランチを作ってからコミットする。
🔍 Git detached HEAD ブランチ 切り離し checkout
詳しく見る → error: failed to push some refs 環境構築
⬆️ pushが拒否された
リモートに自分が持っていない変更がある。先にpullしてからpushしよう。
⚠️ よくある原因
リモートリポジトリに、ローカルにない新しいコミットがあるよ。他の人がpushした変更を取り込んでからでないと、自分のpushは受け付けてもらえないんだ。
リモートリポジトリに、ローカルにない新しいコミットがあるよ。他の人がpushした変更を取り込んでからでないと、自分のpushは受け付けてもらえないんだ。
✅ 直しかた
1. git pull origin main で最新を取り込む。 2. コンフリクトがあれば解決する。 3. もう一度 git push する。
1. git pull origin main で最新を取り込む。 2. コンフリクトがあれば解決する。 3. もう一度 git push する。
🔍 Git push rejected failed refs リモート 拒否
詳しく見る → 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 環境構築
💾 ローカルの変更が上書きされてしまう
コミットしていない変更があるのにブランチを切り替えようとした。先にcommitかstashしよう。
⚠️ よくある原因
作業中のファイルがあるのに、別のブランチに切り替えようとしたよ。切り替えると今の変更が消えてしまうので、Gitが止めてくれているんだ。
作業中のファイルがあるのに、別のブランチに切り替えようとしたよ。切り替えると今の変更が消えてしまうので、Gitが止めてくれているんだ。
✅ 直しかた
1. git stash で一時保存してからブランチを切り替える。 2. git commit で変更を確定してから切り替える。 3. 変更を捨てていいなら git checkout -- ファイル名。
1. git stash で一時保存してからブランチを切り替える。 2. git commit で変更を確定してから切り替える。 3. 変更を捨てていいなら git checkout -- ファイル名。
🔍 Git local changes overwritten 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. コードを少しずつ削って、どこでエラーが起きているか絞り込む