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.4k
リクルートライフスタイルにおけるNuxt.jsの導入事例 / NuxtMeetup#4
Yuji Yamaguchi
August 06, 2018
Tweet
Share
More Decks by Yuji Yamaguchi
See All by Yuji Yamaguchi
強みを伸ばすキャリアデザイン
yug1224
3
360
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
79
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
0
93
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
770
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
41
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
240
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
yug1224
1
820
DX向上委員会 / 20220922_dxhacklt
yug1224
1
180
n8nでワークフローを自動化した話 / 20220914_n8n
yug1224
1
1.6k
Other Decks in Programming
See All in Programming
Universal Linksの実装方法と陥りがちな罠
kaitokudou
1
240
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
7
3k
カスタムしながら理解するGraphQL Connection
yanagii
1
1.4k
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
2
330
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
16
4.2k
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
290
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
役立つログに取り組もう
irof
27
9k
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
260
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
260
Quine, Polyglot, 良いコード
qnighy
4
580
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
How to train your dragon (web standard)
notwaldorf
88
5.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Git: the NoSQL Database
bkeepers
PRO
426
64k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Building Adaptive Systems
keathley
38
2.2k
Happy Clients
brianwarren
97
6.7k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
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