JavaScript整形 - 無料オンラインツール

機能

整形と圧縮を切り替え

インデントを指定

シンタックスハイライト

使い方

1. 左側の入力ボックスにJavaScriptを貼り付けます。

2. 「整形」で見やすく整形、「圧縮」で圧縮します。

3. 整形されたコードをコピーします。

このツールについて

圧縮されたスクリプト、チャットから貼り付けたコード、ブラウザーで開いたバンドルファイルは、1行に詰まっていて読むのが大変です。このフォーマッターは波括弧・角括弧・丸括弧をもとに JavaScript をインデントし直し、文を1行ずつに分け、文字列やコメントはそのまま残すので、関数やオブジェクトの構造が再び見えるようになります。インデントはスペース2つ・スペース4つ・タブから選べます。「圧縮」はその逆で、コメントや余分な空白を取り除いて短いコードにします。ブラウザー内ですぐに動く軽量なフォーマッターで、完全なコンパイラーではないため、コードを読んだり整えたりするのに最適です。プロジェクト全体で書式をそろえるには Prettier やエディターの整形機能を使ってください。

よくある質問

難読化や圧縮されたコードを元どおりに戻せますか？

整形でインデントと改行が戻るので圧縮コードは読めるようになりますが、a、b、e のように短くされた変数名を元の名前に戻すことはできません。それにはソースマップが必要です。

TypeScript や JSX に対応していますか？

インデントは括弧に従うので、簡単な TypeScript や JSX はそれなりに整形できることが多いですが、型注釈や JSX のタグを特別に解析するわけではありません。これらの言語を確実に整形するには Prettier を使ってください。

圧縮した出力は本番環境で使っても安全ですか？

コメントと空白は削除しますが、Terser や esbuild などの専用ツールのように変数名の短縮や不要なコードの削除は行いません。本番のビルドにはソースマップも生成できるバンドラーの圧縮機能を使ってください。

整形するとコードの動作は変わりますか？

フォーマッターが変えるのは空白と改行だけです。主なリスクは、行をまたいだセミコロンの自動挿入に依存しているコードです。コミットする前に、整形後のコードで必ずテストを実行してください。

正規表現のあたりで出力がおかしくなるのはなぜですか？

/[a-z]+/ のような正規表現リテラルは、軽量なフォーマッターには割り算に見えることがあります。複雑な正規表現を含む行が変に分割された場合は、その行を手で直すか、完全なパーサーを使うフォーマッターを利用してください。

JavaScript整形＆ビューティファイア

機能

使い方

このツールについて

よくある質問

関連ツール