Next.jsをフルスタックフレームワークとして使ってみた

Vercel Meetup #1（2024/06/25）のLT資料です
https://vercel.connpass.com/event/321176/

英語版で発表しましたが、その日本語版資料です

Transcript

1. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. Next.jsをフルスタックフレーム ワークとして使ってみた 2024/06/25 Vercel Meetup #1 山田 悠太 三菱重工業株式会社 DI本部 DPI部 SoEグループ CXチーム
2. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 2 山田悠太 あだ名: モンゴル (@mongolyy) プロフィール DX推進組織でテックリードをしています 産業機械の消耗品のECサイト開発に従事 最近触っている技術スタック: Next.js, React, TypeScript 以前触っていた技術スタック: Scala, Play Framework, Ruby on Rails
3. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 3 アジェンダ 1. どのように技術選定をしてきたか？ 2. Next.jsをフルスタックフレームワークとして使った時の課題と解決策
4. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 4 あなたはアーキテクチャ設計をするときに何を重視しますか？
5. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 5 「進化的アーキテクチャ」では https://www.amazon.co.jp/dp/1491986360 https://www.amazon.co.jp/dp/4873118565 Availability Agility Compatibility Configurability Flexibility Portability Responsiveness Scalability Testability Usability … (1) Neal Ford, Rebecca Parsons, Patrick Kua. “Chapter 1”, Building Evolutionary Architectures, O'Reilly Media, 2017 (1) アーキテクチャの関心事
6. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 6 私のDX推進の文脈では 次の二点が重要だと考えた ➢ ユーザビリティ • ユーザーの目が肥えてきている ➢ アジリティ • 事業部門との信頼関係構築にはスピードが重要
7. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 7 どう実現するか？ ✓ ユーザビリティ • フロントエンド開発が必要 ✓ アジリティ • 開発者体験がいい技術を選ぶ • 自分たちで開発する範囲を減らす
8. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 8 私たちの選択 ✓ ユーザビリティ • フロントエンド開発が必要 -> React, Next.js ✓ アジリティ • 開発者体験がいい技術を選ぶ -> Next.js on Vercel • 自分たちで開発する範囲を減らす -> Next.jsをフルスタックフレームワークとして活用 -> Vercel
9. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 9 ヘッドレスコマースからの着想 DB Admin UI API Headless Commerce front-end client ✓ フロントエンドは使い勝手に直結するので、実装する必要がある ✓ バックエンドはSaaSを使用することで、実装を薄くできる （SaaS） （scratch）
10. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 10 Next.jsに置き換えて考えてみる DB API Next.js ➢ APIリクエストはAPIキーが必要になるので、SSRのようなサーバーサイドの処理が必須 ➢ 見積もりや発注などの処理はサーバーサイド（SSRまたはAPI Route）で行う必要が ある ->大量のサーバーサイドコードが必要に (後ほど説明) （SaaS） SSR/ API Route React 管理画面 ヘッドレスコマース クライアント
11. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 11 やってみた!
12. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 12 Next.js + SaaS(kintone)のアーキテクチャ
13. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 13 弊社産業機械製品ユーザー向け消耗品見積・発注サイト 産業機械消耗品のECサイト 以前は電話やメール、FAXでやりとりしていた
14. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 14 時間が経ち、プロダクトもチームも成熟してきた！
15. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 15 次のステップ: RDBを使用する ➢ 複数事業部への横展開 ➢ RDBはデータ統合の実績があり、事業部のIT部門との調整がしやすい ➢ テーブル構造やコードの一貫性を確保 ➢ データベーススキーマをコードで管理し、安全にマイグレーションできる ➢ テスタビリティ ➢ Docker上でDBを起動したり、インメモリデータベースを使用してDBレイヤーを含めたテストが可 能 ➢ その他 ➢ チームは時間の経過とともに技術的に熟練し、余裕が生まれてきた
16. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 16 バックエンドの技術選定で重視したこと ✓ アジリティ • 開発者体験の良い技術を選ぶ • 自分たちで開発する範囲を減らす • 全ての開発者がフルスタックエンジニアとして活動できる • 開発者の人数(3~4名)はあまり変わらない • フロントエンドエンジニアもバックエンド開発が安全にできる
17. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 17 Next.js + Hasuraのアーキテクチャ Copyright©2018 Hasura(Released under the MIT license)https://opensource.org/licenses/mit-license.php
18. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 18 Hasura採用の背景 ➢ Hasuraを使うと ➢ コードを書かずにGraphQLサーバーを素早くデプロイできる ➢ 管理画面が使用でき、 SaaS採用の体験に近い ➢ Hasuraとは? ➢ DBスキーマに基づいてGraphQL APIを提供するGraphQLサーバー ➢ 管理画面があり、テーブル定義の変更やデータ編集が可能 Copyright©2018 Hasura(Released under the MIT license)https://opensource.org/licenses/mit-license.php
19. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 19 Next.js + Hasuraのアーキテクチャはどうだったか？ ➢ Pros ➢ ユーザーフレンドリーな管理画面で簡単に始められる ➢ 組み込みのGraphiQLにより、GraphQLクエリのテストがすぐにできる ➢ DBのデータ管理 ➢ 管理画面による、安全な開発 ➢ データベーススキーマのバージョン管理(マイグレーションファイルの自動生成) ➢ 細かなアクセス制御 (テーブル/行/列レベル) ➢ GraphQL-Codegenを使用したシンプルなクエリ呼び出し ➢ Cons ➢ Prisma + RDBと比べると、開発・学習コストが高い ➢ 複雑なトランザクションが苦手 ➢ 私たちの場合は主に参照系のシステムなので、大きな問題にはならなかった ➢ 次のバージョンでトランザクションがサポートされる予定 ➢ https://github.com/hasura/graphql-engine/issues/5773
20. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 20 Next.jsに置き換えて考えてみる (再掲) DB 管理画面 API ヘッドレスコマース Next.js クライアント ➢ APIリクエストはAPIキーが必要になるので、SSRのようなサーバーサイドの処理が必須 ➢ 見積もりや発注などの処理はサーバーサイド（SSRまたはAPI Route）で行う必要がある -> 大量のサーバーサイドコードが必要に (後ほど説明) （SaaS） SSR/ API Route React
21. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 21 フルスタックフレームワークとしてNext.jsを使用する際の課題 ➢ 大量のサーバーサイドコードを書く必要があった ➢ 関数を小さく分割することでコードの再利用性を高めようとした ➢ しかし… ➢ 開発者によって、作る関数の粒度が異なっていた ➢ これらの関数をどのように組み合わせるべきかという共通理解 が不足していた -> コードの可読性や保守性が低下 Dependency structure visualization
22. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 22 解決策 責務を定義し、それに基づいてレイヤーを分けて、関数の統合や分割をした 独自に考えるのではなく、レイヤードアーキテクチャを意識して設計 サービス関数 ビジネスロジックに関するデータのバリ デーション フロントエンドようにデータを変換 リポジトリ関数 データベースのようなデータ永続化 層とのデータのやり取り getServerSideProps 必須のパラメータの存在チェックのよう な、最小限のバリデーション
23. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 23 まとめ ➢ 私のチームは技術選定において、ユーザビリティとアジリティを重視し、プロダクトの要件 やチームの成長に応じて変化させた ➢ フルスタックフレームワークとして活用する際、チーム内での設計に関する共通理解が重 要になった ➢ 技術とビジネスの変化に適応
24. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 24 宣伝 三菱重工業のDPI部では積極採用中です！ 「私たちの取り組みに興味ある！」「私たちと一緒に働いてみたい！」と思われた方は 「Findy 三菱重工」で検索！ https://findy-code.io/companies/501
26. © MITSUBISHI HEAVY INDUSTRIES, LTD. All Rights Reserved. 26 Vercel, the Vercel design, Next.js and related marks, designs and logos are trademarks or registered trademarks of Vercel, Inc. or its affiliates in the US and other countries.