Blog

フロントエンドカンファレンス福岡2019に参加してきました

  • Web

2019年11月16日に九州産業大学12号館で開催された、フロントエンドカンファレンス福岡2019に参加してきました。今年のフロントエンドカンファレンス福岡は合計200名の参加者が集う、大きなカンファレンスとなりました。

今年は「新しい視点を見つけよう」のテーマのもと、JSフレームワークやライブラリに依らない様々なセッションが行われ、どれもとても参考になる素晴らしいセッションだったようです。
どういったセッションがあったかについてはフロントエンドカンファレンス福岡の公式サイトをご確認ください。
フロントエンドカンファレンス福岡2019
私はどれも興味のあるセッションで、どれに参加するか非常に迷いましたが、結局下記のセッションに参加してきました。

  • HTML Optimization for Web Performance
  • 世界を変えるためのデザインシステム
  • SPAについてとVSCodeの実装について
  • JavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜
  • ウェブフォント今昔物語
  • これからのフロントエンドセキュリティ

元々は「明日からはじめるテストのあるフロントエンド開発」を聴く予定にしていたのですが、「世界を変えるためのデザインシステム」がとても面白く、途中で抜けるのはもったいないと感じて結局聴きに行けませんでした。

HTML Optimization for Web Performance

  • 13:00〜 ルームA
  • 株式会社メルペイ 泉水 翔吾さん
  • 資料

泉水さんといえば「超速！Webページ速度改善ガイド」の著者の一人で、このセッションで語られる内容もこの本に載っている内容に近い部分が多々ありました。（宣伝もちょこちょこあったかな 笑
1年ほど前、私もパフォーマンスを学ぼうと思って、超速本はもちろんいくつかの本を読んだりもして取り組んでいたりもしましたが、少しの間パフォーマンス改善から離れていたこともあり、忘れかけていた知識を思い出させていただきました。

クリティカルレンダリングパスを理解する

  • CSSは非同期的に評価する
  • JSは同期的に評価する

計測時する

  • 計測時の指標
    • User Centric Performance Metrics（ユーザー中心のパフォーマンス評価）
    • First Contentful Paint / First Meaningful Paint
  • 計測ツール
    • Lighthouse（lighthouse-ci）
    • WebPageTest

最適化する

  • CSSの最適化
    • head 要素内のできるだけ上位で読み込ませる
    • ブラウザは非同期でロードするので、CSSファイルは連結させなくて良い
  • JSの最適化
    • script を 閉じ body タグ直前に設置する
    • 3rdParty製のものは、 defer 属性をつける
  • PreloadやResource Hintsなどを駆使する
  • NativeのLazyloadingを使用する

世界を変えるためのデザインシステム

  • 14:00〜 ルームA
  • freee株式会社 山本 怜さん
  • 資料

フロントエンドが相当不慣れな人でもフロントエンドを実装したりするという文化のfreeeさんのセッション。
「スタイルシートのディレクトリがカオス」だったり、「見た目が揃わない」「同じ見た目なのに挙動が異なる」だったり、それなりの規模になるとだいたい発生する問題をfreeeさんも抱えていたようです。
これに対応するために、高品質で統一感があり、アクセシビリティも担保され、かつfreeeさんらしさも併せ持つデザインシステムが作られていったそうです。
しかしながら、定着させるためには様々な苦労があったようです。

  • ペアプロとコードレビューで自力でフロントエンドを作れるチームを作る
  • いざ導入してもらうと、想定していない使われ方や似て日なるものが勝手に実装されてしまった
  • 設計思想を文章化
  • React未経験のデザイナーさんにReactを書いてもらうワークショップ
  • Slackでエゴサーチ

これだけ大変な苦労をしてでもデザインシステムを導入する理由が会社のビジョンを満たすため、アクセシビリティなどを犠牲にしないようにするためと言う熱い想いで、日頃ぬるく生きている私にとってはとても深く突き刺さるセッションでした。

SPAについてとVSCodeの実装について

  • 15:00〜 ルームB
  • 株式会社Groovenauts 花田 恒一さん

このセッションでとにかく耳が痛かったのが「コードを読もう」ということでした。
GUIというものはとにかく複雑で、その複雑さを解決するためには、

  • 歴史に学ぶ
  • 実装を学ぶ
  • コードを読む・書く

ことが大事だということでした。
私はコードを書いたり、ざっくり歴史や実装を学んだりはしていましたが、コードを真剣に読んだり、歴史・実装を根幹から学んだりということはあまり経験がありませんでした。
それゆえにエディタの実装の話などはほとんど理解ができなくて、自分のスキルの無さに悔しい思いをしました。
コードを読むときは全てを読もうとはせず、ファイル名を眺めて設計を把握したりしながら仮説を立てて読むのが良いようです。
暇を見つけて実践していきたいところです。

JavaScriptの読み込みを考える〜場所、async、defer、その仕組みと使い所〜

  • 16:00〜 ルームB
  • 株式会社オミカレ 前川 昌幸さん
  • 資料

