こんにちは。たいら(@tairaengineer2)です。
jQueryライブラリには、以下の2種類があります。
- jquery-x.x.x.js
- jquery-x.x.x.min.js
※↑のxはバージョンの数字です
バージョンの数字は全く同じなのに、「.min」がついていたり、ついていないファイルがあるけど、何がちがうの？
この記事で、jQueryライブラリファイルの「.min」のあるなしで 以下の点を解説していきます。
- 「.min」がついているファイル、ついていないファイルの違い
- 「.min」があるなしでファイルの機能の違いはあるのか？
- 「.min」があるなしのファイルはどちらを使うべきか？
スポンサーリンク
- 「.min」がついているファイル、ついていないファイルの違い
- 「.min」があるなしでなぜファイルサイズが違うのか？
- 「.min」があるなしでファイルの機能の違いはあるのか？
- 「.min」があるなしのファイルはどちらを使うべきか？
- まとめ：「.min」がついているファイルを使おう！
「.min」がついているファイル、ついていないファイルの違い
ずばり、ファイルサイズが違います。
まず、「.min」がついているファイルのファイルサイズを確認します。
「.min」がついているファイルのファイルサイズは、86.0 KBでした。
次に、「.min」がついていないファイルのファイルサイズを確認します。
「.min」がついていないファイルのファイルサイズは、273 KBでした。
| ファイル名 | ファイスサイズ |
|---|---|
| jquery-3.4.1.min.js | 86.0 KB |
| jquery-3.4.1.js | 273 KB |
このように「.min」が付いている方のファイルが、ファイルサイズが小さいです。
では、なぜファイルサイズが違うのでしょうか？
次の章で書いていきます。
「.min」があるなしでなぜファイルサイズが違うのか？
「.min」がついているファイルは、スペースや改行を削除しているからです。
「.min」がついているファイルの中身を見てみます。
正しく読み解くことは、めちゃくちゃ難しい(;'∀')
こういうプログラム書いたら、激おこされるやつです。
次に、「.min」がついていないファイルの中身を確認します。
さっきのと比べてめっちゃ読みやすい(*'▽')
きれいで読みやすいインデントやスペースを入れているプログラムのお手本になるやつです。
こんな感じで「.min」がついているファイルは、スペースや改行を削除しているのでファイルサイズが少ないです。
では、機能はどうなのでしょうか？
「.min」があるなしでファイルの機能の違いはあるのか？
機能の違いはありません。
「.min」がついているファイルは、スペースと改行を削除して、ファイルサイズを小さくしているだけなので。
「.min」がついているファイルは人間にとっては読みにくいですが、コンピュータは正しく読み取ってくれます。
機能も同じなのは分かった。
じゃあ、どっちを使うのが良いの？
って疑問にも答えます！
「.min」があるなしのファイルはどちらを使うべきか？
仕事で扱う場合は、絶対「.min」がついている方のファイルを使いましょう！
なぜなら、ファイルサイズが少ない分早く読み込めるからです。
システムを開発する場合は、画面の読み込みが遅いとか致命的です。
なので、仕事で扱う場合は絶対「.min」がついているファイルを使いましょう！
が、 個人で勉強するために使う分には、どちらを使っても大差ないと思います。
機能の違いがないですし、読み込みが遅いと致命的というケースがあまり考えられないので。
どちらを使うかはお好みです。
私の意見ですが、個人で勉強するために使う時も基本的に、「.min」がついている方のファイルを使うことをおすすめします。
スポンサーリンク
まとめ：「.min」がついているファイルを使おう！
以上が、「.min」のついている、ついていないファイルの違いを解説しました。
まとめなので、もう1度振り返ります。
| 「.min」あるなしの違い | ファイルサイズが異なる 「.min」がついているファイルの方がファイルサイズが小さい |
|---|---|
| 機能の違い | 機能の違いはない |
| どちらを使うべき | 「.min」がついているファイル ※個人で勉強する分にはどちらでもOK |
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
ほかにもjQuery解説記事を書いてます。
よければご参考ください。