「DMM meetup #40 ~DMM.go × Think! FrontEnd~」に参加してきました

• 2024/12/11
• https://dmm.connpass.com/event/335033/

Spotify APIで学ぶOAuth 2.1 + PKCEの基礎と実践

• なずなさん

認可の共通基盤

• OIDCに準拠した認可サーバを作っている
• OAuth2.0を理解するためにでもアプリを作った
• PKCEはOAuth2.0の拡張
  • 認可コードの横取りの攻撃対策

DMMでデザインデザインシステムやってみてわかった、美味しい所・美味しくない所

• ふるじゅんさん

デザインシステム

• Tutleというデザインシステムがある
  • 横断のフロントエンドチーム
  • 車輪の再発明を防ぐ
  • サービスが多様で一貫性を担保する
• デザインシステムはソリューションの組み合わせ
  • Design Token
  • Design Guideline
  • UI Library
• デザインシステムの難しいところ
  • 複雑なUIが多いとパターン化しにくい
    • 費用対効果を考えてどこに力を入れるか
  • 再利用するプロダクトが少ない
    • 3つのプロダクトで使われるか
  • 承認者が細部にこだわると相性悪い
    • デザインシステムがソリューションとしてあってないパターン
    • レビューの観点が認識あってないとか
• デザインシステムのいいところ
  • コストかけずに市場の反応を見たい時
  • エンジニア/デザイナーが少ない時
  • プロダクト間ででスタイルを統一したい時
• 将来的な展望
  • 生成AIに学習させたらデザインシステムに沿ったものを生成してくれるかも

組み込みアプリのパフォーマンスチューニング格闘記

• Walkさん

テレビの組み込みアプリ

• 組み込みアプリで重くなることがある
  • 実機だと遅くなる
  • CPU処理が苦手
• ボトルネック
  • データ取得
    • オーバーフェッチしてないか
  • CSSの処理
    • GPUに任せられるところがないか
    • ハードウェアアクセラレーション
  • 再レンダリング
    • 不要な再レンダリング
      • キーボード操作で
    • propsをイミュータブルにしてmemo化
    • 無名関数をuseCallbaackに
    • 対象のコンポーネントをReact.memoでメモ化

Next.js AppRouter を使った大規模Webサービス開発でのディレクトリ構成の課題と変遷

• eigankenさん

ディレクトリ構成

• 大規模サービスを作ってる
  • 30ページ
  • 100コンポーネント
• サーバ負荷とSEO
  • CSRとSSRを使い分ける
  • 一般ユーザにはCSRクローラーにはSSR
• ディレクトリ構成
  • CSRとSSRの差分をできるだけなくして共通化したい
  • コンポーネントではなくpageでまとめて通信
• モノレポ化した
  • apps内はユーザ向けとbot向けの2つのディレクトリ
  • packages内にui,infra,domain,utils
  • packagesはappsとpackagesからから利用
• 課題点
  • ClientComponentとServerComponentの判断
    • 適当にuse clientしてしまうと無駄にclientになってしまうところがある
    • コンポーネントをclient部分とserver部分に分割しようと試みてる
  • propsのバケツリレー
    • 末端コンポーネントのpropsに修正が入ると修正箇所が多い
    • contextで管理？