「SyntaxError」が出てプログラムが動きません。予約語のスペルミスを効率よく見つけるコツはありますか？

まずはエラーメッセージに表示された「行番号」を重点的に確認しましょう。VS Codeなどのエディタでは、`function` や `return` などの予約語が正しく入力されていないと色（ハイライト）が変わるため、周りと色が違う単語を探すのが最も確実な方法です。

`function` を `fuction` と打ち間違えてしまいました。なぜこれだけでエラーになるのですか？

プログラミング言語において予約語は「コンピューターへの特別な命令」として綴りが厳密に決まっているため、1文字でも違うと正しく認識できず「SyntaxError」となります。手入力によるタイポを防ぐには、エディタの予測変換（補完機能）を使って入力するのがおすすめです。

「Unexpected token」というエラーが出たのですが、これも予約語のタイポが原因でしょうか？

はい、予約語を書き間違えるとコンピューターが「知らない単語が現れた」と判断し、そのエラーが発生することがよくあります。特に `const` を `cont` と書いたり、`return` の綴りが入れ替わっていないか、エラーが出た行のキーワードを一文字ずつ丁寧に見直してみましょう。

SyntaxError: 予約語のタイポ｜コードで実践

このレッスンで分かること

この記事では「SyntaxError: 予約語のタイポ」をデバッグ基礎の現場で使える形で整理します

予約語のタイポ をおさえれば、現場で迷ったときに立ち戻れる

よくあるタイポ をおさえれば、現場で迷ったときに立ち戻れる

エラーメッセージの読み方 をおさえれば、現場で迷ったときに立ち戻れる

エンジンがコードを読み解く流れ をおさえれば、現場で迷ったときに立ち戻れる

SyntaxError とは

function, return, const などのキーワードのスペルミスを見つけて修正します。本レッスンでは、SyntaxError の基本から実際の使いどころまでを整理し、現場で迷わず使える形に落とし込みます。

予約語のタイポ

JavaScript の 予約語 （キーワード）を間違えると SyntaxError が発生します。

SyntaxError — 文法 そのものが壊れているエラー。コードが 実行される前 に検出されるため、1箇所の タイポ でファイル全体が動かなくなります。

よくあるタイポ

間違い	正しい
`funtion`	`function`
`retrun`	`return`
`cosnt`	`const`
`lte`	`let`
`awiat`	`await`

エラーメッセージの読み方

プレーンテキスト

SyntaxError: Unexpected identifier 'add'

「予期しない 識別子 」= その場所にあるべきでない名前がある = 直前のキーワードが間違っている可能性

JavaScript エンジンは 予約語を最初に探す ため、funtion のような綴り違いは「ただの変数名」と解釈され、次に出てくる関数名で「予期しない識別子」と怒られます。

エンジンがコードを読み解く流れ

diagram (will load when visible)

解決のコツ

エラーの行番号を確認
その行のキーワードのスペルをチェック
エディタの シンタックスハイライト を見る（キーワードは通常色が変わる）

タイポを早く見つけるコツ

diagram (will load when visible)

現場でよくある具体例

現場ケース 1 — 「本番だけ落ちる」謎エラーが、環境変数の NODE_ENV 違いで設定ファイルを切り替えていなかったことが原因。二分探索でコミットを絞り 30 分で解決
現場ケース 2 — フロントの無限ローディングは、useEffect 依存配列に毎レンダー新しい関数を渡していた。React DevTools のレンダー回数で気づけた
現場ケース 3 — DB の遅いクエリは EXPLAIN でフルスキャン発覚。複合インデックス追加で 300 倍速く。「測ってから直す」の典型例

次にとるべきアクション

直近 1 週間で詰まったエラーを 1 つ思い出す — そのエラーに「SyntaxError: 予約語のタイポ」で学んだアプローチを適用してみる
デバッグメモのテンプレを自分用に作る — 現象・再現手順・仮説・検証結果の 4 項目を markdown で固定化する
console.log だけで解いていた問題に DevTools のブレークポイントを使う — ステップ実行を 1 回でも体験する

次のレッスン

次は ReferenceError: 未定義の変数 で、function, return, const などのキーワードのスペルミスを見つけて修正しますを学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

構文：予約語タイポの要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. 構文：予約語タイポとは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

参考にした出典

MDN Web Docs「Debugging JavaScript」 — ブラウザ DevTools を使ったデバッグ手順（出典: Mozilla, https://developer.mozilla.org/ja/docs/Tools/Debugger）
Google Chrome DevTools 公式ドキュメント — ブレークポイント・パフォーマンスタブ等の正式仕様（出典: Google, https://developer.chrome.com/docs/devtools/）
IEEE Software「Why Programs Fail」 — 不具合発見と修正プロセスに関する古典研究（出典: Andreas Zeller, Morgan Kaufmann, 2009, https://ieeexplore.ieee.org/）

学習を加速したい方へ

デバッグの基礎ガイドを体系的にマスターするなら、chotdekiru の無料学習ポータルで実際に手を動かして学習を始めるのがおすすめです。質問・つまずきも現役エンジニアが伴走します。

SyntaxError: 予約語のタイポ