コード整形・圧縮(Code Formatter)

コードを貼り付けるだけで、言語を自動判定して整形できます。インデント・1 行の幅・セミコロン・引用符・末尾カンマを選べ、JavaScript・CSS・HTML は圧縮前後のサイズと削減率も表示。入力は端末の外へ出ません。

端末内で処理・アップロードなし

ファイルや入力内容はお使いの端末(ブラウザ)の中だけで処理され、サーバーへは送信されません。

入力コード
0 文字0 行
出力コードを入力すると、ここに結果が表示されます
コードを入力すると、ここに結果が表示されます

使い方

  1. 上部で「整形」か「圧縮」を選び、左の入力欄にコードを貼り付けます(ファイルを開く・ドラッグ&ドロップも可。Shift_JIS のファイルも読めます)。

  2. 言語は「自動判定」のままで拡張子と内容から選ばれます。うまく判定されないときは手動で選んでください。

  3. 整形では、インデント(2・4 スペース/タブ)、1 行の幅、引用符、セミコロン、末尾カンマを切り替えます。圧縮では、コメントの扱いと、変数名を短くするか、HTML の <style>・<script> の中身も圧縮するかを選びます。

  4. 右に結果が表示されます。構文エラーがあると行・列と該当行の抜粋が出て、「エラー位置へ移動」で入力欄の該当箇所を選択できます。

  5. 「コピー」または「ダウンロード」で保存します。ファイル名の拡張子は元のファイルに合わせ、圧縮では .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 を指定した要素の中身、属性値、&nbsp;、インライン要素間の空白 1 つを保ちます。

HTML 圧縮の安全側の既定

既定では <head> や表の構造タグまわりなど、描画に影響しない空白だけを消します。<div> や <p> などブロック要素まわりの空白も消すオプションは、CSS で display を変えていると見た目が変わるため、明示的に選んだときだけ有効です。

削減率つき・日本語もそのまま

圧縮前後のサイズと削減率を表示し、圧縮で大きくなる場合(すでに圧縮済みなど)はそう伝えます。識別子・コメント・文字列の日本語は変更しません。

こんなときに

  • 1 行に潰れたコードやログに出ていたスニペットを、読める形に整えてレビューしたい
  • チームで書式がばらばらなファイルを、同じ設定(インデント・引用符・セミコロン)にそろえたい
  • 配布用の CSS・JavaScript・HTML を、サイズ削減の目安を見ながら圧縮したい
  • インストール不要のブラウザだけで、Prettier と同じ整形結果を確認したい
  • 社外に出せないコードを、アップロードせずに整形・圧縮したい

対応形式

入力

.js.jsx.mjs.cjs.ts.tsx.css.scss.less.html.htm.vueテキスト貼り付けUTF-8 / UTF-16(BOM 付き)/ Shift_JIS

出力

整形済みコード(元の拡張子で保存)圧縮コード(.min.js / .min.css / .min.html)

対応状況

機能対応補足
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 と同じ結果になりますか?
整形には Prettier 3.9.10 を使っているので、同じ設定なら同じ結果になります。ただしこのツールは .prettierrc を読まないため、画面のオプション(インデント・幅・引用符・セミコロン・末尾カンマ)以外は Prettier の既定値です。
圧縮で動作が変わることはありますか?
JavaScript は Terser の標準的な圧縮で、圧縮前後で同じ入力に同じ結果を返すことをテストで確認しています。ただし `toString()` の結果や、ローカル変数名そのもの(`eval` や `new Function` で名前を参照するコード)に依存するコードは、圧縮で変わることがあります。「ローカル変数名を短くする」を切ると変数名は保たれ、関数名・クラス名(`Function.prototype.name`)も保つ設定になります。
TypeScript は圧縮できますか?
できません。型を取り除くにはコンパイルが必要で、このツールは行いません。tsc や esbuild で JavaScript に変換したあと、JavaScript として圧縮してください。TypeScript の整形はできます。
HTML を圧縮すると <pre> の中身は崩れませんか?
崩れません。<pre>・<textarea>・style 属性で white-space を指定した要素の中身は一字も変更しません。テキスト中の連続した空白は 1 つにまとめますが、HTML の描画では連続した空白は 1 つとして扱われるため見た目は変わりません。&nbsp; は空白として扱わず、そのまま残します。
難読化はできますか?
できません。変数名の短縮は行いますが、ソースを読めなくするための処理はしません。クライアントに配るコードは、どの圧縮ツールを使っても元に近い形へ戻せる点に注意してください。
コードはサーバーに送られますか?
いいえ。整形・圧縮はすべてブラウザ内(Web Worker)で行われ、入力内容が LIBRA Works のサーバーや第三者に送信されることはありません。

テキスト・コード 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 になる」などの型の落とし穴と、変換で失われるものを事前に警告します。データは端末の外へ送信しません。

最終更新: