JavaScript フォーマットツール

JavaScript入力

インデントサイズ：

出力結果

行数: 1文字数: 0バイト数: 0

行数: 1文字数: 0

JavaScriptフォーマットとは？

JavaScriptフォーマットは、乱雑なJSコードを規範的で読みやすいフォーマットに整理するプロセスです。良好なコードフォーマットは可読性を向上させ、デバッグを容易にし、エラーを減らします。フォーマットには、統一インデント、適切な改行、演算子空白、括弧整列などが含まれます。圧縮はすべての空白とコメントを削除し、ファイルサイズを大幅に削減し、ページ読み込み速度を向上させます。

使い方

左の入力ボックスにJavaScriptコードを貼り付けるか入力します
インデントサイズ、引用符スタイル、セミコロンの設定を選択します
「フォーマット」をクリックしてコードを整形するか、「バリデート」をクリックして構文をチェックします
右側に結果が表示されます（シンタックスハイライト付き）
「コピー」をクリックしてクリップボードにコピーします

オプション説明

インデントサイズスペース2個、スペース4個、またはタブから選択できます

引用符スタイルシングルクォートまたはダブルクォートに統一するか、元のままを保持できます

セミコロン常に付ける、削除する、または元のまま保持できます

キーボードショートカット

Ctrl + Enterフォーマット
Ctrl + Shift + C結果をコピー

JavaScriptのヒント

整形しても実行時の正しさは保証されません。自動セミコロン挿入やビルド変換に依存するJavaScriptを変更したあとは、テストやブラウザで再確認してください。
貼り付けたコードを検証する際は、ブラウザのパーサーの対応状況が対象のランタイムやバンドラー構成と異なる場合があることに注意してください。

利用シーン

ブラウザのJavaScriptを再び読みやすくするブックマークレット、解析スニペット、コンソールヘルパー、またはコピーしたインラインスクリプトが1行にまとまって届いた場合に使用します。フォーマッターはブロックやステートメントの改行を復元し、構文チェックはブラウザのJavaScriptエンジンでコードを再利用する前のミスを検出します。

埋め込み用に小さなスクリプトを圧縮するHTML、CMS設定、タグマネージャーのフィールドに収める必要がある短いプレーンJavaScriptには、圧縮モードでコメントや不要な空白を除去します。フルバンドラーを導入するほどでもないデプロイスニペット向けの軽量なローカルワークフローです。

共有前にサンプルコードを確認するチームメンバーに再現手順を送信したり、簡潔な回答を投稿したりする前に、コードを貼り付けて解析できるか確認し、レイアウトを正規化します。このツールはTypeScript、JSX、プロジェクトレベルの変換ではなく、ブラウザ互換のJavaScriptスニペットに最適です。

