Share
Embed
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 では defineCustomElement を使って 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 でのキャッシュ
【付録】最適化その他