みなさんこんにちは！エンジニアの雅です。
みなさんはjQueryなどの外部のJavaScriptファイルを読み込ませる際に、ファイル名の最後の拡張子が「.min.js」となっているファイルが気になったことはありませんか？
そう思っている人も少なくないと思います。
そこで今回はこの「.min.js」の謎をWebプログラミング入門者向けに解説していきます！
目次
「.min.js」とは？
「.min」はminifyを表す
たまに外部のライブラリ、代表的なところでいうとjQueryなどのライブラリのjsファイルを読み込む時、拡張子が「.min.js」となっている時があると思います。
これは通常のjsファイルにminifyという処理を行ったjsファイルを表します。
minifyとは、jsファイル内のコメントアウトや改行などを全て取っ払う処理を指します。
そう思いますよね。
可読性を向上させるためにわざわざコメントアウトとか改行して誰にでも読みやすいようにしているのになぜそれらを取り除く処理をする必要があるのでしょうか？
それは「誰」目線での可読性を向上させるかの違いにあります。
なぜminifyする必要があるのか
ではなぜminifyという処理を施す必要があるのか、それは可読性を向上させる目的があります。
コメントアウトや改行は我々人間にとっての可読性を上げる目的があるため、コーディングする際には欠かせない技術になります。
ですが実際にコードを読むのは誰でしょうか？
そう、パソコンです。
パソコンがコードを読む際にはこれらコメントアウトや改行があると非常に読みづらくなってしまいます。
なので、minifyという処理をしてあげることによって、人間目線で読みやすいコードからパソコン目線で読みやすいコードに変換してあげるということがminifyの大まかな概要になります。
minifyするメリット
パソコンにとっての可読性を向上させる目的のあるminifyですが、もう少し具体的にいうと、minifyをすることによって処理速度を向上させられることが期待できるというメリットがあります。
数十行程度のプログラムであればさほど大差はありませんが、大規模なプロジェクトを行う際などの数百行〜数千行などの膨大なプログラムがある場合はこのminifyの効果が発揮されます。
コンマ何秒の世界であるため、目に見えた効果は人間にはあまりわからないかもしれませんが、トータルでみると読み込みまでの時間が短縮されます。
web業界では良質なサービスを提供するためにはこの読み込み速度も大きな鍵を握るため、minifyは必要不可欠な処理となります。
実際にコーディングするファイルと読み込ませるファイルは区別する
と思いますよね。
確かにminify後のファイルをいじることは至難の技ですし、もしどこかを誤って削除してしまうとプログラム自体が動作しなくなるのでリスクが高くなるかもしれません。
ですが、安心してください。
現場ではメンテナンスや修正の際、minify後のファイルをいじることはありません！
プログラムを書く際は「.js」のファイルに書いていき、修正の際もこの「.js」ファイルで行います。
その後minifyを行い、「.min.js」のファイルのみを読み込ませることが一般的になります。
「.js」と「.min.js」の違いをいうと、
・「.min.js」は読み込み専用(このファイルの中身をいじることはない)
となります。
つまり、プロジェクトには最低2つのjsファイルが存在することになります。
minifyの仕方は後々解説していきます。
minifyの有無によるコードの違いを見てみる
言葉だけでminifyを説明してもイメージしづらいと思うので、ここでは実際に普通のjsコードとそれをminifyしたjsコードを比較してその違いを実感してみましょう。
ここでは購入金額に応じて割引を適用させた金額を返す関数とそれをコンソールに出力するためのサンプルプログラムを用意しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// 購入金額 cost = 500; // 税率 tax = 1.08; /* 第一引数: 購入金額 第二引数: 税率 戻り値(購入金額が500円以上の場合): 購入金額を2割引して税率を掛けた値 戻り値(それ以外): 購入金額に税率を掛けた値 */ function total_cost (cost, tax){ if (cost > 500 ){ return cost * 0.8 * tax; }else { return cost * tax; }; } console.log(total_cost(cost, tax)); |
上のサンプルコードを細かく見ていくと、まず各変数とそれに対応したコメントアウトで変数の説明が記載されていますね。
続いてtotal_cost関数の処理の前にコメントアウトで関数の説明が複数行に渡って記載されていますね。
これでこの関数にどのような引数が必要で、どんな処理が行われてどんな戻り値が返るのかすぐにわかりますよね。
これはあくまで人間にとって可読性の高いコードになります。
ではこれをminifyしたらどうなるでしょうか？
|
1 |
cost=500;tax=1.08;function total_cost(b,a){if(b>500){return b*0.8*a}else{return b*a}}console.log(total_cost(cost,tax)); |
上のコードは初めのコメントアウトなどで色々記載されたコードをminifyしたコードです。
横に長く、コメントアウトや空白、改行が一切なくただ文字が淡々と並んでいますよね。
またtotal_cost関数の引数を見てみると、「a」や「b」などの単純なアルファベットで置換されていますよね。
一般的にユーザー定義関数で指定する引数の名前は人間が読みやすくするためにネーミングしますが、実際処理には影響しないので、minifyの際にはこのように単純化された引数に置き換わります。
これで人間からしたら非常に読みづらいものになりましたが、パソコンにとっては非常に読みやすいコードになりました。
通常現場では根幹となるHTMLファイルにはこのminify後のファイルを読み込ませることが一般的です。
minifyする方法
ここまではminifyの概要を説明してきましたが、ここでは実際にminifyする方法をいくつかお話していきます。
minifyするには以下のような方法があります。
・エディタの拡張機能を利用する。
・nodeを使用する。
現在はブラウザで「js minify」などと検索すると、コードをコピペするだけでオンラインでminifyしてくれるWebサイトがヒットします。
短いプログラムや私的な開発の際は利用してみてもいいかもしれませんね！
ですが現在はエディタの拡張機能としてjsファイルを自動でminifyしてくれるパッケージもあります。
これらはjsファイルを保存すると自動で「.min.js」のファイルを生成してくれるもので、入門者にはおすすめの方法になります。
検索する際は「〇〇(エディタ名) 拡張機能 minify」とすると大抵のエディタでヒットします。
そして現場で使用頻度が比較的多い方法がこのnodeというサーバーサイドで動作するJavaScriptです。
この方法はやや上級者向けなので、入門者の方はエディタの拡張機能でminifyすることをおすすめします。
プログラミングにおすすめの人気無料エディタ7選【初心者向け】
サブライムテキストの使い方【開発に役立つ便利なエディタ】
まとめ
いかがでしたか？
今回は「.min.js」の謎を解明するべく、minifyの仕組みとメリット、minifyする前のJavascriptコードとの比較を行いました。
この記事でみなさんのコーディングレベルも1段階上になったのではないでしょうか？
ぜひお手元のエディタの拡張機能などでminifyしてみましょう！
JavaScriptが学べるおすすめの入門サイトを紹介！
