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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

1 ● 自己紹介 ● トピック ○ 一休の会員基盤について ○ ログインコンポーネントについて ○ 最適化について ● まとめアジェンダ

Slide 3

Slide 3 text

2 ● 一休の会員基盤について ○ 一休のサービス ○ 過去と現在 ● ログインコンポーネントについて ○ 技術選定 ○ WebComponents について ○ WebComponents x Vue.js ● 最適化について ○ 不要なコードをバンドルしない ○ 圧縮による配信サイズの削減トピック

Slide 4

Slide 4 text

3 ● 名前: 渥美雅俊(Atsumi Masatoshi) ● 入社: 2018年7月 ● 趣味: キャンプ / カメラ ● 業務: 主に Nuxt.js / Vue.js でのフロントエンド開発 ○ 2018~2020年: レストラン UI エンジニア ○ 2020~2021年: 会員基盤リニューアル ○ 2021~2025年: 宿泊 UI エンジニア兼会員基盤の開発自己紹介

Slide 5

Slide 5 text

4 ● 名前: 渥美雅俊(Atsumi Masatoshi) ● 入社: 2018年7月 ● 趣味: キャンプ / カメラ ● 業務: 主に Nuxt.js / Vue.js でのフロントエンド開発 ○ 2018~2020年: レストラン UI エンジニア ○ 2020~2021年: 会員基盤リニューアル ○ 2021~2025年: 宿泊 UI エンジニア兼会員基盤の開発自己紹介ここの話

Slide 6

Slide 6 text

5 ● 一休の会員基盤について ○ 一休のサービス ○ 過去と現在 ● ログインコンポーネントについて ○ 技術選定 ○ WebComponents について ○ WebComponents x Vue.js ● 最適化について ○ 不要なコードをバンドルしない ○ 圧縮による配信サイズの削減トピック

Slide 7

Slide 7 text

6 トピック ● 一休の会員基盤について ○ 一休のサービス ○ 過去と現在 ● ログインコンポーネントについて ● 最適化について

Slide 8

Slide 8 text

7 一休のサービス 2024 2022 2000 2006 2018 2021 一休.com 海外一休.com 宿泊一休.com スパ一休.com レストラン Yahoo!トラベル一休.com お取り寄せ一休.com ふるさと納税

Slide 9

Slide 9 text

8 一休のサービス 2024 2022 2000 2006 2018 2021 会員基盤リニューアル 2021 一休.com 海外一休.com 宿泊一休.com スパ一休.com レストラン Yahoo!トラベル一休.com お取り寄せ一休.com ふるさと納税

Slide 10

Slide 10 text

9 ● 会員基盤の実装が分散しており、多重実装になっていた ● 新しいサービスをつくる際にも障壁になっていた 2021年までの会員基盤の課題ログイン一休.com 宿泊一休.com スパ一休.com レストラン旧会員基盤

Slide 11

Slide 11 text

10 ● 会員基盤をマイクロサービス化し、全サービスが使えるように ○ また、サービス共通で使えるログインコンポーネントを提供 ● 後続の新規サービスでも使えるようになり、リリース速度が向上 2021年以降ログインコンポーネント新会員基盤

Slide 12

Slide 12 text

11 ● 会員基盤をマイクロサービス化し、全サービスが使えるように ○ また、サービス共通で使えるログインコンポーネントを提供 ● 後続の新規サービスでも使えるようになり、リリース速度が向上 2021年以降新会員基盤ここのお話をしますログインコンポーネント

Slide 13

Slide 13 text

12 トピック ● 一休の会員基盤について ● ログインコンポーネントについて ○ 技術選定 ○ WebComponents について ○ WebComponents x Vue.js ● 最適化について

Slide 14

Slide 14 text

13 ログインコンポーネントをどうつくるか ● 考えるべきこと ○ 【前提】一休サービス全体で使えること ○ 【条件 1】ページ遷移を挟まずにログインができること ○ 【条件 2】どのアプリケーションプラットフォームでも利用できること

Slide 15

Slide 15 text

14 【条件 1】ページ遷移を挟まずにログインができること ● 予約入力をしている途中でログインページに遷移すると予約体験を損ねてしまう画面遷移画面遷移

Slide 16

Slide 16 text

15 【条件 1】ページ遷移を挟まずにログインができること ● スムーズな予約を実現するためにモーダルコンポーネントでの提供がしたい同じ画面同じ画面

Slide 17

Slide 17 text

16 【条件 2】どのアプリケーションプラットフォームでも利用できること ● どのプラットフォームでもログインができるようにする必要がある ○ 一休では複数のフロントエンド技術が使われているのでどこからでも利用できるようにしたい各サービスで使われているフロントエンド

Slide 18

Slide 18 text

17 条件をクリアするのが WebComponents ● Web 標準で使える WebComponents が適任各サービスで使われているフロントエンド環境に依存しない Web 標準呼び出しログイン結果

Slide 19

Slide 19 text

