クルマのサブスクを Next.jsで内製化した経験とその1年後

Transcript

1. クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23 クルマのサブスクを Next.jsで内製化した 経験とその1年後 JSConf JP 2024 KINTOテクノロジーズ株式会社 大河原

   典将 佐藤 歩

2. 本セッションの主 — 技術選定の意思決定に関するケーススタディが中心でr — 実装具体よりも、どのような状況下でどう考えたかをお伝えしまr — KINTO ONE の例を通して2019〜2024年頃の変化を感じられるはず 【AD】KINTO

   テクノロジーズ (株) の協賛でお送りします クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

3. 自己紹介、会社紹介 Part 1 ｢サイト再構築｣の背景とタイムライン Part 2 内製化 Before 刷新における設計意図 Part

   3 内製化 After これからの展望と課題 Part 4 2 Agenda クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

4. 自己紹介と KINTOテクノロジーズ クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

5. 自己紹介 — N Okawara KINTOテクノロジーズ株式会社　KINTO ONE開発部 新車サブスク開発G フロントエンドT リーダー ベンチャー企業でサービス開発に従事した後、

   2020年の２月に当時のKINTOへ入社 それ以降KINTO ONE開発に従事 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

6. 自己紹介 — ahomu KINTOテクノロジーズ株式会社　IT/IS部付 入社半年の新人 前職：HR Tech スタートアップで経営 + Web

   開発者 前々職：メガベンで Web フロント、EM、技術人事 前々々職：Web システム受託 / 自社 CMS 開発 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

7. トヨタ自動車株式会社 　└ トヨタファイナンシャルサービス株式会社 　　└ KINTO テクノロジーズ株式会社 　　└ 株式会社 KINTO ✓

   ✓ ✓ ✓ モビリティ･カンパニー化を目指すトヨタの IT サービスを支える内製開発部隊 東京、大阪、名古屋にまたがる350名超のソフトウェアエンジニア組織 顧客価値のため toC/toB 問わず Web サービス開発の経験が求められる分野 Web 開発の経験を、国を代表する巨大産業のビジネスに活かすチャンス クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

8. クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23 ユニークな体験プランや多 彩な商品が発見できる、 KINTOご契約者向けの優待 サイト あなたにぴったりの場所を 見つけ出す 、お出かけ先 インスピレーションAIアプ

   リ クルマ好きなお客様と一緒 に楽しみ、旧車に乗れる喜 びを分かち合う旧車コミュ ニティ クルマのオーナーに向け た、愛車のカスタム・機能 向上サービス KINTOで手軽にマイカー を。車のサブスクリプショ ンサービス トヨタのキャッシュレス 決済アプリ KINTO ONEのリースアップ 車を中心としたトヨタの中 古車サブスク あなたの移動はもっと自由 にもっと楽しく！おでかけ コンシェルジュアプリ 決済プラットフォームで Woven Cityで生み出される 発明に貢献 開発支援 開発支援

9. KINTO ONE ｢サイト再構築｣ の 背景とタイムライン クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

10. ｢KINTO ONE｣ サービス説明 p クルマのサブスクリプションサービC p トヨタ、レクサス、スバルなど幅広い車種 から好きな車が選べ' p 保険料やメンテナンス費用がコミコミの

    サービC p Webで契約が完結 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

11. 一連の顧客向けサービスを Web で提供 お見積もり お申し込み ご契約 アフター サービス 契約プランの選択から 車種、オプション等のお見積もり

    etc 定期メンテナンスの情報 のりかえ・再契約のお手続き etc 納車 審査 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

12. 2019 2020 2021 2022 2023 2024 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23 KINTO サービス

    ローンチ 内製開発体制の 本格化 内製化の完了 3月 東京トライアル 7月 全国展開の開始 4月 KINTOテクノロジーズ設立 8月 サイト再構築 Pj 完了 KINTO ｢サイト再構築｣ の背景とタイムライン

13. Q. 長期間のリプレースプロジェクトの中で 　 印象深い出来事や記憶はありますか？ クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

14. 内製化 Before 刷新における設計意図 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

15. 内製化以前の技術スタック クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23 HTML JavaScript CSS Java のテンプレートエンジン Thymeleaf jQuery

    ~ Ajax を添えて ~ Sass を手動コンパイルしながら生 CSS

16. 内製化によるアップデートのポイント クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23 HTML JavaScript CSS バックエンドとフロントの 密結合が体制に合わない 開発体験の面もさすがに アップデートが必要

17. クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23 1 2 デファクトスタンダード化が期待される技術を中心に モダンな開発環境、開発体験を構築する バックエンドとの境界を設計的に整理して ユーザー体験や UI の開発領域に集中できるようにする

18. 当時の技術選定における注力ポイント v JavaScript フレームワークの導Q v UI コンポーネントカタログの導Q v テストコードによる品質担0 v

    Atomic Design による UI 整" v TypeScript による型に基づいた開発 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

19. Next.js を採用した経緯 " サイト再構築とは別に、既存システムの開発も継続してい8 " 既存システムの新規開発で API によるフロントとバックの分離を先行導p " パイロットプロジェクトとして

    Next.js を導入 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

20. Q. クルマの販売（フルサービスリース）を扱うにあたって 　 “らしい” 要件や開発中の気付きはありましたか？ クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

21. 内製化 After これからの展望と課題 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

22. クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23 ✓ フロントエンドのみでの大規模な機能変更も実現出来るように

23.  Atomic Design 見直し As-Is To-Be Atomic Design は自分たちのプロダクトにマッチしなかった BC(C)D

    Design への切り替えを検討 Base - Case - Common - Domain によるコンポーネント分類手法 via. https://qiita.com/misuken/items/19f9f603ab165e228fe1 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23 プロダクト規模もあって organisms の肥大化を整理しきれず

24. ÃÁ Component 構成 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23 As-Is To-Be ファイル構成が見辛い・探索し辛い構成となってしまった ディレクトリに Collocation

    パターンを適用 test、css、stories で根元からディレクトリを分けていた コンポーネント単位で .test.tsx、.css、.stories.tsx を同梱

25. Atomic Design 初期 + features 中期 今後の整理イメージ

26. Ç Storybook 活用 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23 As-Is To-Be Storybook の運用は良好で、メンテナンスも出来ている Visual

    Regression Tests などテスト用途の拡大を検討 コンポーネントテストとセットにするなど運用に組み込めた デザインシステムを作り、マーケのデザインチームとの連携予定も

27. É 今後のアップデート F これまでの使用しているパッケージのアップデートはマス5 F 既存のクリティカルな課題が解消する見通しであり、順次進めていく計画 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

28. Q. チームメンバーの反応は？ クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

29. Q. 今後のユーザー体験上のチャレンジポイントは？ クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

30. まとめ（KINTO ONE フロントエンドの現在地） ✓ ✓ ✓ 内製化が完了したことにより開発スピードがアップしたところ モダン開発環境は実現できたので更なるブラッシュアップ中 クルマ、モビリティのビジネス貢献に Web

    フロント・UX からチャレンジ中 クルマのサブスクをNext.jsで内製化した経験とその1年後 2024.11.23

31. Thanks, We are Hiring !! KINTOテクノロジーズのブースも引き続きよろしくお願いします