社内LTで発表したスライド

1. Webコンポーネントの話
HTMLの新しい仕様で
Webの開発スタイルが変わるかもしれない

2. Webコンポーネントとは
現在W3Cで策定中(Googleが主導)の
HTMLの新しい仕様・仕組み
WebのUIをコンポーネント化して、
再利用性・メンテナンス性・管理性を高める
仕組み

3. コンポーネントって？
コンピュータソフトウェアにおいて部品とは特定の機能を果たす単位で、特
に再利用を考えて汎用に開発されたもの。ソフトウェアコンポーネント、
ソフトウェア部品とも。<Wikipediaより>
部品とかパーツとかウィジェットとか
セクションとかアセットとか
色んな言い換えや、似たような概念がある。

4. ここでいうコンポーネント化とは
Webページの中の
パーツを構成するHTMLの要素のまとまりを
ひとつのコンポーネントとして管理する
仕組みや開発方法。
<div id=”header”> 〜 </div> → ヘッダーコンポーネント
<div id=”footer”> 〜 </div> → フッターコンポーネント
<div id=”sidemenu”> 〜 </div> → サイドメニューコンポーネント

5. みなさんは
今までにコーディングした
ヘッダーの数を覚えていますか？
ヘッダーのためにタイプした
タグの数覚えていますか？

6. 毎回似たようなコード書いている気が…。
同じことを繰り返しているから
ホントはもっと楽したい
←「ちりつも時短」したい...!

7. 必要最低限なことだけ記述したい
<nav id=”gnav” role=”navigation”>
<ul>
<li class=”gnav01”><a href=”..”>ホーム</a></li>
<li class=”gnav02”><a href=”..”>ニュース</a></li>
<li class=”gnav03”><a href=”..”>製品</a></li>
<li class=”gnav04”><a href=”..”>企業</a></li>
<li class=”gnav05”><a href=”..”>採用</a></li>
<li class=”gnav06”><a href=”..”>お問い合わせ</a></li>
</ul>
</nav>
<gnav>
<a href=”..”>ホーム</a>
<a href=”..”>ニュース</a>
<a href=”..”>製品</a>
<a href=”..”>企業</a>
<a href=”..”>採用</a>
<a href=”..”>お問い合わせ</a>
</gnav>

8. もっとシンプルにしたい
<div id=”slideshow”>
<ul>
<li><a href=”..”><img src=”..” /></a></li>
<li><a href=”..”><img src=”..” /></a></li>
<li><a href=”..” target=”_blank”><img src=”..” /></a></li>
</ul>
<ul class=”controller”>
<li class=”prev”><a href=”#”>◀</a></li>
<li class=”next”><a href=”#”>▶</a></li>
</ul>
<ul class=”marker”>
<li><a href=”#”>●</a></li>
<li><a href=”#”>●</a></li>
<li><a href=”#”>●</a></li>
</ul>
</div>
<slideshow controller=”true” marker=”true”>
<img src=”..” href=”..”>
<img src=”..” href=”..”>
<img src=”..” href=”..” target=”_blank”>
</slideshow>

9. とにかく複雑だから省略したい
<nav role="navigation" aria-label="breadcrumb" prefix="v:http://rdf.datavocabulary.org/#">
<span typeof="v:Breadcrumb">
<a href=".." rel="v:url" property="v:title">書籍</a> ›
<span rel="v:child">
<span typeof="v:Breadcrumb">
<a href="books/authors" rel="v:url" property="v:title">著者</a> ›
<span rel="v:child">
<span typeof="v:Breadcrumb">
<a href=".." rel="v:url" property="v:title">夏目漱石</a> ›
<span class="current" rel="v:child">吾輩は猫である</span>
</span>
</span>
</span>
</span>
</span>
</nav>
※グーグル推奨のパンくずリストの書き方 + WAI ARIA
<breadcrumb>
<parent href=”..”>書籍</parent>
<parent href=”..”>著者</parent>
<parent href=”..”>夏目漱石</parent>
<current>吾輩は猫である</current>
</breadcrumb>

