「～Tech-Front Meetup～ 一歩先のフロントエンドへ」に参加してきました

• 2024/12/12
• https://levtechcareer.connpass.com/event/337755/

出前館web/bffにおける品質改善の取り組み〜Biomeの導入〜

• 株式会社出前館 佐藤さん

Biomeの導入

• 技術スタック
  • FE: Next/Apollo Client/Tailwind
  • BFF: GraphQL/Apollo Server
• 課題
  • プロジェクトが大きくlintに時間がかかるようになった
  • ESLint v8がEOL
    • FlatConfig対応が必要
  • -> Biomeの検証へ
• Biome導入
  • ESLint+PrettierをBiomeへ
  • 設定の移行ツールがある
    • 手直しは必要
  • 20秒かかってたのが1秒程度になった
  • ESLintのすべてのルールに対応してるわけではない
  • Tailwindのプラグインが未対応
    • 現状はESLintも共存させてる

フロントエンド設計にモブ設計を導入してみた

• 弁護士ドットコム株式会社 辻さん
• https://speakerdeck.com/bengo4com/20241212-cloudsign-techfrontmeetup

モブ設計

• 個人で設計することの課題
  • アイデアの幅が限定的になる
  • 孤独とプレッシャーがある
  • 背景共有の難しさ
• モブプロを普段やっていた
  • 設計でもモブプロのようにやることを思いついた
• モブ設計
  • 1つの設計を複数人で
  • モブプロのようにドライバー/ナビゲーター
  • 狙い通りの効果は出た
  • リソースコストとスケジュール調整が難点

フロントエンド開発を変える！ステートマシンによる予測可能なUI設計

• テックタッチ株式会社 松田さん

ステートマシン

• 状態とその遷移のモデル
  • 状態に対してどんなアクションを与えるとどんな状態に遷移するか
• 実装方法
  • useStateだけで実装するとUIの状態とデータの管理が混在していく
    • ありえない組み合わせも存在する
    • どんな状態があるのか予測しづらい
  • useReducerを使ってReduxっぽくやっていく
  • XStateというライブラリを使うと簡略化できる
    • stateをjsonで定義できる
    • VSCode上で図示することもできる
    • 図で修正してコードに反映とかも

複雑性の高いフォーム

• 株式会社RightTouch 齋藤さん

フォーム

• React Hook Formを使ってる
• フォーム個別にuseFormした方が独立してていい
  • でもフォームをまたいだバリデーションなど不便なケースも
• アプリケーション全体でuseFormで囲う
  • useFormContextを使えばバケツリレーも不要

4年間でのフロントエンドリアーキテクチャの変遷

• 株式会社ナレッジワーク よしこさん

アーキテクチャの変遷

• 初期モノリス -> モノリス拡張 -> アプリケーション分割
• 個人でTODOを日々積み重ねて管理
• 優先度作ってロードマップ作ってやっていく
• 機能改修でちょうど負債があるところだったら前段にリファクタリングも置くとか