エンジニアの将来って?

現在7年目のCOBOL→Java→C#エンジニアが、将来への考えや勉強のアウトプット、たまに腎臓について書くブログです

【jQuery】「.min」がついているファイルとついていないファイルの違いを解説します

こんにちは。たいら(@tairaengineer2)です。

jQueryライブラリには、以下の2種類があります。

f:id:Tairax:20190921174540p:plain

  • jquery-x.x.x.js
  • jquery-x.x.x.min.js

※↑のxはバージョンの数字です

 

バージョンの数字は全く同じなのに、「.min」がついていたり、ついていないファイルがあるけど、何がちがうの?

 

この記事で、jQueryライブラリファイルの「.min」のあるなしで 以下の点を解説していきます。

 

  • 「.min」がついているファイル、ついていないファイルの違い
  • 「.min」があるなしでファイルの機能の違いはあるのか?
  • 「.min」があるなしのファイルはどちらを使うべきか?

 

スポンサーリンク

 

「.min」がついているファイル、ついていないファイルの違い

ずばり、ファイルサイズが違います。

まず、「.min」がついているファイルのファイルサイズを確認します。

f:id:Tairax:20190921175146p:plain

「.min」がついているファイルのファイルサイズは、86.0 KBでした。

次に、「.min」がついていないファイルのファイルサイズを確認します。

f:id:Tairax:20190921174908p:plain

「.min」がついていないファイルのファイルサイズは、273 KBでした。

ファイル名 ファイスサイズ
jquery-3.4.1.min.js 86.0 KB
jquery-3.4.1.js 273 KB

このように「.min」が付いている方のファイルが、ファイルサイズ小さいです。
では、なぜファイルサイズが違うのでしょうか?
次の章で書いていきます。

「.min」があるなしでなぜファイルサイズが違うのか?

「.min」がついているファイルは、スペース改行削除しているからです。

「.min」がついているファイルの中身を見てみます。

f:id:Tairax:20190921180018p:plain

正しく読み解くことは、めちゃくちゃ難しい(;'∀')
こういうプログラム書いたら、激おこされるやつです。

次に、「.min」がついていないファイルの中身を確認します。

f:id:Tairax:20190921180542p:plain

さっきのと比べてめっちゃ読みやすい(*'▽')
きれいで読みやすいインデントやスペースを入れているプログラムのお手本になるやつです。

こんな感じで「.min」がついているファイルは、スペースや改行を削除しているのでファイルサイズが少ないです。

では、機能はどうなのでしょうか?

「.min」があるなしでファイルの機能の違いはあるのか?

機能の違いはありません
「.min」がついているファイルは、スペースと改行を削除して、ファイルサイズを小さくしているだけなので。
「.min」がついているファイルは人間にとっては読みにくいですが、コンピュータは正しく読み取ってくれます。

 

機能も同じなのは分かった。
じゃあ、どっちを使うのが良いの?

 

って疑問にも答えます!

「.min」があるなしのファイルはどちらを使うべきか?

仕事で扱う場合は、絶対「.min」ついている方のファイルを使いましょう!
なぜなら、ファイルサイズが少ない分早く読み込めるからです。

システムを開発する場合は、画面の読み込みが遅いとか致命的です。
なので、仕事で扱う場合は絶対「.min」がついているファイルを使いましょう!
が、 個人で勉強するために使う分には、どちらを使っても大差ないと思います。
機能の違いがないですし、読み込みが遅いと致命的というケースがあまり考えられないので。
どちらを使うかはお好みです。

私の意見ですが、個人で勉強するために使う時も基本的に、「.min」ついている方のファイルを使うことをおすすめします。

まとめ:「.min」がついているファイルを使おう!

以上が、「.min」のついている、ついていないファイルの違いを解説しました。
まとめなので、もう1度振り返ります。

「.min」あるなしの違い ファイルサイズが異なる
「.min」がついているファイルの方がファイルサイズが小さい
機能の違い 機能の違いはない
どちらを使うべき 「.min」がついているファイル
※個人で勉強する分にはどちらでもOK

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

 

ほかにもjQuery解説記事を書いてます。
よければご参考ください。

【jQuery】Google Developersから読み込む方法を解説します

【jQuery】hoverを使って、背景色を変えたり、アラートを出すやり方を解説します