JavaScriptのエラー「Uncaught SyntaxError: Unexpected token ':'」の原因と解決策を徹底解説

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの学習を始めたばかりのプログラミング初学者の方や、Uncaught SyntaxError: Unexpected token ':'というエラーに遭遇して原因が分からず困っている方を主な対象としています。

この記事を読むことで、JavaScriptで発生するUncaught SyntaxError: Unexpected token ':'というエラーがどのような状況で発生し、なぜそのエラーが表示されるのかを深く理解することができます。また、具体的なエラーの発生例とその解決方法をステップバイステップで学ぶことで、ご自身のコードで同様のエラーに遭遇した際に、原因を特定し、自力で解決できるようになることを目指します。開発者ツールを使ったデバッグの進め方も解説しますので、今後のエラー解決に役立つスキルが身につくでしょう。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な構文（変数宣言、関数、オブジェクトなど） - ブラウザの開発者ツール（特にコンソール）の基本的な利用経験

JavaScriptの構文エラー「Unexpected token ':'」とは？

JavaScriptを記述していると、ブラウザのコンソールやNode.jsの実行環境でUncaught SyntaxError: Unexpected token ':'というエラーに遭遇することがあります。このエラーは、その名の通り「構文エラー」の一種であり、JavaScriptのエンジンがコードを解析（パース）している最中に、予期しない記号（この場合はコロン:）を発見した際に発生します。

「トークン（token）」とは、プログラミング言語の最小の意味単位のことです。例えば、let、const、変数名、数字、演算子（+, -）、区切り文字（,, ;）などがトークンです。JavaScriptのエンジンは、これらのトークンを特定のルール（文法）に従って並べられたものとして解釈しますが、そのルールに反する形で:が出現すると、「これは何？ここにあるはずがない！」と判断し、エラーをスローします。

コロン:はJavaScriptにおいて、オブジェクトリテラルのプロパティと値の区切り、三項演算子の真偽値による分岐、switch文のcase句、ラベル文など、特定の構文の中で使われることがほとんどです。そのため、これらの構文以外で:が不適切に使われると、文法違反となりこのエラーが発生する可能性が高くなります。コードのどこかで、本来:を使うべきでない場所に使ってしまったり、別の記号（例えばカンマ,）を使うべき場所で間違って:を使ってしまったりするケースがよく見られます。

具体的なエラー発生例と解決方法

このセクションでは、Uncaught SyntaxError: Unexpected token ':'エラーが具体的にどのような状況で発生するのか、よくあるパターンとその解決方法を詳しく見ていきます。デバッグの進め方についても解説し、自力で問題を解決するための実践的なスキルを身につけましょう。

よくある原因パターンとコード例

このエラーが発生する最も一般的なシナリオは、オブジェクトリテラルやJSON形式のデータに関する構文ミスです。

パターン1: オブジェクトリテラルのプロパティ区切り記号の誤り

JavaScriptのオブジェクトリテラルでは、プロパティと値のペアをコロン:で区切り、複数のプロパティをカンマ,で区切ります。このカンマを間違ってコロンにしてしまうと、このエラーが発生します。

間違ったコード例:

Javascript

const user = {
  name: 'Taro',
  age: 30: // ここが間違い！
  city: 'Tokyo'
};

console.log(user);

このコードを実行すると、age: 30:の部分でUncaught SyntaxError: Unexpected token ':'が発生します。30:という記述は、JavaScriptの構文では有効なトークンの並びではありません。ageというプロパティの値は30であり、その次のcityプロパティとの間はカンマで区切る必要があります。

パターン2: JSON文字列のパースミス（JSON.parse()の使用時）

JSON (JavaScript Object Notation) は、JavaScriptのオブジェクトリテラルと非常に似た構造を持ちますが、厳密なルールがあります。特に、キー（プロパティ名）は必ずダブルクォーテーションで囲む必要があります。これを守らなかったり、末尾に余分なカンマがあったりすると、JSON.parse()でパースする際にSyntaxErrorが発生することがあります。

間違ったコード例:

Javascript

const jsonString = '{ "name": "Hanako", age: 25 }'; // ageがダブルクォーテーションで囲まれていない
const data = JSON.parse(jsonString);

console.log(data);

この場合、JSON.parse()がage:の部分を適切に解析できず、Uncaught SyntaxError: Unexpected token ':'が発生する可能性があります（より正確には、JSON.parseはJSON固有のより詳細なエラーメッセージを出すことが多いですが、文脈によってはこのエラーにつながることもあります）。キーがダブルクォーテーションで囲まれていないことが原因です。

パターン3: ES6のオブジェクト分割代入や短縮プロパティ記法でのミス

ES6以降で導入されたオブジェクトの分割代入や、プロパティ名と値の変数が同じ場合の短縮記法（Shorthand property names）でも、構文の誤用は発生し得ます。

間違ったコード例 (短縮プロパティ記法)：

Javascript

const name = 'Jiro';
const age = 40;

const person = {
  name: // ここで`:`の後に値がない
  age
};

console.log(person);

この例では、nameプロパティに値を割り当てる際に:の後に何も記述されていないため、JavaScriptエンジンは:を予期しないトークンとして扱います。

