フロントエンドコード圧縮 (Minifier)

本ページで提供しているフロントエンドコード圧縮（Minify）ジェネレーターは，開発者がクリップボード経由で手軽にソースコードのファイルサイズを削減するための単一機能ウェブツールです．画面は主に「JS」「CSS」「HTML」の3つの入力タブ，コードを貼り付けるテキストエリア，圧縮処理を実行するボタン，そして圧縮結果とファイルサイズ削減状況を表示する出力パネルで構成されています．

利用者は処理したい言語のタブを選択し，ソースコードを入力して実行ボタンを押すと，コメントや冗長な空白を減らした結果を確認できます．

本ツールの特徴は，対象言語の構造を完全にパースして階層的な構文データを構築するような重量級の解析器を採用せず，正規表現と状態管理を組み合わせた文字列の保守的な走査によって簡易的な圧縮処理を実現している点にあります．この設計により，本ツールはブラウザのJavaScript実行環境において単一の純関数として動作し，外部のサーバーへソースコードを送信して処理を委託しません．

入力されたテキストデータは画面のメモリ内で変換され，結果が出力エリアに反映されます．

ただし，本ツールが行う処理はあくまで「保守的な空白とコメントの削減」に限定されています．本格的な本番用の解析ツールが備える，実行されないロジックの検知と消去，数式の事前計算，変数名や関数名を短い名前へ置換するような高度な処理は実装していません．本ツールは単一のテキスト片に対して，確認可能な範囲でバイト数を減らす用途に特化しています．

実行結果の意味がすべての新構文で保持されることを保証する完全な構文解析器ではないため，変換後の結果を利用する際は必ず開発者自身による動作確認が必要です．

JavaScriptタブにおける圧縮処理は，ソースコード内の不要な空白文字やコメントを取り除きつつ，文字列等を変更しないように状態を分けた走査を行います．JavaScriptで特に注意が必要なのは，文字列リテラルや正規表現リテラルの内部に存在する空白文字を誤って削除してしまうことです．

本ツールでは，シングルクォート，ダブルクォート，バッククォートで囲まれた文字列を検出した場合，その終端記号に到達するまでの間は変更を加えず，エスケープされた次の文字を飛ばしながら元の文字列を出力結果へ引き継ぎます．

また，JavaScriptの構文において除算演算子（/）と正規表現リテラルの開始記号（/）を完全に見分けることは，外部の構文解析器なしでは困難です．本ツールでは，await，return，typeof，yieldなどの特定キーワードや，代入演算子や開き括弧等の直後に登場するスラッシュを正規表現の開始候補とみなす方法を採用しています．

これにより，一般的な文脈で記述された正規表現，例えばconst regex = /[a-z ]+/i;の内部にある空白は保持されますが，あらゆる複雑な文脈や新しい構文において判定できるわけではありません．

さらに，JavaScript特有の自動セミコロン挿入にも配慮しています．圧縮で改行を無差別に削除すると，行末のセミコロンを省略したコードが意図せず結合され，構文エラーや別の実行結果を引き起こす可能性があります．そのため，JS圧縮ロジックでは，水平空白を単一の半角スペースへまとめる一方，元のコードに存在した改行は一つ残すという保守的な方法を採っています．

プラスやマイナスが連続する場面，例えばa++ + bについても，空白を強制的に削ってa+++bのように結合しません．

実際のコードでは，改行が意味を持つ場所やスラッシュの解釈が文脈で変わる場所が他にもあります．このツールは構文を実行して検査せず，無効な入力をエラーとして指摘する機能もありません．文字列や一般的な正規表現を保持する改善は，あらゆるJavaScriptに対する安全性の保証ではありません．短いコード片で結果を比較し，必要に応じて専用の本番用ツールを利用してください．

CSSタブにおける圧縮処理は，スタイルシートのブロックコメントと連続する空白を対象にします．CSSのファイルサイズを増やす要因には，開発時の可読性を高めるためのインデント，改行，ブロックコメントがあります．本ツールでは文字列の先頭から一文字ずつ走査し，引用符の外側でブロックコメントを見つけた場合に削除します．

しかし，CSSにおける空白文字はレイアウト目的だけでなく，意味のある区切りとしても使われます．例えば，子孫セレクタ（.parent .child）におけるクラス間の空白，複数のプロパティ値（margin: 10px 20px;）の区切り，計算関数（calc(100% - 20px)）における演算子前後の空白です．

本ツールでは，連続する複数の空白文字や改行文字を無条件に消さず，単一の半角スペースへ置換します．子孫結合子やcalc関数内で必要となる空白を残しながら，連続した空白分のバイト数を減らすための方針です．

CSS内においても文字列の保持は重要です．content: "A B";のような疑似要素のテキスト指定や，background-image: url('image.png');のように引用符で囲まれたパスでは，引用符の内部を空白削減の対象から除外します．カスタムプロパティに対しても，値を解釈してショートハンドへ変換したり，16進数カラーを短縮したりする処理は行いません．

