Next.js App Router を例に考える、技術選定・技術との距離感 #技術選定_findy / findy 2024-01-24

Transcript

1. © 2023 LayerX Inc. Next.js App Router を例に考える、 技術選定・技術との距離感 2024-01-24

   フロントエンドの技術選定 〜2023を振り返る〜 Lunch LT @izumin5210

2. 2 © 2023 LayerX Inc. 今日話すこと 新プロダクト（バクラク請求書発行）での技術選定を例に、 技術選定、とくにフレームワークの選定で何を考えたかを振り返る 今日話すこと

3. © 2023 LayerX Inc. 3 ▸ Wantedly, Inc. (2018-04 -

   2022-08) ▸ LayerX (2022-09-) ‐ バクラク事業部 Enabling Team ‐ Backend と Web Frontend 中心にやってます ▸ 最近のお気に入りパッケージは @eddeee888/gcg-typescript-resolver-files 画像を入れてね whoami @izumin5210

4. © 2023 LayerX Inc. 4 ▸ バクラクシリーズ 5番目のプロダクト ‐ 企業が扱う書類を作成できる

   ▸ エンジニア 3名 ‐ PdM 兼 TechLead ‐ ソフトウェアエンジニア 2名 ※片方が@izumin5210 ▸ 開発開始からリリースまで ‐ 短い！ 新規プロダクト: バクラク請求書発行 前提 - バクラク請求書発行

5. © 2023 LayerX Inc. 5 ▸ Web Frontend は React

   に寄せていく ▸ 今後 React でプロダクトを作っていくための “型” を、このタイミングで整備する ‐ 標準の技術選定, 共通実装（将来的にライブラリになるもの）, etc. 以上！ あとは全部決めなきゃいけない！ 技術的に決まってたこと 前提 - バクラク請求書発行

6. © 2023 LayerX Inc. 6 前提 - 当時の状況（雑） Next.js 13.4

   リリース App Router が Stable に バクラク請求書発行 リリース予定 Apollo Client 3.8 リリースされそう 2023-05-04 2023-08-24

7. 7 © 2023 LayerX Inc. 今日話すこと Webフレームワークなど、一番外側の仕組みをどうするか決めたい 少なくともビルドとルーティングをどうするか決めないと動きづらいはず Next.js, Remix,

   何かを組みわせて自分で頑張る, etc. みなさんならどう考えて、どう決めますか？

8. © 2023 LayerX Inc. 8 やる ▸ Next.js を採用！ ▸

   App Router を使う！ やらない ▸ App Router への深入りはしない App Router は一歩引いて使う。 Server Componentsはごく一部だけ。 データ取得も基本クライアント。 キャッシュや高度なルーティングなど、 複雑な機能や Next.js 独自の機能は なるべく使わない。 開発スタート時の意思決定（Webフレームワークまわり） Web フレームワーク選定の意思決定

9. © 2023 LayerX Inc. 9 ▸ 前提: 何のために Web フレームワークを導入するのか

   ‐ 今回は「ルーティング機構とそれに最適化されたビルドシステム」がほしい ▸ Next.js にはルーティング機構, ビルドまわりなど、よく作り込まれたものが用意されている ‐ 今回の Web フレームワーク導入目的にも合致する ‐ 同じレベルで自作するとそれなりに手間はかかる ▸ Q. Next.js は学習コスト高くない？ ‐ A. RSC, SSR などに深入りせず、単純な File-system based router としてみれば見かけ上はシンプル ▸ 世の中で広く使われているので、困っても情報が見つかりやすいはず Why Next.js? Web フレームワーク選定の Why

10. © 2023 LayerX Inc. 10 ▸ App Router (React Server

    Components) がもたらす Web 開発の変化への期待と投資 ‐ Bet Technology ‐ 前回の発表： React Server Components で複雑さに立ち向かう * ‐ フルベットはしないけど、利用箇所を限定しながら試す ‐ 実アプリで試さないと見えてこないこともある ▸ いずれ App Router がメインストリームになるのであれば、早めに移行できるに越したことはない ‐ プロダクトが大きくなってからの移行は大変になりがち Why App Router? Web フレームワーク選定の Why

11. © 2023 LayerX Inc. 11 意思決定時に重要視したこと （@バクラク請求書発行） バクラク請求書発行における、Webフレームワーク選定の意思決定のポイント 追加学習コストを 下げる

    Bet Technology, but 撤退可能 ?

12. © 2023 LayerX Inc. 12 ▸ この分野(Next.js, Remix など React

    ベースの Web フレームワーク)は 発展の真っ最中 ‐ 👍 まだまだ良くなっていきそう ‐ 🤔 App Router が出たばかりすぎてエコシステムも追従しきれてない ‐ どれも決定的な差はなく、「いまは絶対こっち！」とは言えない ‐ もちろんコンテキストによるところはある ‐ 情勢の変化に追従しやすく（= 撤退しやすく）しておきたい 意思決定時に重要視したこと （@バクラク請求書発行） バクラク請求書発行における、Webフレームワーク選定の意思決定のポイント Bet Technology, but 撤退可能

