「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

まずは予備知識から行きましょう。
最初に

・ホームページが表示されるまでの流れ
・ホームページのファイル構成

の2つを説明します。

あなたがホームページを見るとき、まずWebブラウザさん（ホームページを見るときに使うソフト）がWebサーバさん（ホームページのファイルが置いてあるコンピュータ）に「このページをおくれ」と、お願いを出します。



そのお願いに対して、WebサーバさんからWebブラウザさんに「ほれ、そのページだよ」と お返事がきます。



お返事を受け取ったWebブラウザさんは、受け取った内容（ホームページのファイル）を画面上に表示してくれます。



これが、ホームページが表示されるときの流れです。

この流れにおいて、WebサーバさんからWebブラウザさんにホームページのファイルが渡されました。
その他の条件が同じであれば、受け渡しされるファイルのサイズが小さいほど、受け渡しは速くやれます。



荷物を運ぶときも同じですよね。
小さな荷物を運ぶ方が、大きな荷物を運ぶ時より、速く運べます。



ファイルの受け渡しが速くなれば、ページを表示するまでにかかる時間は短縮されます。
つまり

ホームページのファイルのサイズが小さいほど、ホームページの表示は高速化される

です。

これが1つ目のポイントです。
覚えておいてください。

次に、ホームページのファイル構成を見てみましょう。

この説明を書いている時点では

・内容が書いてあるファイル
・見た目が書いてあるファイル
・絵が描いてあるファイル
・動作が書いてあるファイル

の4種類のファイルを組み合わせて1つのページを表示するのが主流です。



内容が書いてあるファイルは「HTMLファイル」と呼ばれています。



HTMLファイルは内容を書いておくファイルです。
ページの核となるファイルですね。

見た目が書いてあるファイルは「CSSファイル」と呼ばれています。



CSSファイルは見た目に関するルールを書くファイルです。
例えば

・ホームページの横幅はどれくらいにしよう
・この目印を付けた文字の色は何色にしよう
・この目印を付けた範囲に背景を付けよう

などのルールを書いておきます。

絵が描いてあるファイルは「画像ファイル」です。



画像ファイルは説明しなくても分かりますよね？

最後に、動作が書いてあるファイルは「JavaScriptファイル（jsファイル）」です。



JavaScriptファイル（jsファイル）は「動作」を定義するファイルです。
例えば

・ページを表示するときに、こんな動きをしてよ
・他のページに移動するときに、こんな動きをしてよ
・このボタンを押したら、こんな動きをしてよ

などの指示を書いておきます。

これら4種類のファイル

・HTMLファイル（内容）
・CSSファイル（見た目）
・画像ファイル（絵）
・JavaScriptファイル（動作）

が組み合わさることによって、ホームページの中の1ページが形作られています。



これがホームページのファイル構成です。
ここでは「CSSファイル」や「JavaScriptファイル」などの用語を覚えておいてください。

以上が予備知識です。

さぁ、長らくお待たせしました。
いよいよ本題に入ります。

ここまでを踏まえて

ホームページのファイルのサイズを小さくして、ホームページの表示を高速化する作業

が「minify」です。
べちょっと潰して、受け渡しをしやすくします。



「minify」という表現が使われる対象は、CSSやJavaScriptのファイルが多いです。
個人的には、HTMLファイルや画像ファイルも含むと思いますけどね。
HTMLファイルや画像ファイルに対しては、あまり「minify」という表現は使われません。

ということで、CSSファイルを例にして説明します。

以下の2つのCSSファイル「test1.css」と「test2.css」を見比べてください。
中身は重要ではないので、適当に読み流してくださいね。

■test1.css
/*基本設定*/
* {
    margin: 0;
    padding: 0;
}

/* コマンドオプション説明（英語） */
.cmd_explain_en {
    font-size: 14px;
    color: #666;
}

/* 文章の中で文字の一部を強調表示したいとき */
.ex_exp {
    color: #930;
    font-weight: bold;
}

/* 英語の読み */
.yomi_en {
    font-size: 12px;
    color: #666;
}

/* サンプル結果 */
.ex_sample {
    color: #003300;
    display: block;
    width: 95%;
    border: 1px solid #999;
    padding: 10px;
    margin-bottom: -16px;
    margin-left: auto;
    margin-right: auto;
    font-size:14px;
    line-height: 21px;
    word-break: break-all;
}

/* コマンド例 */
.ex_cmd {
    color: #006600;
    font-weight: bold;
}

■test2.css
* {margin: 0;padding: 0;}
.cmd_explain_en {font-size: 14px;color: #666;}
.ex_exp {color: #930;font-weight: bold;}
.yomi_en {font-size: 12px;color: #666;}
.ex_sample {color: #003300;display: block;width: 95%;border: 1px solid #999;padding: 10px;margin-bottom: -16px;margin-left: auto;margin-right: auto;font-size:14px;line-height: 21px;word-break: break-all;}
.ex_cmd {color: #006600;font-weight: bold;}

分かる人は分かると思いますが「test1.css」と「test2.css」の中身は同じです。
「test1.css」から、あってもなくても表示には関係のない改行や空白、コメントを消したのが「test2.css」です。

ファイルのサイズは、私の環境での比較ですが

・test1.css：650バイト
・test2.css：409バイト

でした。
「test2.css」の方が241バイトほどサイズが小さいです。

「test1.css」と「test2.css」の内容は一緒です。
「test2.css」の方がファイルのサイズは小さいです。

もともと「test1.css」を使っていたとしましょう。
それを「test2.css」に置き換えたら、どうなるでしょうか。

そうですね。
ファイルのサイズが小さくなる分、表示が高速化されます。

ここまでの説明を見て「たった200バイトの差でしょ？誤差の範囲じゃん」と感じる人もいるでしょう。
ですが、考えてみてください。

そのページを1日に1,000人の人が見てくれれば、差は200キロバイトです。
それが1ヵ月続けば、6メガバイトの差になります。

ホームページ関連は、良くも悪くも「塵も積もれば山となる」ことが多いです。
ある程度の積み重ねで考えると、バカにならない差だと思いませんか？

とはいえ「test2.css」より「test1.css」の方が見やすいのは事実です。
そこで、普段は「test1.css」のような形で保管しておきます。
それをWebサーバに載せる段階で「test2.css」の形に変換するのが（多分）一般的です。

minifyの説明としては、そんなところでしょうか。

あっ、そうそう。

他の人の作ったJavaScriptファイルをもらってくると

hoge.js

と

hoge_min.js

の2つのファイルが入っていることがあるはずです。
この「_min」が「minify」を意味しています。

「hoge.js」と「hoge_min.js」は同じ動きをするjavaScriptファイルです。
ただし「hoge_min.js」の方がファイルサイズは小さくなっています。

自分で後から変更を加えたいときは「hoge.js」を使ってください。
「hoge_min.js」は改行とかが削除されているので、見にくいです。

「変更はしないな～」という場合は「hoge_min.js」を使ってください。
サイズが小さい分、少しだけ表示が速くなります。