JavaScript フォーマッタ & 圧縮器

JavaScript フォーマッターとは？#

JavaScript フォーマッターは、読みにくいコード——バンドラーの minified 出力、チャットからコピーした折りたたまれたスニペット、あるいは 5 人がそれぞれ異なるインデント習慣で編集したファイル——を受け取り、構造が見えるように書き直します。インデントは入れ子に合い、演算子は一貫したスペースを持ち、文は期待した場所で終わります。優れたフォーマッターは逆も行います: 最小のペイロードが必要なとき、不必要なものすべてを剥ぎ取ります。

このページは両方の仕事をこなし、それぞれがどう働くかについて正直です。整形は Babel パーサーを使った Prettier のスタンドアロンビルドで動きます——多くのチームがエディタで保存時に実行しているのと同じエンジンであるため、ここでの出力はプロジェクトが生成するものと一致します。圧縮は意図的に控えめです: コメントを剥ぎ取り、空白を折りたたみつつ改行はすべて保つため、自動セミコロン挿入（ASI）が壊れることはありません。これは esbuild や terser のようなトークンレベルの minifier ではありません——変数のリネーム、デッドコードの削除、プロパティ名の mangling は行いません。そのため、結果をそのまま JS エンジンに戻すのは安全ですが、本番バンドルの縮小には不適切なツールです。この違いを知っていることこそ、うまく使いこなす要点のすべてです。

使い方#

1. 左のJavaScriptペインにコードを貼り付けるか、サンプルをクリックして短い例を読み込みます。
2. ツールバーでインデントスタイルを選びます: 2、4、タブ。現代のプロジェクトでは 2 スペースがほぼ普遍的な既定です。タブは、タブを使う設定のエディタに貼ろうとしている場合にだけ選びます。
3. アクションをクリックします:
   • 整形 — 選んだインデントで Prettier を通してコードを再出力します。セミコロンは既定で出力され、Prettier の標準挙動に一致します。
   • 圧縮 — // 行コメントと /* */ ブロックコメントを削除し、スペースとタブの連続を折りたたみ、各行の末尾の空白を落とします。改行は意図的に保たれます。
4. 右側の出力ペインで結果を読みます。出力ヘッダーのコピーで取り出します。クリアは両ペインを空にします。

整形が入力を解析できないとき（迷いの括弧、終端のないテンプレートリテラル）、ステータスバーは誤解を招く再整形ではなく Prettier のエラーメッセージを示すため、あなたは誤った再整形を追いかけるのではなく、本当の問題を直せます。

主な特徴#

• 本物の Prettier エンジン。 整形は手作りの beautifier ではなく、Babel + estree プラグインを伴うスタンドアロン Prettier ビルドで走ります。ここで得られるものは prettier --write が生成するものです。
• ASI セーフな圧縮。 圧縮中も改行が保たれるため、自動セミコロン挿入に依存していた行は機能し続けます。改行を盲目的に削ることこそ、安直な「minifier」がバグを持ち込む方法です。
• 文字列・正規表現・テンプレート対応。 コメント削除器は、文字列内の // と本当の行コメント、除算としての / と正規表現リテラルの開始としての / の違いを知っているため、コードを食い破ることはありません。
• 2 ペイン、コピーレディ。 入力と出力が並んで置かれ、出力は読み取り専用で 1 クリックコピー付きです。
• 完全にブラウザ内で動作。 バックエンドもアップロードもありません。Prettier はページに同梱されオンデマンドで読み込まれるため、スクリプトは厳格な self 限定のコンテンツセキュリティポリシーにも適合します。

実例#

古い gist からコピーした、コメントと不統一なインデントを含む関数:

入力:

function fetchUser(id){/*legacy: returns null when missing*/
  const url="https://example.com/users/"+id
    const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

2 スペースで整形をクリック:

function fetchUser(id) {
  /*legacy: returns null when missing*/
  const url = "https://example.com/users/" + id;
  const opts = { method: "GET", cache: "no-store" };
  return fetch(url, opts).then((r) => r.json());
}

Prettier は曲がったインデントを直し、演算子のスペースを一貫させ、セミコロンを追加します——ブロックコメントは元の場所にそのまま残します。ここで元の入力に対して圧縮をクリックすると:

function fetchUser(id){
const url="https://example.com/users/"+id
const opts={method:"GET",cache:"no-store"}
return fetch(url,opts).then(r=>r.json())}

コメントは消え、迷いのインデントは消えましたが、すべての文は依然として独自の行にあります。何が起きなかったかに注目してください: fetchUser は短くならず、"GET" は変換されず、アロー関数はパラメータリストを保ちました。これは読める圧縮であり、script タグに戻して貼るのも安全です——バンドラーがビルド時にやるような攻撃的な mangle ではありません。

よくある質問#

圧縮はなぜ変数をリネームしたりバンドルを縮めたりしないのですか？#

それを正しく行うには、完全なパーサーとコード生成のパス（スコープ解析、プロパティ追跡、副作用検出）が必要だからです。このツールの圧縮は意図的にスキャナーです: 高速で、依存が軽く、実行時の挙動を変えないことが証明可能です。本番バンドルにはオフラインで本物のバンドラーを走らせてください。このページは手軽な整理、ドキュメントへの貼り付け、誰かが読むスニペットの準備に使います。

minifier は文字列内のコメントも削除しますか？#

いいえ。スキャナーはソースを文字ごとに歩き、現在シングルクォート文字列、ダブルクォート文字列、テンプレートリテラル、正規表現リテラルのいずれの中にいるかを追跡します。それらのいずれかの中に現れた // はテキストとして扱われ、そのまま残されます。削除されるのは本当のコメントだけです。

TypeScript や JSX は扱えますか？#

整形のパスは Babel パーサーを使い、JSX を受け付けます。TypeScript の型注釈や .ts/.tsx 固有の構文はここでは有効化されていません——それらが必要な場合、このツールは黙って間違った出力をするのではなく解析エラーを報告します。このページはプレーンな JavaScript に使ってください。

コードはどこかにアップロードされますか？#

いいえ。すべてはあなたが見ているタブの中で走ります。Prettier はページに同梱されオンデマンドでインポートされ、ソーステキストはメモリ内で解析され、ネットワーク越しに送られることはありません。