JavaScript コード整形 & 縮小ツール

乱雑な JavaScript をカスタムのインデントと中括弧のスタイルで整形したり、縮小してファイルサイズを削減したりできます。ES6+ をサポート。完全にブラウザ内で実行されます。コードがデバイスから離れることはありません。

整形 · 縮小 · ES6+ · クライアント側
入力 0 文字 · 0 行
出力 0 文字 · 0 行

JavaScript を整形・縮小する方法

このツールの使い方

JavaScript を入力パネルに貼り付け、モードタブから 整形 または 縮小 を選択すると、結果が即座に表示されます。処理前に、インデントサイズ、ブレーススタイル、改行処理などのオプションを調整します。出力をコピー をクリックしてクリップボードにコピーするか、.js をダウンロード でファイルを保存します。

整形オプションの説明

  • ブレーススタイルCollapse{ を同じ行に置きます (K&R / 標準 JS スタイル)。Expand{ を新しい行に置きます(Allman スタイル)。End-expand はハイブリッドで、elsecatch が新しい行に配置されます。
  • 改行を保持する — 元のコードに存在する空白行をそのまま保持します。スペースを論理的なグループ分けとして使用するコードに役立ちます。
  • JSLint-happy — Douglas Crockford の JSLint が強制するスタイルに合わせます。関数式の ( の前にスペースが入るなど、いくつかの調整が行われます。
  • 文字列のエスケープ解除\xNN および \uNNNN エスケープを、安全な場合にリテラル文字に戻します。

縮小オプションの説明

  • /*! ライセンス */ を保持/*! で始まるコメントを保存します。これはほとんどのライブラリが MIT/Apache 著作権ヘッダーを示すために使用する慣例で、配布コードに残す必要があります。
  • 末尾のセミコロンを削除} の直前の ; を削除します。バイトを節約できますが、差分が読みにくくなるため、デフォルトではオフです。

縮小ツールは意図的に保守的な設計で、空白とコメントのみを削除します。変数の名前変更、プロパティの変更、AST レベルのデッドコード削除は行いません。より積極的な最適化には、ビルドパイプライン内で terser または esbuild を使用してください。

js-beautify による提供

整形エンジンは js-beautify を使用しています。VS Code、Sublime Text、Atom など主要なオンラインフォーマッタと同じライブラリです。すべてがブラウザ内でローカルに実行されます。アップロード不要、サーバー通信なし、レート制限なし。500 KB の縮小バンドルをミリ秒単位で整形できます。

よくある質問

私の JavaScript コードはサーバーに送信されますか?

いいえ。すべての整形と縮小は、CDN から読み込まれた js-beautify を使用してブラウザ内で完全に処理されます。コードがデバイスから離れることはありません。

整形と縮小の違いは何ですか?

整形は適切なインデントと改行を使用してコードをフォーマットし、人間が読みやすくします。縮小は空白、コメント、不要な文字を削除してファイルサイズを削減し、本番環境向けに最適化します。

縮小ツールは変数の名前を変更しますか?

いいえ。このツールは空白とコメントの削除のみを実行します。変数の名前変更、識別子のマングル、AST レベルの最適化は行いません。より高度な圧縮には Terser、UglifyJS、esbuild をビルドパイプラインで使用してください。

ES6+ の構文を処理できますか?

はい。整形ツールはアロー関数、テンプレートリテラル、async/await、クラス、分割代入、スプレッド/レスト、オプショナルチェーン、Null 合体演算子など最新の JavaScript をサポートしています。

どのようなブレーススタイルオプションが利用できますか?

3 つのスタイル: Collapse(文と同じ行に開き括弧)、Expand(新しい行に開き括弧)、End-Expand(同じ行で開くが elsecatch は新しい行)。

関連ツール