コンポーネントを使うのはJSerじゃない、HTML/CSSコーダーだ


HTMLのコンポーネント化は、HTMLとCSSに「関数」概念を持ち込むことに他なりません。Bootstrapを使ったことがあれば、`<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">`とか毎回手書きする苦行を知っていると思います。「こんなんやってられっか」って話ですよ。

この記事では、Bootstrapをコンポーネント化してみて、HTMLの書き方がどう変わるかその実際を書き留めておきたいと思います。まだ、HTML/CSS陣営からはあまりコンポーネントの話が出てこないですが、数ヶ月先(?)に迫った未来の話として、HTML/CSSが主戦場の人に眺めてもらえたら本望です。


## HTMLなのにリーダブル

残念ながら名著「[リーダブルコード](http://www.amazon.co.jp/dp/4873115655/)」にはHTMLに関する章がありません。なぜなら、HTMLは美しく書きようがないからです(爆)。どうしても冗長な表現を常に書き続ける必要がありました。少なくとも「コンポーネント」以前は。

でも、実際に実装してみてわかったことは、HTMLはこんなにもわかりやすく書けたのか、ということ。「HTMLなのにリーダブル」これに尽きます。次にいくつか例を挙げてみます。

以下、Bootstrap本家と、今回のRiot.js実装(後述)の比較を並べて行きます。なお、ここに挙げているRiot.jsの例は、まだ技術プレビューの段階です。(実戦投入はできないので悪しからず)

### ボタン

```html
<button class="btn btn-default" type="button">Button</button>
```

↑が、↓に。※上: Bootstrap、下: Riot.jsによる試験実装 (以下同じ)

```html
<btn>Button</btn>
```

![Ember Library Mediator.png](https://qiita-image-store.s3.amazonaws.com/0/1858/9b7ccece-f202-7b78-49d9-1d32962a2681.png "Ember Library Mediator.png")

### ボタングループ

```html
<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>
```

↑が、↓に。

```html
<btn-group>
  <btn>Left</btn>
  <btn>Middle</btn>
  <btn>Right</btn>
</btn-group>
```

![Ember Library Mediator.png](https://qiita-image-store.s3.amazonaws.com/0/1858/66c57d44-1e8f-2d3b-fbfa-31dd6e499735.png "Ember Library Mediator.png")


### ドロップダウン

```html
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
```

↑が、↓に。これなら、コピー&ペーストしなくても書けそうです。

```html
<btn-group>
  <btn toggle="menu">Default <caret /></btn>
  <menu>
    <menu-item value="action">Action</menu-item>
    <menu-item value="another">Another action</menu-item>
    <menu-divider></menu-divider>
    <menu-item value="separated">Separated link</menu-item>
  </menu>
</btn-group>
```

![Ember Library Mediator.png](https://qiita-image-store.s3.amazonaws.com/0/1858/6f5a17d7-e91c-9676-a804-24ce316f49af.png "Ember Library Mediator.png")

## Bootstrapをコンポーネント化してみた

上述のように、BootstrapコンポーネントをRiot.js上に[実装し直し](https://github.com/cognitom/riot-bootstrap)ています(途中)。[ボタン、ボタングループ、ドロップダウンあたり](https://github.com/cognitom/riot-bootstrap/tree/master/components)はサクッとできました。主目的は、Riot.jsのユースケースと未実装機能の洗い出しなので、すべてを移植するかは不透明ですが、ちょこちょこコンポーネントを追加していこうと思っています。(追加PRも歓迎です)

(元ネタは[React Bootstrap](http://react-bootstrap.github.io/)ですが、Riot.js版はもう少し素直な構成にしています。元のBootstrapのHTMLに近い方向性で)

- デモページ: http://cognitom.github.io/riot-bootstrap/
- GitHub: https://github.com/cognitom/riot-bootstrap

[![スクリーンショット](https://qiita-image-store.s3.amazonaws.com/0/1858/23dfd8a4-b8f0-1fe8-4b5f-62c5a109e66d.png)](http://cognitom.github.io/riot-bootstrap/)


### 実装の戦略は90度違う

単純化のために、次の3つの機能があったとして、従来Bootstrapで取っている戦略は「行ごと」にまとめることでした(水平分業)。コンポーネントの場合、これが「列ごと」にまとめて扱うことになります(垂直統合)。要は、今まで水平分業していたのが垂直統合に変わるイメージですね。

機能単位 | ボタン | ボタングループ | メニュー
:-- | :-- | :-- | :--
**HTML** | ボタンのHTML | グループのHTML | メニューのHTML
**CSS** | ボタンのCSS | グループのCSS | メニューのCSS
**JavaScript** | ボタンのJavaScript | グループのJavaScript | メニューのJavaScript

このことでモジュール性が高まり、実装も圧倒的にシンプルになります。コンポーネントという手頃な粒度になること、セレクタによるノード指定がほぼ不要になること(jQueryも不要)が大きく寄与しています。(体感としては、コード量が4割減。例えばキャレット(三角マーク)の[実装はこれだけ](https://github.com/cognitom/riot-bootstrap/blob/v1.1.0/src/caret.tag))

つまり、「コンポーネント実装もリーダブル」になります。


## まとめ

さようなら、クラス。こんにちはリーダブル・コード。...になってほしい。