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
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
12
4.8k
メンバーの成長速度にバフをかける1on1ミーティング / 2024-12-06
yug1224
25
12k
強みを伸ばすキャリアデザイン
yug1224
3
520
インターンと盛り上げる全社員参加型Advent Calendarの作り方 / 2024-02-22-QiitaNight
yug1224
1
130
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
yug1224
1
160
Qiitaいいね数をGASで計測している話 / 2023-07-24-HRBrainFlyHigh
yug1224
1
1k
HRBrainの生態系を支えるフロントエンドチームの取り組み / 2023-06-22-AwEngineerMeetup
yug1224
0
110
明日使えるかもしれないGitテクニック / Gunma.web#47
yug1224
0
310
React+TypeScriptで拡張機能が開発できるRaycastのススメ / 20221027_Raycast
yug1224
1
940
Other Decks in Programming
See All in Programming
Catch Up: Go Style Guide Update
andpad
0
240
EMこそClaude Codeでコード調査しよう
shibayu36
0
290
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
630
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
6
3.3k
CSC509 Lecture 05
javiergs
PRO
0
310
CSC509 Lecture 06
javiergs
PRO
0
260
大規模アプリのDIフレームワーク刷新戦略 ~過去最大規模の並行開発を止めずにアプリ全体に導入するまで~
mot_techtalk
1
470
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
270
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
180
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
2.9k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
170
エンジニアインターン「Treasure」とHonoの2年、そして未来へ / Our Journey with Hono Two Years at Treasure and Beyond
carta_engineering
0
380
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Designing for humans not robots
tammielis
254
26k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Automating Front-end Workflow
addyosmani
1371
200k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Gamification - CAS2011
davidbonilla
81
5.5k
Done Done
chrislema
185
16k
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