JavaScript圧縮
小さく、しかも確実に同じコード。
例を読み込むと入力と設定が一時的に変わります。元の内容に戻せます。
0文字
出力
上に貼り付けるか入力すると、ここに結果が表示されます。
ファイルは端末の外に出ません
このツールはすべてブラウザ内で動作します。貼り付けた内容は端末内で処理され、サーバーには送信されないため、トークンや鍵、未公開の文章でも安心して使えます。
使用例
例:税込価格を表示するショップのスクリプトを圧縮(622文字→462文字)
さくら堂オンラインショップの商品一覧で税込価格を出すスクリプトです。食品は軽減税率8%、それ以外は10%で、1円未満は切り捨て。日本語のコメントが4つ、全角スペースを含むテンプレート文字列があり、23行・622文字。設定は「圧縮する」。
- 上の数字は変換前 622、変換後 462、削減率 26%。23行が3行になり、日本語のコメント4つはすべて消えます。
- `${item.name} ${yen}円(税込)${mark}` の全角スペースや「※軽減税率対象」の文字列は1文字も変わりません。引用符とバッククォートの中には手を付けないからです。
- 数字は文字数です。UTF-8のバイト数では766バイト→488バイトで、1文字3バイトの日本語コメントが消えた分、バイトでは約36%減ります。
- 圧縮前と後で同じ商品を表示すると、どちらも「抹茶どら焼き 194円(税込)※軽減税率対象」「手ぬぐい 1,320円(税込)」になります(180円×1.08、1,200円×1.1)。
| 箇所 | 変換前 | 変換後 |
|---|---|---|
| 税率の定義 | const RATE = { food: 0.08, other: 0.1 }; | const RATE={food:0.08,other:0.1}; |
| 切り捨て | return Math.floor(price * (1 + RATE[kind])); | return Math.floor(price*(1+RATE[kind])); |
| 表示の切り替え | item.kind === 'food' ? '※軽減税率対象' : '' | item.kind==='food'?'※軽減税率対象':'' |
| ファイル全体 | 23行・622文字(766バイト) | 3行・462文字(488バイト) |
関数名のtaxIncludedやlabel、クラス名の .item .price はそのままなので、HTML側は変えずにファイルを差し替えるだけで済みます。
使い方
- JavaScriptを貼り付けます。
- コメントとインデントが消えます。名前はそのままです。
- 上に出る数字で、どれだけ縮んだかを確かめます。
- 結果をコピーするか保存します。
よくある質問
- 変数名を短くしないのはなぜですか。
- 名前の変更には本物の構文解析とスコープ解析が必要で、そこを少し間違えると「しばらくは動くが、いつか動かなくなるファイル」ができるからです。利用者の前に出すものには、約束を控えめにして常に正しいほうが向いています。最後の数パーセントが必要なら、ビルドでesbuildやterserを使ってください。
- 正規表現と除算を見分けられますか。
- 見分けます。構文解析せずにJavaScriptを読むとき、ここが唯一の難所です。値や閉じかっこのあとのスラッシュは除算、演算子・開きかっこ・カンマのあと、return や typeof などの単語のあと、または先頭のスラッシュは正規表現の始まりと判断します。x = /ab+c/g や return /a b/.test(s) は空白も含めてそのまま残り、total / 2 は除算のままです。
- セミコロンの自動補完が壊れませんか。
- 壊れません。改行はセミコロンの代わりになり得るので、前の行が演算子・カンマ・開きかっこで終わるか、次の行が閉じかっこ・ドット・カンマで始まるときだけ行を連結します。++ や -- で終わる行、正規表現で終わる行は改行を残すので、セミコロンを書かないスタイルのコードもそのまま動きます。
- ライセンス表記は消えますか。
- 消えません。/*! で始まるブロックと、@license や @preserve を含むコメントは、改行も含めて書かれたとおり、独立した行に残ります。それ以外の // と /* */ のコメントは、/** で始まるJSDocも含めて取り除きます。
- 削減率はバイト数で計算していますか。
- いいえ、文字数です。変換前・変換後の数字はJavaScriptが数えるテキストの長さです。英数字だけならバイト数と同じですが、日本語はUTF-8で1文字3バイトなので、日本語のコメントが多いファイルほど、バイトで見た削減は表示の割合より大きくなります。
- 入力した内容はどこかに送られますか。
- いいえ。ブラウザの中で動くので、貼り付けた内容はお使いのパソコンから出ません。