ベンダー提供の圧縮済みスクリプトを監査向けに整形する出荷されたmin.jsバンドルを展開して、難読化されたロジック、デッドブランチ、予期しないネットワーク呼び出しを確認してからタグマネージャーに追加します。利用可能な場合はソースマップと照合してください。圧縮ファイルの変数名のリネームはフォーマットだけでは元に戻せないためです。return文、テンプレートリテラル、連鎖する.then()呼び出し周辺の出力に注意してください。ECMA-262セクション11.9.1の自動セミコロン挿入（ASI）ルールにより、フォーマッターは`(`、`[`、`` ` ``、`+`、`-`、`/`で始まるステートメントの直前で改行してはならず、さもないとプログラムのセマンティクスが密かに変わってしまいます。

Prettierのデフォルトとフォーマット結果を比較するスニペットをこのフォーマッターとプロジェクトのPrettier設定の両方に通して、アロー関数、三項演算子、連鎖呼び出し周辺のスペースの違いを確認します。PrettierはJSX、TypeScript、インポートの順序をこのスタンドアロンブラウザフォーマッターとは異なる方法で処理するため、簡易的な健全性チェックとして使用し、代替とはしないでください。Prettierの`printWidth`が80、100、120のいずれかで長い連鎖呼び出しの折り返し位置が変わり、シングルクォートとダブルクォートの切り替えはコメントを変更せずに文字列リテラルを再描画します。ただしJSX属性はブラウザがHTMLとして解析するためダブルクォートのままにする必要があります。このスタンドアロンフォーマッターはJSXを理解しません。

仕組み

JavaScriptのプリティプリンターは、ECMA-262文法に基づく3段階のパイプラインで動作します。まずレキサーがトークン列（IdentifierName、NumericLiteral、StringLiteral、TemplateHead/Middle/Tail、Punctuator、Keyword、LineTerminator）を生成し、次にパーサーがESTree互換のAST（@babel/parser、acorn、esprimaで共通の形状）を構築し、最後にプリンターがツリーを走査してインデント幅とターゲットのprintWidthに基づくルールでテキストを出力します。PrettierはASTをgroup、indent、line、softlineというプリミティブで構成されるDoc中間表現に変換し、レイアウトアルゴリズムが改行位置を決定して出力がprintWidth（80、100、120）に収まるようにします。一方ESLint --fixは元のソースに対してトークンを直接書き換える方式で、コメントの保持に優れますが自動修正を有効にしたルールのみが適用されます。プリンターは自由に改行を挿入できません。ECMA-262 §11.9.1の自動セミコロン挿入（ASI）により、次のトークンが継続トークンでない限り、LineTerminatorの位置で文が終了します。具体的には、`(`、`[`、`` ` ``、`+`、`-`、`/`、`++`/`--`で始まる行の直前で改行するとセマンティクスが密かに変わり、`return`、`throw`、`break`、`continue`、`yield`の直後に改行するとセミコロンが挿入されてオペランドが破棄されます。テンプレートリテラル（バッククォート）は内部のバイト列をそのまま保持し、埋め込まれた`${}`式はJSとして再フォーマットされますが、周囲の空白は変更されません。コメントはleading/trailing/innerComments配列を通じてASTノードに関連付けられ、ラウンドトリップでも保持されます。レキシングと出力はソース長に対してO(n)で小さな定数倍です。パーサーはECMA-262のLR(1)風文法による単一トークン先読みにより、整形式のコードに対して実質的に線形です。標準的なJavaScriptパーサーはJSX、TypeScriptの型注釈、デコレーター、Flowをカバーしないため、これらには@babel/parserプラグインや@typescript-eslint/parserが必要です。プレーンJSツールで.tsxファイルを処理すると`: type`注釈が拒否されます。Source Map（Source Map v3）はビルドステップでスタックトレースの正確さを維持する必要がある場合に元の行・列マッピングを保持でき、行末コード（LF vs CRLF）はパース時ではなく書き出し時に正規化されます。

パイプライン：レキサー（ECMA-262 §12に基づくトークン列）→ ESTree AST（acorn/@babel/parser/esprima）→ プリンター。レキサーとプリンターはO(n)、パーサーは単一トークン先読みでO(n)。
ECMA-262 §11.9.1のASIトラップ：`(`、`[`、`` ` ``、`+`、`-`、`/`で始まるトークンの直前、および`++`/`--`の直前で行を分割してはならない。また`return`/`throw`/`break`/`continue`/`yield`の直後で即座に改行してはならない。
Prettier vs ESLint --fix：PrettierはASTをDoc中間表現（group/indent/line）に変換し、printWidth（80/100/120）に収まるレイアウトを選択する。ESLint --fixはトークンを直接書き換え、fixerタグ付きルールのみ適用する。
コメントの保持：leading/trailing/innerCommentsはASTノードに束縛される。宣言の直上にあるJSDocブロックは結合されたまま維持され、プリンターが前の文に孤立させることはない。
テンプレートリテラル（バッククォート）はバイト単位で保持される。`${}`内部のJSのみが再フォーマットされる。正規表現リテラルと文字列リテラルの引用符は、選択されたシングル/ダブルクォートスタイルに合わせて`\`エスケープを再計算して正規化される。
方言カバレッジ：プレーンJSパーサーはJSX、TypeScript型、デコレーター、Flowを拒否する。.tsx/.tsファイルには@babel/parserプラグイン['jsx','typescript','decorators-legacy']または@typescript-eslint/parserが必要。
出力の正規化：設定に応じてLFまたはCRLFで行末を書き出し（入力に依存しない）、末尾カンマのポリシーをマルチラインの配列/オブジェクト/呼び出しに適用し、ツールチェーンが元の行・列情報を保持する必要がある場合はSource Map v3を出力する。

使用例

フォーマット前

function greet(name){if(!name){return 'Hello, stranger';}const greeting=`Hello, ${name}!`;console.log(greeting);return greeting;}

フォーマット後（インデント 2 スペース）

function greet(name) {
  if (!name) {
    return 'Hello, stranger';
  }
  const greeting = `Hello, ${name}!`;
  console.log(greeting);
  return greeting;
}

圧縮（minify）後

function greet(n){if(!n)return"Hello, stranger";const e=`Hello, ${n}!`;return console.log(e),e}

よくある質問

フォーマッタはどのスタイルを使いますか？

ほとんどのビルドでは Prettier のデフォルト設定を使用します。行幅 80 桁、セミコロンあり、ダブルクォート、インデント 2 スペース、ES5 で有効な箇所には末尾カンマ。プロジェクトで別のスタイルを使用している場合はオプションを切り替えてください。同じ設定であれば結果は決定論的で、同じ入力からは常に同じ出力が得られます。

私の JS は実行されますか？

いいえ。ソースコードを解析して再出力するだけです。副作用、ネットワーク呼び出し、実行時エラーは関係ありません。フォーマッタはスクリプトを決して実行しません。

構文エラーは修正してくれますか？

いいえ。パーサーは無効な JavaScript のフォーマットを拒否し、解析が失敗した箇所を表示します。まず構文エラーを修正してください。よくある原因は、括弧の不足、IIFE からの return 後のセミコロン抜け、バックティックが対応していないテンプレートリテラルなどです。

JSX や TypeScript はサポートされていますか？

ほとんどの最新ビルドは JSX 付き JavaScript および TypeScript 構文 (.ts, .tsx) を解析できます。フォーマッタは解析結果に基づきどの構文か検出します。プレーンな ES5 で作業している場合は、誤検知エラーを避けるため TypeScript モードを無効にしてください。

JS をミニファイできますか？

一部のビルドにはミニファイ (Terser スタイル) モードがあり、変数名のリネーム、空白の削除、デッドコードの除去を行います。出力サイズは小さくなりますが可読性は失われます。本番ビルドにはミニファイを、ソースコードレビューにはフォーマットを使用してください。

私のコードはアップロードされますか？

いいえ。解析と出力は JavaScript ベースのパーサーを使用してブラウザ内で実行されます。貼り付けたコードは送信されません。

コメントの位置がわずかにずれるのはなぜですか？

Prettier や類似のフォーマッタは、コメントを最も近い AST ノードに紐付けます。2 つの関数の間にあるコメントが AST 上では下側の関数に「属する」と判定され、再配置されることがあります。インラインの末尾コメントは通常そのまま保持されますが、独立したコメントは位置がずれることがあります。