NodeでサクっとWeb制作をしたいときに使えるスターターテンプレートを作成しました

おはこんばんにちは、しょうみゆです。

Webデザイナーやコーダー初学者さんに教えることが多いのですが、一緒にWeb制作をすることも増えてきて、その際に開発環境を合わせたいなと思っていました。

そこで今回はNode環境でSassとjQueryを入れて、ついでにホットリロードしたりして、サクっと便利な開発環境を作りました。
そちらを紹介します。

記事の最後にも紹介していますが、こちらで導入している内容は下記のリポジトリで公開しています。
shomiyu/scss-jquery-boilerplate

Contents

環境
今回導入するもの
sassをインストール
reloadをインストール
jQueryをインストール
browserifyをインストール
watchifyをインストール
コマンド一発で全部自動化する
まとめ
参考にしたサイト

環境

Node.js v12.13.1
Yarn 1.21.1

npmではなくてyarnを使用して各パッケージをインストールしていきます。

今回導入するもの

sass
reload
jquery
browserify
watchify

sassをインストール

scssのコンパイル環境にnpmパッケージのsassを使用します。node-sassもあるのですが、DartSassを使用しているsassを選びました。node-sassはLibSassを使用していて正式に非推奨となったからです。
参考：【Node.js】npmからDartSassを使う【LibSassは非推奨になった】

開発環境だけで使用するので--devオプションをつけてインストールします。

$ yarn add --dev sass

package.jsonのscriptsでコンパイルコマンドのショートカットを作れるので作っておきます。
(下記のpackage.jsonは抜粋です)

{
  "scripts": {
    "compile:sass": "sass --watch --style=compressed assets/scss/main.scss:dist/css/style.css",
  },
}

この設定でコマンドラインでyarn compile:sassと入力するとsass --watch --style=compressed assets/scss/main.scss:dist/css/style.cssが実行されます。

オプションを伴ってassets/scss/main.scssをdist/css/style.cssに圧縮するコマンドです。
ファイルパスは適宜プロジェクトに合わせて修正してください。

オプションには下記を指定しています。

--watch：監視。scssファイルに変更がある度に自動的にコンパイルを行う。
--style=compressed：minify化の指定。コンパイル後は可読性の必要がないので圧縮しています。

これでscssを使用する環境ができました。

reloadをインストール

HTMLでもCSSでもファイルに更新があれば自動的にリロードしてほしい！ホットリロードの環境になれている身としては、これがないとストレスなのでインストールします。
VScodeの拡張機能でいうLiveServerですね。

reloadというパッケージが超簡単だったのでこちらを選びました。

こちらも開発環境でしか使用しないので--devオプションをつけます。

$ yarn add --dev reload

こちらもscriptsでコマンドラインを設定します。

{
  "scripts": {
    "compile:sass": "sass --watch --style=compressed assets/scss/main.scss:dist/css/style.css",
    "watch": "reload -b"
  },
}

指定しているオプションは下記です。

-b：ブラウザを自動で立ち上げる。

これでyarn watchと打つとHTMLに変更があった際に自動でブラウザを更新します。

jQueryをインストール

最近はほとんどjQueryを書いてないのでメソッドとか忘れ気味なのですが、Webデザイナーさんや初学者さんたちにはまだまだ大人気のjQueryなので、CDNじゃなくて最初から入れちゃいます。

余談ですが、オワコンと言われているjQuery、私はオワコンとは思ってません。jQueryの誕生を考えると今でもまだまだ必要な技術ではないかと思います。

それではインストールしていきます。jQueryは本番環境でも使うので--devオプションなしです。

$ yarn add jquery

jQueryを書いてみましょう。
/assets/js/main.jsを作成して下記のように記述します。

"use strict";
const $ = require("jquery");

$(window).on("load", function () {
  console.log("jQuery is Ready!");
});

今回注意してほしいのは、Babelを入れていないのでES6の書き方してないかとかは意識したほうが良いです。

意識するくらいなら最初から環境を整えるべきだと思うのでここでbabelを入れてWebpack環境にするか悩みました。。
ただ、今回は初学者さん向け＆サクッと開発したいというのがテーマなのでやめました。jQueryならmapとかも使わなそうですし（知らんけど笑）

ちなみにgulpの使用も考えたのですが、エラーが起こったときに初学者さんに優先度の低い学習コストが発生して混乱や負担がかかってしまっては快適に開発ができないので今回はやめました。

本題に戻りまして、HTMLに作成したscriptを読み込ませましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scss/jQueryボイラープレート</title>
    <link rel="stylesheet" href="dist/css/style.css" />
    <script src="assets/js/main.js" defer></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

HTMLファイルの<head>タグの最後に追加しました。
headにscriptを追加する場合にはdefer属性を入れるのも忘れないようにします。これがないとjQueryでセレクタを指定したときにエラーが起こってスクリプトを実行できません。

