一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜

2025/02/10 一休 Frontend Meetup にて発表した資料です。
https://ikyu.connpass.com/event/343110/

Transcript

1. 0 一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
2. 1 • 自己紹介 • トピック ◦ 一休の会員基盤について ◦ ログインコンポーネントについて ◦ 最適化について • まとめ アジェンダ
3. 2 • 一休の会員基盤について ◦ 一休のサービス ◦ 過去と現在 • ログインコンポーネントについて ◦ 技術選定 ◦ WebComponents について ◦ WebComponents x Vue.js • 最適化について ◦ 不要なコードをバンドルしない ◦ 圧縮による配信サイズの削減 トピック
4. 3 • 名前: 渥美雅俊(Atsumi Masatoshi) • 入社: 2018年7月 • 趣味: キャンプ / カメラ • 業務: 主に Nuxt.js / Vue.js でのフロントエンド開発 ◦ 2018~2020年: レストラン UI エンジニア ◦ 2020~2021年: 会員基盤リニューアル ◦ 2021~2025年: 宿泊 UI エンジニア 兼 会員基盤の開発 自己紹介
5. 4 • 名前: 渥美雅俊(Atsumi Masatoshi) • 入社: 2018年7月 • 趣味: キャンプ / カメラ • 業務: 主に Nuxt.js / Vue.js でのフロントエンド開発 ◦ 2018~2020年: レストラン UI エンジニア ◦ 2020~2021年: 会員基盤リニューアル ◦ 2021~2025年: 宿泊 UI エンジニア 兼 会員基盤の開発 自己紹介 ここの話
6. 5 • 一休の会員基盤について ◦ 一休のサービス ◦ 過去と現在 • ログインコンポーネントについて ◦ 技術選定 ◦ WebComponents について ◦ WebComponents x Vue.js • 最適化について ◦ 不要なコードをバンドルしない ◦ 圧縮による配信サイズの削減 トピック
7. 6 トピック • 一休の会員基盤について ◦ 一休のサービス ◦ 過去と現在 • ログインコンポーネントについて • 最適化について
8. 7 一休のサービス 2024 2022 2000 2006 2018 2021 一休.com 海外 一休.com 宿泊 一休.com スパ 一休.com レストラン Yahoo!トラベル 一休.com お取り寄せ 一休.com ふるさと納税
9. 8 一休のサービス 2024 2022 2000 2006 2018 2021 会員基盤リニューアル 2021 一休.com 海外 一休.com 宿泊 一休.com スパ 一休.com レストラン Yahoo!トラベル 一休.com お取り寄せ 一休.com ふるさと納税
10. 9 • 会員基盤の実装が分散しており、多重実装になっていた • 新しいサービスをつくる際にも障壁になっていた 2021年までの会員基盤の課題 ログイン 一休.com 宿泊 一休.com スパ 一休.com レストラン 旧会員基盤
11. 10 • 会員基盤をマイクロサービス化し、全サービスが使えるように ◦ また、サービス共通で使えるログインコンポーネントを提供 • 後続の新規サービスでも使えるようになり、リリース速度が向上 2021年以降 ログインコンポーネント 新会員基盤
12. 11 • 会員基盤をマイクロサービス化し、全サービスが使えるように ◦ また、サービス共通で使えるログインコンポーネントを提供 • 後続の新規サービスでも使えるようになり、リリース速度が向上 2021年以降 新会員基盤 ここのお話をします ログインコンポーネント
13. 12 トピック • 一休の会員基盤について • ログインコンポーネントについて ◦ 技術選定 ◦ WebComponents について ◦ WebComponents x Vue.js • 最適化について
14. 13 ログインコンポーネントをどうつくるか • 考えるべきこと ◦ 【前提】一休サービス全体で使えること ◦ 【条件 1】ページ遷移を挟まずにログインができること ◦ 【条件 2】どのアプリケーションプラットフォームでも利用できること
15. 14 【条件 1】ページ遷移を挟まずにログインができること • 予約入力をしている途中でログインページに遷移すると予約体験を損ねてしまう 画面遷移 画面遷移
16. 15 【条件 1】ページ遷移を挟まずにログインができること • スムーズな予約を実現するためにモーダルコンポーネントでの提供がしたい 同じ画面 同じ画面
17. 16 【条件 2】どのアプリケーションプラットフォームでも利用できること • どのプラットフォームでもログインができるようにする必要がある ◦ 一休では複数のフロントエンド技術が使われているのでどこからでも利用できるようにしたい 各サービスで使われているフロントエンド
18. 17 条件をクリアするのが WebComponents • Web 標準で使える WebComponents が適任 各サービスで使われているフロントエンド 環境に依存しない Web 標準 呼び出し ログイン結 果
19. 18 WebComponents とは • コンポーネント指向のための WebAPI で標準化された技術 ◦ カスタム要素の定義 ▪ <ikyu-login> などのタグを独自でつくれる ◦ 再利用可能なコンポーネントの提供 ▪ 各アプリケーションに配布することが可能 ◦ カプセル化されたコードの提供 ▪ 各アプリケーションからは隠蔽されたコードで動くので実装が干渉しない • ログインコンポーネントに最適
20. 19 • 【方針】 WebComponents で出力できて、実装は Vue.js で行う ◦ 社内でも使われている Vue.js で書いて、Web 標準のコンポーネントとして出力する WebComponents x Vue.js
21. 20 • Vue2 では Vue CLI が標準で WebComponents をビルドできていた ◦ https://cli.vuejs.org/guide/build-targets.html#web-component WebComponents x Vue.js
22. 21 • Vue2 では Vue CLI が標準で WebComponents をビルドできていた ◦ 内部的には https://github.com/vuejs/vue-web-component-wrapper を使っている WebComponents x Vue.js
23. 22 • Vue3 では defineCustomElement を使って WebComponents を実装できるようになった ◦ https://vuejs.org/guide/extras/web-components ◦ 実際のビルドは Vite で設定する WebComponents x Vue.js
24. 23 • Vite の設定 ◦ ビルド時のみ WebComponents を出力するようにしている(HMR 時は false) WebComponents x Vue.js
25. 24 • 実際のコード ◦ Vue コンポーネントで書ける ◦ setAttribute で指定された属性が props に, emit されたイベントは addEventListener で取得 可能 サンプルコード
26. 25 • 利用者側のサンプル サンプルコード
27. 26 サンプルコード • 両者のサンプル
28. 27 • ログインコンポーネントが実装できました というわけで
29. 28 ログインモーダル 認証モーダル 二要素認証モーダル ちなみに • ログインコンポーネントの他にも、認証モーダル、二要素認証モーダルを提供している
30. 29 トピック • 一休の会員基盤について • ログインコンポーネントについて • 最適化について ◦ 不要なコードをバンドルしない ◦ 圧縮による配信サイズの削減
31. 30 実装はできたが • 各サービスで利用するので、アプリケーションの読み込みの妨げにならないようにしたい • できるだけ軽量化し、パフォーマンスを高める
32. 31 配信にあたっての最適化 • いくつか最適化した中で下記を紹介 ◦ 不要なコードをバンドルしない ◦ 圧縮による配信サイズの削減
33. 32 不要なコードをバンドルしない • もともとログインコンポーネントでは Scoped CSS を使っていた ◦ スタイルが完全に共通化されていなかった ◦ これにより、ビルド後のクラスが重複していた
34. 33 不要なコードをバンドルしない • UnoCSS の導入 ◦ 必要最低限なプリセットを提供する CSS エンジン ◦ UnoCSS を使うことでユーティリティクラスを使える ▪ ビルド時に必要なクラスのみ生成される ▪ 最小限の資材だけが生成されるので WebComponents 配布の需要にぴったり
35. 34 圧縮による配信サイズの削減 • gzip から brotli へ変更 ◦ 当時は IE が対応必須 & IE が brotli 非対応だったので gzip で対応していた ◦ IE が廃止され、 brotli での圧縮配信ができるようになった ikyu-login gzip 536.66 KB brotli 144.06 KB 圧縮率 26.84%
36. 35 まとめ • 一休の会員基盤について ◦ 会員基盤をマイクロサービス化している ◦ ログインコンポーネントを WebComponents で提供している • ログインコンポーネントについて ◦ ページ遷移を挟まずにログインできる体験の提供 ◦ プラットフォームに依存しないコンポーネントの提供 ◦ WebComponents が最適 • 最適化について ◦ 不要なコードをバンドルしない ◦ 圧縮による配信サイズの削減
37. 36 一休.com のログイン体験を支える技術 ご清聴ありがとうございました
38. 37 【付録】認証モーダルの UI 変更 • SMS 認証が他ECサイトでも一般的になってきたので UI をシンプルに変更 Before After
39. 38 【付録】UnoCSS vs Tailwind CSS • Tailwind CSS も JIT だが、アセットサイズや最低限のユーティリティクラスを使える UnoCSS を採用 UnoCSS Tailwind CSS
40. 39 • Vue3 の恩恵 ◦ 本体のバンドルサイズがそもそも小さい ◦ Tree Shaking • 遅延ローディング ◦ アプリケーション側でログインコンポーネントの遅延ローディング • Fastly でのキャッシュ 【付録】最適化その他