#builderscon 2017でトークしてきました
おひさしぶりです！！！ブログ、とても間が空いてしまいました。
8/5（土）、Builderscon 2017に参加＆登壇してきました！！
#builderscon2017
Buildersconは広い会場で、色々なトークや外国からのゲストの話を聞けて、3日間もあるし、エンジニアのフジロックみたいな感じ！！すごく楽しみにしてた！！
Make You A React
僕は3日目の参加で、Make You A React – How to make your own SPA library? というトークをしました。
僕はHyperappというJSライブラリのVirtualDOM、それからPicodomというVirtualDOMを作ったんだけど、VirtualDOMは本当に楽しいなーと改めて感じたので、今回のトークを作った。
自分でSPA(Single Page Application)を作りたい、自分のライブラリをVirtualDOMで作りたい、VirtualDOMがどういう風に動いているか知りたい、などという時にオススメの情報をいろいろ入れました。
ちなみに、英語と日本語ミックスでやろうと思っていたけど、会場の様子を見て、急きょ日本語に変更しました。m(_ _)m
内容のレビュー
内容を簡単に振り返ってみるので、上のスライドと合わせて読んでくれたら嬉しいです。
Declarative 方法とImperative 方法
HTMLとJavaScriptをmixして書くことができるJSXの話から始まり、そこで重要になってくる、コードの書き方を説明していきました。
HTMLを表示するのにはDeclarative 方法とImperative 方法があるけど、書き方はDeclarative 方法の方がずっと簡単。だけど、Imperative 方法は、書き方は面倒だけど動的な表現をすることができる！
だから、両方のイイところだけをとって、簡単な書き方で動的な表現ができたら嬉しい。そこで、VirtualDomが活躍できる。
具体的にはVirtualNodeを作って、DOMをpatchするという方法を使います。
このことでさらに便利なのは、例えば、要素を並べ替えたい時とか。Elementたちをアルファベット順にしたい、人気順にしたいetc…、特に複雑な作業じゃなくても、DOMだとそれを自分で並べ替えないといけない。それは大変すぎる。
そういう時、VirtualDOMを使うと非常に便利！！
VirtualDOMの構造
細かく仕組みを見ていくと、こんなふうになっている。
この一つ一つについて、コードを使いながら細かく説明していきました。コードはスライドをみてね。
h.jsは、VirtualNode を作ってくれるもの、patch.jsは、2つのVirtualNodeの差分を出して、DOMをアップデートしてくれるもの。
patch.js
patchはnodeに対して、Create, Update, Removeという3つのアクションを行ってくれます！！
patchから、Update / Createをして、setData。removeならそのままRemove。
Updateはこんな感じの流れで行われる。
VirtualDOMはユニークなkeyを与えて、作業を行います。
VirtualDOMべんり！
VirtualDOMは、スピードをあげてくれるものではなく、デベロッパーの作業を便利にしてくれるもの。
ユーザーはいつでも、表示して欲しいものを求めるだけで、それがどのようなプロセスで表示されるか、知る必要、心配する必要がありません。これだけで本当に、作業は単純になり、僕たちにとってこんなに嬉しいことはない！
簡単な宣言の書き方で、良いUIを作っていこう。やっていき！！！（言ってみたかっただけ）
本当にコードがたくさんあったから、オーディエンスの人たちは大変だったと思うけど、聞いてくれてありがとうございました！
イタレリツクセリ
それからイベントの素晴らしさについて。
会場は日吉にある慶應義塾大学のホールだったんだけど、とても綺麗なところでした。朝食＆ランチも用意されていたり、コーヒーや水はフリーで飲めたりと素晴らしかったし、プレゼントもたくさんもらっちゃった。
Tシャツ、バッグ、でかしゃもじ、シール！
ありがとうございました！バッグは帰り道にいきなり役に立ったし、Tシャツもすぐ着たし、しゃもじは部屋に飾ったよ！
とても楽しかった。今回は3日目の土曜日だけの参加だったんだけど、来年は全部参加できたらいいなー！
それではまた！