「Muddy Web #9 - 泥臭いフロントエンドの現場」に参加してきました

勉強会メモ

FastlyとfalcoでNode.jsレスなWebサーバーの構築: IPTV版ABEMAアプリのインフラ刷新

IPTV版ABEMA

  • ABEMAをテレビで見ることができる
    • Linuxを搭載していてWebベースのもの
    • Androidを搭載してAndroid技術で作るもの
  • IPTV
    • IP技術でビデオコンテンツをテレビへ提供する技術

インフラ構成

  • もともとはhtmlをNodeサーバからcss/jsはCloudStorage
    • NodeやCloudStorageが露出している
    • gzip化されてない
    • Nodeサーバの物理的な位置
  • CDNを導入
    • htmlは事前に静的ビルドできたのでNodeサーバなくせた
    • 動的部分はCDNのエッジでファイル出し分け
    • CloudStorageはCDNからしかアクセスできないように制御
    • CDNでgzip/br圧縮できた

Fastlyとfalco

  • Fastly
    • Web版で使ってた
    • VCLでエッジにロジックおける
    • ロジックのテストどうするか
      • ローカルではNode環境で
  • falco
    • Fastly VCLの開発補助ツール
    • Linter/Formatter/テストなどなど
    • simulatorでローカルで動かすことも
      • バックエンド差し替えてCloudStorageには向かないようにできる
    • vscode拡張にも組み込まれてる

コードメトリクス計測による課題可視化と品質確保

  • Masatoshi Morita(@texdeath)さん

コードメトリクス

  • チームの具体的な品質指標がほしかった
    • FEチーム/BEチーム行き来しながら開発することも
    • ルールを固めてスピードを落とすのは避けたかった
  • 技術選定
    • octocov
      • GitHub Actionsに特化
      • 特定の用途しか使えなさそう
    • SonarCube
      • ダッシュボードがあって分析できそう
      • カスタマイズの敷居が高い
        • 環境の構築とか
    • ESLint
      • 導入が手軽で拡張性が高かった
  • ESLintのルール
    • 循環的複雑度を重点的にチェック
    • jsonにレポートを出力して修正すべき箇所をまとめる

Amebaチョイス立ち上げの裏側 ~ 依存システムとの闘い ~

  • Daichi Igarashiさん

Amebaチョイス

  • 商品を比較するメディア
  • 商品情報のCMSと記事情報のCMSがある
    • 記事用のCMSはhtmlが返ってくる
    • Reactで扱いづらい
  • それぞれアクセスするサーバがある
    • React/ExpressとNext

マイグレーションコード自作して File-Based Routing に自動移行！！ ~250 ページの歴史的経緯を添えて~

  • Rei Katoさん

TanStack Routerへの移行

  • 管理画面の話
  • SPAでSSRしていない
    • GCSからhtml/css/js返してる
  • 250ページある
  • ロール管理が複雑
  • ReactRouterのv5使ってた
    • 型がつかないのが大変
  • TanStack Routerに移行
    • ファイルベースのルーティングに
    • 既存のファイルを読み込んでディレクトリを生成していく
    • jscodeshiftでAST見て頑張った
  • 状態管理ライブラリの混在
    • Unstated/Recoil/TanStack Query
    • Unstatedを使ってるところはコンポーネントの構造が違うから地道に分岐