13. © 2023 LayerX Inc. 13 意思決定時に重要視したこと （@バクラク請求書発行） バクラク請求書発行における、Webフレームワーク選定の意思決定のポイント 追加学習コストを 下げる

    Bet Technology, but 撤退可能 (前提) 解決したい課題と 解決できる課題と その優先度を考える 「優先度を下げていいもの」も決まる 優先度が下がったものをあえて使わないことで、 学習コストや依存度を一時的に下げられる

14. © 2023 LayerX Inc. 14 意思決定時に重要視したこと （@バクラク請求書発行） バクラク請求書発行における、Webフレームワーク選定の意思決定のポイント 追加学習コストを 下げる

    Bet Technology, but 撤退可能 これらは「初期は」「一時的に」でもある アクセルを思いっきり踏んでいい と判断できれば、 ガッツリ使っていけばいい 必要な学習コストを時間的に分散させるために 初期コストを下げている とも言える

15. © 2023 LayerX Inc. 15 技術選定には理由が伴う 技術選定 is むずかしい ▸

    何のためにその技術を使うのか、ちゃんと考える ‐ 〇〇がすごい！ もいいけど、それがプロダクト・チームの今や未来になぜ必要か も重要 ‐ 今回は「ルーティングとそれに最適化されたビルドシステム」が要求で、逆に言うとそれ以外は極論なくてもいい ‐ 「何のため」が決まれば、逆に優先度を下げても良い要素も見つけられる ‐ これは「ずっと使わない」ということではない ‐ 「将来的に使えると（ユーザ|開発者）体験が良くなりそうだけど、初期は控えめにしておく」みたいな話

16. © 2023 LayerX Inc. 16 距離を取るのも選択肢 技術選定 is むずかしい ▸

    決定的な差がない場合、「適度に距離を取りつつ技術と付き合う」というのも選択肢になる ‐ 決定的な差 is … ‐ 「〇〇じゃないと実現できない機能があり、それがプロダクトにとって重要」 ‐ 「〇〇が他の技術と比べ △△という問題をうまく解いており、それがプロダクトやチームにとって重要」 ‐ etc. ‐ 入れる or 入れない の2択ではなく、濃淡もありうる ‐ 今使わないからずっと使わない ではない ‐ コストやリスクを時間的に分散させているだけ ‐ Web フレームワークなど、「ベッタリ依存するとコードのあらゆるところに染みるタイプの技術」ではとくに重要

17. © 2023 LayerX Inc. 17 とはいえ Bet したい 技術選定 is

    むずかしい ▸ 撤退可能なパスを残しつつ、多少は Bet Technology のための余白を残しておくといい ‐ やっぱり未来を感じる技術に触れるのは楽しい！ し、やってみないとわからないことはある ‐ 見えてなかった大きなメリットがあるかも ‐ 自分たちのプロダクトへのフィット感がわかるかも ‐ あとで剥がせるようにする・人に迷惑をかけないのは前提で、Bet する余白を作っておくといいかも ‐ バクラク請求書発行では自分(@izumin5210)が完全にコントロールできるところだけ Server Components を使ってサーバサイドでフェッチして… やってました

18. © 2023 LayerX Inc. 18 まとめ 技術選定 is むずかしい ▸

    何のためにその技術を使うのか、ちゃんと考える ‐ 〇〇がすごい！ もいいけど、それがプロダクト・チームの今や未来になぜ必要か も重要 ▸ 決定的な差がない場合、「適度に距離を取りつつ技術と付き合う」というのも選択肢になる ‐ 入れる or 入れない の2択ではなく、濃淡もありうる ▸ 撤退可能なパスを残しつつ、多少は Bet Technology のための余白を残しておくといい ‐ やっぱり未来を感じる技術に触れるのは楽しい！ し、やってみないとわからないことはある ‐ あとで剥がせるようにする・人に迷惑をかけないのは前提で、Bet する余白を作っておくといいかも

19. © 2023 LayerX Inc. 19 で、プロダクトはどうなった？ 技術選定 is むずかしい ▸

    ちゃんと問題なくリリースできた！ ▸ が、リリース直前に App Router から撤退し、Pages Router へ移行している ‐ App Router だと必要な機能が実装できなかったため ‐ navigation のキャンセルが難しかった ‐ （Pages Router は怪しい感じだけど一応できる） ‐ 深入りしてなかったので移行自体はすぐに完了 ‐ 撤退しやすいようにしててよかった… ‐ App Router に戻れないか、チャンスを伺い中…

20. © 2023 LayerX Inc. 20 まとめ 技術選定 is むずかしい ▸

    何のためにその技術を使うのか、ちゃんと考える ‐ 〇〇がすごい！ もいいけど、それがプロダクト・チームの今や未来になぜ必要か も重要 ▸ 決定的な差がない場合、「適度に距離を取りつつ技術と付き合う」というのも選択肢になる ‐ 入れる or 入れない の2択ではなく、濃淡もありうる ▸ 撤退可能なパスを残しつつ、多少は Bet Technology のための余白を残しておくといい ‐ やっぱり未来を感じる技術に触れるのは楽しい！ し、やってみないとわからないことはある ‐ あとで剥がせるようにする・人に迷惑をかけないのは前提で、Bet する余白を作っておくといいかも

21. © 2023 LayerX Inc. 21 ※ 前回

22. © 2023 LayerX Inc. 22 対戦おまちしております ▸ LayerX OpenDoor [検索]

    ▸ バクラクフロントエンドVision [検索]