これでjQuery自体の設定は完了なのですが、実はこのままではjQueryをまだ使えません。
この状態でreloadでブラウザを立ち上げてコンソールを見ると下記のようなエラーが表示されています。

Uncaught ReferenceError: require is not defined
    at main.js:2

requireされたものをブラウザは読み込めないみたいで、そのエラーを返してます。今のままだとrequireが使えないということなのでbrowserifyをインストールします。

browserifyをインストール

requireでjQueryを呼び出し、ブラウザがわかるようにコンパイルしてくれるパッケージみたいです。正確にはもっと色々できて便利で魔法のようなパッケージらしいですが、ここでは割愛します。
browserify

開発環境だけで使用するので--devオプションを使用してインストールします。

$ yarn add --dev browserify

インストールが完了したらscriptsでコンパイルするコマンドを登録します。

{
  "scripts": {
    "compile:sass": "sass --watch --style=compressed assets/scss/main.scss:dist/css/style.css",
    "watch": "reload -b",
    "compile:js": "browserify assets/js/main.js -o dist/js/main.js",
  },
}

compile:jsスクリプトを追加しました。
オプションについては後述するwatchifyと共通になりますので後ほど。

このコマンドを実行するとassets/js/main.jsを元にdist/js/main.jsが新しく生成されるので、これをHTMLに読み込ませてあげましょう。

<script src="dist/js/main.js" defer></script>

これでjQueryがちゃんと使えるようになりました。

watchifyをインストール

今のままだと、jsファイルを更新する度にコマンドを打たないと修正済のjQueryが反映されない状態で、せっかくのホットリロードが台無しです。

jQueryのコンパイルも自動化しましょう。
watchifyというものを入れていきます。監視に特化したbrowserifyの拡張パッケージっぽいです（そのように解釈しました）

こちらも開発環境のみで使用するので--devをつけてインストールします。

yarn add --dev watchify

スクリプトを追加します。

{
  "scripts": {
    "compile:sass": "sass --watch --style=compressed assets/scss/main.scss:dist/css/style.css",
    "watch": "reload -b",
    "compile:js": "browserify assets/js/main.js -o dist/js/main.js",
    "watch:js": "watchify assets/js/main.js -v -o dist/js/main.js"
  },
}

指定したオプションは下記です。

-o：後続に指定したファイルを出力ファイルとして指定する。
-v：ファイルが生成される度にターミナルにログを吐き出す。更新されたかどうかが分かるため指定しています。

これでjQueryも自動コンパイル環境が整いました。

コマンド一発で全部自動化する

今までひとつひとつ自動化するスクリプトを追加してきましたが、今のままではCSS、ブラウザリロード、jQueryを自動化するのにそれぞれの自動化コマンドを打たねばなりません。
どうせならひとつのコマンドで自動化したいですよね。

ということでスクリプトに追加します。

{
  "scripts": {
    "dev": "sass --watch --style=compressed assets/scss/main.scss:dist/css/style.css & watchify assets/js/main.js -v -o dist/js/main.js & reload -b",
    "compile:sass": "sass --watch --style=compressed assets/scss/main.scss:dist/css/style.css",
    "watch": "reload -b",
    "compile:js": "browserify assets/js/main.js -o dist/js/main.js",
    "watch:js": "watchify assets/js/main.js -v -o dist/js/main.js"
  },
}

scriptsの直下にdevを追加しました。それぞれのコマンドを&でつなげただけです。

これでyarn devとターミナルからうつだけで全て自動化するようになりました。
楽ちんだぁ〜

まとめ

全体のpackage.jsonは下記のようになっています。
各scriptの名前をちょっと変えたりしているかもしれませんが、あまり変わりはないはずです。

{
  "name": "html-scss-jquery-boilerplate",
  "version": "1.0.0",
  "description": "This is HTML, Scss, jQuery develop environment.",
  "scripts": {
    "dev": "sass --watch --style=compressed assets/scss/main.scss:dist/css/style.css & watchify assets/js/main.js -v -o dist/js/main.js & reload -b",
    "compile:sass": "sass --watch --style=compressed assets/scss/main.scss:dist/css/style.css",
    "compile:js": "browserify assets/js/main.js -o dist/js/main.js",
    "watch:js": "watchify assets/js/main.js -v -o dist/js/main.js"
  },
  "devDependencies": {
    "browserify": "^17.0.0",
    "reload": "^3.1.1",
    "sass": "^1.32.8",
    "watchify": "^4.0.0"
  },
  "dependencies": {
    "jquery": "^3.5.1"
  }
}

また、こちらのテンプレートはGithubでも公開しているので良ければgit cloneして使って頂いても大丈夫です。

shomiyu/scss-jquery-boilerplate

画像圧縮パッケージも入れたり、linter系やprettier入れたりしたいなと思っています。
初学者さん向けにコーディングの勉強会開いてたりしているので、このテンプレート使ってなんか作りたいな〜。