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
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活...
Search
atsumim
February 11, 2025
Programming
0
7.4k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
2025/02/10 一休 Frontend Meetup にて発表した資料です。
https://ikyu.connpass.com/event/343110/
atsumim
February 11, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
Django Ninja による API 開発効率化とリプレースの実践
kashewnuts
0
1.1k
Model Pollution
hschwentner
1
190
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
120
CSC305 Lecture 05
javiergs
PRO
0
210
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
190
クラシルを支える技術と組織
rakutek
0
190
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
150
あなたの知らない「動画広告」の世界 - iOSDC Japan 2025
ukitaka
0
430
CSC305 Lecture 01
javiergs
PRO
1
400
CI_CD「健康診断」のススメ。現場でのボトルネック特定から、健康診断を通じた組織的な改善手法
teamlab
PRO
0
190
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
630
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Automating Front-end Workflow
addyosmani
1371
200k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Rails Girls Zürich Keynote
gr2m
95
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Visualization
eitanlees
148
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Embracing the Ebb and Flow
colly
88
4.8k
Transcript
0 一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
1 • 自己紹介 • トピック ◦ 一休の会員基盤について ◦ ログインコンポーネントについて ◦
最適化について • まとめ アジェンダ
2 • 一休の会員基盤について ◦ 一休のサービス ◦ 過去と現在 • ログインコンポーネントについて ◦
技術選定 ◦ WebComponents について ◦ WebComponents x Vue.js • 最適化について ◦ 不要なコードをバンドルしない ◦ 圧縮による配信サイズの削減 トピック
3 • 名前: 渥美雅俊(Atsumi Masatoshi) • 入社: 2018年7月 • 趣味:
キャンプ / カメラ • 業務: 主に Nuxt.js / Vue.js でのフロントエンド開発 ◦ 2018~2020年: レストラン UI エンジニア ◦ 2020~2021年: 会員基盤リニューアル ◦ 2021~2025年: 宿泊 UI エンジニア 兼 会員基盤の開発 自己紹介
4 • 名前: 渥美雅俊(Atsumi Masatoshi) • 入社: 2018年7月 • 趣味:
キャンプ / カメラ • 業務: 主に Nuxt.js / Vue.js でのフロントエンド開発 ◦ 2018~2020年: レストラン UI エンジニア ◦ 2020~2021年: 会員基盤リニューアル ◦ 2021~2025年: 宿泊 UI エンジニア 兼 会員基盤の開発 自己紹介 ここの話
5 • 一休の会員基盤について ◦ 一休のサービス ◦ 過去と現在 • ログインコンポーネントについて ◦
技術選定 ◦ WebComponents について ◦ WebComponents x Vue.js • 最適化について ◦ 不要なコードをバンドルしない ◦ 圧縮による配信サイズの削減 トピック
6 トピック • 一休の会員基盤について ◦ 一休のサービス ◦ 過去と現在 • ログインコンポーネントについて
• 最適化について
7 一休のサービス 2024 2022 2000 2006 2018 2021 一休.com 海外
一休.com 宿泊 一休.com スパ 一休.com レストラン Yahoo!トラベル 一休.com お取り寄せ 一休.com ふるさと納税
8 一休のサービス 2024 2022 2000 2006 2018 2021 会員基盤リニューアル 2021
一休.com 海外 一休.com 宿泊 一休.com スパ 一休.com レストラン Yahoo!トラベル 一休.com お取り寄せ 一休.com ふるさと納税
9 • 会員基盤の実装が分散しており、多重実装になっていた • 新しいサービスをつくる際にも障壁になっていた 2021年までの会員基盤の課題 ログイン 一休.com 宿泊 一休.com
スパ 一休.com レストラン 旧会員基盤
10 • 会員基盤をマイクロサービス化し、全サービスが使えるように ◦ また、サービス共通で使えるログインコンポーネントを提供 • 後続の新規サービスでも使えるようになり、リリース速度が向上 2021年以降 ログインコンポーネント 新会員基盤
11 • 会員基盤をマイクロサービス化し、全サービスが使えるように ◦ また、サービス共通で使えるログインコンポーネントを提供 • 後続の新規サービスでも使えるようになり、リリース速度が向上 2021年以降 新会員基盤 ここのお話をします
ログインコンポーネント
12 トピック • 一休の会員基盤について • ログインコンポーネントについて ◦ 技術選定 ◦ WebComponents
について ◦ WebComponents x Vue.js • 最適化について
13 ログインコンポーネントをどうつくるか • 考えるべきこと ◦ 【前提】一休サービス全体で使えること ◦ 【条件 1】ページ遷移を挟まずにログインができること ◦
【条件 2】どのアプリケーションプラットフォームでも利用できること
14 【条件 1】ページ遷移を挟まずにログインができること • 予約入力をしている途中でログインページに遷移すると予約体験を損ねてしまう 画面遷移 画面遷移
15 【条件 1】ページ遷移を挟まずにログインができること • スムーズな予約を実現するためにモーダルコンポーネントでの提供がしたい 同じ画面 同じ画面
16 【条件 2】どのアプリケーションプラットフォームでも利用できること • どのプラットフォームでもログインができるようにする必要がある ◦ 一休では複数のフロントエンド技術が使われているのでどこからでも利用できるようにしたい 各サービスで使われているフロントエンド
17 条件をクリアするのが WebComponents • Web 標準で使える WebComponents が適任 各サービスで使われているフロントエンド 環境に依存しない
Web 標準 呼び出し ログイン結 果
18 WebComponents とは • コンポーネント指向のための WebAPI で標準化された技術 ◦ カスタム要素の定義 ▪
<ikyu-login> などのタグを独自でつくれる ◦ 再利用可能なコンポーネントの提供 ▪ 各アプリケーションに配布することが可能 ◦ カプセル化されたコードの提供 ▪ 各アプリケーションからは隠蔽されたコードで動くので実装が干渉しない • ログインコンポーネントに最適
19 • 【方針】 WebComponents で出力できて、実装は Vue.js で行う ◦ 社内でも使われている Vue.js
で書いて、Web 標準のコンポーネントとして出力する WebComponents x Vue.js
20 • Vue2 では Vue CLI が標準で WebComponents をビルドできていた ◦
https://cli.vuejs.org/guide/build-targets.html#web-component WebComponents x Vue.js
21 • Vue2 では Vue CLI が標準で WebComponents をビルドできていた ◦
内部的には https://github.com/vuejs/vue-web-component-wrapper を使っている WebComponents x Vue.js
22 • Vue3 では defineCustomElement を使って WebComponents を実装できるようになった ◦ https://vuejs.org/guide/extras/web-components
◦ 実際のビルドは Vite で設定する WebComponents x Vue.js
23 • Vite の設定 ◦ ビルド時のみ WebComponents を出力するようにしている(HMR 時は false)
WebComponents x Vue.js
24 • 実際のコード ◦ Vue コンポーネントで書ける ◦ setAttribute で指定された属性が props
に, emit されたイベントは addEventListener で取得 可能 サンプルコード
25 • 利用者側のサンプル サンプルコード
26 サンプルコード • 両者のサンプル
27 • ログインコンポーネントが実装できました というわけで
28 ログインモーダル 認証モーダル 二要素認証モーダル ちなみに • ログインコンポーネントの他にも、認証モーダル、二要素認証モーダルを提供している
29 トピック • 一休の会員基盤について • ログインコンポーネントについて • 最適化について ◦ 不要なコードをバンドルしない
◦ 圧縮による配信サイズの削減
30 実装はできたが • 各サービスで利用するので、アプリケーションの読み込みの妨げにならないようにしたい • できるだけ軽量化し、パフォーマンスを高める
31 配信にあたっての最適化 • いくつか最適化した中で下記を紹介 ◦ 不要なコードをバンドルしない ◦ 圧縮による配信サイズの削減
32 不要なコードをバンドルしない • もともとログインコンポーネントでは Scoped CSS を使っていた ◦ スタイルが完全に共通化されていなかった ◦
これにより、ビルド後のクラスが重複していた
33 不要なコードをバンドルしない • UnoCSS の導入 ◦ 必要最低限なプリセットを提供する CSS エンジン ◦
UnoCSS を使うことでユーティリティクラスを使える ▪ ビルド時に必要なクラスのみ生成される ▪ 最小限の資材だけが生成されるので WebComponents 配布の需要にぴったり
34 圧縮による配信サイズの削減 • gzip から brotli へ変更 ◦ 当時は IE
が対応必須 & IE が brotli 非対応だったので gzip で対応していた ◦ IE が廃止され、 brotli での圧縮配信ができるようになった ikyu-login gzip 536.66 KB brotli 144.06 KB 圧縮率 26.84%
35 まとめ • 一休の会員基盤について ◦ 会員基盤をマイクロサービス化している ◦ ログインコンポーネントを WebComponents で提供している
• ログインコンポーネントについて ◦ ページ遷移を挟まずにログインできる体験の提供 ◦ プラットフォームに依存しないコンポーネントの提供 ◦ WebComponents が最適 • 最適化について ◦ 不要なコードをバンドルしない ◦ 圧縮による配信サイズの削減
36 一休.com のログイン体験を支える技術 ご清聴ありがとうございました
37 【付録】認証モーダルの UI 変更 • SMS 認証が他ECサイトでも一般的になってきたので UI をシンプルに変更 Before
After
38 【付録】UnoCSS vs Tailwind CSS • Tailwind CSS も JIT
だが、アセットサイズや最低限のユーティリティクラスを使える UnoCSS を採用 UnoCSS Tailwind CSS
39 • Vue3 の恩恵 ◦ 本体のバンドルサイズがそもそも小さい ◦ Tree Shaking •
遅延ローディング ◦ アプリケーション側でログインコンポーネントの遅延ローディング • Fastly でのキャッシュ 【付録】最適化その他