こんにちは、toraguitarです。
フロントエンジニア(以下、FE)として働いています。
今回は「タスクランナー」についてまとめていきます。
この記事の目的
- 筆者が 「言葉は知っているけど説明できない」というものをピックアップする
- 調べなくても概要を説明できる、具体例を1~2つ出せるレベルに引き上げる
- 歴史的背景など踏み込んだ説明は省く
言葉の意味
タスクランナーとは、開発作業の効率を上げる自動化ツールです。
多岐にわたる作業を簡素化し、開発の生産性を向上させます。
昨今のwebページはhtml, css, JavaScriptなどを利用して表示されますが、実際の開発でそれらを直接書くことはほとんどありません。
以下のようなものを用いて開発を行うことがほとんどです。
- テンプレートエンジン(ejs, pugなど)
- フレームワーク(Vue.js, Reactなど)
- CSSプリプロセッサー(Sassなど)
これらはそのままだとブラウザに表示できないため、html, css, JavaScriptに変換＝コンパイルする必要があります。
そのような変換作業を自動化してくれるのが、タスクランナーです。
どんなタスクランナーがあるのか
Gulp
最も耳にするタスクランナーのうちの一つですね。
JavaScriptで自動化の処理を書き、非同期的に自動化の処理を走らせることができます。
直感的で自由度が高く、初心者にはこちらの方がハードルが低いという解説が多かったです。
Grunt
Gulpと比較する文脈でよく登場しました。
Gulpに比べてより細かな債務分担ができる、つまりタスクの線引きがしやすいという特徴があります。
その分自由が聞きにくい、処理が遅いため、Gulpとどっちが良いかはプロジェクトによるようです。
npm scripts
Frontend Developer Roadmap 2023版で使用が推奨されているタスクランナーです。
package.jsonの「scripts」箇所に記述することで、シェルスクリプトやaliasコマンドを登録・実行することができます。
{
"scripts": {
"say": "echo 'Hello world!!'"
}
}
なお、タスクランナーについて調べていると、関連してWebpackがよく登場しました。
Sassのコンパイルができるなど、一部タスクランナーの機能を備えてはいますが、基本的には「モジュールバンドラー」と呼ばれるものです。
こちらはJavaScriptなどのファイルを、複数ある状態から一つのファイルにまとめる＝バンドルするためのプログラムです。
タスクランナーの役割
一言で開発効率を上げる、自動化すると言っても、具体的に何ができるのでしょうか。
ツールによっても様々ですが、ここでは2つ機能を紹介します。
コンパイル
冒頭にも挙げた通り、web開発ではhtmlやcssをそのまま書くことはほとんどありません。フレームワークやテンプレートエンジンを用いて書いたプログラムを、ブラウザで表示できる形に変換します。
ファイルの圧縮・最適化
JavaScriptのminify化、画像の圧縮など、ファイルの最適化を行います。
ファイルの読み込み速度、ページの表示速度の改善に繋がります。
まとめ
- タスクランナーとは、開発効率を上げるための自動化ツール
- gulp, Grunt, npm scriptなどが代表的なタスクランナーである
- ファイルのコンパイル、圧縮、最適化を自動で行ってくれる