JavaScriptパーシングエラー解説

JavaScript, ReactJS, ESLintにおけるパーシングエラー「Unexpected token」の解説

**ESLintパーシングエラー「Unexpected token」**は、JavaScriptコードを解析する際にESLintが予期せぬトークン（構文要素）を発見したことを示すエラーです。このエラーは、通常、構文エラーやシンタックスエラーを示しています。

具体的な原因と解決方法

1. 誤った構文
   

   • 閉じ括弧やセミコロンの欠落
     

     const myFunction = () => {
       console.log("Hello");
     // 欠落しているセミコロン
     

   • 不正なキーワードや予約語の使用
     

     const function = "myFunction"; // "function"は予約語です
     

   • 不正な演算子
     

     const result = 10 /; // 除算演算子の右側にオペランドがありません
     

2. コメントの誤り
   

3. 文字列の誤り
   

4. テンプレートリテラルの誤り
   

5. JSXの誤り
   

   • タグの閉じ忘れ
     

     <div>
       <h1>Hello, world</h1>
     // 閉じ忘れ
     

   • 属性の誤り
     

     <img src="image.jpg" alt= // 誤った属性の値
     

ESLintの設定と解決方法

• コードフォーマッターの使用
  
• エラーメッセージを確認
  
• ESLintの設定ファイル（.eslintrc.js）を確認
  
  • ルールが厳しすぎる可能性があります。ルールを緩和してエラーを修正してください。

エラーメッセージの例

ESLint: Unexpected token (expected ';')

このエラーは、通常、セミコロンが欠落していることを示しています。

解決方法

// 欠落していたセミコロンを追加します
const myFunction = () => {
  console.log("Hello");
};

ESLintパーシングエラー「Unexpected token」とJavaScriptパーシングエラーの解説

誤った構文

ESLint: Unexpected token (expected ';')

// 欠落していたセミコロンを追加します
const myFunction = () => {
  console.log("Hello");
};

代替方法

1. 構文エラーの修正
   

   • エラーメッセージに従って、コードの構文を修正します。
   • 括弧、セミコロン、キーワード、演算子などの使用に注意してください。

2. ESLintの設定の調整
   

3. JavaScriptの基礎知識の習得
   

具体的な例

例1: 括弧の誤り

const myFunction = () => {
  console.log("Hello");
} // 閉じ括弧が欠落しています

const myFunction = () => {
  console.log("Hello");
}; // 閉じ括弧を追加します

例2: セミコロンの誤り

const message = "Hello, world"
console.log(message) // セミコロンが欠落しています

const message = "Hello, world";
console.log(message); // セミコロンを追加します

例3: 予約語の使用

const function = "myFunction"; // "function"は予約語です

const myVariable = "myFunction"; // 予約語を使用しない変数名を使用します