壊れたJavaScriptをここに貼り付けて、「JSを修正する!!」をクリックして修復してください無効なJSを入力

JS修正ツールとは？

コピーしてきたJavaScriptがそのままでは動かない、ブラウザのコンソールに「Unexpected token」が出る、ASIにかかるはずだったセミコロンが抜けている — そんなときに使うツールです。壊れたコードを左に貼り付け、ボタンを押すだけで、構文的に通る形に整えます。

JavaScriptの仕様はTC39のECMAScriptで定義されており、ブラウザやNode.jsはこの仕様に従って解析します。MDNのJavaScriptリファレンスに書かれているように、自動セミコロン挿入（ASI）は便利な反面、想定外の場所で改行が入ると意味が変わることがあります。本ツールはPrettierのような整形ツールとは異なり、構文上のエラー自体を直すことを目的としています。

すべてはブラウザ内で動きます。コードはあなたの手元から離れません。直したコードを<a href="https://eslint.org/" target="_blank" rel="noopener">ESLint</a>などで仕上げる前の、最初のひと押しに使ってください。

JS修正ツールの使い方

壊れたJavaScriptを修復するには以下の手順に従ってください。各ステップはこのページの実際のボタンとパネルを使用します。

壊れたJSを貼り付けるかサンプルを読み込む

無効なJavaScriptを左側のエディタに貼り付けます。サンプルJSをクリックすると、よくあるエラーを含む例を読み込めます。修正ツールが対応する壊れたJSの例：

function processOrder(customer) {
  const order = { id: "ORD-9001" customer: customer, status: pending }
  return order

修正ツールはセミコロンの欠落、中括弧やカッコの不一致、オブジェクトリテラルでのカンマ抜け、引用符の付け忘れ、未終端の文字列などを処理します。

「JSを修正する!!」をクリック

ツールバーの緑色のJSを修正する!!ボタンをクリックします。修正ツールがコードを解析し、自動的に修復します。処理中はローディングインジケーターが表示されるので、完了まで待ってください。

修正された出力を確認する

右側のパネルに修復されたJavaScriptが表示されます。意味は変えず、構文上の問題のみを直します。出力をコピーしてエディタに戻し、必要なら整形ツールやリンターを通してください。

このツールの活用シーン

コードのコピーペースト復旧

StackOverflowやドキュメントから貼り付けたコードが、改行や引用符の関係で壊れていることがあります。手で1行ずつ直す代わりに、このツールに通して構文を整えてください。

ミニファイ後のデバッグ

本番ビルドで圧縮されたJSのスタックトレースから一部を抜き出して読みたいとき、まずは構文として通る形に直すと、その後の解析が楽になります。

ASI（自動セミコロン挿入）絡みのバグ

ASIに頼ったコードで `return` の直後に改行があると、意図せず `undefined` が返ります。修正ツールは怪しい場所にセミコロンを補い、意図に近い動作になるよう整えます。

初期テンプレートの素早い整形

AIが生成した雛形や、走り書きのスニペットをBabelに通す前に、構文上の落穂拾いをするのに便利です。

よくある質問

JSコードは保存されますか？

いいえ。修正のためにバックエンドへ送信しますが、コードはログに残しません。修正以外の用途に使うこともありません。

どのようなエラーを修正できますか？

セミコロン欠落、中括弧 / 角括弧 / 丸括弧の不一致、オブジェクトリテラルのカンマ抜け、引用符の付け忘れ、未終端の文字列、誤った演算子の組み合わせなど、構文レベルの問題を直します。論理的な誤り（例：意図と違う条件式）は対象外です。

コードのロジックは変わりませんか？

可能な限り変えません。意味を保ったまま構文だけを直す方針です。ただし、未定義の識別子を文字列リテラルに直す、といった解釈が必要になる場合は、もっとも自然と思われる候補を選びます。出力は必ず目で確認してください。

TypeScriptには対応していますか？

TypeScript固有の構文（型注釈、ジェネリクスなど）は対象外です。一方、TSがJSのスーパーセットである部分（クラス、async/await、テンプレートリテラルなど）は問題なく扱えます。型エラーまで直したい場合は別途TypeScriptへの変換を検討してください。

本番コードで使えますか？

構文を直すツールであり、リンタや型チェッカの代わりにはなりません。出力はESLintのような静的解析ツールでさらに検証してください。

修正できないコードはありますか？

はい。元のコードがあまりに断片的だったり、意図がまったく読み取れない場合は、修復候補が複数考えられて確定できません。そういったコードは「形式的に通るが意味が違う」結果になりがちなので、出力を必ず確認してください。

JS修正ツール