関西のHTML5など勉強会に参加してきた話

最近、こんな勉強会に参加して、 こんなこと話しました、こんなこと聞きましたという記事を けっこう頻繁にアウトプット出来るようになってきて、個人的に嬉しく思っています。

今回は、3/23（土）に大阪で行われた 『第6回 HTML5など勉強会』 に、 名古屋から完全アウェー状態で飛び込みに行って、 興味深いプレゼンをお聞かせいただきつつも、 自分もスーパーサイヤ人に変身して恥をかき捨ててきたよ、というまとめです。

第6回 HTML5など勉強会

関西で（おそらく不定期で）行われているHTML5関連の勉強会です。 これはお約束なのですが、HTML5といいつつ、 幅広く最近の特にWebのフロント周りの話を中心に構成された勉強会でした。

僕個人としては、先月の『大なごやJS vol.5』でやった『WebRTC + Web Audio API = スーパーサイヤ人』のネタを、もっと会場で実際に見せた方が（＝シャウトしてるのを見せた方が）面白いんじゃないかと思っていたので、良い機会だと思ってこの勉強会に持ち込んでみました。

予想してた以上に興味深い内容ばかりで、得るものも多かった会でした。 発表概要は以下のような感じです。

• WebアプリビルドツールYeomanを使ってみる 村岡(@bathtimefish)さん
• D3.js と SVG を使ってTwitterのデータを視覚的に表現してみよう！ かどっぺ(@kadoppe)さん
• Firefox的DOMイベントの基礎から深淵まで なかのん(@d_toybox)さん
• 自分の発表
• パソナテックさんタイム

上3つの発表を、それぞれ個人的な視点でまとめておきたいと思います。

WebアプリビルドツールYeomanを使ってみる

資料はこちらにアップされてます。 http://www.slideshare.net/bathtimefish/yeoman-ria

初期構築時における ディレクトリ構成 や、 Webのフロントエンド構築におけるファイルの最小化や結合などの ビルド工程 などの、 一から全部やってるとかなりめんどい工程を自動化してくれるツールである、Yeomanに関する発表でした。

今現在、1.0のbetaがリリースされているらしく、0.9から1.0ではコマンド名が変わったり、 0.9まででめんどくさかった部分の簡素化が図られているなど、 より実用的になっているよ、とのことでした。

変わっている部分は、公式サイトに migrate guide としてまとめられているので、 そちらを参考にするといいみたいです。

http://yeoman.io/migrate.html

また、1.0になり、Yeoman は以下の3つのツールで構成されるようになってきた、とのこと。

• yo （足場を作る役割のツール、事前に用意されたパッケージを引数として指定すると、それベースの初期構成で自動で用意してくれる）
• bower （Ruby における gem、node における npm みたいな、JavaScriptのパッケージ管理ツール）
• grunt （もう言わずとしれた JavaScript ベースのビルドツール）

一昔前までは、フロント側でそこまでボリュームのあるものを作ることが無かったこともあり、 こういったツールによるサポートという面はあまり考えられてこなかったところがありますが、 ここ最近は、かなりこういった 開発フローを以下に効率化していくか？ という面での ツールの話をかなり頻繁に聞きますね。（乱立してて情報を追うだけでも大変ですね・・・）

D3.js と SVG を使ってTwitterのデータを視覚的に表現してみよう！

資料はこちらにアップされてます。 http://www.slideshare.net/kadoppe/d3js-svg

発表の半分以上がライブコーディング で、やっぱりその場で書いているのを見せるのは、 聞く側にとっても非常に分かりやすくなっていいなーと思いました。

単に表示するまでにどうすればいいか、はもちろんのこと、 そのデータが追加、削除されていたときに非同期で更新するにはどうすればいいかを、 より見えやすく分かりやすく説明されてるところが印象的でした。

具体的には、d3.js の enter(), exit() の使い方とそのメリット について、 実際に書きつつ、動かしながら見せていて、 発表内容はビジュアライゼーションだったのですが、 発表そのものもメリット部分の説明を ライブコーディングで見える化してた ところが すごく分かりやすくて良かったなーと思いました。

また、これが一番参考になったのですが、 ライブコーディングを発表時にやるにあたって、 だんだんと作り足していく様をきちんと Gitなどのバージョン管理で保持 しておき、 本番中になんか上手く動かない（本番だと細かな記述ミスに気づかなかったりしますよね）場合でも、 最悪 3分間クッキング方式で、 「はい、出来上がったものがこちらになります」 と さっと戻してやることで、発表の進行もスムーズになるなーと思いました。

これは今後やることあったら、ぜひとも参考に使おう、と思います。なるほどー。

Firefox的DOMイベントの基礎から深淵まで

資料はこちらにアップされてます。 http://www.slideshare.net/masayukinakano560/dom-17527671

個人的に、 一番わくわくしてしまった のがこの発表で、 DOM イベントの新しい仕様できたよー的なゆるふわな内容かと思いきや、 全然そんなことはなく 。

単に DOM のイベントってテーマだけでも、 こんなにもブラウザごとの差異があったりそもそも仕様が無く実装のみで突っ走っちゃってたり、 なかなかにカオスが現状の話が所狭しと並べられていたので、 本当にブラウザの実装に関わっていらっしゃる方々には頭が下がるなーという（特に中盤以降が）濃すぎる内容でした。

また、tips的な話も数多くあり、例えば

• addEventListener において、複数のイベントリスナーが登録されたときの実行順序で、ほぼ全てのブラウザで先に登録されたものから実行されるけど、仕様としては曖昧になっている、とか
• initMouseEventの引数がクソみたいに長いけど、DOM 4 Events では new MouseEvent の形で呼べるようになっていて、引数もイベント名とオプションのオブジェクトという形でシンプルになっているよーとか
• マウスホイールイベント周りがカオス
• キーボードイベント周りがカオス（ry

などなど挙げ出したらきりがない感じでした。（詳しくは実際に資料見つつ、1つずつ調べていくのが良さそうです）

実際にWebブラウザ作ってる人の話が聞けたのはすごく嬉しかったですし、新旧の互換性や他ブラウザとの互換性など、考えるところが多すぎて大変そうだなーと感じつつ、 ブラウザベンダーの方々のこういった努力の上に、色々成り立っているんだなーと考えさせられる 、非常に興味深い内容でした。

あと自分の発表とか

すごい話ばかりだったので、4番手でこんなネタやっちゃっていいのかと不安もありましたが、 シャウトして変身してすっきりできました。 満足です。

まとめ

今回の勉強会の終わりがけに挨拶させていただいた方や、プチ懇親会でお話させていただいた方は、 実はけっこうTwitterなどで情報を追わせていただいている方々ばかりだった（ということに後から気づいた）ので、 実際に会ってお話できて非常に嬉しかったです。 またどこか別の機会でご一緒できたらいいなーとか思ってます。

そして、やっぱり各地域ごとにすごい方はたくさんいらっしゃるので、そこで大いに刺激を受けつつ、また名古屋に戻って頑張って精進していきたいなーと思います。 ありがとうございました！