【Pug vs Edge.js】JSテンプレートエンジンを簡易比較してみた

ブログ術公開日:2019 7/19

こんにちは。継続の錬金術士なおキーヌです。

ブログ毎日更新は201日目になります。

HTMLとCSSを打ち込み始めて気付けばかれこれ20年に到達しました。

そろそろHTMLを出力するテンプレートエンジンを使ってみたくてPugを使おうと思ったのですが、

せっかくなのでJSテンプレートエンジン比較をしてみました。

比較対象はPugとEdge.jsになります！

一応比較をうたっているいるのでまず検証結果と結論から書いていきます。

その後、おまけとしてインストールから実際に使ってみるまでの解説もしていきます。

Pug VS Edge.js 結果発表おおおおお！
PugとEdge.jsのインストール
Pugを使ってみる
Edge.jsを使ってみる

Pug VS Edge.js 結果発表おおおおお！

結果を先にお知らせしておくと、Pugの勝利です！

Pug勝利の決め手は

超絶お手軽で見やすい
コンポーネント化できる（最重要)
Pug単体でコマンド1発でコンパイルができる(次に重要)
SCSSを使っていたら楽に使える

Edge.js敗北の要因は

結局HTMLタグ＋締めタグを打たなければいけない
Edge.jsはnpmやyarnから簡単に呼び出せない
ソースコードにrequireして使うもの
特殊なレイアウト構造のため習得コストが高め
edgeからedge-jsに変わったりしてて発展途上感有り

以上です。

どちらもコンポーネント化できるし組み込みでも使えるという共通点はあるのですが、
パっと触った感じでお手軽さでいえばPugに軍配がありました。

デメリットを1つあげるとすれば、Pugはプログラミングちっくな書き方なので
全くプログラミングをしたことがない人にとっては難易度が高いかもしれません。

逆にJavaScriptでもいいのでちょっとでもプログラミングしたことがあれば、
めちゃくちゃ使いやすいしSCSS同じ感じでコードが書けるのでかなり工数を減らせる感じがしました。

これからPugをメインに使っていこうと思いますが、
その中で感じたこともそのうち書いてみようと思います。

これ以降はPugとEdge.jsの導入と使い方を軽く説明しています。

Edge.jsに関してはyarnで動かせなかったので途中で投げましたが、
導入については少し触れているので、良ければ見てください。

PugとEdge.jsのインストール

PugとEdge.jsはnode.jsを使ったテンプレートエンジンです。

node.jsとnpm(yarnでもOK)を導入していることを前提としています。

まだ導入していない人は「javascriptでプログラミングを始めるためのNode.js入門」で、
node.jsの導入方法を解説しているのでインストールして動かすことができてから戻ってきてください。

PugとEdge.jsをインストールしよう

早速HTMLテンプレートエンジンのPugとEdge.jsをインストールしていきます。

npmとyarn両方書いてますが、どちらでも大丈夫です。

npmはnode.jsを入れると基本的には自動で入りますが、
yarnは自分で入れないと入りません。

フロントエンドエンジニアでもない限り基本はnpm良いでしょう。

npm init
yarn init

npm install pug-cli edge
yarn add pug-cli edge

これでインストールが完了します。

initで初期化して出てくる文字は一旦ENTER連打で問題ないです。

コマンド1つですごいものをインストールできるなんて便利な世の中ですね。

Pugを使ってみる

まずはPugから使ってみましょう。

ルートディレクトリに「pug」と「pug_html」いうディレクトリを作成し、
そこにPugのファイルを格納していきます。

まずはHello Worldをしてみましょうか。

ファイル名は「index.pug」としましょう。

拡張子は必ず「.pug」にしてください。

doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    link(rel="stylesheet" href="/css/styles.css" type="text/css" media="screen")
    title Pugで作ったHTMLだよ
  body
    #wrapper
      h1 Hello World!
      #container
        h2 PugはPythonぽいね

このソースコードで判ることは以下になります。