10. その「したい」が、
なんと実現できる…！
そうWebコンポーネントな(ry
※今、例に挙げたものはわかりやすくするために
策定中のWebコンポーネントの厳密な仕様をかなり無視しています。

11. Webコンポーネント
ステキ！

12. しかしこれ、
(お察しの方も多いと思いますが)

13. 今までも一部では
似たようなことサーバーのちから使って
実現してきてたよね…。
MovableType・CakePHP・Ruby on Rails
etc...

14. はい。おっしゃるとおり。
しかし、今日お伝えしたいのは
特にステキさじゃないんです。
(´・ω・`) えっ...。

15. 時代は変わる
実際、この仕様はW3Cで策定が始まっており、
HTMLの仕様として将来ほとんどのブラウザが実装することになる
可能性が十分にある。
Webの開発が
Webコンポーネントベースになる時代がくるかもしれない。
テーブル→外部CSSの時のようなパラダイムシフトになるか…？！

16. 開発の例
ブラウザの解釈
テンプレHTML
+
JavaScript
HTMLファイル
import
<gnav>
<a href=”..”>ホーム</a>
<a href=”..”>ニュース</a>
<a href=”..”>製品</a>
<a href=”..”>企業</a>
<a href=”..”>採用</a>
<a href=”..”>お問い合わせ</a>
</gnav>
フロントエンドエンジニアが開発
（パース&DOM再構築後のHTML）
<nav id=”gnav” role=”navigation”>
<ul>
<li class=”gnav01”><a href=”..”>ホーム</a></li>
<li class=”gnav02”><a href=”..”>ニュース</a></li>
(テンプレートはWebデザイナが触ることもある)
<li class=”gnav03”><a href=”..”>製品</a></li>
<li class=”gnav04”><a href=”..”>企業</a></li>
<li class=”gnav05”><a href=”..”>採用</a></li>
マークアップエンジニアor
Webデザイナーがマークアッ
プ
link
</ul>
</nav>
CSSファイル
マークアップエンジニアor
Webデザイナーがスタイリン
グ
<li class=”gnav06”><a href=”..”>お問い合わせ
</a></li>
再構築後のHTMLを想定して
CSSを記述する必要がある。
→慣れるまで大変

17. コンポーネントを利用するポイント
・コンポーネント化したものは再利用する
→ テンプレートはなるべく汎用的につくり、別案件のサイトで使いまわす。
→ コンポーネントの作り貯めてカタログ化し、ワイヤー段階からの制作を楽に。
・クライアントの開発ツールを利用するとよりメリットがある
→ SMACSSの手法をとり、LESS/SASSなどを使えば管理がさらに楽になる
→ Styledoccoなどドキュメント生成機でコンポーネントカタログを自動作成
→ Yeomanなどのジェネレータを使って管理(コマンド一発でモック完成)
→これらを使わないと逆に辛いかも

18. 必要な知識・スキルも変わるかも
マークアップエンジニア・Webデザイナー
・共通化・使い回し、コンポーネントを意識したデザインと設計。
・再構築されるHTMLに慣れが必要。
・Webコンポーネントを開発することもありうる。
→フロントエンドエンジニアの役回りになることも。
フロントエンドエンジニア
・Webコンポーネントの開発スキルが必須に。
・コンポーネントの管理が重要に。
→どう使い回していけるかの工夫などが開発スピードを左右する。
バックエンドエンジニア
サーバーでやっていたことをフロントでやっているだけの部分も多いので
そのままWebコンポーネントの開発で活躍できる。フロントエンドエンジニアの二足わらじも。

19. 今日のまとめ
1. Webコンポーネントの時代がくるかも
2. 工夫次第で楽できるかも
3. フロントエンドエンジニアがんばれ！
4. とりあえず概念だけでも

20. Webコンポーネントの詳しい記事
http://blog.shumpei.net/2012/12/webwebcomponents.html

21. Thank you.