JavascriptというWeb制作で使われる言語があります。

色々なサイトのHTMLソースコードをのぞいて見るとわかりますが、

<script src=”//example.com/example.min.js”></script>

などという形で読み込まれているのがJavascriptのファイルです。

ひとつのファイルにまとめあげてくれる方法

方法のひとつとして最近よく使われているのがWebpackと呼ばれるツールです。

これを使うと複数あるJavascriptファイルをひとつのファイルにまとめあげることが可能です。Babelというコンパイラを使うように設定すればES6と呼ばれるような最新のJavascriptのコードも記述することが可能です。(ES6では一般的なオブジェクト指向言語にあるようなclassが使えます。)Babelというのは具体的にどういったものなのかというと、ES6などと呼ばれるこれからJavascriptに搭載される最新の仕様を、現在使われているJavascriptのコードに変換してくれるものなんです。コンパイラと聞くとその都度コンパイルを実行するのが面倒くさいなと思われるかもしれませんがこういった処理というのは自動化することが可能です。セーブした瞬間にコンパイラが走ってということをさせることができるんです。さらに他のツールを組み合わせれば、セーブしてコンパイルしたタイミングでブラウザの画面をリロードするというようなこともできるんです。わざわざ自分でリロードをしなくてもすむんですね。

こういったものとWebpackなどのツールを組み合わせて快適な環境を作り上げていくというのが現在のトレンドです。

Webpackでひとつのファイルにするときにminifyといって圧縮も同時にかけることも可能です。これをするとファイル容量が減るのでアクセスしてくるユーザーにも優しいですし、サーバーにもやさしいですよね。また、minifyするときにライセンスコメントだけを残す設定をすることもできます。ライセンスコメントを消してしまうのはライセンス違反になってしまいますからね。こういうのは気をつけなければなりません。

Webpackなど便利なツールは沢山でているのでぜひ一度試してみていただきたいですね。手放せなくなりますよ。