Express上でPugを使って静的なWebページを書くまでの全て

[これ](http://qiita.com/jumtech/items/50039d3de31a42949eb5)の続き

# 環境
- OS X El Capitan 10.11.6
- Docker 17.03.0-ce-mac2
- Express 4.15.2

# 前回までのあらすじ
- express-generatorでプロジェクトを自動生成した

```
jumpage/
  ├ app/
  |  └ jumpage
  |    ├ app.js
  |    ├ bin
  |    |  └ www
  |    ├ public
  |    |  ├ images/
  |    |  ├ javascripts/
  |    |  └ stylesheet/
  |    ├ routes
  |    |  ├ index.js
  |    |  └ users.js
  |    ├ views
  |    |  ├ index.pug
  |    |  ├ layout.pug
  |    |  └ error.pug
  |    ├ node_modukes
  |    └ package.json
  ├ scripts/
  |  └ docker_run.sh
  └ Dockerfile
```

# 手順
## Pugとは何かを理解する
- HTMLを、少ない記述量で、簡単にかける
- HTMLの中に、ループや継承などのロジックを組み込める

## 作りたいページの構成を考える
- ポートフォリオサイトが欲しいので、ここではそれを作る
- 全ページ共通部分
    - ヘッダー
        - タイトル
        - ナビゲーション
            - サイト上の他のコンテンツへのリンクを提供
    - フッター
        - コンタクト
            - Twitterへのリンク
- コンテンツ部分
    - どのページも似たような構成になるので、レイアウトファイルを使い、差分だけを渡すようにしたい

## Pugを使って実現する方法を考える
- 全ページ共通部分
    - `include`を使って、別ファイルに切り出す
- コンテンツ部分
    - `extends`を使って、レイアウトファイルを継承する
        - レイアウトファイルの一部を`block`に設定し、後から差し替えることができる

## Pugを学びつつ、最低限のbodyを書いてみる
- 不明点は[公式サイト](https://pugjs.org/api/getting-started.html)を参照

### コンテンツ部分の記述例
- Pug

```jade:profile.pug
#profile
  h1#title 自己紹介
  #hobby.profile_item
    h2.subtitle 趣味
    .hobby_each
      h3 折り紙
      ul
        li.hobby_info 高校では折り紙研究部に所属
        li.hobby_info
          | 浪人時代に
          a(href='https://goo.gl/5dM954') ペーパークラフトでサクラダファミリア
          | を作成
        li.hobby_info 現在は、折り紙でtech系のロゴマークを作るのにはまっている
```

- HTML変換後

```html
<div id="profile">
    <h1 id="title">自己紹介</h1>
    <div class="profile_item" id="hobby">
        <h2 class="subtitle">趣味</h2>
        <div class="hobby_each">
            <h3>折り紙</h3>
            <ul>
                <li class="hobby_info">高校では折り紙研究部に所属</li>
                <li class="hobby_info">浪人時代に<a href="https://goo.gl/5dM954">ペーパークラフトでサクラダファミリア</a>を作成</li>
                <li class="hobby_info">現在は、折り紙でtech系のロゴマークを作るのにはまっている</li>
            </ul>
        </div>
    </div>
</div>
```

### Pugで最低限覚えること
- HTMLタグの`<`と`>`を書かない
- 内包関係を、インデント(字下げ)で表現
- `#hoge`を付けると`id="hoge"`に、`.hoge`を付けると`class="hoge"`になる
    - タグ名を省略すると、divタグになる
- 属性は、タグ名の後に`()`で記述
- プレーンテキスト
    - 1行: タグ名+半角スペース+Text
    - 複数行: タグ名+改行してインデント+`|`+半角スペース+Text
- コメントは、`//`(htmlに残す)か`//-`(htmlに残さない)

## ヘッダーとフッターを書く
- ヘッダー

```jade:header.pug
doctype html
html(lang="ja")
  head
    meta(charset="utf-8")
    title jumpage
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    #header
      p#logo JUMPAGE
      #navigation
        ul
          li
            a(href='/portfolio/profile') 自己紹介
          li
            a(href='/portfolio/works') 作ったもの
      hr
```

- フッター

```jade:footer.pug
#footer
  hr
  #twitter
    p
      | お問い合わせは
      a(href='https://twitter.com/jumpei_ikegami' target='_blank') @jumpei_ikegami
      | までお願いします
```

## コンテンツ部分からheader.pugとfooter.pugをincludeする
```jade:profile.pug
include header.pug
#profile
  h1#title 自己紹介
//- 中略
include footer.pug
```

## Expressのルーティングを設定する
- "users"を"portfolio"に変更

```js:app.js
// 略
-var users = require('./routes/users');
+var portfolio = require('./routes/portfolio');
// 略
-app.use('/users', users);
+app.use('/portfolio', portfolio);
// 略
```

- routes/portfolio.jsを作成

```js:routes/portfolio.js
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.redirect('/portfolio/profile');
});
router.get('/profile', function(req, res, next) {
  res.render('profile');
});
router.get('/works', function(req, res, next) {
  res.render('works');
});

module.exports = router;
```

## profileページをブラウザで確認
- http://localhost:8080/portfolio/profile にアクセス
- こうなる

> 
<img width="557" alt="スクリーンショット 2017-03-18 13.35.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/137932/298fcd7c-5493-23c4-b815-9e8b435f0166.png">

## コンテンツ部分のレイアウトファイルを作る
- layout.pugを書き換える

```jade:layout.pug
include header.pug
block content
include footer.pug
```

- `block [block名]`の部分は、継承先でHTMLの塊が渡されると、差し替えられる

## profile.pugを、layout.pugを継承するように書き換える

```jade:profile.pug
extends layout.pug
block content
  #profile
    h1#title 自己紹介
    //- 以下略
```

- `block content`以下の内容で、layout.pugの対応するblockが差し替えられる


## 別のページのコンテンツ(works.pug)を、同様に作成
```jade:works.pug
extends layout.pug
block content
  #works
    h1#title 作ったもの
    #application.works_item
      h2.application アプリケーション
      .application_each
        h3 histleap -タイムリープ型観光アプリ-
        ul
          li.application_info
            a(href='http://urbandata-challenge.jp/' target='_blank') アーバンデータチャレンジ2016
            | に提出するために作成したアプリ
          li.application_info
            a(href='https://goo.gl/fy4Ff0' target='_blank') GooglePlayストア
            | で公開中
          li.application_info
            | ソースコードは
            a(href='https://github.com/phlocs201/histleap' target='_blank') こちら
```

- レイアウトファイルがあることで、ヘッダーやフッターの記述を繰り返し書かなくてもよくなって幸せ

## worksページをブラウザで確認
- http://localhost:8080/portfolio/works にアクセス
- こうなる

> 
<img width="548" alt="スクリーンショット 2017-03-18 14.49.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/137932/0bb6c044-ae2a-37f7-d014-6a9e45e1db38.png">


# ここまでのディレクトリ構造(再掲)
```
jumpage/
  ├ app/
  |  └ jumpage
  |    ├ app.js
  |    ├ bin
  |    |  └ www
  |    ├ public/
  |    |  ├ images/
  |    |  ├ javascripts/
  |    |  └ stylesheet
  |    |     └ style.css
  |    ├ routes
  |    |  ├ index.js
  |    |  └ portfolio.js
  |    ├ views
  |    |  ├ index.pug
  |    |  ├ layout.pug
  |    |  ├ header.pug
  |    |  ├ layout.pug
  |    |  ├ profile.pug
  |    |  ├ works.pug
  |    |  └ error.pug
  |    ├ node_modukes
  |    └ package.json
  ├ scripts/
  |  └ docker_run.sh
  └ Dockerfile
```
https://github.com/jumtech/jumpage