プログラミングが便利に！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に取って代わる可能性は十分にありそうです。
　　

まとめ

以上、5つの主要なタスクランナーをご紹介しました。タスクランナーは画像をフォルダに入れた瞬間に圧縮を開始してくれたり、 JavaScript を自動でまとめてくれたりと、非常に便利な ツール です。

概して、Gulpやnpmはタスクランナーとして広範に使うことができますが、それに対してWebpackやRollup、Percelなどはモジュールバンドラとしての性格が強いので、自分に合ったものを選んでみるとよいでしょう。