Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
リクルートライフスタイルにおけるNuxt.jsの導入事例 / NuxtMeetup#4
Search
Yuji Yamaguchi
August 06, 2018
Programming
1
3.6k
リクルートライフスタイルにおけるNuxt.jsの導入事例 / NuxtMeetup#4
Yuji Yamaguchi
August 06, 2018
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
22
12k
強みを伸ばすキャリアデザイン
yug1224
3
490
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
120
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
1
140
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
960
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
93
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
300
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
yug1224
1
920
DX向上委員会 / 20220922_dxhacklt
yug1224
1
220
Other Decks in Programming
See All in Programming
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
140
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
420
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
320
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
310
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
440
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
220
Create a website using Spatial Web
akkeylab
0
300
技術同人誌をMCP Serverにしてみた
74th
1
380
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
510
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
380
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
810
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
600
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Side Projects
sachag
455
42k
How to train your dragon (web standard)
notwaldorf
94
6.1k
KATA
mclloyd
29
14k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Thoughts on Productivity
jonyablonski
69
4.7k
It's Worth the Effort
3n
185
28k
Code Reviewing Like a Champion
maltzj
524
40k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
リクルートライフスタイルにおける 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