はじめに

一休.com、Yahoo!トラベルのフロントエンドの開発を担当しております、卯田と申します。

本記事は一休.com Advent Calendar 2023 21日目の記事です。

私は、Chrome DevToolsを開きながら、競合他社の画面をぽちぽちいじって、良い機能や技術スタックを眺めることがあります。

そこで、「発見した事」「出来事」を共有しようと思います。

※担当サービスが宿泊予約を扱っていることもあり、見ているサービスはOnline Travel Agent(OTA)に偏りがちです。
※「散歩してたら良さそうなお店見つけたよ、このご飯が美味しんだよ！」のネットサーフィン版（フロントエンジニア視点）だと思っていただければ幸いです。

散歩のお供

airbnb

アーキテクチャ

Service workerのファイル名に書かれている通り、airbnbはapp shell構成となっています。

スクロールスナップ

画像の横スライドは、scroll-snapを使ってスムーズな動作を実現しています。

（airbnbより一部サイト画像を引用）

画面遷移の体験

画面遷移後に、すぐに画像が表示されます。

（airbnbより一部サイト画像を引用）

遷移前後で、表示サイズが異なる画像でも、同一の画像を使っているため、無駄なネットワークが発生しないようにしているようです。

遷移元

（airbnbより一部サイト画像を引用）

遷移先

（airbnbより一部サイト画像を引用）

下は、試しに画像のキャッシュを

無効化しない（≒遷移前後で画像パスが同じ）場合
無効化（≒遷移前後で画像パスが異なる）した場合

の違いです。

無効化しない場合

（airbnbより一部サイト画像を引用）

無効化した場合

（airbnbより一部サイト画像を引用）

Web Share API

URL共有にはWeb Share APIを使っています。

Web Share APIの対応状況によりモーダルの内容を切り替えているようです。

対応	未対応

（airbnbより一部サイト画像を引用）

他にも以下のような特徴がありました。

Persisted Queryを採用。
JavaScriptファイルの圧縮形式はBrotliを採用
サイト全面的にレスポンシブデザインを採用
Reactを採用
fetchprioriyを使っている

airbnbは、Web標準で実装できるものは積極的に採用している印象です。

Expedia

Expediaもairbnbと似ているポイントが多いです。

ファイル圧縮にはBrotliを採用
通信にはGraphQLを採用
Reactを採用
レスポンシブデザインを採用

（Expediaより一部サイト画像を引用）

Persisted Query

Expediaもairbnb同様、Persisted Queryを使っているサイトです。

（Expediaより一部サイト画像を引用）

Persisted QueryではHTTPメソッドをGETにし、HTTPキャッシュさせる用途で使うこともありますが、ExpediaではHTTP メソッドはPOSTを使っています。

以下のようなOSSも公開しています。
https://opensource.expediagroup.com/graphql-kotlin/docs/server/automatic-persisted-queries/

トラッキング

（Expediaより一部サイト画像を引用）

https://www.expedia.co.jp/api/uisprime/track というエンドポイントにログリクエストを送っている。どうやらどの要素が表示されたかトラッキングしているみたいです。

Expediaはデータの利活用に力を入れている印象です。

JTB

JTBは、画面が整っていて見やすいです。
検索機能も充実しています。
個人的に、国内競合OTAでイチオシのサイトです。
そんなJTB推しの私ですが、気づいていなかったアニメーションを"散歩"友達のデザイナーさんが最近教えてくれました。

お気に入りのアニメーション

(JTBより一部サイト画像を引用)

お気に入りボタンを押すと、なんと、お気に入りのハートが、画面右下に固定されているお気に入り施設・プランボタンへと飛んでいきます。
「お気に入り施設プラン」ボタンへの視線を誘導しようという意図が感じ取れます。
遊び心があって素敵。

一休レストラン

※OTAではないですが、素晴らしいポイントを見つけたので紹介させてください。

初期表示の速さ

一休レストランがRemixに置き換えているという話は聞いていたものの、どのような仕組みになっているかは知りませんでした。
最近一部のページの置き換えが完了し、リリースされたということで、早速DevToolsを眺めてみました。

はじめに驚かされたのが、レスポンスの速さです。

Document自体をCDNでキャッシュしている。
Cacheヒットする場合には、100ミリ秒程度(環境により誤差あると思いますが)でレスポンスが返ってきます。

Prefetch

さらにすごいのは、プリフェッチキャッシュを効かせた画面遷移

RemixのloaderとLinkで、画面遷移後に必要となるデータを事前にフェッチしておき、クリックした際に、プリフェッチキャッシュからデータを取得し、高速に画面遷移しています。
ダイナミックコンテンツのプリフェッチを実現しやすい点が、Remixの良い点の1つかもしれないですね。

一休.com / Yahoo!トラベル

さて、自分の担当サービスについても、説明しておきます。

画面遷移

一休.com / Yahoo!トラベルは、画面遷移の体験に、気を使っています。
一休レストランのようなプリフェッチによる爆速遷移は実現できていないですが、サイトの大半でクライアントでスムーズに遷移できるようにしています。

ブラウザの戻る、進む

画面遷移という観点で、ブラウザの戻る・進むボタンを押した際の動きにも注意を払っています。

まとめ

以上、サービスを見ての気づきの共有でした。
散歩は、いろいろな発見があり、楽しいですね。