---
# System prepended metadata

title: 5/13 高レイヤ勉強会

---

# 5/13 高レイヤ勉強会

## webアプリ入門

### 三章 16

workspaceでpugをローカルインストール
```
$ yarn add pug@2.0.0-rc.4
$ yarn global add pug-cli
```
pugが入ったか確かめる
```
$ echo "h1 Pug!" | pug
```

``` html:form.pug
doctype html
html(lang="ja")
  head
    meta(charset="UTF-8")
    title アンケート
  body
    h1 どちらが食べたいですか？
    form(method="post" action="/enquetes/yaki-shabu")
      span 名前:
      input(type="text" name="name")
      input(type="radio" name="yaki-shabu" value="焼き肉")
      span 焼き肉
      input(type="radio" name="yaki-shabu" value="しゃぶしゃぶ")
      span しゃぶしゃぶ
      button(type="submit") 投稿
```
vscode場合は必要?
``` json:settings.json
// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
  // 1 つのタブに相当するスペースの数。`editor.detectIndentation` がオンの場合、この設定はファイル コンテンツに基づいて上書きされます。
  "editor.tabSize": 2,

  // Tab キーを押すとスペースが挿入されます。`editor.detectIndentation` がオンの場合、この設定はファイル コンテンツに基づいて上書きされます。
  "editor.insertSpaces": true,

  // エディターで空白文字を表示する方法を制御します。'none'、'boundary' および 'all' が使用可能です。'boundary' オプションでは、単語間の単一スペースは表示されません。
  "editor.renderWhitespace": "boundary"
}
```
pugを読み込むindex.js
``` js:index.js
'use strict';
const http = require('http');
const pug = require('pug');
const server = http
  .createServer((req, res) => {
    const now = new Date();
    console.info('[' + now + '] Requested by ' + req.connection.remoteAddress);
    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    });

    switch (req.method) {
      case 'GET':
        res.write(pug.renderFile('./form.pug'));
        res.end();
        break;
      case 'POST':
        let rawData = '';
        req
          .on('data', chunk => {
            rawData = rawData + chunk;
          })
          .on('end', () => {
            const qs = require('querystring');
            const decoded = decodeURIComponent(rawData);
            console.info('[' + now + '] 投稿: ' + decoded);
            const answer = qs.parse(decoded);
            res.write('<!DOCTYPE html><html lang="ja"><body><h1>' +
              answer['name'] + 'さんは' + answer['yaki-shabu'] +
              'に投票しました</h1></body></html>');
            res.end();
          });
        break;
      default:
        break;
    }
  })
  .on('error', e => {
    console.error('[' + new Date() + '] Server Error', e);
  })
  .on('clientError', e => {
    console.error('[' + new Date() + '] Client Error', e);
  });
const port = 8000;
server.listen(port, () => {
  console.info('[' + new Date() + '] Listening on ' + port);
});
```


アンケートをテンプレート化したindex.js
```
'use strict';
const http = require('http');
const pug = require('pug');
const server = http
  .createServer((req, res) => {
    const now = new Date();
    console.info('[' + now + '] Requested by ' + req.connection.remoteAddress);
    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    });

    switch (req.method) {
      case 'GET':
        if (req.url === '/enquetes/yaki-shabu') {
          res.write(
            pug.renderFile('./form.pug', {
              path: req.url,
              firstItem: '焼き肉',
              secondItem: 'しゃぶしゃぶ'
            })
          );
        } else if (req.url === '/enquetes/rice-bread') {
          res.write(
            pug.renderFile('./form.pug', {
              path: req.url,
              firstItem: 'ごはん',
              secondItem: 'パン'
            })
          );
        }
        res.end();
        break;
      case 'POST':
        let rawData = '';
        req
          .on('data', chunk => {
            rawData = rawData + chunk;
          })
          .on('end', () => {
            const qs = require('querystring');
            const decoded = decodeURIComponent(rawData);
            console.info('[' + now + '] 投稿: ' + decoded);
            const answer = qs.parse(decoded);
            res.write('<!DOCTYPE html><html lang="ja"><body><h1>' +
              answer['name'] + 'さんは' + answer['favorite'] +
              'に投票しました</h1></body></html>');
            res.end();
          });
        break;
      default:
        break;
    }
  })
  .on('error', e => {
    console.error('[' + new Date() + '] Server Error', e);
  })
  .on('clientError', e => {
    console.error('[' + new Date() + '] Client Error', e);
  });
const port = 8000;
server.listen(port, () => {
  console.info('[' + new Date() + '] Listening on ' + port);
});
```

