JavaScriptフォーマッター
構文ハイライト付きでJavaScriptをフォーマット、ミニファイ、検証
入力
出力
JavaScriptフォーマッターとは？
JavaScriptはWebを動かしています。ミニファイされたり乱れたJSは読みにくくデバッグも困難です。JavaScriptフォーマッターは、生のコードやミニファイされたコードにインデントと改行を追加します。ECMAScript仕様が言語を定義しています。
このツールは完全にブラウザ内で動作します。サーバーには何も送信されません。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。