レギュラートーク 10分

制約によるフロントエンドの改善というアプローチ

Shinyaigeek Shinobu Hayashi/Shinyaigeek

発表概要

コードベースに秩序をもたらすため、各種linterを利用している方も多いのではないでしょうか?本セッションでは秩序という観点以外ででも、linterによるアプリケーション特性に沿った独自のlint ruleにより齎される、DXやUXの改善のアプローチや知見についてお話しします。本セッションでは実際の制約の例と効能をいくつか紹介しつつ、皆さんもこうした制約ベースでのフロントエンド改善をおこなっていく足掛かりを提供します。

Agenda

  • 独自のlint ruleの開発手法
  • 各種具体例
    • HTTP Request Header の安全な取り出しを制約により実現する
    • Bundler,Compilerフレンドリーなコードによる開発者体験の向上を制約により実現する
    • Terserフレンドリーなコードによるビルドサイズの縮小を制約により実現する
2
LT 5分

Web フロントエンドにおける副作用との向き合い方

Shinyaigeek Shinobu Hayashi/Shinyaigeek

背景

プログラムの副作用という言葉があります。Webフロントエンドにおいて副作用は意図しないバンドルサイズの肥大化につながり、結果として読み込み速度が遅くなりユーザー体験を悪くしてしまう要因になり得ます。本トークではなぜバンドルサイズ肥大化につながるのかと、それへの検知、対処法を紹介します。

Agenda

  • プログラムの副作用とは
  • Web フロントエンドにおける副作用の影響
  • 副作用の検知する手法について
  • 副作用への対処法について
レギュラートーク 10分

巨大なコードベースに立ち向かうためのビルドパフォーマンス改善の取り組み

Shinyaigeek Shinobu Hayashi/Shinyaigeek

背景

Webフロントエンドという領域は最もユーザーに近しい領域です。だからこそ多くの人々に価値を伝えるため数々の施策をスピード感を持って打っていく必要があります。一方でサービスの成長に伴い、コードベースのサイズも肥大化しその結果ビルドパフォーマンスの悪さが開発を回す上で大きなボトルネックになることに陥いがちです。UXと同じくDXの改善も重要でしょう
そこで日経電子版という巨大で息の長いコードベースでのビルドパフォーマンスの改善の取り組みと、皆さんのフロントエンド開発を爆速にできるような知見やtipsを紹介します

Agenda

  • JavaScriptの処理系が変わるアグレッシブな変更を日経電子版ではどう安全に適用していったか
  • CSSinJSなどbabelでしか扱えない処理系を抱えながらもなるべくswcで処理されるようにしてビルドを更に高速化する取り組み
  • 知見、効用