Published:2021.4.17/ Updated:2022.6.4

frontend

EJS+Sassで効率的にHTML+CSSコーディングする

HTMLやCSSをコーディングするときに、何度も繰り返し同じタグ名を書いたりするのは、手間がかかります。そこで、効率的にコーディングをするためのツールを導入していきましょう。この記事では、HTMLを効率的に書くためにEJS、CSSを効率的に書くためにSassを導入してみます。

Node.jsとnpmの準備

すでにNode.jsとnpmをマシンにインストールしている場合は飛ばしてください。

今回導入するSassやEJSは、開発を効率化するため作られたツールです。これらは、npmと呼ばれるツール（パッケージマネージャ）で簡単にインストールできます。また、パッケージのバージョン管理などもしやすくなります。フロントエンド開発においてnpmはデファクトスタンダードとなっています。

npmはJavascript（Node.js）で作られており、Node.jsがマシンにインストールされている必要があります。 Node.jsおよびnpmは以下の方法でインストールすることができます。

nvmでインストールする方法

公式ではこちらの方法を推奨しています。
Node.jsのバージョンを選んでインストールする機能を含んでいます。 Node.jsのバージョンに差があるとnpmやパッケージがうまく動かなかったりすることがあります。 nvmを使えば、異なるバージョンを再インストールの手間なしに変更することができます。

Downloading and installing Node.js and npm

shell (Macの場合)

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

インストーラでインストールする方法

簡単なのは公式サイトからインストーラをダウンロードしてインストールすることです。以下のページからNode.jsをダウンロードできます。

Node.jsインストール

EJSを導入してHTMLをテンプレート化する

EJSは、JavaScriptのテンプレートエンジンと呼ばれるもので、HTMLの一部をパーツ化して繰り返し利用したり、条件によって出し分けたりすることができます。
例えば、HTMLのhead要素はサイト全体を通して共通であることが多いですが、EJSのようなテンプレートエンジンを用いることで、コードの記述量を削減したり、メンテナンスを容易にすることができます。

EJSパッケージの導入

ejsをマシンに直接（グローバル）インストールする方法と、npxを利用してejsを実行する方法があります。どちらでも構いません。直接マシンにインストールしたくない（いわゆる汚したくない）場合は後者の方法をとります。

マシンに直接インストールする方法

console

npm install -g ejs

npm installコマンドを使ってejsパッケージをインストールします。-gまたは--globalオプションは、ローカルのマシンのどこからでも使えるように（グローバルに）インストールするという意味です。これを実行することで、ターミナルアプリからejsコマンドを使用できるようになります。

console

ejs -v
//-> 3.1.6

インストールできたかどうかは、ejs -vでバージョンを表示することによって確認できます。

npxコマンドを利用してejsを実行する方法

console

npm install -D ejs

npm installコマンドを使ってejsパッケージをインストールします。-Dまたは--save-devオプションは、開発時のみに使うパッケージで、完成したものには不要なものをインストールする場合に指定します。

console

npx ejs -v
//-> 3.1.6

npxを先頭につけることで、マシンに直接インストールされていなくてもパッケージのコマンドを実行することができます。

テンプレートの作成とHTMLへの変換

HTMLは以下のようにhead部とbody部に分かれています。

index.html

<html>
  <head>
    meta要素など
  </head>
  <body>
    コンテンツ
  </body>
</html>

ファイル先頭からhead部をパーツに切り出します。
部分を切り出したファイルは、単にブラウザでHTMLとして表示することはできないので、拡張子をhtmlではなくejsに変えています。

index.ejs

<%- include('header') -%>
<body>
  コンテンツ
</body>
</html>

<%- -%>で囲まれた部分が、EJS記法で書かれた部分です。ここでは、この位置にheader.ejsと呼ばれる外部テンプレートファイルを差し込みます。このhtmlと同じ階層に、header.ejsを配置し、以下の部分を記載します。

header.ejs

<html>
<head>
  meta要素など
</head>

こうすることで、head要素を毎回書かずにHTMLを作成することができるので、時間短縮やtypo（打ち間違い）を防げます。

console

ejs input.html -o output.html

ejsコマンドを使って、テンプレートからHTMLを生成しましょう。なお、-oオプションで、ファイルに出力する際のファイル名を指定できます。ここでは、output.htmlとしています。
拡張子をhtmlではなく、ejsとすることも可能です。

EJSを使った要素の繰り返し表示の例

EJSを活用した例を見てみましょう。
例えばフォームのselect要素などで同じ要素が並ぶ場合、繰り返し処理をテンプレートに書けるので便利です。

