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
1.6k
一休.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
CloudRun, Spanner に対する負荷試験の反省と オブザーバビリティによるアプローチ
oyasumipants
1
230
JAWS Days 2025のインフラ
komakichi
1
380
AI Agentを利用したAndroid開発について
yuchan2215
0
150
バッチを作らなきゃとなったときに考えること
irof
2
590
LINE messaging APIを使ってGoogleカレンダーと連携した予約ツールを作ってみた
takumakoike
0
150
読まないコードリーディング術
hisaju
1
160
Better Code Design in PHP
afilina
0
200
Lambdaの監視、できてますか?Datadogを用いてLambdaを見守ろう
nealle
2
870
ABEMA iOS 大規模プロジェクトにおける段階的な技術刷新 / ABEMA iOS Technology Upgrade
akkyie
1
280
Devin入門 〜月500ドルから始まるAIチームメイトとの開発生活〜 / Introduction Devin 〜Development With AI Teammates〜
rkaga
5
1.9k
高セキュリティ・高耐障害性・サブシステム化。そして2億円
tasukulab280
2
460
PromptyによるAI開発入門
ymd65536
1
240
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
280
4 Signs Your Business is Dying
shpigford
183
22k
Adopting Sorbet at Scale
ufuk
75
9.3k
A Philosophy of Restraint
colly
203
16k
Into the Great Unknown - MozCon
thekraken
35
1.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
The Invisible Side of Design
smashingmag
299
50k
The Cult of Friendly URLs
andyhume
78
6.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
570
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 でのキャッシュ 【付録】最適化その他