JavaScriptフォーマッター
JavaScriptコードをオンラインで整形・美化。無料。
入力
出力
JavaScriptフォーマッターとは？
サードパーティAPIから2,000文字の1行JavaScript文字列を受け取ったり、本番バンドルからバグを追跡しようとしているが、まったく読めない — そんな時のためのツールです。JavaScriptフォーマッターは、適切なインデント、改行、スペースを追加して構造を数秒で明確にします。ECMAScript仕様が言語を定義しており、PrettierやESLintがCIパイプラインで自動フォーマットを担います。素早くフォーマットしたい時はここで行えます。コードはブラウザ外に出ないため、APIキーや本番データを含む場合も安全です。webpackやRollupが生成するミニファイされた出力もデバッグ用に整形できます。
このツールは完全にブラウザ内で動作します。サーバーには何も送信されません。JSを貼り付けるかファイルをアップロードすると、フォーマットされた出力が得られます。本番バンドルにはミニファイを使用してください。検証にはJavaScriptバリデーターを、ミニファイのみにはJavaScriptミニファイアーを使用してください。
このツールの使い方
貼り付けまたはアップロード
左パネルにJavaScriptを貼り付けるか、.jsまたは.txtファイルをアップロードしてください。サンプルで例のコードを読み込めます。クリアでリセットできます。
出力を確認
右パネルは自動的にフォーマットされたコードで更新されます。本番用のコンパクト版にはミニファイを使用してください。
コピーまたはダウンロード
結果を取得するにはコピーまたはダウンロードを使用してください。JSX/ReactにはJSXフォーマッターを、TypeScript変換にはJavaScriptからTypeScriptを使用してください。
JavaScriptフォーマットの例
ミニファイされたJavaScriptコードのフォーマット例です。
例：加入者プラン検索
ミニファイされた入力：
フォーマットされた出力：
JavaScriptフォーマッターが役立つ場面
ミニファイされたコードのデバッグ、webpackやrollupのバンドルの確認、本番スクリプトからの学習時に、フォーマットで構造が見やすくなります。スタックトレース、サードパーティコード、素早い可読性チェックに最適です。ECMAScript仕様が言語を定義しています。難読化されたコードには、まずJavaScriptデオブフスケーターを使用してください。
よくある質問
データはプライベートですか？
はい。フォーマットは完全にブラウザ内で行われます。データはサーバーに送信されません。
フォーマッターとミニファイアーの違いは？
フォーマッターは可読性のためインデントを追加します。ミニファイアーはファイルサイズを小さくするため空白とコメントを削除します。このツールは両方できます。
ES6+はサポートしていますか？
はい。モダンなJavaScript構文（アロー関数、クラス、async/await）をサポートしています。
JSXはどうですか？
JSXとReactコードにはJSXフォーマッターを使用してください。
構文エラーを修正できますか？
いいえ。無効なJavaScriptはエラーを表示します。まずJavaScriptバリデーターで構文を確認してください。
関連ツール
詳細：ECMAScript、MDN JavaScript、webpack、rollup、ソースマップ、Vite、TypeScript。