概要
こちらに全体概要があります。
全体概要の開発環境が従来に比べて如何に便利で楽かを書いていきたいと思います。
主要な機能
- タグのカッコや綴じタグの呪縛から開放してくれるPug
- 同上をCSSに持ち込み、変数や関数、importが使えるSass
- 学習コストが低く、簡潔な書き回しができ、タグを自作できるRiot
- javascriptに型解決を与え、型からドキュメント生成できるTypeScript
- ページ上で必要なモジュールを統合してくれるWebpack
- 強力なIDE補完
- コンパイル後のソースでエラーが起こっても安心SourceMap
- ビルドは
npm run build一発
HTMLテンプレートエンジン Pug
楽に書けるCSS Sass
tagを自作 Riot
型解決ができるScript TypeScript
強力な IDE補完
製作中
どこまで楽になるの？比較
前置き
従来の環境も偉人たちが積み上げてきた素晴らしいものです。
これから述べる比較はあくまで個人の感想で、偉人たちの偉業にケチをつけるわけではなく、これからはこれだけ楽に書くことができるかもしれない、という可能性を示したいと思っております。
従来の環境
HTML
index.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
/* コメントがだるい */
/* よく考えると構造とスタイルが別って大変じゃね？ */
/* index.htmlの要素すべてここに書くと長くなる */
.item {
/* なんのための色？ */
/* 同じ色書くときはHTMLカラーコードを暗記？辛い */
background: #dfdfdf
}
/* クラス階層表現がこれじゃない */
.item .big {
font-size: 1.5em;
}
.item .big:hover {
color: red
}
javascript
index.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
// コメントが楽
// カッコがない、カッコつけない
// 綴じタグいらず
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(自作タグ)
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
// 共通のスタイルを読み込む
@import "../common.sass"
// 色変数を読み込む
@import "../color.sass"
// pugに書いたタグのスタイルだけ設定すれば良い
item
// なんの色だかわかりやすい
background: $theme-color-main
_color.sass
// 変数を使用できる
$theme-color-main: #dfdfdf
$text-color-caution: red
Typescript(javascriptに対応する)
index.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
比較考察
どうでしょうか、今まで複数回書かなければならなかったり、ソースコードを追うときにわけわからなくなっていた部分がかなり解消できたと思います。