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
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
390
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
530
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
380
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
WindowInsetsだってテストしたい
ryunen344
1
200
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
160
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
240
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
270
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
450
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
210
技術同人誌をMCP Serverにしてみた
74th
1
450
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
830
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
The Invisible Side of Design
smashingmag
300
51k
Being A Developer After 40
akosma
90
590k
Speed Design
sergeychernyshev
32
1k
Automating Front-end Workflow
addyosmani
1370
200k
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