prefecture.ejs

<% const prefectures = [
  {code: 25, name: '滋賀県'},
  {code: 26, name: '京都府'},
  {code: 27, name: '大阪府'},
  {code: 28, name: '兵庫県'},
  {code: 29, name: '奈良県'},
  {code: 30, name: '和歌山県'},
] %>
<ul>
<% prefectures.forEach(pref => { %>
  <li key="<%- pref.code -%>"><%- pref.name -%></li>
<% }) %>
</ul>

単にJavaScriptのコードを挿入する場合は<% %>で囲み、 JavaScriptの変数やEJSテンプレートを展開する場合は<%- -%>で囲むのがポイントです。

console

ejs prefecture.ejs -o prefecture.html

prefecture.html

<ul>
  <li key="25">滋賀県</li>
  <li key="26">京都府</li>
  <li key="27">大阪府</li>
  <li key="28">兵庫県</li>
  <li key="29">奈良県</li>
  <li key="30">和歌山県</li>
</ul>

Sassを導入してCSSを楽に見やすく書く

cssのプロパティを書く際も、同じことを繰り返し書くことが多いです。例えば、フォントの色を毎回指定したり、同じマージンを毎回指定するなどです。
Sassを使えば、こうした煩わしさから解放されることができます。

Sassパッケージの導入

マシンに直接インストールする方法

console

npm install -g sass
sass --version
//-> 1.32.10 compiled with dart2js 2.12.4

npxコマンドを利用してsassを実行する方法

console

npm install -D sass

console

npx sass -v
//-> 1.43.4 compiled with dart2js 2.14.4

npxを先頭につけることで、マシンに直接インストールされていなくてもパッケージのコマンドを実行することができます。

Sassの使い方と変換

ここではSassの代表的な書き方を紹介します。基本的な説明は公式ガイド、詳しい説明は公式ドキュメントに載っています。なお、ここで扱うSassはscss形式のものとします。

ネスト

sassではカッコを入れ子にする（ネストする）ことができます。記述量が大幅に減るので、これだけでもSassを使う価値があると思っています。

style.scss

h1 {
  font-size: 24px;
  span {
    color: #FF0000;
  }
}

変数

変数を使って値を保持することができます。

style.scss

$main-color: #008080;
h1 {
  color: $main-color;
}

継承（Extend）

別途定義しておいていたものを特定の場所に展開することができます。

style.scss

%font-notosans {
  font-family: 'Noto Sans JP', sans-serif;
}
h1 {
  color: #FFFFFF;
  @extend %font-notosans;
}

Mixin

関数のようなものを作ることができます。@mixinで定義し、@includeでMixinを呼び出します。
@includeで指定したプロパティを引数として、Mixinの処理を通してcssが出力されます。

style.scss

@mixin media-sp {
  @media screen and (max-width: 768px) {
    @content;
  }
}
article {
  padding: 10px;
  @include media-sp {
    padding: 0;
  }
}

HTMLやCSSへの変換を自動化する

EJSやSassに修正を加えた後、毎度コマンドを叩いてHTMLやCSSに変換するのは面倒です。実は、Sassの場合はsassコマンドに--watchオプションを加えることで、変更を検知して自動的に変換してくれます。

console

sass --watch input.scss output.css

ただ、こういった毎回発生する処理を自動化するツールがあり、それがGulpなどのタスクランナーと呼ばれるものです。これは別の記事にまとめます。

Gulpでフロントエンド開発を自動化する

ステップアップ

EJSのかわりにPugを導入する

HTMLタグ自体書きたくない場合、やや独特な記法もありますがPugというのがあります。以前はJadeと呼ばれていました。少し覚えることが多くなりますが、よりシンプルな記述でHTMLを生成することができます。

出力されたHTMLには改行やインデントがないので、html-beautifyなどのパッケージで整形します。

console

install -g pug-cli
pug index.pug

index.pug

h1 タイトル
ul
  li: a(href="/home.html") ホーム
  li: a(href="/info.html") お知らせ
  li: a(href="/mail.html") メール

index.html

<h1>タイトル</h1><ul><li><a href="/home.html">ホーム</a></li><li><a href="/info.html">お知らせ</a></li><li><a href="/mail.html">メール</a></li></ul>

ESLint（校正ツール）を導入する

コードにインデント(字下げ)がなかったり、バラバラだったりすると見づらいですね。また、使っていない変数は定義しないようにするなど、細かいチェックをしてくれるツールをLintと呼びます。コードを整然な状態に保つことができます。

console

npm install --save-dev eslint