一方，引用符のないURL，エスケープ，将来追加される新構文などをCSS構文木として検証する機能はありません．コメントを削除した場所には区切り用の空白を残し，他の空白も単一化する保守的な処理ですが，個々のスタイルシートの意味保持を保証するものではありません．圧縮後は対象ページへ適用し，セレクタとプロパティ値が意図どおり働くかを確認してください．

HTMLタブの圧縮処理では，ウェブページを構成するマークアップの特性に合わせて，タグの外側にあるテキストノードと，タグの内側にある属性等を分けて扱います．本ツールは開始記号<から終了記号>までの間をタグ内部として扱い，それ以外の部分をテキストノードとして区別します．

タグ内部では，属性間の連続空白や改行を一つにまとめ，イコール記号（=）の前後にある空白を削除します．例えば<div class = "box" >は<div class="box">へ変わります．この際，属性値がダブルクォートまたはシングルクォートで囲まれている場合は，引用符の内部にある空白を値の一部として保持します．

標準的なHTMLコメントは削除対象ですが，過去のブラウザ互換性で使われる条件付きコメント（<!--[ifで始まるもの）は動作へ影響する可能性があるため，そのまま残します．

HTMLには内部のテキストが表示内容に直結する，または別の言語として解釈される要素があります．本ツールではpre，textarea，title，script，styleの5つのタグを検知すると，その開始タグから終了タグまでの内容にHTML用の圧縮処理を適用せず，元の文字列を保持します．

インライン要素の間にあるテキストノードの空白や改行も，画面上の半角スペースとして働く場合があるため，強制的に削除しません．

HTMLコメントはDOM上のコメントノードとして利用される場合や，テンプレート処理の目印として使われる場合もあります．このツールは通常コメントを削除するため，そのような用途では結果が変わります．また，不正なタグを修復したり，HTML文法を検証したりするパーサーではありません．属性値の引用符削除，終了タグの省略，DOMの再構築も行いません．対象コードがこれらの前提に合うかを確認して利用してください．

圧縮処理が完了すると，出力パネルに「圧縮前」「圧縮後」「削減率」の3つの統計値を表示します．ファイルサイズの計算にはブラウザ標準のTextEncoder APIを利用します．JavaScript内部の文字列長をそのまま表示するのではなく，テキストをUTF-8のバイト配列へ変換した際の生バイト数を計測しています．

そのため，日本語のコメントや絵文字等が含まれている場合も，UTF-8で保存したときのバイト数として比較できます．

削減率は「（圧縮前のUTF-8バイト数－圧縮後のUTF-8バイト数）÷圧縮前のUTF-8バイト数×100」で算出し，小数点第1位まで表示します．この数値は，空白やコメントを減らした前後の文字列サイズの割合です．HTTP配信時にウェブサーバー側で適用されるgzipやBrotliによる転送量の削減率とは異なり，表示された割合だけ読み込み時間が短くなるという意味でもありません．

元のコードがすでに圧縮済みなら，削減率が小さいこともあります．

出力結果にはクリップボードへのコピー機能があります．「結果をコピー」ボタンを押すと，ブラウザのClipboard APIを通じて生成されたテキストが端末のクリップボードへ渡されます．この非同期処理が成功した場合だけ，ボタンの表示が一時的に「コピー完了」へ変わります．コピー後のコードは利用者のエディターへ貼り付け，圧縮前との比較や動作確認に使えます．

この画面はファイルを読み込む機能や，圧縮結果をファイルとしてダウンロードする機能を備えていません．複数ファイルの結合，拡張子の付与，ファイル名のハッシュ化，ネットワーク転送量の測定も対象外です．表示値は貼り付けた一つの文字列についてのUTF-8換算値として確認してください．

本ツールのコード圧縮機能は，ウェブブラウザのタブ内でJavaScriptの同期的な純関数として実行されます．利用者がテキストエリアへコードを貼り付け，「コード圧縮を実行」ボタンを押したときに画面内で処理するため，文字列の圧縮を目的とする外部APIへ入力コードを送る処理はありません．ちょっとしたコード片の比較や，単一の静的な記述を一時的に軽量化したい用途で利用できます．

ただし，サイト全体が完全にオフラインで動き，通信が一切発生しないという意味ではありません．ページ表示，広告，解析，サイト共通機能，ブラウザ拡張等の通信や動作とは区別してください．コピーした結果は端末のクリップボードへ移り，入力と出力はブラウザタブのメモリに保持されます．機密コードを含む場合の安全性をサイト全体として保証するものではありません．

本ページで提供するのは，個別の文字列に対する簡易的な置換と走査です．実際のウェブアプリケーションを本番へ配布する準備では，複数ファイルの依存関係，構文検証，対象ブラウザ，配信時圧縮等を扱える専用のビルド・Minifyツールが使われます．このツールはそれらの代替ではなく，短いコードの空白・コメントを確認しながら減らす補助として位置づけられます．

構文エラーの事前検知機能や完全な意味保持の保証機能は実装していません．生成されたコードをサービス等へ組み込む前には，ローカルのテスト環境やステージング環境で，レイアウトやロジックが意図どおり動作するかを確認してください．圧縮前のコードを残し，出力との差分を確認できる状態で試すことが重要です．