JavaScriptのコード整形と圧縮の目的
JavaScriptの開発において、ソースコードの「読みやすさ」と「実行時のパフォーマンス」は相反する関係にあります。開発者がコードを記述、デバッグ、保守する段階では、適切なインデント、改行、コメント、そして意味のある変数名が不可欠です。これらはコードの可読性を高め、開発効率を向上させます。
一方で、WebブラウザがJavaScriptファイルをダウンロードして実行する段階では、これらの人間向けの要素はすべて余分なデータとなります。コード整形（Beautify）は、圧縮や難読化によって構造が失われたコードにインデントやスペースを再適用し、人間が解析しやすい状態に戻すために使用されます。これに対して、圧縮（Minify）は本番環境へのデプロイ時に配信サイズを削減し、ページの読み込み速度を高速化するために行われます。
圧縮処理におけるコードサイズと可読性のトレードオフ
JavaScriptを圧縮する際、ファイルサイズを極限まで小さくすることと、コードの可読性を一定に保つことの間にはトレードオフが存在します。本ツールでは、圧縮時のローカル変数名の扱いについて2つのオプションを選択できます。
- Shorten（短縮）: ローカル変数を「a」や「b」といった1文字のアルファベットにリネームします。これにより、ファイルサイズを最も小さく抑えることができますが、圧縮後のコードを人間が読んで理解することは極めて困難になります。
- Keep（保持）: ローカル変数名を変更せず、そのままの状態で残します。ファイルサイズは「Shorten（短縮）」に比べてわずかに大きくなりますが、コードの論理構造や変数の意味が維持されるため、本番環境でのデバッグやエラーログの解析が容易になります。
いずれのオプションを選択した場合でも、プログラムの動作自体に影響はありません。
空白、コメント、デッドコードがファイルサイズに与える影響
JavaScriptファイルに含まれるスペース、タブ、改行などの空白文字や、開発者向けのコメントは、ブラウザがコードを実行する上では一切不要な要素です。これらはファイルのバイト数を増加させ、ネットワーク転送の遅延を引き起こす原因となります。
圧縮処理を実行すると、これらの不要な空白やコメントはすべて自動的に削除されます。また、実行されることのない無駄なコード（デッドコード）も検出され、取り除かれます。ただし、著作権情報やライセンス条項が記述された /*! … */ 形式のライセンスバナーについては、圧縮処理中も削除されずにそのまま保持されます。
整形と「復元」の限界
圧縮されたJavaScriptに対してコード整形を行うことで、インデントや改行が再配置され、ネスト構造や制御フローを視覚的に理解することは可能になります。しかし、これは完全な「元に戻す（アンミニファイ）」処理ではありません。
圧縮の過程で一度破棄された元の変数名や関数名、および記述されていたコメントは、ファイル内から完全に消失しているため、どのような整形ツールを使用しても復元することは不可能です。整形によって得られるのは、元のコードとまったく同じ動作をし、きれいにレイアウトし直された、匿名化されたコードとなります。
ツールの仕様とエラーハンドリング
本ツールは、最大3,000,000文字までのJavaScriptコードを入力として受け付けます。入力されたコードは、以下のルールおよび制限に基づいて処理されます。
- インデント選択: 整形時には、インデントのスタイルを「2 spaces」、「4 spaces」、または「Tab」から選択できます。
- サイズ制限エラー: 入力された文字数が3,000,000文字を超えている場合、「ファイルのサイズが大きすぎるため処理できません。より小さいファイルでお試しください。」というエラーメッセージが表示されます。
- タイムアウト: 処理時間が20秒を超えると、処理が中断され「処理に時間がかかりすぎたため中断されました。より小さいファイルでお試しください。」と表示されます。
- 構文エラー: 入力されたJavaScriptに構文上の誤りがあり処理できない場合は、「このJavaScriptを処理できませんでした。」と表示されます。
- 実行可能コードの不在: 圧縮の結果、実行可能なコードが何も残らなかった場合は、「圧縮後にコードが残りませんでした。入力されたソースに実行可能なコードが含まれているか確認してください。」と表示されます。
- クリア機能: 「クリア」をクリックすると、入力エリアと出力エリアのコードが消去され、保存されていたドラフトも削除されて「クリアされました。」の状態になります。
処理が正常に完了すると、出力エリアに結果が表示され、行数、文字数、UTF-8バイト換算のサイズを確認できます。圧縮処理の場合は、削減率を示す「圧縮完了 — {pct}% 削減されました。」というメッセージが表示されます。
プライバシーとデータ処理について
本ツールに入力されたJavaScriptコードの整形および圧縮処理は、すべて利用者のブラウザ上でローカルに実行されます。コードデータが外部のサーバーやBroBroGoにアップロードされることはありません。
よくある質問（FAQ）
コード整形（Beautify）と圧縮（Minify）の違いは何ですか？
「コード整形（Beautify）」は、コードを読みやすくデバッグしやすくするために、インデントや改行を再調整します。圧縮または難読化されたファイルを解析する際に最適です。一方、「圧縮（Minify）」はその逆を行い、不要なスペース、コメント、デッドコードを削除して、ファイルのダウンロード速度を向上させます。コードを読むときは整形を、本番環境へデプロイするときは圧縮を使用します。
圧縮されたコードを完全に元の状態に戻すことはできますか？
インデントや改行を復元してロジックを読みやすくすることはできますが、元の変数名やコメントを復元することはできません。これらは圧縮時に完全に破棄されるため、どのようなツールを使っても復元不可能です。復元されるのは、きれいにレイアウトし直された同一の動作をするコードとなります。
変数名の「Shorten（短縮）」と「Keep（保持）」オプションの違いは何ですか？
どちらの設定でもスペース、コメント、デッドコードは削除され、スクリプトの動作自体は変わりません。「Shorten（短縮）」はローカル変数を1文字のアルファベットにリネームし、本番配信用にファイルサイズを極限まで小さくします。「Keep（保持）」は変数名をそのまま残すため、ファイルサイズは少し大きくなりますが、コードの可読性が保たれデバッグが容易になります。