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
6.7k
一休.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
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
710
tool ディレクティブを導入してみた感想
sgash708
1
150
Introduction to Git & GitHub
latte72
0
120
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
680
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
AIエージェント開発、DevOps and LLMOps
ymd65536
1
330
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
590
ワープロって実は計算機で
pepepper
2
1.4k
ゲームの物理
fadis
5
1.5k
Infer入門
riru
4
1.6k
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
6
720
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Site-Speed That Sticks
csswizardry
10
780
Thoughts on Productivity
jonyablonski
69
4.8k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Embracing the Ebb and Flow
colly
87
4.8k
Music & Morning Musume
bryan
46
6.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Speed Design
sergeychernyshev
32
1.1k
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 でのキャッシュ 【付録】最適化その他