Polytechnic Ehime に参加してコードラボっていうのをやってみた

Google Developers Groups Shikoku（GDG四国）開催のお勉強会、Polytechnic Ehime に参加してきました。

土曜日のお昼から、愛媛大学の情報メディアセンターで。当日は11時半ごろに家を出て、途中、なか卯で英気を養いました。歩いて行っても30分ぐらいかな？　電車乗ろうかとも思ったけど、最近運動不足なのでネ。集まったのは10人ぐらいだろうか。@ramsara さん以外は知らない人ばかりだった。

講師は Google Developer Expert（GDE）の吉川 徹さん。html5j ― 「つながる」「学べる」「盛り上がる」 の方だそうで。温和な感じの方でした。

今回のお題は、Polymer（Welcome - Polymer）。Web Components を使いやすくするためのライブラリなのだそうだ。自分は「名前は聞いたことある」程度で、中身についての知識はほとんどない。

こいつのなにがうれしいのかというと、たとえば Polymer 化された Google Map をこんなふうに扱える。

<!-- Polyfill Web Components support for older browsers -->
<script src="components/webcomponentsjs/webcomponents.min.js"></script>
<!– Import element –>
<link rel="import" href="google-map.html">
<!– Use element –>
<google-map lat="37.790" long="-122.390"></google-map>

ぐちゃぐちゃとタグやスクリプトを書きなぐらなくても、シンプルに って感じで使える。カッケー。

さらに地図にマーカーをたてたい場合はこんな感じ（あくまでもこんな“感じ”）でいいようだ。

<google-map lat="37.790" long="-122.390">
<google-map-marker lat="37.790" long="-122.390" />
</google-map>

いいね！　こうやって自分だけのタグが作れるのが Polymer なんですな。ちなみにタグの名前に“-”を入れるのは、将来 HTML でタグが追加された時に名前が衝突するのを避けるためなんだって。<x-hoge> とつけたりするらしいのだけど、個人的には“ベンダー名・ライブラリ名-名前”っぽくつけるのがよさそうだと思う。

さて、Polymer というのは4つの HTML5 技術から成るのだそうだ。

• HTML Import（<link rel="import" href="google-map.html">）
• Custom Element（<google-map>）
• HTML Template
• Shadow DOM

HTML Template というのは、今までタグをスクリプトで組み立てていたやり方*1や、ユーザーが見えない位置にタグを用意しておくやり方*2に代わる方法。<templete> のなかへ宣言的に HTML の切れ端を書いておける感じ。DOM に組み込まれるまで活性化されない*3ので、実際に“使われない”なら副作用も一切ない。

Shadow DOM は……今までもうっすら知ってたけど、他人に説明するのは面倒な技術だったのだけど、<video> のコントロールを実装するためにユーザーエージェントが使ってるアレって教えてもらって、あぁ、それは分かりやすいなーと思った。

（開発者ツールでオプションを有効化すると Shadow DOM が見える）

ダイレクトに外から見えたりアクセスされるとあんまりよくないときに使える感じ。Custom Element だって中身までユーザーに見せる必要ないもんねー。

コードラボという形式の勉強会は初めてだったのだけど、基本的に教材をもとにコードをコピペしていくだけだった。JavaScript 力の低いおれ様でもまったく大丈夫！*4　Chrome Dev Editor (developer preview) - Chrome ウェブストア でプチプチとコードを入力していく。

コピペしていくだけでお勉強になるんかいな、とちょっと思わないでもなかったけれど、手を動かすというのは大事らしい。コピペミスで動かない！　なんでだ！　とかやってるうちに自分がハマりやすいポイントというのが分かってきて、だんだん要領がよくなってくる。時間が余ったらデベロッパーツールで DOM ツリーを眺めたり、コンソールでログを確認したり。とりあえず動いたけど何で動いてるのかわかんねーところは、質問してもいい。個人的には Bower に触れたのも収穫だった。お勉強しなきゃなーと思っていたけれど、必要に迫られないとなかなかやらないわけで（ぉ

あと、なんといっても、何か動くものが自分の手で作れるというのは楽しいということ。レベル的には BB 戦士のガンダム組んでいるだけなのだろうけれど、ちゃんとモノが完成するとやっぱりうれしくて、それがモチベーションになる感じ。次はあれやりたいなーってね。

こういうの、独りでは絶対めんどくさがってやらない。あと、独りでやるのと、他の人に説明してもらうのを耳で聞くのとでは効率も違う。あと、終わったら呑み会もあるしね。機会があればまた参加したいと思ったかも。