「TechBrew in 東京 〜フロントエンド技術選定、その後どうなった？〜」に参加してきました

• 2024/2/28
• https://findy.connpass.com/event/310614/
• 普段Nextしかさわらないので他のフレームワークの話を聞けたのが学びでした(特にRemix)
• 他の参加者とコミュニケーションとりやすいイベントなのが良かったです

RemixでWeb標準を学んだ1年

• なかざん(@Nkzn)さん
• 株式会社モニクル
• https://speakerdeck.com/nkzn/first-year-with-remix
• メモが消えてる・・・

to BプロダクトでVite+React Routerを採用して半年後の感想」

• 宮城 広隆(@MH4GF)さん
• 株式会社ROUTE06
• https://speakerdeck.com/mh4gf/impressions-after-6-months-of-using-vite-plus-react-router-e448b113-96f4-479a-adea-7d003e5d3fda

技術選定

• 背景
  • ユーザごとにUIをカスタマイズするようなサービス
  • 初期フェーズで技術で詰まることはさけたい
• SSR
  • SSRは特に必要なかった
    • 業務用PCで使うアプリ
    • 認証前のページはログイン画面だけ
  • SPAでよさそう
• Next
  • Static Exportの選択肢もあった
  • Dynamic Routingがビルド時に決まったidしか使えないのがダメだった
  • Nextの高機能のものはほとんどいらない
• FWを使わない
  • GraphQLを使うがそこはFW影響ない
  • routingはReact Routerでよさそう
  • Reactとは心中するがそれ以外は切り捨てられるようにしたい
• Vite + React Router

その後

• Viteで困ることはない
• React RouterがSentryと相性いい
• トップレベルのコンポーネント以外はrouterの情報はpropsでもらって純粋にした方がよかったかも
• チャンク分割は試行錯誤が合った

フロントエンドのEMが技術選定するときに取り組んだこと

• 伊代田 大樹さん
• ウェルスナビ株式会社

EMの領域

• ピープル/テクノロジー/プロジェクト/プロダクトマネジメント
• チームのパフォーマンスを最大化

技術選定

• プロダクトの戦略から考える
• なるべく技術課題と組織課題は分ける
  • 学習コストがどうこうとか
• フロントエンドエンジニアとしてのキャリアの観点
  • 特定技術にロックインしない
  • いろいろな技術を採用して触れやすい環境
• エンジニア採用のしやすさ
• メンバーの成長へのリスクマネジメント
  • レビュー体制とか

レガシーなフロントエンドをReact / Next.jsにリプレースした結果

• 小野 優人(@YutoCoding)さん
• ENECHANGE株式会社
• https://speakerdeck.com/yutoono/rekasinahurontoentowo-react-next-dot-js-nirihuresusitajie-guo

リプレース

• リプレース前
  • jQuery使ったり
  • Vue2もあったり
• 技術選定
  • NextとNuxtを比較
  • 他社事例とか
  • React/Nextに決めた
• LPなどはNext
• 新規開発はVite + React

LaravelからフロントエンドをNext.jsに段階的に移行している話

• 松本 拓人(@takatoku_learn)さん
• 株式会社じげん
• https://speakerdeck.com/takatoku/laravelnohurontoentowonext-dot-jsniduan-jie-de-niyi-xing-siteiruhua

リプレース

• リプレース前
  • Laravel
  • Vue
  • jQuery
  • 歴史があるので可読性悪い
  • ビルド/リリース時間かかる
  • デザインの統一感ない
• 負債の解消
  • リファクタリング
  • JSFW拡張(Vue)
  • フロントエンドを切り出して新しいFW導入 ←これを採用

フロントエンドの移行

• 段階的に移行
  • 開発者の負担
  • ビジネス側に段階的に見せたい
  • トップページから段階的に
    • デザインも最新に

技術選定

• Nextを採用
  • フロントエンド専任はいなかった
  • C向けなのでSEOも意識
  • 情報量が多い
  • チューニングの選択肢が広そう
  • パッケージングされてるのが楽

よかったこと

• Lint/Formatterはいってて品質あがった
• Storybookでデザイナーとのコミュニケーションが楽に
• 情報はたくさんあるから困ることは少なかった
• App Routerのコロケーションで見通し良くなった

残念だったこと

• vercel使ってないから使えないものがある
• Nextへの依存
• ベストプラクティスがわからなくて試行錯誤

コンパウンドスタートアップにおけるフロントエンド技術選定のこれまでとこれから

• tatane(@tatane616)さん
• 株式会社LayerX
• https://speakerdeck.com/tatane616/konpaundosutatoatupuniokeru-hurontoendoji-shu-xuan-ding-nokoremadetokorekara

今バウンドスタートアップ

• 創業から複数プロダクト
• 部署でサービスを区切らずデータを中心にサービス統合
• プロダクト間で連携
• 複数のプロダクトを管理

技術スタック

• VueとNextが共存
  • Vueで型がつかなくてつらいところがあった
  • Reactも使うようになった

Vue3

• Vue2から3に移行しないといけない
  • React化も選択肢に合ったがコストが高かったし開発を止めるわけにもいかない
  • React行くにしてもVue3を経由して型安全になってからの方がいい
• Vue3に移行して
  • WebpackからViteにしてはやくなった
  • 型がきいていい
  • 機能開発と並行して進められた
  • bootstrap-vueがVue3の恩恵受けにくいので剥がしてる

React/Vue共存

• 共存して2年くらい
• よかったこと
  • 採用の間口が広くなった
  • 既存資産を活かしづらいのでゼロベースで改善できる
• 困っていること
  • コンテキストスイッチが大変
    • BEもやってる
  • 共通コンポーネントライブラリを作りづらい

今後

• 新規はNext
• VueもReactに移行
  • 開発が止まらないようにしながら