CreaTools LogoCreaTools
Tech Notes
JS Formatter

JS Formatterの使い方｜整形と圧縮を1ボタンで切り替える

2026-02-15

まず、ここに貼ってください

JavaScriptで「読めない」「サイズを減らしたい」「整形がバラバラ」のいずれかなら、考える前に JS Formatter に貼ってください。

整形はPrettier、圧縮はTerser。エディタを開いてプラグインを設定する手間なく、ブラウザだけで完結します。コードはサーバーに送信されません。

即断テーブル

困っていること操作補足
ミニファイされたJSを読みたい「整形」ボタンPrettier準拠で見やすく
本番用にサイズを減らしたい「圧縮」ボタンTerserで変数名も短縮
TypeScriptを整形したい「言語」を TypeScript に整形のみ対応
インデントを揃えたい「インデント」を選択2/4スペース・タブ

このツールで解決できる3つの問題

1. 「外部CDNから取ってきたJSが1行で読めない」

min.js をデバッグしたいときに起きるやつです。Chromeの「Pretty print」でも読めますが、コピーして共有したい場合はテキストとして整形済みが必要。

→ 貼り付けて「整形」をクリック

Prettier標準ルール（セミコロン付き、ダブルクォート、80桁折り返し、ES5互換のtrailing comma）で出力されます。

2. 「本番デプロイ前にコードサイズを減らしたい」

WebpackやViteを使わない単発スクリプトでも、Terserに通すだけで30〜70%は縮みます。

→ 貼り付けて「圧縮」をクリック

Terserの圧縮設定:

  • compress: true （デッドコード除去・式の最適化）
  • mangle: true （変数名を1〜2文字に短縮）
  • format.comments: false （コメント全削除）
  • ecma: 2020 （モダン構文を出力）

出力欄の下に「元比 32.5%」のように圧縮率が表示されます。

3. 「TypeScriptの整形だけサクッとやりたい」

tsc --noEmit だけかけたいけどPrettierも欲しい、というケースで便利です。

→ 「言語」を TypeScript に切り替え → 「整形」

ただしTypeScriptの圧縮は未対応。Terserは構文を理解しないため、tsc でJavaScriptに変換してから圧縮してください。UI上も「圧縮」ボタンが無効化されます。

ボタンの違い

ボタン動作使うとき
整形Prettierで整形読みやすく、共有しやすく
圧縮Terserでminify本番配信、ファイルサイズ削減

オプション

項目選択肢備考
言語JavaScript / TypeScriptTS は整形のみ
インデント2スペース / 4スペース / タブ整形時のみ反映

判断フロー

JSで困った
    ↓
JS Formatterに貼る
    ↓
何をしたい？
    ├── 読みたい → 「整形」
    ├── 縮めたい → 「圧縮」
    └── TS整形 → 言語を切り替えて「整形」

関連記事

記事読むタイミング
整形と圧縮（minify）の使い分けいつ整形/圧縮するか迷ったとき
Terserの圧縮で何が削られるのかminify結果を理解したいとき