【レポート】名古屋マークアップ勉強会 The Final に参加してきました。

f:id:sitk:20170524222649p:plain

https://758markup.doorkeeper.jp/events/57811

2017年4月22日、名古屋で行われた「名古屋マークアップ勉強会 The Final」に参加してきました。主にマークアップ界隈のお話です。基調講演には、サイバーエージェントの佐藤さん。そして、書籍をたくさんだされている大藤幹さんなど、そうそうたるメンバーの登壇。内容の濃い時間となりました。その振り返りです。（開催から1ヶ月以上経ってしまったので、覚えてる範囲で。。。）

「なぜパフォーマンスは重要なのか？ − 目先の UX にとらわれないクライアントサイド開発の本質」

https://speakerdeck.com/ahomu/pahuomansuhanazezhong-yao-nafalseka-mu-xian-false-ux-nitorawarenaikuraiantosaidokai-fa-falseben-zhi

サイバーエージェントの佐藤歩さん（@ahomu）さんの講演。Webサイトのパフォーマンスについてのお話でした。

フロントエンド開発において、パフォーマンス（とアクセシビリティとセキュリティ）は重要なポイント。サイトを高速化することで、収益に貢献することができる。これを意識すると、DOMの構築や、Javascriptの走らせるタイミングなど真剣に考える必要があると思いました。通信環境が良すぎる状態で、日々生活をしているというのも要因かもしれないですね。

ここで言う「パフォーマンス」とは、下記の2つ。

ページロード：ナビゲーションの開始からページが表示されるまでの速度
ランタイム：ページが表示された後のUI応答速度

パフォーマンスを改善させる手法として、下記の最適化についてお話がありました。

クリティカルレンダリングパスの最適化
配信リソース数とファイルサイズの最適化

パフォーマンスについての対応は、普段のコーディング時において、頭から離れてるなと自分でも反省しています。デバイスやOS、通信速度など、あらゆる場面でサイトが見られる想定をしておかなければいけないですね。スマホから、Wi-Fiがない環境で、サイトを見る時に、表示されるまで待たされるというのは、たしかにストレスがかかるなぁ。

「使えない」はユーザー体験として、サーバー障害と同じくらい深刻な問題。

この言葉が、一番胸に突き刺さりました。最近の話題で言えば、AMPやPWAなどの技術が出てきてます。楽天レシピやTwitterがこの機能を取り入れて、サイトの高速化を実践しているようです。このあたりも、追っかけていかなければ。

サイバーエージェントは、自社サービスの運営がメインなので、それこそ「パフォーマンス」は大いに影響してくるでしょう。最近では、AbemaTVやFleshなど、動画関連のサービス事業が伸びている（と聞きました）。これらのサービスの中心を担うエンジニア達は、みんなパフォーマンスやアクセシビリティ、UXへの関心も高いようです。よく言うキラキラした感じがないというか、ストイックというか、本当に好きで開発に取り組んでいるんだなというのが伝わってきます。自分自身のパフォーマンスも上げて行かなければ。「使えない」と言われないためにもｗ

「そもそも『h1要素は複数回使って良いのか!?』とか、そういう話じゃないんですよ！」

h1についてのお話。アクセシビリティ界隈でもご活躍されている、大藤幹さんの講演です。

HTML5で見出しはどう変わったか

HTML5以降はセクションの見出し
1〜6はランク

セクションとは何か

見出しとそれに対応するコンテンツの範囲
セクションは見出しとセットで使うのが基本

セクショニング・ルート

内部に独自のアウトラインを持つ要素
外部のアウトラインとは無関係になる
例：blockquote要素
body要素もセクショニング・ルートに分類される

見出しとセクションの関係

セクション内の最初の見出しがセクションの見出しと認識される
見出ししかなくても、内部でセクションを作ってしまう
見出しの数字は無視される
セクションの中にいれる見出しは何でもいいという仕様になっている
仕様だけはあるが、ブラウザが対応してないのが現実

どうすればいい？

見出しの数字はセクションの入れ子に合わせて使うべき
きちんとセクションの階層に合わせて、見出しの数字を選ぶ
そしてセクションのタグをきちんと付ける
h1はbodyの見出しとして使う＝h1は1回しか使えない

まとめ

html5.1の仕様としてはどの見出しを使っていい
ブラウザはまだ対応してない
見出しの数字はセクションの階層に合わせる
h1要素はセクションのルート要素（body）に一回しか使えない

「エンジニアのためのプレゼンテクニック」

https://www.slideshare.net/mkasumi/ss-75297218

アップルップルの森田さんの講演。エンジニアのためのプレゼンテクニックのお話。最近は、人前でお話する機会が増えてきたので、なるほどと思いながら聞いていました。いずれも、簡単にできることなので、人前で話をする機会があれば、参考にしようと思います。まずは、聞いてくれる人の注意をこちらに向けることが大事ですね。あと、どうしてもしゃべってると早口になりがちなので、そこは気をつけたい所です。