[ 通常表示 ]  [ 簡易表示 ]  [ シンプル表示 ]

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

ミニフィ (minify)

pointこの用語のポイント

pointホームページの話で出てくるよ

pointファイルのサイズを小さくすることだよ

pointページの表示を高速化するためにやるよ

スポンサーリンク

簡単に書くよ

ミニフィ (minify)とは

ホームページの表示を高速化する目的で、ホームページのファイル(HTMLファイル、CSSファイル、JavaScriptファイルなど)のサイズを小さくすること
です。

image piyo

詳しく書くよ

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

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


の2つを説明します。

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

minify

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

minify2

あとはWebブラウザさんがお返事を画面上に表示することで、あなたはホームページを見ることができています。

minify3

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

minify4

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

minify5

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

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

です。

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

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

2016年3月現在の流行では

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


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

minify6

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

minify7

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

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

minify8

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

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


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

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

minify9

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

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

minify10

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

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


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

これら4種類のファイル

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


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

minify11

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

以上が予備知識です。

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

ここまでを踏まえて、ホームページのファイルのサイズを小さくして、ホームページの表示を高速化する作業が「minify(ミニフィ)」です。
べちょっと潰して、受け渡しをしやすくします。

minify12

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

ということで、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」を使ってください。
サイズが小さい分、少しだけ表示が速くなります。

image piyo2

一言でまとめるよ

まぁ「minify」って単語が出てきたら「ホームページのファイルのサイズを小さくすることなんだな~」と、お考えください。

一番上に戻るよ
スポンサーリンク