JavaScript整形・圧縮
このツールでできること
JavaScript（ECMAScript）コードを読みやすく整形、または圧縮（Minify）する軽量オンラインツールです。ブラウザ完結型のため、コードはサーバーに送信されません。圧縮済みコードのデバッグや、書きかけコードのインデント調整に便利です。
特徴
- 整形 —
{・}・;を基準にインデントと改行を追加。 - 圧縮（Minify） — 行コメント・ブロックコメントを削除し、空白を最小化。
- インデント幅の指定 — スペース2・4・タブから選べます。
- クライアント完結 — コードはサーバーに送信されません。
使い方
- 入力欄にJavaScriptを貼り付けます。
- 「整形」または「圧縮」ボタンを押します。
- 右側に結果が表示されます。
注意
本ツールは軽量な簡易整形です。Prettier・ESLint のような完全な AST ベースの整形は行いません。テンプレートリテラル・JSX・TypeScript のジェネリクスなど一部の構文では期待通りにならない場合があります。複雑なコードベースには専用ツールの使用をおすすめします。
こんなときに使えます
- 本番環境の Minify された JavaScript を解析したいとき
- ブラウザの DevTools で見つけた圧縮コードを読み解きたいとき
- ブックマークレット用の短い JS を手動で圧縮したいとき
- コードレビューで書きかけコードのインデントを整えたいとき
- チュートリアル動画の視聴中にコード片の整形を確認したいとき
- Stack Overflow などから引用したコードをプロジェクトに合わせるとき
保持される構文
- 文字列リテラル — シングル・ダブル・テンプレートリテラルは内部を保持します。
- 正規表現リテラル — スラッシュで囲まれた正規表現は識別して保持します。
- コメント — 整形時は保持、圧縮時は削除されます。
本ツールの限界
本ツールは軽量な簡易整形で、AST（抽象構文木）ベースの完全な整形は行いません。そのため、以下のケースでは期待通りにならない場合があります。
- JSX（React）— タグが HTML として解釈されない
- TypeScript のジェネリクス（
<T>）— 比較演算子と区別できない - 自動セミコロン挿入に依存した改行スタイル
- 複雑なテンプレートリテラルのネスト
本格的な整形・Minify には Prettier・ESLint・terser・esbuild など専用のツールをお勧めします。本ツールは「ちょっと確認したい」「CLIを使えない環境で一時的に整えたい」用途に適しています。
よくある質問
- 圧縮後のコードは動作しますか？
- 空白・コメント削除のみの保守的な圧縮で、変数名は変更しないため、通常は動作します。ただし自動セミコロン挿入に依存したコードでは壊れる可能性があるため、テスト後の使用を推奨します。
- テンプレートリテラルは保持されますか？
- 文字列・テンプレートリテラル・正規表現の中身はそのまま保持するよう配慮しています。
- ソースマップは出力されますか？
- 本ツールはソースマップを出力しません。ソースマップが必要な場合はビルドツール（webpack・esbuild・terser 等）をご利用ください。
- ES Modules（import/export）は扱えますか？
- はい。
import・export文もそのまま整形できます。ただし、静的解析は行わないため、未使用の import を削除する Tree-shaking は行いません。 - 変数名は短縮されますか？
- いいえ。本ツールの圧縮は空白・コメント削除のみで、変数名（識別子）の短縮は行いません。変数名を短縮する本格的な Minify が必要な場合は terser や UglifyJS をご利用ください。
- 難読化（obfuscation）はできますか？
- いいえ、難読化機能はありません。コードの可読性を下げて解析を困難にする処理は、専用の難読化ツール（JavaScript Obfuscator など）をお使いください。
- eval() のコードは安全ですか？
- 本ツールは入力コードを実行しません。整形・圧縮は静的なテキスト処理のみで、
eval()の使用はありません。悪意のあるコードを貼り付けても実行はされないため安全です。
