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

自己紹介 ▸ 名前 ▸ ヤマグチ ユウジ(30) ▸ 職種 ▸ フロントエンドエンジニア(7) ▸ 経歴 ▸ 2011年04月 通信系企業 ▸ IoTやWebコンテンツサービスの開発運用 ▸ 2016年01月 ネット広告系企業 ▸ 広告配信管理システムの開発運用 ▸ 2016年10月 株式会社リクルートライフスタイル ▸ 飲食店向け予約台帳システムの開発 ▸ 宿予約後レコメンドページの開発 ▸ 組織横断フロントエンド改善活動 2

今日話すこと ▸ Nuxt.js 導入の背景 ▸ Nuxt.js の役割 ▸ 採用して良かったこと / ハマったこと ▸ まとめ 3

4 なぜ Nuxt.js を導入したのか

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

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

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

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

アーキテクチャ構成概要 9 Client SPA Server SSR API Aggregation Server API HTML/CSS/JS JSON JSON JSON Server API JSON Nuxt.js Express

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

11 Nuxt.js を採用して 良かったこと / ハマったこと

Nuxt.js を採用して良かったこと ▸ 大規模既存システムの負債を簡単に吸収してくれた ▸ vue-cli と API Aggregation層に感謝 ▸ PWA など今後必要となりそうなものも対応できる ▸ 基本的なものはすでにモジュールで用意されている ▸ 規約が平和的に定まる ▸ スキルレベル差や宗派に違いがあってもスムーズに開発に入れる 12

Nuxt.js を採用してハマったこと ▸ デバッグ時には Nuxt.js の細部まで理解する必要がある ▸ vue-router / vue-server-renderer / etc. ▸ easyであるが故にイレギュラー時のコストが高かったかも ▸ SPA × SSR × API Aggregation の構成が肥大化しそう ▸ Webpack の設定が Express と2つ必要 ▸ serverMiddleware を利用した方がスマート 13

14 まとめ

まとめ Nuxt.js と Express を利用することで、 SPA × SSR × API Aggregation を 簡単に実現することができた！ Nuxt 2/3 も来るし、PWA対応などもあるので、 まだまだ改善の余地あり！ 15

16 EOF