Upgrade to Pro — share decks privately, control downloads, hide ads and more …

リクルートライフスタイルにおけるNuxt.jsの導入事例 / NuxtMeetup#4

リクルートライフスタイルにおけるNuxt.jsの導入事例 / NuxtMeetup#4

399e7330fa2a9ed06cbe81308ba8db6e?s=128

Yuji Yamaguchi

August 06, 2018
Tweet

Transcript

  1. リクルートライフスタイルにおける Nuxt.jsの導入事例 2018/08/06 NuxtMeetup#4

  2. 自己紹介 ▸ 名前 ▸ ヤマグチ ユウジ(30) ▸ 職種 ▸ フロントエンドエンジニア(7)

    ▸ 経歴 ▸ 2011年04月 通信系企業 ▸ IoTやWebコンテンツサービスの開発運用 ▸ 2016年01月 ネット広告系企業 ▸ 広告配信管理システムの開発運用 ▸ 2016年10月 株式会社リクルートライフスタイル ▸ 飲食店向け予約台帳システムの開発 ▸ 宿予約後レコメンドページの開発 ▸ 組織横断フロントエンド改善活動 2
  3. 今日話すこと ▸ Nuxt.js 導入の背景 ▸ Nuxt.js の役割 ▸ 採用して良かったこと /

    ハマったこと ▸ まとめ 3
  4. 4 なぜ Nuxt.js を導入したのか

  5. 5 無視することができない 大規模既存システムの存在

  6. 6 じゃらんの新規特集ページの 案件が発生! (既存システムとの連携あり)

  7. 7 既存の技術的負債の上に さらに拡張したくない...

  8. 8 既存システムの負債は API Aggregation で 吸収すればいいのでは?

  9. アーキテクチャ構成概要 9 Client SPA Server SSR API Aggregation Server API

    HTML/CSS/JS JSON JSON JSON Server API JSON Nuxt.js Express
  10. Nuxt.js の役割 ▸ Nuxt.js は SPA と SSR を担当 ▸

    Vuex で状態管理をし、画面描画を行う ▸ Nuxt.js は Express の Middleware として利用 ▸ Express は マイクロサービスの API Aggregation を担当 ▸ SPA / SSR どちらからも呼ばれる API を提供 ▸ 関連API をまとめて View に必要な形で返却 10
  11. 11 Nuxt.js を採用して 良かったこと / ハマったこと

  12. Nuxt.js を採用して良かったこと ▸ 大規模既存システムの負債を簡単に吸収してくれた ▸ vue-cli と API Aggregation層に感謝 ▸

    PWA など今後必要となりそうなものも対応できる ▸ 基本的なものはすでにモジュールで用意されている ▸ 規約が平和的に定まる ▸ スキルレベル差や宗派に違いがあってもスムーズに開発に入れる 12
  13. Nuxt.js を採用してハマったこと ▸ デバッグ時には Nuxt.js の細部まで理解する必要がある ▸ vue-router / vue-server-renderer

    / etc. ▸ easyであるが故にイレギュラー時のコストが高かったかも ▸ SPA × SSR × API Aggregation の構成が肥大化しそう ▸ Webpack の設定が Express と2つ必要 ▸ serverMiddleware を利用した方がスマート 13
  14. 14 まとめ

  15. まとめ Nuxt.js と Express を利用することで、 SPA × SSR × API

    Aggregation を 簡単に実現することができた! Nuxt 2/3 も来るし、PWA対応などもあるので、 まだまだ改善の余地あり! 15
  16. 16 EOF