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.2k
一休.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
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
660
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
590
#QiitaBash TDDで(自分の)開発がどう変わったか
ryosukedtomita
1
180
コーディングエージェント概観(2025/07)
itsuki_t88
0
460
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
20
9.7k
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7k
React 使いじゃなくても知っておきたい教養としての React
oukayuka
17
4.7k
GPUを計算資源として使おう!
primenumber
1
300
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
240
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
We Have a Design System, Now What?
morganepeng
53
7.7k
Statistics for Hackers
jakevdp
799
220k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How to train your dragon (web standard)
notwaldorf
96
6.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Music & Morning Musume
bryan
46
6.7k
Being A Developer After 40
akosma
90
590k
A designer walks into a library…
pauljervisheath
207
24k
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 でのキャッシュ 【付録】最適化その他