リリース……。リリースを前に Jade への不満から HTML の代替となる言語を開発しはじめた。

Jade

Jade をためした。今回がはじめてではなくて過去にも触っていた。2013-09-25 や 2013-12-30 で使っている。

きっかけは以下のツイートで要約できる。

JavaScript よりも CoffeeScript を使う理屈で、 LESS よりも Stylus 、HTML よりも Jade を使うほうが良い気がしてきた。
— bouzuya (@bouzuya) 2015, 7月 29

普段 JavaScript ではなく CoffeeScript を使っている。「オフサイドルールは正義」を合言葉にしている。ES2015 には分割代入などいくつかの機能は取り込まれたのだけど括弧はさすがに省略できない。ここでは細かい比較はしないが JavaScript は CoffeeScript と比べると書いていてつらい。

ふとこれと同じ理屈を CSS や HTML にもあてはめられるのではないかと考えた。 CSS は主にルールを触るため括弧を書く頻度は比較的低いが省略できても良いと思うし HTML も同様だ。HTML は閉じタグを省略できると大変良いだろう。

つまり JavaScript よりも CoffeeScript を使う理屈で LESS よりも Stylus を HTML よりも Jade を使うほうが良いかもしれないという疑問に至ったわけだ。

そして今回は Jade を試してみた。

先に結論。

Jade は文法が複雑すぎる。
終了タグがないのは良い。
ぼくの用途では機能が過剰だ。
属性の () が余計だ。
ぼくは属性を 1 行 1 属性で書く。
属性の () の ) のインデントが不明瞭で行数も増える。

Jade は文法が複雑すぎる。改めて触ったのだけど以前から持っていた印象と変わらなかった。複雑すぎる。またぼくの用途に対しては機能が過剰だ。それもあって複雑すぎる。文法事項が多すぎる。テキスト要素を書くときの . や | やらが直感的に思えない。YAML にも似たようなのがあるがどちらも大嫌いだ。また要素に属性をつける頻度は高いのにその記法は洗練されていない。具体例をあげよう。

これは bouzuya/color-vue の現状のテンプレートのひとつ。なんてことはない HTML の断片だ。

<div class="app">
  <h1 v-text="title"></h1>
  <label>color</label>
  <input
    type="text"
    v-model="color"
    />
  <span
    class="color-sample"
    v-style="{ color: color }"
    >
    ■
  </span>
  <cv-hex-color color="{{color}}">
  </cv-hex-color>
  <cv-rgb-color color="{{color}}">
  </cv-rgb-color>
</div>

それを jade で書きなおしたもの。

div(class='app')
  h1(v-text='title')
  label color
  input(
    type='text'
    v-model='color'
  )
  span(
    class='color-sample'
    v-style='{ color: color }'
  ) ■
  cv-hex-color(color='{{color}}')
  cv-rgb-color(color='{{color}}')

どちらが簡潔かといえば終了タグがない分 Jade だとは思う。

ただぼくの感覚では思ったほど簡潔に感じない。原因は属性だと思う。要素にはまず間違いなく属性がつく。それがカスタムコンポーネントであれば場合によっては存在しないがそうでない場合は間違いなくつく。

さらに抜粋しよう。最初の要素の開始タグだ。

<div class="app">

div(class='app')

おそらく大差ないと感じるだろう。これは属性の記法が原因だ。

< と > は省略できるから良い。class="app" の部分は変わらない。ただし属性をつけるために () が必要だ。この () が原因だ。

ぼくは属性を 1 行 1 属性で書くようにしている。() の ) を次の行に置くので行数がさらに増える。インデントも不明瞭だ。

これらは JavaScript を埋め込むなどの機能を前提にしているからだ。ぼくにはそれらの機能は不要だ。不必要な複雑さを生んでいる。

b-html

そこでもっとぼくの用途にあった言語をつくることにした。

bouzuya/b-html だ。まだ 0.2.0 。ぼくの用途のすべてには対応できていないので未完成だ。想像上の b-html で先ほどの例を書きなおしてみる。

<div
  @class app
  <h1
    @v-text title
  <label
    color
  <input
    @type text
    @v-model color
  <span
    @class color-sample
    @v-style { color: color }
    ■
  <cv-hex-color
    @color {{color}}
  <cv-rgb-color
    @color {{color}}

特徴としては以下のとおり。

It's just HTML …… HTML の syntax sugar 。
オフサイドルール …… 終了タグおよび > を省略できる。
属性の ="" の削除 …… 終了タグ・ > と同様に何かを括るものをなくす。
行指向 …… 1 行 1 要素または 1 属性。表記ブレをなくすとともに少ないルールを実現する。
プリフィックス …… 要素・属性・テキストなどを表すプリフィックス。デフォルトはテキスト。

b-html はオフサイドルールや行指向など簡潔で厳格なルールを強制する。それによる利点として誰が書いてもほとんど同じ形になり可読性が上がるし終了タグや属性のクォートなど冗長な記述を回避できる。

これは割と良いプロダクトになりそう。

blog.bouzuya.net

2015-07-29 Jade をためした & b-html をつくった

Jade

b-html