そろそろWebアプリケーション第二弾を作ろうということで新たにプロジェクトを作っていこうと思います。

で、

前回は生のHTMLに生のCSSに生のJavaScriptという古き良きフロントエンド開発環境だったので今回は

pug・sass・TypeScript・glupというハイカラな環境を構築してやっていきます。

せっかくこれだけ便利な技術があるので使わないと勿体無いですからね。

ということでpug・sass・TypeScript・gulpでハイカラなフロントエンド開発シリーズとして連載開始ですよ。

今回はpug(jade)です。いざ。

pug(jade)とは？

まずそもそもなぜ（）が付いているのかというともともとjadeという名前だったものがなんかいろいろ(商標登録がどうとか)あってpugという名前に変わったからです。まだそんなに時間が経っていないので念のため（）で書いています。

pugもjadeもいまのところ中身はほぼ同じなので（pugのほうが新しい情報が出ますが）ググる時はどっちでググっても大丈夫です。

まだjadeという名前のほうが情報が多い気がします。

さて本題、pug(jade)とは何かと言いますと、

pug(jade)とはHTML を書くための軽量マークアップ言語 である Haml に影響を受けた JavaScript テンプレートエンジンでもあり、JST (JavaScript Templates) の一つです。(http://sitest.jp/blog/?p=1911)

ですって。

なんか難しそうな感じがありますしJavaScriptテンプレートエンジンって言われるとJavaScriptを書くやつかなって思いますが簡単に言うとHTMLを楽に便利にかける言語みたいなものです。

pug(jade)で書いたものをHTMLに変換してあとは普通にHTMLと同じ様に使います。

変換の部分はコマンド一つ＆この連載で自動化するのであまり気にしなくていいので、とりあえずpug(jade)を使えば楽にHTMLをかけると思っていればいいと思います。

たとえばこのHTMLは

<div>
 <p class="exsample">閉じタグとかがいらない</p>
</div>

pug(jade)ならこう

div
 p.exsample 閉じタグとかがいらない

かけます。

楽じゃないですか？

このほかにもincludeやらblockやらJavaScriptが書けたりやらいろいろ便利なのですが実はまだよく知らない長くなってしまうので今回は割愛してそのうちまとめたいと思います。

まあとにかくpug(jade)はHTMLをもっと便利に簡単に書くためのものです。

さて、便利なら使わない手はないですよね。使ってみましょう。

あ、とはいえ生のHTMLを触ったことがないという人はまず生のHTMLを使ってみることをお勧めします。

普通にどう書くのかがわからないといちいち二重に学習コストがかかって辛いです。

まずはHTMLをそれなり書ける様になってからpugなどに手を出すのがいいと思います。

pug(jade)のインストール

まずはインストール。例によってbrewを使います。

//node.jsのインストール
brew install node
//pugのインストール
npm i pug-cli -g//gはグローバル。pathを通してくれるらしい.iはインストール
//バージョン確認。バージョンが出ればOK
pug --version

pugを入れる前にNode.jsというものを入れています。

Node.jsはpugを動かすのとインストールするのに必ず必要です。

Node.js自体はサーバサイドで動くjavaScriptらしいです。詳しくはしりません。

とにかくpugはNode.jsで動作するのでNode.jsが必要なので最初に入れます。

今後こういったものを使う際にNode.jsを入れる様に言われることが多いと思いますがとりあえず言われた通りに入れておいて問題ありません（もちろん一度入れればもう入れなくて大丈夫です）。

Node.jsについてもそのうち調べないとなあって思いました。

とりあえずインストールはこれで終わり。

pug(jade)を使ってみる

早速試しに使ってみましょう。

pugを使った開発ではpugを記述したあとhtmlにコンパイルする必要があります。無事コンパイルできるかやってみましょう。

//テストディレクトリ作る（好きなところに）
mkdir test
//移動
cd test
//pugファイル作る.好きなエディタでどうぞ。ファインダーからでもいいよ
vim test.pug

```//中身は最初の例に出したやつで
div
  p.exsample 閉じタグとかがいらない
```
//test.pugをhtmlに変換してtest.htmlとして出力
//--pretteyは結果のhtmlファイルのインデントや改行をして見やすくする設定なのでなくてもいい
//開発中はつけておき世に出す時はけしておくといいかも
pug test.pug test.html --pretty
//中身の確認
vim test.html
```//test.htmlの中身

<div>
  <p class="exsample">閉じタグとかがいらない</p>
</div>
```

こんな感じになればOKです。

簡単ですね！

だがしかし！これでpugで開発できるはできるんですがファイルを書き換えるたびに毎回このコマンドを打つってあまりにもめんどくさいですよね。

ということで次回はこれをgulpというものを使って自動的にやってくれる様にしたいと思います。

具体的にはpugファイルを保存したら自動でpug –prettyコマンドを実行してくれる様にする感じです。

これを最初にやっておけばpugからhtmlへの変換については特に気にすることなく開発をすることができ、pugの恩恵をデメリット無しに受けることができますね。楽しみ。

ではまた。