開発環境あれこれ（gulpやwebpackなど）

目次

1. Node.jsについて
2. npm / yarn について
3. タスクランナーについて（gulpなど）
4. モジュールバンドラーについて（webpackなど）
5. gulpとwebpackの併用って何してるの
6. もはやgulpいらない？
7. gulpがすでに導入されてるプロジェクトの始め方
   1. yarn したときや、yarn devした時によくあるエラー・解決法

1. Node.jsについて

Node.jsはJavaScriptをサーバーサイド言語として使えるようにしたJavaScriptの実行環境の1つ。

2. npm / yarnについて

npm

npmはNode.jsのパッケージ管理システム。Rubyにおけるgem、Pythonにおけるpipのようなもの。パッケージはライブラリやフレームワークのこと。Reactやwebpack、jQueryなどです。

もともとはNode.jsのためのパッケージ管理システムだったが、今ではフロントエンド用のパッケージの管理にも使われるようになっている。

Node.jsがあればnpmコマンドも使えるようになる

yarn

Facebookが開発したnpmの改良版コマンドのようなもの。npmよりパッケージのインストールが高速だったり、yarn.lockファイルを作ってくれたりする（今ではnpmでも npm ciを使えばlockファイルは生成されるが、yarnはデフォルトで生成される）

yarnはnpmでインストールしましょう。

yarn.lockファイルについて

yarn.lockファイルはプロジェクトに依存してるパッケージの正確なバージョンを記録しています。

package.jsonを見ると様々なパッケージのバージョンが書かれていますが、特定のバージョンを指定してるのではなく、バージョンの範囲を指定しています。

そのためlockファイルがない状態で yarnや npm iをすると、その時期によってインストールされる細かいバージョンが違ってきて、動いてたはずなのに動かないということが起こります。

lockファイルでは正確なバージョンを記録することで、こういった問題を解決しています。

詳しくはこちらを参考に
https://zenn.dev/luvmini511/articles/56bf98f0d398a5

個人的にはyarn使ってます。

タスクランナーについて（gulp, Grunt）

タスクランナーとは開発を自動化するためのツール。2013年ごろからフロントエンド開発のトレンドになってるらしい（そのころはまだこの業界いなかった）

覚える必要ないですが昔はGruntというツールがあり、その後gulpがスタンダードになりました。

Gruntやgulpには専用のプラグインがあり、それらを使うことでScssをCSSへコンパイルしたり、画像の圧縮などをタスクとして登録し自動化することができます。

モジュールバンドラーについて（webpack, rollup.js, browserify）

モジュールバンドラーはその名の通りモジュールをバンドル（束ねる）するツール。代表的なものはwebpackです。

CSSやJavaScript、画像などを一つのファイルにまとめてくれます。一つのファイルにすることでリクエストの回数を減らすことができます。

よくgulpと同列で挙げられることがありますが、厳密には違います。webpackもバンドラーとはいえgulpでやってることもできるのでタスクランナーの一つと思われがちです。

webpackがよく使われますが、たまにrollup.jsを使ってるのも見ます。rollup.jsの方がシンプルだったような。browserifyはほぼ聞かなくなりました。

gulpとwebpackの併用

ReactやVueなどでの開発環境はwebpackで作られますが（他もあるかもしれないけど聞いたことない）、web制作においてgulpとwebpackが併用されてることがよくあります。

あれは何をしてるかというと、webpackのバンドル機能やbabelでのJSの変換をgulpのタスクとして使ってます。

webpackを使うことで、htmlに以下のようにライブラリを追加する度に記述していたのを、JSでimportすることで一つにまとめてくれます。

ライブラリ入れるたびに増えていく...😭
<script src="./jquery.js"></script>
<script src="./xxxx.js"></script>

JSでimportすることで、一つのファイルにスッキリ😊
<script src="./bundle.js"></script>

もはやgulpはいらない？

gulpはgulpのプラグインを介して、node_mudulesにあるライブラリを実行してるに過ぎません。

例えば、gulpでsassを使う場合には gulp-sassというgulpのプラグインを使いますが、これは sassコマンドをgulpで実行するためのものです。

別にgulpがなくても sassコマンドを実行すればScssファイルのコンパイルはできます。

package.jsonにあるscriptsに、そういったコマンドやshell scriptを書いておけばnode_modulesに追加したライブラリをそのまま使うことができます。

ネットで見かける「gulpを使わずnpm scriptsで環境構築してみた」という記事はそういうことをしています。

npm scriptsのメリットの一つはGruntやgulpなどタスクランナーの変遷に左右されなくなります。ただしpackage.jsonの記述が増えたり、やっぱりgulpを使う恩恵はあるのでそんなに流行ってはないと思います。

gulpがすでに導入されてるプロジェクトの始め方

gulpで環境構築されたファイルを渡された時にどうすればいいか分からないと思うかもしれないですが、コマンドを数回打つだけです。

// 1. まずpackage.jsonがあるファイルへ移動
cd hogehoge

// 2. パッケージ一式インストール
yarn

// 3. インストールが終わったら開発環境を立ち上げるコマンドを打つ
yarn dev

3の開発環境を立ち上げるコマンドというのはpackage.jsonに書いてあります。

scriptsが登録されてるコマンドです。開発環境立ち上げであれば、だいたいdevかstartで登録されてることが多いです。
あるいはReadmeに書いてくれてます。もし開発環境を作ることがあれば、Readmeに書いておきましょう。

{
  "name": "sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "npx gulp dev",
    "prod": "npx gulp dev --env production",
    "build": "npx gulp build --env production"
  },
  "dependencies": {
    "gulp": "^4.0.2",
  }
}

yarn したときや、yarn devした時によくあるエラー

• 使ってるライブラリが使ってるNode.jsのバージョンでは動かない
  • →Node.jsのバージョンを変えましょう。エラーメッセージにどのバージョンなら動くか書いてます
  • もらった開発環境だとほとんどこのエラーな気がします
• ライブラリがインストールされてない
  • たまにありますが、開発中に他の人が新しくパッケージを追加することもあります。それをGitでpullしてきたときに、自分の環境ではまだインストールしてないのでエラーになります。
  • yarnしましょう
• 依存パッケージによるエラー
  • lockファイルを作りましょう
• （環境構築する時に）特定のライブラリがあるNode.jsのバージョンでは動かない
  • 一つ目と似てますが、そのライブラリのバージョンを動くバージョンまで下げましょう
• その他
  • 落ち着いてターミナルのエラーを見ましょう
  • エラーメッセージをコピぺでググれば、何かしら情報が落ちてます