プログラミングが便利に！2018年に取り入れたいオススメのタスクランナー5選

JavaScriptをはじめとしたブラウザサイドのWebプログラミングを総称して「フロントエンドプログラミング」と呼びます。そんなフロントエンド周りの環境は昨今多様化しており、様々なツールが乱立しているため、使いこなすのは至難の技です。

そこで2009年頃から登場したのがタスクランナーです。タスクランナーとはWebサイト構築に必要な処理をタスクとして自動化してくれるプログラムで、とても便利です。

タスクランナーという言葉自体は聞いたことがある方もいるかもしれませんが、どんなものなのか、そもそも何なのかというのを、ここで改めて整理してみましょう。今回は2018年こそ取り入れたいおすすめタスクランナー5選をご紹介します。
　　

タスクランナーとは

タスクランナーとは、先にも触れたとおり、Web構築に必要な処理を自動で行ってくれるプログラムのことです。

近年のWeb技術は非常に高度化・広範化しており、SassやPostCSSなどの「CSSプリプロセッサー」やReactやVue.jsなどの「フレームワーク」、EJSやHAMLといった「テンプレートエンジン」など、HTMLやCSSをより便利に、多機能に記述するためのライブラリやツールがたくさん存在します。

最近ではそのままの形でHTMLやCSSを書くことはあまりないですが、これらのツールを個別に実行するのは現実的ではありません。

そこで、これらの1つひとつを*「タスク」*として自動化し、バックグラウンドで動かすタスクランナーの仕組みがあれば、チーム全体が同様の環境で短時間でWebの仕組みを構築できるようになります。

また、昨今ではライブラリやフレームワークが無数に増え続けており、学んでも学んでも次々に新しいフレームワークやライブラリが登場しています。こうしたものを学ぶほど余裕がない場合にも、タスクランナーである程度自動化ができればフロントエンド開発が楽になります。
　　

2018年こそ取り入れたいオススメのタスクランナー5選

1. Webpack

Webで必要なファイルをワンパッケージにまとめてくれる便利なものとして、Webpackという技術が次第に注目を集めています。

WebpackはCSSやJavaScript、画像など、Webコンテンツを構成するあらゆるファイル（アセット）を**「モジュール」という単位で取り扱い、「バンドル」**という1つのファイルに最適な形で変換するためのツールです。

従って、Webpackは正確にはタスクランナーではなくモジュールバンドラと言われていますが、GruntやGulpのようなタスクランナーと並んで非常に注目を集めています。

Webpackでは、*「ローダー」（loader）*と呼ばれるプラグインを組み合わせて、様々な処理を実行することができます。JavaScriptファイルを統合することはもちろん、CSSや画像もJavaScriptとして1つのファイルにまとめることもできます。

モジュラーバンドラとしては現在も人気が高く、広義のタスクランナーとして最も多くの人に支持されています。ただ、設定が難しく、初心者には敷居が高く感じられるかもしれません。

参考：
フロントエンドエンジニア必見！JavaScript開発現場で人気の「Webpack」とは？｜ferret
　　

2. Gulp

Gruntの代わりとして使う人が多く、タスクランナーとして歴史が深いのがGulpです。並列処理により実行速度が速く、開発コミュニティも活発です。

タスクは**「gulpfile.js」**というファイルに定義することで、タスクを組み合わせて様々なことを行うことができます。自由度が非常に高いので、テンプレートエンジンを使ってページを量産したり、単純なWebサイトを作りたい時にも役に立ちます。

Gulpのプラグインページでは様々なプラグインが紹介されており、CSSの圧縮や使っていないCSSの削除など、導入後すぐに使えるプラグインも揃っているので、初心者でも扱いやすいでしょう。
　　

3. npm

npmは*「Node Package Manager」*の略で、その名のとおりNode.jsのパッケージを管理するためのシステムのことです。

便利なツールは公式サイトやGitHubからダウンロードして使うことが多いかもしれませんが、npmをインストールしておけば簡単なコマンドを入力するだけでダウンロードからインストールまでワンストップで行うことができます。

意外と知られていませんが、npmは単体でもタスクランナーとして利用することができます。タスクランナーとして利用する際には、**「package.json」**というファイルにプラグインの実行用コマンドをタスクとして定義しておきます。単純な作業はかえってGulpよりも早くなる場合もあります。

参考：
知っておいて損はなし！新人Webデザイナーのための「npm」入門｜ferret
　　

4. Rollup

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

WebpackやGulpなどが人気の中で「なぜRollupが徐々に人気を高めているか」といえば、それは生成ファイルが非常にコンパクトになるという点です。

そのため、ライブラリなどを開発する際にはRollupを通じて作成されることも多いようです。

ビルドのスピードは、ほかのタスクランナーに比べると若干遅めでタスクランナーとしてバリバリ使うには向いていないかもしれませんが、それでもファイルサイズを優先させたい場合には利用を検討してみるといいでしょう。
　　

5. Parcel

Parcelは、Webpackに代わるとも言われている比較的新しいビルドツールです。Adobeのエンジニアによって作成されており、そのほか多数のエンジニアも多数開発に携わっています。

Webpackが出た当初は、GruntやGulpとは違ってタスクランナーで随時処理していたものを宣言的にするという点で脚光を浴びていました。しかし、バージョンアップするたびに設定ファイルを書き直したり、モジュールの多寡によって設定ファイルが冗長になりがちだという欠点がありました。

この点において「なぜPercelが革新的なのか」というと、設定ファイル自体がないという点です。

Percelではコマンドラインにエンドポイントを指定するだけで、依存しているHTMLやCSS、JavaScriptが自動的にバンドルされます。Percelは処理能力も高く、コンパイルのスピードも速いのが特徴です。Percelによると、Browsifyで22.98秒、Webpackで20.71秒かかったコンパイルがPercelを使ったら半分以下の9.98秒で行われるそうです。

設定が非常に簡単である反面、まだ汎用性は高いとは言えませんが、将来的に利用できる範囲が広がればWebpackに取って代わる可能性は十分にありそうです。