Riot Pug Sass Typescriptで楽にWebページ・アプリを開発 (何が便利か編)

## 概要
[こちら](https://qiita.com/narumi18wa/private/75ef25f1522a942919f0)に全体概要があります。

全体概要の開発環境が従来に比べて如何に便利で楽かを書いていきたいと思います。

## 主要な機能
1. タグのカッコや綴じタグの呪縛から開放してくれるPug
2. 同上をCSSに持ち込み、変数や関数、importが使えるSass
3. 学習コストが低く、簡潔な書き回しができ、タグを自作できるRiot
4. javascriptに型解決を与え、型からドキュメント生成できるTypeScript
5. ページ上で必要なモジュールを統合してくれるWebpack
6. 強力なIDE補完
7. コンパイル後のソースでエラーが起こっても安心SourceMap
8. ビルドは `npm run build` 一発

### HTMLテンプレートエンジン **Pug**
https://qiita.com/narumi18wa/items/3bca597e9a188edc8c02

### 楽に書けるCSS **Sass**
https://qiita.com/narumi18wa/items/8c72ba66514152d42d52

### tagを自作 **Riot**
https://qiita.com/narumi18wa/items/27cc3347a0c636a89332

### 型解決ができるScript **TypeScript**
https://qiita.com/narumi18wa/items/1729577f8c8b705adaa4

### 強力な **IDE補完**
製作中

## どこまで楽になるの？比較
### 前置き
従来の環境も偉人たちが積み上げてきた素晴らしいものです。
これから述べる比較はあくまで個人の感想で、偉人たちの偉業にケチをつけるわけではなく、これからはこれだけ楽に書くことができるかもしれない、という可能性を示したいと思っております。

### 従来の環境
#### HTML
##### index.html
```html
<!-- コメントがめんどい -->
<!-- カッコとか、閉じタグとかめんどい -->
<!DOCTYPE html>
<html>
  <head>
    <title>hoge</title>

    <!-- 書き忘れそう、間違って読み込みそう、ページごとにやるのはだるい -->
    <link rel="stylesheet" href="./style/common.css">
    <link rel="stylesheet" href="./style/entry/index.css">
  </head>
  <body>
    <!-- かったるい、これ以上増えたらどうするのか -->
    <div class="item">
      <p class="big">huga</p>
    </div>
    <div class="item">
      <p class="big">moge</p>
    </div>
    <div class="item">
      <p class="big">ohyo</p>
    </div>

    <!-- 書き忘れそう、ページごとにやるのはだるい -->
    <script src="./script/lib/jquery.js"></script>
    <script src="./script/model/Hoge.js"></script>
    <script src="./script/logic/huga.js"></script>
    <script src="./script/entry/index.js"></script>
  </body>
</html>
```

#### CSS
##### index.css
```css
/* コメントがだるい */
/* よく考えると構造とスタイルが別って大変じゃね？ */
/* index.htmlの要素すべてここに書くと長くなる */
.item {
  /* なんのための色？ */
  /* 同じ色書くときはHTMLカラーコードを暗記？辛い */
  background: #dfdfdf
}

/* クラス階層表現がこれじゃない */
.item .big {
  font-size: 1.5em;
}

.item .big:hover {
  color: red
}
```

#### javascript
##### index.js
```js
// よくわからん
function callHogeHoge() {
  $.ajax({
    type: "get",
    url: "hogehoge",
    headers: {},
    data: null
  }).done((response) => {
    // Hogeとかhugaとかこいつらどこからやってきた？
    var hoge = new Hoge(response)
    huga(hoge)
  }).fail((jqXHR, textStatus, MessageThrown) => {
    throw new Error("hogehoge")
  })
}
callHogeHoge()
```

### 本環境
#### Pug(HTMLに対応する)
##### index.pug
```pug
// コメントが楽
// カッコがない、カッコつけない
// 綴じタグいらず
doctype html
html
  head
    title hoge

    // 内部的にはSassだがコンパイル後のcssを読み込む
    // index.sassで全てimportするため
    // pugからはエントリポイントのみ読めば良い
    link(rel="stylesheet" href="./style/entry/index.css")
  body
    // タグが自作できる
    item(text="huga")
    item(text="moge")
    item(text="ohyo")

    // 内部的にはTypeScriptだが、コンパイル後のjsを読み込む
    // index.ts内で全てimportするため
    // pugからはエントリポイントのみ読めば良い
    script(src="./script/entry/index.js")
```

##### item.tag(自作タグ)
```tag
item
  // 構造とスタイル、VCがセットで管理できる
  p.big {text}

  // TypeScript
  script.
    import riot from "riot"
    // タグのオプションを読み込める
    this.text = opts.text

  // Sass
  style.
    @import "color.sass"

    .big
      font-size: 1.5em
      
      // &は自身を指す
      &:hover
        color: $text-color-caution
```

#### Sass(CSSに対応する)
##### index.sass
```sass
// 共通のスタイルを読み込む
@import "../common.sass"
// 色変数を読み込む
@import "../color.sass"

// pugに書いたタグのスタイルだけ設定すれば良い
item
  // なんの色だかわかりやすい
  background: $theme-color-main
```

##### _color.sass
```sass
// 変数を使用できる
$theme-color-main: #dfdfdf
$text-color-caution: red
```

#### Typescript(javascriptに対応する)
##### index.ts
```ts
import riot from "riot"
// タグを読み込む
require("../tag/item")
import AsyncAjax from "../util/AsyncAjax"
import Hoge from "../model/Hoge"
import huga from "../logic/huga"


async function callHogeHoge(): Promise<void> {
  // 型がわかりやすい
  // await機能により、callbackのネストにおさらばできる
  const response: string = await AsyncAjax("get", "hogehoge", null, null)
  // 上部でimportしているため、どこの処理かわかりやすい
  const hoge: Hoge = new Hoge(response)
  huga(hoge)
}
callHogeHoge()
riot.mount("*")
```

##### AsyncAjax.ts
https://github.com/narumi18wa/riot-pug-sass-ts-proj/blob/master/src/script/util/AsyncAjax.ts

### 比較考察
どうでしょうか、今まで複数回書かなければならなかったり、ソースコードを追うときにわけわからなくなっていた部分がかなり解消できたと思います。