【npm scripts入門】HTML/CSSの簡素なローカル開発環境をサクッと作ろう

2021.05.15
JavaSrciptをゴリゴリ書く必要のないWEBページを制作する時や、ちょっとしたCSSの検証を行いたい時、皆さんはどのような環境で作業をしていますか?
今はcodepenjsfiddleなど、オンライン上でコーディングできるサービスもたくさんありますが、実装したものを実機で確認したい時に不便だったり、アカウントを作らないとコードを保存しておけなかったりと、若干使い勝手が悪い部分もあります。

昔々、私が人生で初めてHTMLコーディングをした時は、HTMLファイルとCSSファイルを入れたフォルダをローカル開発環境として作業していました。
当時は、それしか方法がないと思っており、特に不便に思っていなかったのですが、今になってみると、HTMLファイルを書き換えた後に画面を更新(F5)しないと変更内容が反映されなかったり、SCSSに慣れた今CSSを書かなくてはいけなかったりするというのは、かなり面倒でやる気が削がれてしまいます・・・。

とは言っても、たった1,2ページの実装のためにgulpなどのタスクランナーが動く環境を作るのは骨が折れますよね・・・。
開発環境構築に時間を取られたくない!サクサクコーディングできる環境を用意できたらそれで満足!という方にオススメなのが、npm scriptsで動かせる簡素(質素)なローカル開発環境の作成です。
画面更新やsassのコンパイルといった最低限度のことだけを、npm scriptsでやってしまいましょう!
npm scriptsに慣れていないけれど、環境を作ってみたいという初学者の方も、一緒にやっていきましょう〜。


⓪ 下準備


まずは下ごしらえです。
各自、nodeとnpmのインストールをお願いします。
npmとかよく分からないや・・・という方は、npm入門という記事がとてもわかりやすかったので、ご参照ください。

インストールまで完了しましたら、ローカル開発環境のディレクトリを作っておきましょう。
mkdir colleDev
cd colleDev


続いて、package.jsonを作ります。
色々とオプション設定どうする?と聞かれますが、全てエンター(スキップ)かY(yes)で問題ありません。

npm init


これにより、フォルダ内に、package.jsonが作成されているはずです!
npmでpackage.jsonを作る ひとまずこちらで下処理は完了です!
お疲れ様でした。

① F5リロード不要!Browsersyncの入れ方



HTMLを書きはじめた頃、コードを更新した後にF5を押す事くらい、なんて事ありませんでした。
しかし 3分くらいで設定完了できる / HTMLやCSSの変更を検知して画面をリロード可能 / 同一ネットワーク内に接続した機器同士であれば同期可能 Browsersyncにお世話になってからは、自分の作業内容が自動でサクサクブラウザに反映される快適さを覚えてしまい、今ではもうF5を見るのも嫌になってしまった程です。

Browsersyncは、先ほどnpm initしたディレクトリにインストールします。
npm install -g browser-sync

browser-syncが入ったら、これを動かすための設定ファイルも新規作成します。
npx browser-sync init

これにより、bs-config.jsが生成されているはずです。

bs-config.jsの生成 今回、ローカルファイルのrootをpublicディレクトリとし、その内部にあるHTMLとCSS(scssがコンパイルされてできた方)の変更を検知してリロードするようにしたいので、一部追記をします。
"files": [
  "public/**/*.css",
  "public/*.html"
],
"server": [
  "public",
],

設定はこれだけです。

これを常時動かすためのscriptは③ npm scriptsを書こうで書いていきます。

② scssを書きたいなら!sassの入れ方


個人的に、CSSはスタイルの優先順位や継承などを直感的に書きづらいなと思っております。
scssの方が慣れているのでscssを書きたい!という方は、ぜひsassをインストールしてください。
npm install -g sass

もうこれだけで、okです!

③ npm scriptsを書こう



それでは、package.jsonを開いてください。
ここまででインストールしてきたBrowsersyncとsassを動かすための npm scriptsを書いていきましょう。
npmとかscriptsとか言われると多少身構えてしまうという方でも、サクッとかけると思います!

まず、何も書いてない段階のpackage.jsonです。
{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
   },


“scripts”というところに加筆していきます。
現段階でも、”test”というのが1つありますね。
これは ”npm run test”というコマンドを打った時に、echoから始まる一文を実行しますという誓約書のようなものです。
つまり、”名前”:”実行するコマンド”となるように書いていくだけでokなのです。

今回、先ほど生成したbs-config.jsの通りに動いて欲しいので、以下のようにします。
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "browser-sync start --config \"./bs-config.js\"",
  },

こうすれば、後は毎度作業前にターミナルで”npm run server”と唱えるだけで勝手に作業内容を反映してくれます。

続いてsassの方です。
scssをCSSへコンパイルする場合は、「どこにあるファイルを」:「どこにコンパイルするか」を指定しましょう。
ファイルを小さくしたい場合は、圧縮(compressed)も同時に行います。
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "browser-sync start --config \"./bs-config.js\"",
    "sass": "sass --style=compressed public/scss/common.scss:public/assets/css/common.css"
  },

ただし、上記のままではコマンドを唱えた時に一度だけ動いて終了してしまいます。
毎度コマンドを唱えるのはF5を押す以上の苦行です。–watchを入れて、コマンドを一定間隔で繰り返し実行させると便利ですよ!

"sass": "sass --watch --style=compressed public/scss/common.scss:public/assets/css/common.css public/scss/sp/common.scss:public/assets/css/sp/common.css"

まとめ


極小規模の開発を行う際に、最低限度の労力でローカル環境を構築するなら、npm scriptsで動かす仕組みがオススメです。
ここにさらにPrettierを入れたり、JavaScriptを書くならbabelを入れたりというカスタマイズを加えれば、もっと便利になります。
是非色々と試して、作業しやすいボイラープレートを作ってみてください。

最後までお読みいただきありがとうございました。
WEB制作に関するご相談は、CONTACTまでご相談ください。
このエントリーをはてなブックマークに追加