梅田でフロントエンドを学べるイベントをやってたので行ってきた.
このおもしろいビルで開催されていた.ふだん勘でHTMLやJSやCSSなど書いていたので,本気でやっている人の話を聞けるのがおもしろく,また,W3CとWHATWGの最新の動向を追いかけてる人から,スマートフォン向けのUI/UXの話まであって,話題も広くてよかった.
印象に残った話をいくつかメモ.
ワイヤーフレームの話
Sketchを作ってUIのプロトタイプを作と,シンボルをネストしたりオーバーライドしたりして,パーツを再利用できる.全体として統一感のとれたデザインができる.
このスライドもSketchで作られています,という話でおもしろかった.エンジニアから見るとKeynoteかHTMLで作ってしまいそう.
HTMLのスナップショットの話
W3CとWHATWGの歴史13年分くらいを10分くらいでさらっと知れておもしろかった.前のセッションがUIの話だったので差が激しい.
main要素がW3Cではページ内に1つしか許可されてないけど,Living Standardでは複数置ける,というように違いがある,という話がおもしろかった.そんなことになっていたとは.
W3C HTMLとWHATWG HTMLのどちらを参照すれば良いのか,という話で,どちらか一方だけを参照するのはよろしくなく,時間とともに変わっていくので,両方参照するのが良い,という話だった.
とはいえ,ブラウザを作っているベンダはWHATWGを見ているので,そちらを主に見ておくのがよさそう,と個人的には思った.
HTMLでUIを作るときの話
ボタンを作るとき,divにonclickを書くだけでは,タブでフォーカスしたり,フォーカスしたときのスタイルを変えたり,スペースやエンターが押されたときの振舞いが抜け落ちてしまったりして困る.適切にマークアップしましょう.講演者はbutton要素が一番好き,という話だった.
モーダルをbodyにappendChildすると,タブでフォーカスする順が最後になってしまい不便.モーダルを開くボタンの近くにappendしましょう,という話がなるほどだった.さっそく実践したい.
スタンドアロンAMPの話
だいたい一人でAMPをやっていたので,AMPやってる仲間と出会えて嬉しかった.
AMPはモバイルファーストなだけで,デスクトップでも速い.ので,デスクトップ用HTML,モバイル用HTML,AMP,を用意するのではなく,AMPだけ用意することもできる,という話.たしかにAMPの公式サイトはAMPで作られている.
情報の集めかたを質問したところ,こないだのAMP Confの動画がもう上がってるので観れる,ということを教えていただいた.
flowの話
YAPCでも見かけたさいさん.flowを使うとちょっとずつ型を書けて便利そう.すでに開発中のアプリケーションに入れるにはよさそう.個人的にはTypeScript見るとウッとなってしまうので,これくらい,書きたいところだけ書ける,くらいで恩恵を受けられるのは楽そう.
プライベートプロダクトの話
発表の本題ではないけど,話題の一部として,顧客やスケジュールの制約がない,個人のプロダクトを持つと良いよ,という話があった.
ためしにアプリを作ってみると,アプリにはWebとは違う文脈がある.たとえばトップのアプリケーションのロゴ画像をクリックすると,Webではトップページに遷移するけど,アプリでは上にしゅしゅっとスクロールする.また,アプリにはホーム画面という概念はなく,タブが並んでいるだけ.とか.
勉強会に出るより自分のプロダクトを作ったほうがためになる,という話で,たしかにという感じだった.身の回りの強い人はだいたい趣味でもなんかやっていて,それでどんどんパワーアップしている印象がある.
用事があったのでほどほどに抜けてきたけど,良い会で,いい感じに刺激を受けられた.
こんな調子でいろんな勉強会にちょくちょく出てみると世界が広がりそうなので,ちょくちょく出て行きたい.
無料で丸一日おもしろい発表を聞けて最高だった.主催者の皆様,発表者の皆様,その他の皆様,ありがとうございました.