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.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
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
9
1.7k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
230
CSC509 Lecture 05
javiergs
PRO
0
300
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
400
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
2
840
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
490
All About Angular's New Signal Forms
manfredsteyer
PRO
0
150
株式会社 Sun terras カンパニーデック
sunterras
0
300
dynamic!
moro
10
7.8k
CSC509 Lecture 03
javiergs
PRO
0
340
Devoxx BE - Local Development in the AI Era
kdubois
0
130
What's new in Spring Modulith?
olivergierke
1
150
Featured
See All Featured
How to Ace a Technical Interview
jacobian
280
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
We Have a Design System, Now What?
morganepeng
53
7.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building an army of robots
kneath
306
46k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Bash Introduction
62gerente
615
210k
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 でのキャッシュ 【付録】最適化その他