タグを書いたらインデントで字下げする
タグにカッコを付けるとタグの属性(aタグならhrefとか)を指定できる
idとclassは＃か．をタグの後ろにつける
タグを省略してidかclass(# or .)から始めるとdivタグとして認識される。
タグ＋半角空白+文字列にするとタグとタグの中に文字が入る

なんだかPythonちっくな書き方ですね。

Pythonを触ってきた人には結構馴染みやすい書き方なのではないでしょうか？

私は生粋のXHTMLコーダーなので閉じタグがないとなんか気持ち悪いです。

しかしその無駄なプライドを捨てないと成長は無いので、
気持ち悪さも飲み込んでHTMLテンプレートエンジンを覚えようと頑張っています。

pugファイルをコンパイルしてみよう

index.pugファイルを作成出来たら今度はコンパイルしてHTMLファイルとして出力してみましょう。

pugをnodeにグローバルインストールすると楽なのですが、
グローバル環境を汚したくないのでちょっと特殊な書き方でpugを実行しなければいけません。

しかし「package.json」にコマンドを記述しておけば楽に起動できるようになります。

ルートディレクトリにある「package.json」を編集しましょう。

{
  "name": "pug_vs_edge",
  "version": "1.0.0",
  "description": "naokeyzmt.com",
  "main": "index.js",
  "author": "naokey",
  "license": "MIT",
  "scripts": {
    "pug": "pug ./pug/index.pug -o ./pug_html -P"
  },
  "dependencies": {
    "pug-cli": "^1.0.0-alpha6",
  }
}

scriptsの項目に「pug」というコマンドエイリアスを追加しています。

内容は「pug ./pug/index.pug -o ./pug_html -P」となっていますね。

これの意味は

pugを使います
pugファイルのパスを指定します
-oを付けて半角空白の後にhtml出力先を指定できます
-Pを付けるとhtmlを圧縮せずに出力してくれます。

-oと-Pは大文字と小文字に気を付けてください。

-oは–out、-Pは–Prettyと同義になります。

どっちを指定してもいいですが、私は短いほうがいいです。

それでは早速コンパイルしてみましょう。

npmかyarnを使って先ほど作ったコマンドを呼び出します。

npm run pug
yarn run pug

エラーが出なければ出力に成功しています。

出力結果を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen">
    <title>Pugで作ったHTMLだよ</title>
  </head>
  <body>
    <div id="wrapper">
      <h1>Hello World!</h1>
      <div id="container">
        <h2>PugはPythonぽいね</h2>
      </div>
    </div>
  </body>
</html>

良い感じにインデントも聞いて綺麗なhtmlに仕上がっていますね。

html5で出力されるので、特段HTML5専用の書き方も意識しなくて初心者にもやさしいです。

xhtmlからhtml5になって書き方がシンプルになったのはいいのですが、
その分専用タグがプログラミング的に難しくなったりして覚えるのが大変でした。

テンプレートエンジンを使えばそれらを気にせず出力してくれるので便利ですね。

今のところデメリットは感じませんでした。

SASS(scss)を使ったことがある人だと簡単に馴染めると思います。

これからHTMLを始める人もpugでいいんじゃないかなと思うほど楽です。

Edge.jsを使ってみる

Edge.jsはC#からでもnode.js経由で使えるそうなので、汎用性は高そうです。

基本的な機能はpugと大きく変わらずループや変数など使えるのですが、
記述方法がhtmlにプログラミング機能を付け加えたような感じになります。

始める前にルートディレクトリに「edge」と「edge_html」ディレクトリを作っておきます。

ファイル名の拡張子は必ず「.edge」にしてください。

早速「index.edge」ファイルを作ってEdge.jsを使ってみましょう。

@layout('layout.edge')

@section('main')
    <div id="wrapper">
      <h1>Hello World!</h1>
      <div id="container">
        <h2>edge.jsはhtmlにプログラム機能を付与した感じね</h2>
      </div>
    </div>
@endsection

なんかめちゃくちゃシンプルですね。

index.edgeはこれでOKです。

次に1行目に読み込んでいる「layout.edge」を同じディレクトリに作ってください。

<!DOCTYPE html>
<html lang="ja">
  @include('htmlhead.edge')
  <body>
    @!section('main')
  </body>
</html>

wordpressのテーマを作った人なら何となく何しているかはわかるのではないでしょうか？

最後に「htmlhead.edge」を作ってみましょう。

  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen">
    <title>Edge.jsで作ったHTMLだよ</title>
  </head>

これでパーツは揃いました。

やっていることを少し解説すると、基本的にEdge.jsが読み込むのは「index.edge」だけです。

後のファイルは「index.edge」から呼び出されているだけですね。

まず「index.edge」の先頭に「@layout」

とありますが、読んで字のごとく基本的なレイアウトファイルを読み込みます。

これがEdge.jsの特徴でもあるそうです。

レイアウトファイルに書かれている箇所にコンポーネントを展開していくというイメージでしょうか。

@includeをするとファイルそのものを読み込めます。

wordpressのincludeと似たような感じですね。

@section('名前')～@endsection

で挟んだモノは@!section('名前')

で呼び出せるみたいです。

edgeファイルをコンパイルしてみよう

ここで残念なお知らせがあります。

行き当たりばったりでやっていたせいか、ここでアクシデントが発生しました。

edge.js、なんとnpm or yarnから直接コンパイルができません！

多分なんとかすればいけるのかもしれませんが、ググってもそれらしいのが見つかりません。

私がバカなだけかもしれません。

ざっと調べていると基本的な使い方はソースコード側でrequireして、
読み込んでコンパイルという形だそうです。

~~ぶっちゃけ面倒くさくなったので~~ とりあえずedge.jsメリットだけ書いておきます。

C#でもnode.jsを経由して使える
ExpressやElectron等と相性がよさそう

基本的に組み込んで使うタイプっぽい感じがしますね。

結論：pugでいいや

目次1にも結論は書いておきましたが、締めとして最後にも書いておきます。

Pug VS Edge.js

勝者はPugでした！

勝因は単体で動くし面倒くさくない

これに尽きますね。

pubのデメリットとしては構文を覚えるのが面倒な以外、特に目立ったデメリットはありません。

むしろメリットが多すぎて使わない選択肢がありえない感じがしました。

後アイコンが犬で可愛いので良し。

Pugの項目では書きませんでしたが、PugもEdgeと同じようにコンポーネント化はできます。

私が今回この2つを比較しようと思ったのはコンポーネント化ができるかどうかでした。

PugとEdgeどちらもコンポーネント化は可能でしたし、
Edgeの方が今まで通りの感じでHTML組めるならそっちの方が習得コストが少ないかなと思って、
どちらもhtmlを出力するテンプレートエンジンとして引っ張ってきただけです。

こんなこと言ったら記事を作った意味がないのかもしれませんが、
元々比べるものではなかったのかもしれませんね。

今回は重視したポイントが手軽・コンポーネント化だったのでpugが勝ちましたが、
Electronとか組み込むにあたっての場合なら見易さ的にはEdge.jsの方が勝ってたかもしれません。

もちろん、その点ではPugも組み込みで動かすことは可能なので比較対象としては最適です。

最後にHTMLテンプレートエンジンを使ってみたいけどそんなに多くの機能は要らないし、
コンポーネント化できて手軽にサイトを組みたいのであればPugを使っておけばいいと思います。

プログラミングをやったことがないとちょっと難易度は高いですが、
HTMLをやったことがある人であればある意味プログラミング入門としてはベストかもしれませんね。

テンプレートエンジンを使おうと思ったワケ

今までは基本的にphpを利用してサイトを構築していたため、
phpを使わず純粋なHTMLのみで構築するのはものすごく面倒だなということに今更気付きました。

元々XHTML時代に保管機能無しで我武者羅にサイト構築していた時代があったので
面倒だなという感覚は最近まではなかったのですが、Wordpressを使ってからは素のHTMLに戻るのは無理そうです。

phpやReactを使ってhtmlを組む一番の魅力はやはりコンポーネント化できることですよね。

一方純粋なHTMLでは1ページ更新すれば他のページもコピペはできるが全部変更しなければいけない。

コンポーネント化しておけばファイルを１ついじれば全部直るのに、
純粋なHTMLだといくら置換を使って高速で処理しようがただの時間の無駄です。

しかしphpはサーバーサイド言語なのでローカル開発環境を用意するのが面倒だし、
Reactに至ってはGoogleにちゃんと認識されるかいまだに不安ではあるので、
出来ればブロガーとしては出力後は純粋な静的HTMLに落とし込みたいところです。

調べてるとReactで作ったサイトもちゃんとGoogleは理解できているようなのですが、まだまだ不安です。

検証も兼ねてReactをバリバリ(死語)使ったブログを運営してみるのもいいかもしれませんね。

以上、PugとEdge.jsのJSテンプレートエンジンの比較でした。

ゲームプログラミングレシピ集