こんにちは、忙しい時と忙しくない時の差がままあるコーダーの仁木です。

忙しい時はとにかくスピーディーに作業を進めたい！
個人的に効率よく作業できるかというのはモチベーションにも関わってきます、仕事と言えどなるべくストレスを感じずに生きたい。

そこでフロントエンドの味方、タスクランナーを導入して簡単なタスクを自動処理してしまおうと思います。
内容がままあるので小分けに記事にして、今回はタスクランナーを使うために「Node.js」という処理環境をインストールするまでご紹介したいと思います。

そもそもタスクランナーとは？

「タスクランナー」とは、「タスク(仕事・課題)」をプログラム処理で自動化してくれるツール全般のことを指します。
フロントエンドの制作業務の中で出てくる単純作業を自動化してしまい、業務の効率化、サイトの品質を守るが目的です。

どういったものがよく使われているの？

gulp、webpack、npm-scripts
などがあります。今回はgulpを使います。

これらのタスクランナーを動かすには、まずNode.jsを用意してあげなくてはいけません。

Node.js？

Node.jsとはChromeが使用しているJavascriptエンジン「V8」で動作するJavascript環境のことです。
Node.jsは今回のタスクランナー以外にも、様々な用途で使われており、詳しく説明すると脱線してしまいます。なので端折って説明すると、Javascriptで書かれたプログラムを受け取って処理してくれます。

ここで１つ疑問が浮かぶかもしれません。
「JavascriptってブラウザでWebサイトを表示させるためのプログラム言語じゃないの？それとタスクランナーに何の関係が？」

その答えはつまり、先ほどあげたgulp、webpack、npm-scriptsなどのタスクランナーはJavascriptで動いています。
もちろんJavascript以外の言語で作られたタスクランナーもありますが、最近の主流としてほとんどのフロントエンジニアはNode.jsで動くタスクランナーを使用していると思います。

タスクランナーの導入

Node.jsのインストール

まず一番初めにNode.jsが必要になります。Node.js自体バージョンを管理できる方があとあと便利なので、バージョン管理ツールを使ってインストールしたいと思います。
MacとWindowsとでインストール方法が異なるのでそれぞれ説明します。

Mac

Macはnodebrewを使います。
ターミナルを開いて以下のコマンドを打ちましょう。

~/.nodebrewにインストールされるので、.bash_profileにPathを追加します。

.bash_profileを読み直してコマンドが動くか確認します。

これでnodebrewのヘルプが出力されればOKです。次はNode.jsをインストールします。

Node.jsのインストールには先ほどのnodebrewを使用するので、nodebrewのlsコマンドで最新のNode.jsのバージョンを調べましょう。

Node.jsのこれまでのバージョンが一覧で出てきます。2018年4月現在の最新はv9.11.1なのでこのバージョンをインストールしたいと思います。

コマンドを打つと自動でインストールが始まります、インストール完了後にインストール済みのNode.jsの一覧を以下のコマンドで確認します。

先ほどインストールしたv9.11.1が表示されています。
ここでcurrent noneが一緒に出てきていると思いますが、これはv9.11.1をインストールしただけで利用できるようになっていないので現在利用しているバージョンとしてv9.11.1を指定します。

これでNode.jsが使えるようになりました。

windows

windowsはnodistを使います。

nodistのgithubにアクセスして、最新のインストーラーをダウンロードします。
「NodistSetup-v○.○.○.exe」のファイルです。

インストーラーを起動して指示にしたがってインストールを進めます。
インストール先のディレクトリは任意で構いませんが、デフォルトで良いでしょう。インストール後はPCを再起動します。

再起動後にnodistのコマンドを打ってみます。

これでnodistのバージョンが出てくれば無事インストールされています。

nodistでは2018年4月現在でv7.2.1のNode.jsが標準でインストールされています。これを最新バージョンをインストールして利用できるようにします。
まずは、Node.jsのバージョンを確認します。

バージョン一覧が出てくるので、最新バージョンのv9.11.1が確認できました。
このバージョンをインストールします。

使用したいNode.jsのバージョンを指定します。

これでNode.jsが使えるようになりました。

また次節で説明しますが、nodistの場合はnpmを使えるようにコマンドを打っておきます。

ここまでNode.jsのインストール手順でした！

次回はnpmを使ってgulpのインストールから実際にタスクを追加するまでを書きます。