12月14日に、フロントエンドコミュニティ UIT の 18 回目となるミートアップ UIT Meetup vol.18『俺たちが考える最強のパフォーマンス・チューニング』を開催しました。本記事では、イベントの内容について振り返っていきます。
なお、本編のアーカイブについては以下の YouTube 動画より閲覧が可能となっております。まだ見ていないかた、見逃したかたはぜひ視聴いただければと思います。本記事では、各セッション紹介でチャプターへのリンクを貼り付けているため、特定のトークから再生を始めることも可能です。
YouTube: https://youtube.com/live/M8TeRB_DT0E
UITとは？
UIT は、 LINE のメンバーが中心となって発足した、「User Interface × Technology」を掲げるコミュニティです。 LINE の東京オフィスのメンバーからはじまったコミュニティですが、現在では外部コミュニティの方々との Podcast での交流、福岡でのミートアップ開催や、その他のフロントエンドイベントとの共催など、LINE に限らない枠組みでフロントエンドコミュニティの活発化を目的として活動しています。
ユーザーの目に見える部分を技術で解決する開発者のための、実践的なコミュニティとして活動。現在は UIT meetup の開催以外にも、LINE Engineering Blog での記事の公開や、Podcast「UIT INSIDE」を配信しています。
過去にはVue.jsの最新情報をキャッチアップする「Vue三昧」、昨今のワークスタイルの変化とエンジニアとの関係について考える「The new normal for frontend」など、最新技術の情報から、技術以外のテーマまで幅広く取り扱っています。ぜひ、次回や過去イベントについてもこちらから確認してみてください。
当日の様子
今回は 3 つのセッションとフリートークをお届けしました。
Session 1『WEBパフォーマンスの基礎知識と困難さについて』
07:02 より
最初のセッションは、LINEのUITの三好さんが Web パフォーマンス・チューニングをするハードルの高さを解説してくれました。
昨今ではあたりまえのように紹介される "パフォーマンス・チューニング"。一方でチューニングのために必要な基礎知識は非常に多く、施策の中には大きな改善に繋がりにくいものもあるそうです。
Smashing Magazine では毎年「フロントエンドパフォーマンスチェックリスト」を公開しており、この解説を織り交ぜた紹介をしてくれています。
「パフォーマンスを良くしたいならiOSもやるべき」
— うひょ✒ TypeScript本発売 (@uhyo_) December 14, 2022
それはそうなんだけど、Chromeでパフォーマンスを良くしたらiOSでは逆に悪くなったという例は存在するのだろうか（？）#uit_meetup
「チェックリスト」いうくらいですし、目次を流して辞書的に使う方がいいんじゃないっすかね#uit_meetup
— YAMAMOTO Yuji （HN: すがすがC言語） (@igrep) December 14, 2022
Session 2『APIレスポンスのお手軽キャッシュ化 with Recoil』
37:46 より
続いて2つめのセッションはLINE証券でインターンをしている tomoaki.hirabayashi さんより、Recoil をつかった最適化手法を紹介いただきました。
LINE証券のフロントエンドでは "パフォーマンスランキング" というコンポーネントがあり、ここで表示されるユーザーデータは 5 件のときもあれば、画面によっては 100 件必要なケースもあるそうです。
画面によって必要なデータ数が違う中、どのようなキャッシュ構造を設計すれば最適なのかを Recoil や SWR の比較をしながら解説いただきました。
ゼロベースだとSWRやTanstackQueryで良いというなるケースは実際多いと思うけど、プロダクトの状態や要件に応じた管理方法やキャッシュ戦略をとることに理由があるのも、そのチューニングができるチームの状態もコンディションとして良い#uit_meetup
— potato4d/Takuma HANATANI (@potato4d) December 14, 2022
#uit_meetup [質問] SWRのキャッシュ管理の戦略はstale-while-invalidateだけなんですかね。それ以外の戦略にしたかったらRecoilを使うんでしょうか？
— YAMAMOTO Yuji （HN: すがすがC言語） (@igrep) December 14, 2022
Session 3『JSを減らすためにできる10つのこと』
1:08:08 より
3つめ最後のセッションは PixelGrid 所属のエンジニアである りぃ さんより、無駄な JS が多いことに気づかせてくれる発表でした。
統計データではダウンロードしてきた JS の 30%〜40% は使用されていないといった結果が出ているそうです。
HTML, CSS の進化にも伴い、JSじゃないと実装できないとされていた機能は徐々に少なくなってきています。
このような JS で記述する箇所の見直しと言った入門的な内容から、ページ内のインタラクティブな部分だけをハイドレーションするような Island architecture、Qwik の紹介まで幅広く解説いただきました。
既存のHTML要素、ネイティブAPIを使おう、というのは同意#uit_meetup
— ICS にしはら フロントエンドエンジニア@z-index完全に理解した (@crayfisher_zari) December 14, 2022
Qwik聞いてはいたけどめちゃ良さそうだな #uit_meetup
— shoe (@s_tanabe_) December 14, 2022
フリートーク
1:39:32 より
全てのセッションが終わったあとはフリートークを開催。
それぞれのトークへの感想や質問など、Twitter の質問を拾いながらディスカッションしました。
正直、$が無くても最適化されてて欲しいよね
— masashi (@mymactive) December 14, 2022
useCallbackとか使ってる時もそういう気持ちになるけど
#uit_meetup
パケ死してるときだと他のフレームワークでもきついでしょうね... #uit_meetup
— YAMAMOTO Yuji （HN: すがすがC言語） (@igrep) December 14, 2022
おわりに
今回で18回目となる UIT Meetup は アプリケーションやプロダクトの特性を生かしたパフォーマンスチューニングの話を行いました。
配信・アーカイブを見て、多くの人が可能性や魅力を再確認してパフォーマンス・チューニングに取り組んでいただけたらと思います。
発表いただいたみなさま、そして視聴いただいたみなさまありがとうございました！