# Network
CORSエラーでAPIが呼べない
原因:
ブラウザのセキュリティ。別オリジンのAPIは、サーバーがAccess-Control-Allow-Originを返さないとブロックされる。
対処:
サーバー側でCORSを設定する。自分でAPIを開発している場合、レスポンスにヘッダーを追加。外部APIを使う場合は、自分のバックエンドにプロキシを置く。
401 Unauthorizedが返る
原因:
トークンが無い、または無効。有効期限切れや、Authorizationヘッダーの形式が間違っている。
対処:
JWTデコードツールでトークンのexp（有効期限）を確認。Authorization: Bearer <token>で付与しているか確認。
500 Internal Server Errorが返る
原因:
サーバー側でエラーが発生。フロントのリクエストが原因でサーバーが落ちている可能性もある。
対処:
サーバー側のログを確認。リクエストのボディやパラメータの形式が正しいか確認。
URLに日本語を入れるとエラーになる
原因:
URLに特殊文字が含まれると不正な形式になる。日本語はエンコードが必要。
対処:
encodeURIComponentでパラメータの値をエンコード。URLエンコードツールで確認。
# Programming
fetchの結果がundefinedになる
原因:
awaitを忘れた、またはasync関数の外でawaitしている。fetchはPromiseを返すので、結果を待たないとデータが入っていない。
対処:
async関数の中でawaitする。console.logでresの直後を確認。Networkタブでレスポンスが返っているか確認。
JSONパースで「Unexpected token」エラー
原因:
JSONの形式が不正。末尾カンマ、シングルクォート、コメント、未エスケープの改行など。
対処:
JSON整形ツールで構文チェック。エラーの位置を確認して修正。キーはダブルクォート必須。
イベントが発火しない
原因:
要素がまだ存在しない（scriptがheadでDOMより先に実行）、addEventListenerを付け忘れ、イベント名のtypo。
対処:
scriptをbodyの末尾に置くか、DOMContentLoadedで待つ。querySelectorがnullを返していないか確認。
# Environment
環境構築で「コマンドがない」
原因:
Node.js未導入、PATHが通っていない、プロジェクトフォルダで実行していない。
対処:
node -vでバージョンが出るか確認。出ないならNode.jsをインストール。cdで正しいフォルダにいるか確認。エラーメッセージをそのまま検索。
.envの値が読み込まれない
原因:
ファイル名が.envでない、KEY=valueの形式が崩れている、アプリが.envを読み込む設定になっていない。
対処:
.envファイルの形式を確認。余計なスペースやクォートの不整合がないか。.env.exampleを参考に。
# Frontend
CSSが当たらない
原因:
詳細度で負けている、セレクタのスペルミス、linkのパスが間違っている、キャッシュ。
対処:
DevTools of Elementsで該当要素を選び、どのルールが適用されているか確認。打ち消し線のルールは上書きされている。パスは相対で./style.cssなど。
画像が表示されない
原因:
パスが間違っている、CORS、ファイル形式が未対応、altだけ書いてsrcを忘れている。
対処:
DevToolsのNetworkで404が出ていないか確認。相対パスと絶対パスの違いを確認。imgのsrc属性が正しいか確認。
# Git
Gitで「merge conflict」
原因:
同じファイルを別ブランチで変更し、マージ時に競合が発生。
対処:
<<<<<<< と ======= の間が自分の変更、======= と >>>>>>> の間が相手の変更。必要な方を残してマーカーを削除し、git add してコミット。