コラム

こんにちは。しまこです。
みなさんは処理を自動化できる「タスクランナー」を使用していますか？
タスクランナーは開発作業を自動化するためのツールで、近年Webのフロントエンド開発のトレンドになっています。
今回はタスクランナーに触れていきます。

タスクランナーとは？

「タスクランナー」とは、Web構築に必要な処理を自動で行ってくれるプログラムのことでこの変換を自動で行ってくれるツールの事です。
プログラミング言語で書いたプログラムはWebブラウザで表示することができないため、コンパイルをすることによって、HTMLやCSS、JavaScriptに変換する必要があります。

タスクランナーでできること

• Sassのコンパイル
• HTML/CSS/JavaScript の圧縮・最適化
• スプライト画像の生成
• テンプレートエンジンの導入
• HTMLコメントの削除

よく使われているタスクランナー

Webpack

webpack(ウェブパック)とはJSファイルをまとめる高機能なモジュールバンドラーのことです。
CSSやJavaScript、画像などのWebコンテンツを構成するあらゆるファイル（アセット）を「モジュール」という単位で取り扱い、「バンドル」という1つのファイルに最適な形で変換するツールです。

Gulp

Gruntの代わりとして使う人が多く、タスクランナーとして歴史が深いのがGulpです。並列処理により実行速度が速く、開発コミュニティも活発です。
「本体＋プラグイン」の組み合わせで様々な『タスク』が実現することができます。
自由度がとても高く、テンプレートエンジンを使ってページを量産したり、単純なWebサイトを作りたい時などにも役に立ちます。

npm

「Node Package Manager」の略です。
その名のとおり、Node.jsのパッケージ（Package ）を管理するManager）ツールです。
便利なツールは公式サイトやGitHubからダウンロードして使うことが多いかもしれませんが、npmをインストールしておけば簡単なコマンドを入力するだけでダウンロードからインストールまで行うことが可能になります。

Rollup

Rollup とは JS のモジュールバンドラーです。
WebpackやBrowserifyのように、複数ファイルに書かれたJavaScriptを1つのモジュールにしてくれます。
モジュールが何かに依存していたり、プリコンパイルを必要としている場合等に役に立ちます。

Parcel

Parcelは、Webpackに代わるとも言われている比較的新しいツールです。
AdobeのエンジニアDevon Govett氏が中心になって開発が進められています。最も大きな特徴は「設定ファイルを必要としない」ことです。

タスクランナーを動かす

これらのタスクランナーを動かすには、Node.jsを用意しなくてはいけません。。
Node.jsとはChromeが使用しているJavascriptエンジン「V8」で動作するJavascript環境のことです。
簡単にいうなら「JavaScriptの実行環境」です。導入すれと、自分のパソコンやサーバーなどのブラウザ以外の環境でJavaScripが利用できる様になります。

まとめ

今回の記事では、タスクランナーについてご紹介してきました。
タスクランナーは画像を圧縮をしてくれたり、JavaScriptを自動でまとめてくれたりと、非常に便利なツールです。
自分に合ったものを選んでみるとよいでしょう。