UTILS.
100% ブラウザ内で完結
🎨

JavaScript 整形ツール / フォーマッター

圧縮済みや乱雑な JavaScript や JSON を、一貫したインデント、スペース、改行で見やすく整形します。完全にブラウザ内で動く自作フォーマッターです。

— ここに結果が表示されます —

このツールについて

JavaScript 整形ツールは、圧縮された 1 行や不揃いなインデントの JavaScript や JSON を、均一なインデントとスペースを持つ読みやすいクリーンなソースに再整形します。バンドルされたライブラリを読んだり、コピーしたスニペットを整えたり、JSON の塊を調べたりするのに便利です。すべてはブラウザ内で行われます。コードはテキストとして再整形されるだけで決して実行されないため、eval も new Function もなく、何もアップロードされません。

このフォーマッターは正規表現の小手先ではなく、自作のトークナイザーです。文字列、テンプレートリテラル、正規表現、行/ブロックコメントの内部を正しく飛ばしながらソースをトークンに走査するため、それらの内部の引用符やスラッシュが構造として誤認されることはありません。古典的な後読みヒューリスティックによって、除算演算子と正規表現リテラルを区別します。トークン列は、'{'、'['、';' の後に改行を、'}' と ']' の前の行にデデントを、オブジェクトや配列リテラル内では 1 行 1 項目を、演算子の周囲やキーワードの後に 1 つのスペースを付けて再出力されます。

インデントは 2 スペース、4 スペース、またはタブから選び、波括弧スタイルは collapse なら開き波括弧を同じ行に残し(K&R / 1TBS)、expand なら独立した行へ移します(Allman)。このツールは文字列と正規表現の内容をバイト単位で保持するため、再整形されたコードは入力と意味的に同一です。結果はそのままエディターに貼り付けられます。

よくある質問

コードを実行または評価しますか?
いいえ。整形ツールはソースをトークン化してテキストとして再出力するだけです。eval や new Function を呼び出すことも、コードを実行することも決してないため、信頼できない、または独自の JavaScript を貼り付けても安全です。すべての処理はブラウザ内にとどまります。
JSON でも動作しますか?
はい。JSON は JavaScript 構文のサブセットなので、圧縮された JSON のオブジェクトや配列を貼り付けると、インデントされた 1 キー 1 行の形に再整形されます。文字列、数値、ネストされた構造は JavaScript と同じように整形されます。
波括弧スタイルの違いは何ですか?
Collapse(K&R / 1TBS)は開き波括弧を文と同じ行に残します(例: 'if (x) {')。Expand(Allman)は開き波括弧を文の下の独立した行に置きます。どちらも同一で有効なコードを生成し、レイアウトだけが異なります。
コードの動作が変わりますか?
いいえ。変わるのは空白、インデント、改行だけです。文字列、テンプレートリテラル、正規表現の内容は正確に保持されるため、再整形された出力は元のソースと機能的に同一です。

その他のツール