18 WebComponents とは ● コンポーネント指向のための WebAPI で標準化された技術 ○ カスタム要素の定義 ■ などのタグを独自でつくれる ○ 再利用可能なコンポーネントの提供 ■ 各アプリケーションに配布することが可能 ○ カプセル化されたコードの提供 ■ 各アプリケーションからは隠蔽されたコードで動くので実装が干渉しない ● ログインコンポーネントに最適

Slide 20

Slide 20 text

19 ● 【方針】 WebComponents で出力できて、実装は Vue.js で行う ○ 社内でも使われている Vue.js で書いて、Web 標準のコンポーネントとして出力する WebComponents x Vue.js

Slide 21

Slide 21 text

20 ● Vue2 では Vue CLI が標準で WebComponents をビルドできていた ○ https://cli.vuejs.org/guide/build-targets.html#web-component WebComponents x Vue.js

Slide 22

Slide 22 text

21 ● Vue2 では Vue CLI が標準で WebComponents をビルドできていた ○ 内部的には https://github.com/vuejs/vue-web-component-wrapper を使っている WebComponents x Vue.js

Slide 23

Slide 23 text

22 ● Vue3 では deﬁneCustomElement を使って WebComponents を実装できるようになった ○ https://vuejs.org/guide/extras/web-components ○ 実際のビルドは Vite で設定する WebComponents x Vue.js

Slide 24

Slide 24 text

23 ● Vite の設定 ○ ビルド時のみ WebComponents を出力するようにしている(HMR 時は false) WebComponents x Vue.js

Slide 25

Slide 25 text

24 ● 実際のコード ○ Vue コンポーネントで書ける ○ setAttribute で指定された属性が props に, emit されたイベントは addEventListener で取得可能サンプルコード

Slide 26

Slide 26 text

25 ● 利用者側のサンプルサンプルコード

Slide 27

Slide 27 text

26 サンプルコード ● 両者のサンプル

Slide 28

Slide 28 text

27 ● ログインコンポーネントが実装できましたというわけで

Slide 29

Slide 29 text

28 ログインモーダル認証モーダル二要素認証モーダルちなみに ● ログインコンポーネントの他にも、認証モーダル、二要素認証モーダルを提供している

Slide 30

Slide 30 text

29 トピック ● 一休の会員基盤について ● ログインコンポーネントについて ● 最適化について ○ 不要なコードをバンドルしない ○ 圧縮による配信サイズの削減

Slide 31

Slide 31 text

30 実装はできたが ● 各サービスで利用するので、アプリケーションの読み込みの妨げにならないようにしたい ● できるだけ軽量化し、パフォーマンスを高める

Slide 32

Slide 32 text

31 配信にあたっての最適化 ● いくつか最適化した中で下記を紹介 ○ 不要なコードをバンドルしない ○ 圧縮による配信サイズの削減

Slide 33

Slide 33 text

32 不要なコードをバンドルしない ● もともとログインコンポーネントでは Scoped CSS を使っていた ○ スタイルが完全に共通化されていなかった ○ これにより、ビルド後のクラスが重複していた

Slide 34

Slide 34 text

33 不要なコードをバンドルしない ● UnoCSS の導入 ○ 必要最低限なプリセットを提供する CSS エンジン ○ UnoCSS を使うことでユーティリティクラスを使える ■ ビルド時に必要なクラスのみ生成される ■ 最小限の資材だけが生成されるので WebComponents 配布の需要にぴったり

Slide 35

Slide 35 text

34 圧縮による配信サイズの削減 ● gzip から brotli へ変更 ○ 当時は IE が対応必須 & IE が brotli 非対応だったので gzip で対応していた ○ IE が廃止され、 brotli での圧縮配信ができるようになった ikyu-login gzip 536.66 KB brotli 144.06 KB 圧縮率 26.84%

Slide 36

Slide 36 text

35 まとめ ● 一休の会員基盤について ○ 会員基盤をマイクロサービス化している ○ ログインコンポーネントを WebComponents で提供している ● ログインコンポーネントについて ○ ページ遷移を挟まずにログインできる体験の提供 ○ プラットフォームに依存しないコンポーネントの提供 ○ WebComponents が最適 ● 最適化について ○ 不要なコードをバンドルしない ○ 圧縮による配信サイズの削減

Slide 37

Slide 37 text

36 一休.com のログイン体験を支える技術ご清聴ありがとうございました

Slide 38

Slide 38 text

37 【付録】認証モーダルの UI 変更 ● SMS 認証が他ECサイトでも一般的になってきたので UI をシンプルに変更 Before After

Slide 39

Slide 39 text

38 【付録】UnoCSS vs Tailwind CSS ● Tailwind CSS も JIT だが、アセットサイズや最低限のユーティリティクラスを使える UnoCSS を採用 UnoCSS Tailwind CSS

Slide 40

Slide 40 text

39 ● Vue3 の恩恵 ○ 本体のバンドルサイズがそもそも小さい ○ Tree Shaking ● 遅延ローディング ○ アプリケーション側でログインコンポーネントの遅延ローディング ● Fastly でのキャッシュ【付録】最適化その他