JavaScript の技術勉強会 (Kyoto.js) に参加してきました
こんにちは。最近、約 3 年ぶりに 京阪電車 を利用した k-so16 です。特急の車両が豪華でワクワクしながら乗車していました (笑)
2023/5/26 に開催された Kyoto.js 19 へ参加しました。本記事では、当日のイベントの概要について紹介します。
概要
Kyoto.js は、京都で開催されている JavaScript に関する技術勉強会のコミュニティ です。フロントエンドに限らず、 JavaScript に関する技術全般を対象 としています。
今回参加した勉強会では、以下の内容の発表を聴講しました。
- セッション枠
- JavaScript を利用したジェネラティブアート
- 表エディターをフルスクラッチした話
- 半同期的ペアレビューの提案
- フロントエンドのパフォーマンス改善を計測する話
- LT 枠
- SPA でデータを URL で共有する方法
- レガシーなフロントエンドとの戦った話
- p5.js と JPEG Decoder
本記事では、特におもしろいと感じた、フロントエンドのパフォーマンス改善の計測についての発表について紹介します。
「フロントエンドのパフォーマンス改善を計測する話」の概要
フロントエンドのパフォーマンスの改善の軸として、 快適な表示の実現 と 表示速度の向上 の 2 つが挙げられていました。それぞれの軸を実現するものの例として、次の内容が挙げられていました。
- 快適な表示の実現
- あとからロードされた要素が表示されることによる表示領域のズレを軽減
- Accessiblity の向上
- 表示速度の向上
- 応答速度の向上
- コンテンツの表示速度の向上
- ユーザーが操作できるまでの時間の短縮
パフォーマンスを計測する指標として、ページのダウンロード開始時間を表す TTFB (Time To First Byte) や、最初のコンテンツが表示された時間を表す FCP (First Contentful Paint) など、さまざまな指標が提唱されてきました。これらの指標のうち、 Google は ページの UX にかかわる重要な指標 として、以下の 3 つを挙げているとのことです。
- LCP (Largest Contentful Paint): 最大のコンテンツの表示時間
- ページ読み込み完了の指標
- FID (First Input Delay): 最初に操作が可能になるまでの時間
- ページの応答性の指標
- CLS (Cumulative Layout Shift): ページの表示中に発生したコンテンツのズレの指標
- 視覚的安定性の指標
この 3 つを利用して評価する CWV (Core Web Vitals) という指標もあります。 Google は CWV を改善することを推奨 しています。ただし、 CWV の改善は SEO に有利ということではない ようです。
パフォーマンスの改善効果を検証するために、発表内では CWV を計測する手段として Sentry が紹介されていました。 Sentry はフロントエンドで発生したエラーを収集できるほか、さまざまなブラウザの CWV もダッシュボード上で計測できるとのことです。
Sentry を利用することで、フロントエンドで発生したエラーを収集できることは、過去に参加した勉強会で聞いていましたが、パフォーマンス計測もできることは今回初めて知りました。パフォーマンスの指標も、今回初めて聞くものが多かったので、非常に勉強になりました。
懇親会
セッションの後の懇親会にも参加しました。懇親会では登壇者の方と直接話すこともでき、とても良い機会を得られました。
自分の知らない技術についての話を聞けたり、他の参加者の方を交えて意見交換ができたりと、自分にとって良い刺激になりました。特に、ペアレビューと関連して、ペアプログラミングについての議論が熱く交わされていました。
所感
今回の勉強会では、パフォーマンスの計測の話からアートに関するものまで、幅広い範囲の発表を聴講できました。特にコーディングによるアート作品の作成については、なかなか聞く機会がないので、とても興味深い内容でした。
聴講した発表で聞いた技術は、自分でも試してみたいと感じるものが多く、とても良い刺激になりました。特に興味深いと感じたパフォーマンス計測の話のほかに、データを URL で共有する方法や p5.js と JPEG Decoder の話など、機会を見つけて試してみたいと思います。
以上、 k-so16 でした。
