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
23
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
970
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
97
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
300
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
yug1224
1
930
DX向上委員会 / 20220922_dxhacklt
yug1224
1
220
Other Decks in Programming
See All in Programming
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
140
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
630
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
580
GPUを計算資源として使おう!
primenumber
1
290
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
290
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
780
型で語るカタ
irof
0
790
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
9.3k
MCPで実現できる、Webサービス利用体験について
syumai
5
1.5k
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
220
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Navigating Team Friction
lara
187
15k
Designing for Performance
lara
610
69k
4 Signs Your Business is Dying
shpigford
184
22k
RailsConf 2023
tenderlove
30
1.2k
GitHub's CSS Performance
jonrohan
1031
460k
Building an army of robots
kneath
306
45k
Embracing the Ebb and Flow
colly
86
4.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
It's Worth the Effort
3n
185
28k
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