Meetup#9での発表資料です。 リクルートライフスタイル　山口 祐司

1. Nuxt.js と Express で
SPA × SSR × API Aggregation
を実現した話
2018/05/24 RLSMeetup#9
ヤマグチ ユウジ

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

3. 3
今日話すこと

4. 4
VS レガシー

5. 5
既存システムと連携する
Webアプリケーションを
新規で開発する時に気をつけたこと

6. 6

7. 7
大規模既存システム

8. 8
既存システムと連携して
新しい特集ページを作りたい！

9. 様々な課題
9
🤔
単純な
静的コンテンツ
ではない
既存影響は
抑えたい
新しい技術に
挑戦したい
未経験者
が多い
連携システムが
多そう
SEO／SMO
新たな負債は
生みたくない

10. 10
既存システムの上に構築してしまうと
技術的負債が増えてしまいそう

11. 11
既存システムと連携しながらも
負債にならないアーキテクチャが必要！

12. API Aggregation によるマイクロサービスパターン
12
Client
SPA
Server
API
Aggregation
Server
APIJSON
Server
API
JSON
JSON

13. 13
既存システムの不は
API Aggregation で
吸収すればいい

14. 14
Nuxt.js / Express

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

16. Nuxt.js / Express の構成
16
Client
SPA
Server
SSR
API
Aggregation
Server
API
HTML/CSS/JS
JSON
JSON
JSON
Server
APIJSON

17. Nuxt.js / Express の構成
17
Client
SPA
Server
SSR
API
Aggregation
Server
API
HTML/CSS/JS
JSON
JSON
JSON
Server
APIJSON
Nuxt.js
Express

18. 18
新規Webアプリケーションを
既存システムへの影響無しで
無事リリース！

19. Nuxt.js / Express を採用して良かった点
▸ 周辺エコシステムが充実している
▸ Vue.js や NPM の資産をほぼそのまま利用できる
▸ SPA × SSR × API Aggregation を簡単に実現できる
▸ vue-cli によるセットアップですぐに開発に入れる
▸ PWA など今後必要となりそうなものも対応できる
▸ 基本的なものはすでにモジュールで用意されている
19

20. Nuxt.js / Express を採用してハマった点
▸ デバッグ時には Nuxt.js の細部まで理解する必要がある
▸ vue-router / vue-server-renderer / etc.
▸ easyであるが故に学習コストが少し高かったかも
▸ SPA × SSR × API Aggregation が肥大化しそう
▸ SSR と API Aggregation は別管理でも良さそう
20

21. 21
まとめ

22. まとめ
既存システムと連携する新規Webアプリケーションを
Nuxt.js と Express を利用することで、
簡単に実現することができた。
トレードオフになるものもあるので、
まだまだ改善の余地はありそう。
22

23. 23
EOF