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

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