読みやすさと配布するファイルの大きさを分けて考える
フォーマッターは空白と改行を整え、人がソースを確認しやすくします。ミニファイヤーは空白やコメントの一部を取り除き、転送するテキスト量を減らします。編集時には読みやすい CSS が便利で、公開用の成果物には短い CSS が役立つ、といったように目的が違います。どちらもそれだけでコードを正しくするものではありません。MultiVerto には CSS と HTML の整形・圧縮ツール、JavaScript フォーマッター、JSON の整形・圧縮ツールがあります。入力の言語に合うツールを選んでください。JSON は任意の JavaScript コードではなく、HTML 文書を XML と同一視することもできません。元ファイルを残しておけば、変換後の出力と比較し、プロジェクトの要件に合わない結果を元に戻せます。
CSS の具体例
h1{color:#334155;margin:0;}p{line-height:1.5;} から始めます。CSS フォーマッターは規則と宣言を別々のインデント付きの行に配置するため、h1 に宣言が2つ、p に1つあることを見つけやすくなります。CSS ミニファイヤーは不要な空白や閉じ波括弧の前の最後のセミコロンを取り除き、入力に近い短い文字列を返す場合があります。変換後に確認すべきなのは色、セレクター、プロパティ値です。下の埋め込みフォーマッターで宣言を1つ変え、読みやすくなった出力のどこに現れるか確かめてください。次に、その整形結果をリンク先のミニファイヤーにコピーします。実際のサイトでは代表的なページのブラウザー上で計算済みスタイルを比較しましょう。構文上もっともらしい文字列だけでは、すべてのセレクターが意図どおりに動く証拠にはなりません。
- 元のソース → 読みやすく整形
- 実際のアプリケーションで構文と動作を確認
- コピーを圧縮 → 配布するファイルを再テスト
言語の境界は重要
JSON の整形は入力を解析し、インデント付きで再出力します。圧縮は解析した値を任意の空白なしで再出力します。これで JSON の構文は確認できますが、スキーマ検証にはなりません。解析して再出力すると、空白、数値の表記、オブジェクトキーの見せ方などテキスト上の詳細が変わる場合もあるため、厳密なテキスト表現が重要ならデータ値も比較してください。HTML のテキストノードでは空白に意味がある場合があります。特にインライン要素の周辺では、保守的な圧縮ツールがすべての空白を消すとは限りません。CSS の文字列、関数、コメントも構文を理解した処理が必要です。JavaScript はさらに複雑です。MultiVerto の軽量フォーマッターは、万能をうたう代わりに、テンプレートリテラルや一部の正規表現の文脈を含む構文を意図的に拒否します。より幅広い言語機能を扱う本番コードには、完全なパーサーを備えたビルドツールを使ってください。 安全な整数の範囲である±9,007,199,254,740,991を超える引用符なしの整数は、JSONの処理中に拒否されます。識別子の全桁を保つには引用符で囲んだ文字列にしてください。
決めた順序で変換と検証を進める
まず代表的な小さな試料のコピーで作業します。フォーマッターを実行し、出力と入力を並べて確認して、文字列、コメント、特殊文字が利用先のアプリケーションで必要な位置に残っていることを確かめます。拒否されたら、別の言語の入力を無理に通さずエラーを読んでください。読みやすい版が検証を通った後、短縮が役立つ場合に限って対応するミニファイヤーを実行します。空白、セレクター、文字列の値に依存する状態も含め、変換後のファイルを実際のブラウザーやアプリケーションでテストしてください。JSON は出力を再度解析してデータ構造を比較します。CSS と HTML では、整形だけでは動作が同じとは証明できないため、目視確認とプロジェクトのテストが必要です。
ツールが保証しないことを知る
フォーマッターは信頼できない HTML を無害化するものではなく、圧縮してもソースコードや秘密情報は保護できません。秘密鍵や認証情報を公開スニペットに貼り付けないでください。コメントを消すと、公開手順で残す必要があるライセンス表記や注記まで消えることがあります。圧縮前にその要件を確認しましょう。CSS 規則に珍しい構文がある場合や JavaScript の試料にテンプレート文字列が含まれる場合は、その構文を明示的に扱えるツールを選び、出力を確認してください。変換に失敗したときは、推測でコードを出すよりもエラーにするほうが安全です。これらのブラウザー内ツールは調査や小規模な変換に便利です。公開時には同じ処理をバージョン管理されたビルド工程に組み込み、利用者が実際に読み込むファイルをテストしてください。