HTMLのパフォーマンス改善の中から、JavaScriptの読み込み位置・使い方にフォーカスしたセッション。
すでにいろんなところで見かけつつある async と defer のリクエストと実行のタイミングなどについての説明でした。

  • async ：HTMLパースを妨げず非同期に読み込み、読み込み完了次第、記述順ではなく完了順に即実行
  • defer ：HTMLパースを妨げず非同期に読み込み、HTMLパースが完了した後に記述順に実行

この特性を知らずに async と defer をつけてしまうと、エラーになるというお話でした。
私もこの属性を知ったとき、何度かやらかした記憶がありますw
どちらを使うかはケースバイケースで、ユーザートラッキング系なら async 、UI操作系などなら defer などが良いという話でした。

<!-- ほぼ確実にエラー！ -->
<script src="jquery.js" async></script>
<script src="run.js" async></script>

このセッションの中でなるほどな、と思ったのが、非同期読み込みの特性を生かすためにも、 script 要素を </body> 直前に書くのをやめて、 head 要素内に書くのがおすすめだ、という点でした。
これもケースバイケースだとは思いますが、ちょっと再考してみたいところです。

ウェブフォント今昔物語

  • 16:30〜 ルームB
  • 株式会社FOLIO 大木 尊紀さん
  • 資料

ウェブフォントの本を出すほどフォントが好きだという大木さんのセッション。
もともとウェブフォントは重かったり日本語フォントが少なかったりであまり好まれなかった傾向にありましたが、最近はそういうこともないよ、というのがこのセッションの主題でした。
フォントデータが重いということ自体はどうにもならないことのようですが、読み込みの遅さを感じさせない実装やキャッシュをうまく使用した実装をすることでユーザーの負担を軽減できる、とのことでした。
そのための技術というのが下記のようなものたちとのことです。

  • WOFF2形式の圧縮
  • ダイナミックサブセット、ユニコードサブセット
  • Font Loading API
  • CSSの font-display
  • Service Worker によるキャッシュ戦略
  • <link rel="preload">

FOUT（Flash of Unstyled Text - デバイスフォントの文字がチラ見えすること）はFont Loading APIでの制御や font-display による表示タイミングのコントロールが有効とのことでした。
ちなみに自前でウェブフォントをアップして使う場合は、フォントのライセンスに細心の注意が必要とのことでした。
フォントの改変、再配布の両方が許可されていないとウェブフォントとして使用するのは難しいそうです。
ウェブフォントを使用することで、ディスレクシアや弱視の方々でも読みやすいフォントを選択できるようになるというのはとても良いなと思っています。

これからのフロントエンドセキュリティ

  • 17:00〜 ルームB
  • 株式会社セキュアスカイ・テクノロジー 長谷川 陽介さん
  • 資料

セキュリティはサーバーサイドに限ったことではなく、フロントエンドの部分でもきちんと考えなければならない、という話でした。
XSSやオープンリダイレクトなどの脆弱性は、静的なサイトでも十分発生しうるため、注意が必要とのことでした。
そのために、以下のような技術を使用してきちんとオリジン間での保護を設定することが重要とのことです。

  • CSP - Content-Security-Policy
    • レスポンスヘッダーで指定することで、リソースの読み込み元を制限できる
    • 許可したサイト側に脆弱性があると無意味になるので注意
  • CORS - Cross-Origin Resource Sharing
    • 他のオリジンからのデータ読み込みの許可を与える
  • CORP - Cross-Origin Resource Policy
    • 他サイトからの画像、JS読み取りの制限
  • CORB - Cross-Origin Read Blocking
    • クロスオリジンでの読み込み時にContent-Typeが不一致であればブロックする
  • SameSite Cookie
    • Cookieの送信を同一サイト内に限定する仕組み
    • Google Chrome80からデフォルトが lax （リンククリックでのページ遷移以外ではCookieが送信されなくなる）になる

何かあってからでは遅いので、この辺りはきちんと理解して設定しておきたいなと思いました。

まとめ・感想

約1年ぶりのフロントエンドカンファレンスは最高に楽しい1日でした。
今回学んだ知識は仕事やプライベートでどんどん活かしていけたらなと思っています。
そしてこのカンファレンスを通して、私自身のスキルの低さを目の当たりにしたところもあったので、もう一度しっかり基礎から学びなおしたいな、という気持ちにもなりました。1年後は胸を張っていられるよう、しっかり頑張っていきます。
またセッション以外にも 小さな焙煎所 花待ち雨珈琲 さんの美味しいコーヒーをいただけたり、たくさんのノベルティをいただけたりと、本当に力の入ったカンファレンスでした。
スタッフの方々、登壇者の方々、スポンサーの方々、一般参加者の方々、本当にありがとうございました。
ちなみに、今回のスタッフには知り合いの方も多かったこともあり、何人かに「なんでスタッフじゃないの？」と声をかけられました。
そのように言っていただけたのがとても嬉しかったし、2年連続で楽しませていただいたりもしているので、無事に来年も開催ということになれば、次はスタッフになりたいと考えています。
その暁にはどうぞよろしくお願いします（謎
長くなりましたが、最後まで読んでいただきありがとうございました。

Feed