デバッグの進め方

エラーに遭遇したら、闇雲にコードを修正するのではなく、以下の手順でデバッグを進めることが重要です。

エラーメッセージの確認:
- Uncaught SyntaxError: Unexpected token ':'というメッセージは、構文エラーであることを示しています。
- メッセージの後に表示されるファイル名と行番号、列番号（例: at script.js:3:10）に注目してください。これはエラーが発生した正確な場所を示しています。この情報がデバッグの第一歩です。
開発者ツール（コンソール）の利用:
- ブラウザ（Chrome, Firefoxなど）を使っている場合、F12キーまたは右クリック→「検証」から開発者ツールを開き、「Console」タブを確認します。
- エラーメッセージをクリックすると、通常はソースコードの該当箇所にジャンプできます。
疑わしいコードブロックの特定と切り分け:
- エラーの行にジャンプしたら、その行とその周辺のコードを注意深く確認します。
- 特に、コロン:が使われている箇所や、オブジェクトリテラル、配列、関数の定義など、JavaScriptの構文が複雑になる部分を重点的に見直しましょう。
- コードが長い場合は、エラーが発生している可能性のある部分をコメントアウトして、問題がないかを確認する「切り分け」も有効です。

ハマった点やエラー解決

ここでは、前述の「よくある原因パターン」で示した間違ったコードを例に、具体的なエラーの現象と、それをどのように解決するかを説明します。

エラー発生コード例：オブジェクトプロパティ区切りの間違い

Javascript

const product = {
  id: 101,
  name: 'Laptop',
  price: 1200: // この行でエラーが発生します
  stock: 50
};

console.log(product);

現象: このコードをHTMLファイルに埋め込んでブラウザで開くか、Node.jsで実行すると、以下のようなエラーメッセージがコンソールに出力されます。

Uncaught SyntaxError: Unexpected token ':'
    at product.js:4:16

(ファイル名や行番号は環境により異なりますが、:の直前か直後の位置を示します)

このメッセージは、product.jsファイルの4行目16列目で予期しない:トークンが見つかったことを示しています。該当箇所はprice: 1200:の1200の後のコロンです。

解決策

上記のコードのprice: 1200:という行は、priceプロパティとその値1200の定義自体は問題ありませんが、その直後に余分なコロン:が存在しています。オブジェクトのプロパティを複数定義する場合、各プロパティのペアはカンマ,で区切る必要があります。

修正後のコード例:

Javascript

const product = {
  id: 101,
  name: 'Laptop',
  price: 1200, // ここをカンマに修正
  stock: 50
};

console.log(product); // { id: 101, name: 'Laptop', price: 1200, stock: 50 }

このように、price: 1200:の:をカンマ,に修正することで、JavaScriptの正しいオブジェクトリテラル構文に合致し、エラーが解消されます。

その他の解決策のヒント

JSON.parse()のエラー: JSON.parse()を使用している場合は、入力文字列が厳密なJSON形式になっているかを確認してください。プロパティ名がダブルクォーテーションで囲まれているか、文字列内のエスケープ文字が適切か、末尾に不要なカンマがないかなどをチェックします。
- 例: '{ "key": "value", }' のような末尾のカンマはJSONでは許されません。
文法の確認: switch文や三項演算子など、コロン:が使われる他の構文で誤りがないかも確認しましょう。
- 例: switch文のcaseブロック外で誤って:を使う。
コード整形ツール/リンターの利用: VS CodeなどのエディタにはPrettierのようなコード整形ツールや、ESLintのようなリンターを導入できます。これらのツールは、コードを保存する際に自動で構文ミスを指摘したり、整形してくれたりするため、事前にエラーを防ぐのに非常に有効です。特にESLintは、構文エラーだけでなく、潜在的なバグやコーディング規約違反も指摘してくれます。
小まめな実行と確認: 長いコードを一気に書くのではなく、少しずつ書いては実行し、動作確認を行う習慣をつけることで、エラー発生時に原因を特定しやすくなります。

まとめ

本記事では、JavaScriptでよく遭遇するUncaught SyntaxError: Unexpected token ':'という構文エラーについて、その原因と具体的な解決方法を解説しました。

Unexpected token ':'エラーは、JavaScriptエンジンがコード解析中に予期しないコロン:を発見した際に発生する構文エラーである。
最も一般的な原因は、オブジェクトリテラル内でプロパティ間の区切り文字としてカンマ,を使うべき場所で誤ってコロン:を使ってしまうこと。
エラー解決には、開発者ツールでエラーメッセージのファイル名・行番号を確認し、該当箇所の構文（特にオブジェクトリテラルやJSONの記述）を注意深く見直すことが重要である。

この記事を通して、皆さんがUncaught SyntaxError: Unexpected token ':'のようなJavaScriptの構文エラーに遭遇した際に、慌てずに原因を特定し、自力で問題を解決できるスキルを身につけられたことでしょう。デバッグスキルはプログラミング学習において非常に重要です。

今後は、ESLintなどのリンターツールの導入や、より複雑なデバッグ手法についても記事にする予定です。

JavaScriptのエラー「Uncaught SyntaxError: Unexpected token ':'」の原因と解決策を徹底解説🛠️