JavaScript整形・圧縮
読めるようにJavaScriptへ字下げを入れるか、縮めます。圧縮はterserに任せています — 圧縮には文法を正確に理解することが要り、自前で書いたものは他人のコードを黙って壊すからです。その種の破損は、動かしてみるまで表に出てきません。
貼り付けたコードは端末から出ません。 ブラウザの中だけで処理し、どこにも送らず保存もしません。社内の設定ファイルや本番のクエリのように外へ出しにくいものも、そのために使えます。
整形も terser が行います
圧縮と名前の付け替えを切り、読みやすく出力するよう頼めば済むので、パーサーを二つ持っていません。そのため整形でも構文を最後まで読みます。括弧が合わない、文字列が閉じていないといったコードは、どこで止まったかを terser のメッセージと一緒に返し、コメントは一つも失いません。1MB 近い terser は最初にボタンを押したときに取得するので、一回目だけ少し待ちます。
圧縮が実際にしていること
空白を取るだけではありません。関数の中のローカル変数は一文字の名前に変わり、到達しないコードは消え、1 + 2 のような定数の計算は先に畳まれます。トップレベルの名前とオブジェクトのプロパティ名には触れません。外から呼ばれる名前が変わると別のファイルが壊れるからです。結果の意味は同じでも元の形には戻せないのはこのためです。どれだけ減ったかは UTF-8 のバイト数で示します。
なぜ構文を知る必要があるか
JavaScript では改行が意味を持ちます。return の後ろで改行すると undefined を返し、/ は場所によって割り算にも正規表現の始まりにもなります。文字だけを見て空白を消すと、こうした場所で静かに別のプログラムになります。同じ理由で受け付けるのは JavaScript だけです。型注釈の入った TypeScript や JSX は構文エラーとして返ってくるので、先にコンパイルした結果を貼ってください。
壊れたコードから返ってくるもの
空欄か空白だけなら何もしません。構文が間違っていると、結果の代わりに terser のメッセージがそのまま出ます。Unexpected token … のような英語一行で、行・桁は付きません。行と桁を示すのは JSON 側だけなので、JavaScript ではそのメッセージにあるトークンを元のコードから探すことになります。import・export を含むモジュールはそのまま受け付けますが、最上位の await は構文エラーで返ってきます。
結果の扱い方
結果は入力欄を上書きせず、隣に並びます。選び間違えても元の文はそのまま残り、結果を入力欄へ戻して、整形して読んだものをまた圧縮するといった続け技もできます。圧縮した結果は一行です。画面で折り返して見せるのは読むためで、コピーすれば一行に戻ります。結果が 4,000 行を超えると行番号を畳んで一塊で描きますが、文字とコピーは変わりません。
よくある質問
ここでライブラリを使うのがこの道具だけなのはなぜですか
間違えられる場所が多すぎるからです — セミコロンの自動挿入、正規表現と除算の見分け、束縛された識別子の改名。terserはビルドツールが実際に積んでいる圧縮器で、BSD-2-Clauseなのでライセンスもきれいです。1MB近くあるので、この画面を開いたときにだけ取ってきます — JSON・SQL・CSSしか使わない人が読み込むことはありません。
圧縮されたコードを元に戻せますか
字下げを入れ直すことはできますが、元の名前は失われています。圧縮器が変数を一文字に改名した時点で、その情報はファイルの中にもうありません。ソースマップがあるなら、そちらをお使いください。
ライセンスのコメントは残りますか
残ります。/*! で始まるコメントは保ちます。ライセンス表示をその形で書くのが慣習であり、消してしまえば他人の著作権表示を消すことになります。
圧縮結果が一行なのは正しいですか？
正しいです。改行も空白なので一緒に取り除きます。読む必要があればその結果をもう一度整形してください。画面の折り返しは見た目だけで、コピーされる文は一行のままです。人が読むファイルなら、最初から整形だけを使うほうが向いています。
貼り付けたものはサーバへ送られますか
送られません。すべてブラウザの中で動き、送信も保存もしません。だからこそ、ふつうならウェブページに貼り付けない社内の設定ファイルや本番のクエリにも使えます。通信を切ったままでも動きます。