HTML5 Conference 2015に参加して、Web Components革命に影響された話
先日、東京電機大学千住キャンパスにてHTML5Conference2015が開催されましたが、僕はボランティアスタッフとして参加させていただきました。
ボランティアとはいえ、こういったイベントにスタッフとして参加したのは初めてでした。
スタッフ側で参加すると、一般として参加するのとはやはり違うもので、有名な方と業務上であれ関わることが出来るのは良い経験になるなあ。と思いました。
さて、表題の件「Web Components革命に影響された」という部分ですが、そもそもWeb Componentsとはウェブブラウザ向けに作られたAPIの一式のようなもので、2015年1月現在では下記の５つ要素で構成されている。
・Templates
・Decorators
・Shadow DOM
・Custom Elements
・Imports
上の方で偉そうに言っていますが、カンファレンスに参加するまでWeb Componentsというものがよくわかっていなかったというのは内緒でお願いします（聞いたことはありましたよ）
ググってみたらWeb Componentsに関する記事が山ほどあったのでWeb Componentsの説明はもうしませんが、今回なぜWeb Componentsについて触れようと思ったのは今回のカンファレンスでGoogleの北村さんのセッション「Polymerで作る次世代ウェブサイト」を聞いてからフロントエンド技術の流れというのは本当に速くて、すでに取り残されていると感じたからです。
2012年にweb業界に入ってから技術に取り残されるという感覚を全く感じなかったわけではありません、
しかし、専門学校を卒業して会社に入り、それなりに業務をこなせるようになって気がついたら
HTMLコーダーからサーバー側でPHPとかを書くようになって、
自分なりに必死に勉強して、少しずつでもサーバー側のことも出来るようになってきて、
技術に取り残されるという感覚を忘れてしまっていたというか、しばらく味わっていなかった感覚でした。
この感覚って取り残されてると感じると同時に怖いという感情も湧いてきますよね。。。
という感情も束の間で、北村さんの「Polymerで作る次世代ウェブサイト」という話は冒頭で「21世紀はWeb Components革命」という言葉から始まり、Web Componentsの要素の説明、Web Componentsの「Polyfill」である「Polymer」とはなにか、そして実際に「Polymer」を使ったライブコーディング。
フロントエンド技術において化石と化していた僕は興奮していた。（バックエンドも化石みたいなもんだろという意見については受け付けません）
これは革命だ。。
怖いという感情から一変、ワクワクという感情に移り変わったのです（男というのは単純である）
興奮冷めやらぬまま、すべてのセッションが終わり気がつけば僕は
$ bower install polymer
を叩いた。
そしてコケた
bowerが入っていなかったのだ。
入れた気がしていたのでびっくりしたが、気を取り直して
$ npm install bower -g
（nodeは入っていた）
$ bower install polymer
今度こそpolymerがプロジェクト内に入ってきた。
さて何をやるかと考えたが、ここはやはり「Polymerで作る次世代ウェブサイト」でもやっていたTODOアプリにしようと決めた。
ただ全く同じモノを作るのはさすがにつまらないなと思ったのでどうしようと考えたら、「本当はローカルストレージに保存までできたら」と北村さんが言っていたのも思い出して、ローカルストレージに保存するTODOアプリにすることにしました。
で、実際に作ったものが下記です。
poymer.htmlを読みこめばモダンブラウザ以外もWeb Componentsを対応できるらしいのですが、Chrome以外動かないです。。
詳しい方教えて頂ければ幸いです。。。
今回ローカルストレージも初めて使いましたが、いろいろ調べているうちにPolymerでは「ローカルストレージ要素」というのがあって何らかの更新があった際に
自動でコールされる関数が使えたりと幸せになれる要素がたくさんありましたが、既に作り終わっていたので、またの機会にしました。
そして今回、作るにあたって下記のサイトなどを参考にさせて頂きました。
そして今回のコードです。
cssなどだいぶ適当な感じになってしまいましたが、カンファレンスから一週間以内に作ってブログに上げるということを密かに決めていたので今回は見逃してください。
なんだかんだでPolymerでデザインを組み合わせるのが一番難しかったですが、これをきっかけに技術に取り残されないようHappy codingしていきます。
