使い方
上部で「整形」か「圧縮」を選び、左の入力欄にコードを貼り付けます(ファイルを開く・ドラッグ&ドロップも可。Shift_JIS のファイルも読めます)。
言語は「自動判定」のままで拡張子と内容から選ばれます。うまく判定されないときは手動で選んでください。
整形では、インデント(2・4 スペース/タブ)、1 行の幅、引用符、セミコロン、末尾カンマを切り替えます。圧縮では、コメントの扱いと、変数名を短くするか、HTML の <style>・<script> の中身も圧縮するかを選びます。
右に結果が表示されます。構文エラーがあると行・列と該当行の抜粋が出て、「エラー位置へ移動」で入力欄の該当箇所を選択できます。
「コピー」または「ダウンロード」で保存します。ファイル名の拡張子は元のファイルに合わせ、圧縮では .min が付きます。
できること
7 言語を Prettier で整形
JavaScript(JSX 込み)・TypeScript(TSX 込み)・CSS・SCSS・Less・HTML・Vue(.vue)を Prettier 3.9.10 で整形します。整形結果はもう一度整形しても変わりません(冪等)。整形エンジンは言語ごとに必要になった時点で読み込み、初期表示を重くしません。
拡張子と内容から言語を自動判定
拡張子(.ts・.tsx・.scss・.vue など)を優先し、貼り付けでは内容(型注釈・interface・$変数・@mixin・HTML タグなど)から候補を決めます。最初の候補で構文エラーになったときは次の候補(例: JS で失敗したら TS)も試します。
エラーは行・列つきで、入力は消えない
構文エラーの位置を行・列と該当行の抜粋で示し、入力欄の該当箇所へ移動できます。エラーでも入力したコードは消えません。エラー内容の詳細は画面にだけ表示し、通知やログには送りません。
意味を変えない圧縮
JavaScript は Terser(トップレベルの名前は変えません)で圧縮します。CSS は文字列・url()・エスケープ・/*! コメントを一切変えず、空白とコメントだけを除去します。HTML は <pre>・<textarea>・white-space を指定した要素の中身、属性値、 、インライン要素間の空白 1 つを保ちます。
HTML 圧縮の安全側の既定
既定では <head> や表の構造タグまわりなど、描画に影響しない空白だけを消します。<div> や <p> などブロック要素まわりの空白も消すオプションは、CSS で display を変えていると見た目が変わるため、明示的に選んだときだけ有効です。
削減率つき・日本語もそのまま
圧縮前後のサイズと削減率を表示し、圧縮で大きくなる場合(すでに圧縮済みなど)はそう伝えます。識別子・コメント・文字列の日本語は変更しません。
こんなときに
- 1 行に潰れたコードやログに出ていたスニペットを、読める形に整えてレビューしたい
- チームで書式がばらばらなファイルを、同じ設定(インデント・引用符・セミコロン)にそろえたい
- 配布用の CSS・JavaScript・HTML を、サイズ削減の目安を見ながら圧縮したい
- インストール不要のブラウザだけで、Prettier と同じ整形結果を確認したい
- 社外に出せないコードを、アップロードせずに整形・圧縮したい
対応形式
入力
出力
対応状況
| 機能 | 対応 | 補足 |
|---|---|---|
| JavaScript・JSX・TypeScript・TSX・CSS・SCSS・Less・HTML・Vue の整形 | 対応 | Prettier 3.9.10。Vue の <script lang="ts"> も整形 |
| 整形オプション(インデント・幅・引用符・セミコロン・末尾カンマ) | 対応 | — |
| JavaScript の圧縮(空白・コメント除去、ローカル変数名の短縮) | 対応 | Terser。トップレベルの名前は変更しません |
| CSS の圧縮 | 対応 | 空白とコメントの除去のみ。数値・色・セレクタの書き換えや、規則の統合はしません |
| HTML の圧縮 | 一部対応 | 意味が変わらない範囲のみ。<pre>・<textarea> は保持。クラス名・属性の書き換え、タグの省略、引用符の除去はしません |
| TypeScript・JSX・SCSS・Less・Vue の圧縮 | 非対応 | 型や構文を取り除くコンパイルが必要なため。先に JS / CSS に変換してください(整形は可能) |
| JSON・SQL・XML・YAML・Markdown の整形 | 非対応 | それぞれ JSON Studio・SQL Studio・XML Studio・YAML / TOML Studio・Markdown Studio をお使いください |
| 難読化 | 非対応 | 変数名の短縮はしますが、読みにくくするための変換(文字列の暗号化など)はしません。ソースを隠す目的には使えません |
| コードの実行・型チェック・Lint・不要コードの検出 | 非対応 | 構文解析ができる範囲で整形するだけです |
| 設定ファイル(.prettierrc、EditorConfig)の読み込み | 非対応 | 画面のオプションだけで指定します |
| オフラインでの利用 | 対応 | 一度開いたあとは通信なしで動作 |
制限・注意事項
- 入力は最大 100 万文字です。10 万文字を超えると自動実行を止め、「実行」ボタンで処理します。
- 整形は Prettier、JavaScript の圧縮は Terser に依存するため、各ツールが未対応の新しい構文は構文エラーとして位置を表示します。
- 言語の自動判定はヒューリスティックです。判定が外れたときは言語を手動で選んでください。
- HTML 圧縮は CSS を解釈しないため、`white-space: pre` を外部の CSS で指定した要素の空白は検出できません(style 属性での指定は検出します)。
- 圧縮で変更しない部分(インライン <script> の type が JavaScript 以外、解析できなかったスクリプトなど)はそのまま残します。
- 色付けは簡易的なものです(構文解析ではありません)。コピー・ダウンロードされる結果には影響しません。
プライバシーと安全性
入力したコードと読み込んだファイルは、お使いのブラウザの中だけで処理されます。サーバーへの送信・保存は一切行わないため、社外秘のソースでも安心して整形・圧縮できます。ページを閉じると内容は消去されます。
よくある質問
Prettier と同じ結果になりますか?
圧縮で動作が変わることはありますか?
TypeScript は圧縮できますか?
HTML を圧縮すると <pre> の中身は崩れませんか?
難読化はできますか?
コードはサーバーに送られますか?
関連ツール
テキスト・コード Diff
変更前と変更後を貼り付けるかファイルをドロップするだけで、追加・削除された行と、行の中で変わった単語まで色分けして表示します。結果は unified 形式のパッチとしてコピー・保存でき、入力はブラウザの外へ出ません。
UUID / ULID / NanoID / トークン生成
ページを開いた瞬間に UUID が 1 件生成済み。種類を選ぶだけで UUID v7・ULID・NanoID・ランダムトークンに切り替わり、最大 1 万件を .txt / .csv / .json で保存できます。既存の UUID や ULID を貼り付ければ、埋め込まれた時刻やバージョンも読み取れます。
正規表現テスター(Regex Tester)
パターンを入力すると、一致した箇所がテスト文字列の上で即座に色付けされます。キャプチャグループ・置換結果・パターンの意味まで一画面で確認でき、ブラウザを固まらせる危険なパターンは 1 秒で自動停止します。
JSON 整形・検証(JSON Studio)
JSON を貼り付けるだけで整形・1 行化・構文チェック。エラーは「何行目の何が悪いか」まで表示し、コメントや末尾カンマは自動修復できます。データは端末の外へ送信しません。
XML 整形・検証(XML Studio)
XML を貼り付けるだけで整形・1 行化・検証。エラーは「何行目の何がどう悪いか」まで表示し、意味を変える空白(混在内容・xml:space)には手を付けません。XPath 検索と JSON 変換も同じ画面で。データは端末の外へ送信しません。
YAML / TOML 検証・整形・変換(YAML / TOML Studio)
YAML・TOML・JSON を貼り付けるだけで構文チェック・整形・相互変換。エラーは行と列で示し、「no が false になる」などの型の落とし穴と、変換で失われるものを事前に警告します。データは端末の外へ送信しません。
最終更新: