タグ

ブックマーク / user-first.ikyu.co.jp (9)

  • 一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog

    このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2

    一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
    efcl
    efcl 2023/12/15
    Next.jsのApp RouterからRemix Runに移行した話。 Next.jsのApp RouterではCache-Controlが暗黙的で変更できない問題、RemixではRequest/Responseを自由に変更できるなどの違いについて。
  • 一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog

    ヤフー株式会社より出向しております、卯田と申します。 主務で、一休.comおよびYahoo!トラベルのフロントエンド開発を担当しています。 兼務で、ヤフー株式会社の全社横断組織でWebパフォーマンス改善の推進を行っております。 稿では、直近半年弱(2023年2月〜8月)で、断続的に行っていた一休.comのパフォーマンス改善について振り返ります。 開始が2023年2月となった理由は、Nuxt3バージョンアップ以降にパフォーマンス改善活動に着手したためです。 一休.com/Yahoo!トラベルのNuxt3バージョンアップ詳細については、以下のブログをご覧ください。 user-first.ikyu.co.jp サイトパフォーマンス改善の意義 改善の方針 方針1: Core Web Vitalsを改善する 方針2: 重要課題から優先的に対応する 改善の進め方 可視化 ブラウザサイド サーバーサイ

    一休.com サイトパフォーマンス改善 - 2023年 夏の振り返り - 一休.com Developers Blog
    efcl
    efcl 2023/09/17
    CrUXとLooker StudioモニタリングとNuxt周りのパフォーマンス改善について
  • Yahoo! トラベルと一休.com のシステム統合プロジェクト - 一休.com Developers Blog

    今から二ヶ月ほど前、10/1 に Yahoo! トラベル のリニューアルが完了しました。このリニューアルは、一休.com と Yahoo! トラベルの2システムを一つに統合することで実現しました。 ご存知の通り、ヤフーと一休は同じグループに所属する企業です。ざっくりいうと「同じグループで2つの宿泊予約システムを開発し続けるのは効率が悪いよね」という話があり、今回のシステム統合に至っています。 Yahoo! トラベルと一休のシステム統合は、(1) 2017年頃にホテルの空室管理や予約、決済、精算業務などを担うバックエンドのシステム統合を行い、そして (2) 今回 2021年春先から半年ほどをかけて、ユーザーが利用する画面も含めた全面統合を行いました。全面統合は総勢で 50名ほどのディレクター、エンジニア、デザイナーが関わる一休的には大きな規模のプロジェクトになりましたが、目立ったトラブルもな

    Yahoo! トラベルと一休.com のシステム統合プロジェクト - 一休.com Developers Blog
    efcl
    efcl 2021/12/01
    ホテルの在庫管理/サイトコントローラの仕組み。 ソースコードレベル/UIコンポーネントの共有。 開発チームが異なるなら、ソースコードレベルの共有はボトルネックになりやすい感じはする(特にUIコンポーネントの共有は
  • 新管理画面のAPIにGraphQLを採用した話 - 一休.com Developers Blog

    一休.com レストランを開発している所澤です。この記事は一休.comアドベントカレンダーの10日目の記事です。 先日、一休.comレストランの管理画面をリニューアルしました。 この記事ではその際にAPIの実装方法として採用したGraphQLについてフロントエンド視点で利点や使い所について述べます。 GraphQLについて以下の記事がわかりやすかったです。 「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ - エンジニアHub|若手Webエンジニアのキャリアを考える! 短いまとめ 新しくAPIサーバーを書くなら是非GraphQLで! というくらい良かった Apolloのエコシステムに乗り切らなくてもいい。ふつうのRESTfulなAPIサーバーの代わりに、くらいの気軽さでGraphQLを採用してもいい プロジェクトの概要 今回リニューアルした一休.comレ

    新管理画面のAPIにGraphQLを採用した話 - 一休.com Developers Blog
    efcl
    efcl 2019/12/19
    REST API的にGraphQLを使ったデータの取得を使った話
  • E2EテストをSelenium Webdriver からCypress.io に移行した話 - 一休.com Developers Blog

    こんにちは。 一休.comの開発基盤を担当しています、akasakasです。 今回は、E2EテストをSelenium WebdriverからCypress.ioに移行した話をしたいと思います。 一休のE2Eテスト事情 あれから、数年が経過して、、、 どうしてこうなった??? SeleniumではSPAへの対応が難しくなってきた なんでもかんでもSeleniumで頑張ろうとした弊害 いざリプレイスへ・リプレイスをする上で気をつけたこと 開発者フレンドリー 安定性 然るべきレイヤーでテストする(何でもかんでもブラウザテストにしない) 技術選定 Cypress.io とは? Cypress.io のいいところ セットアップが楽 テストを書くことだけに集中できる CI連携が楽 Cypress.io の頑張って欲しいところ その他、移行に関しての細かい話 重複テストケースの排除 Page Objec

    E2EテストをSelenium Webdriver からCypress.io に移行した話 - 一休.com Developers Blog
    efcl
    efcl 2019/04/30
    Cypressはelectronがデフォ、chromeも選べる。 guiアプリがコア機能。セレクタとかguiで選んだりテストの再実行、ステップごとの記録閲覧できる。 テストが落ちたら自動でスクショと動画が出る。cypress.io と連携するとCIダッシュ
  • 一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog

    一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます(スマホで開くか、PCの場合はUAをスマホに偽装する必要があります) https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか? どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削

    一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
    efcl
    efcl 2019/01/17
    jQuery依存を外すためのリファクタリング方法について。 jQueryと同等の機能の実装方法や外すことでのパフォーマンスの差異などについて。
  • サードパーティJavaScriptの最適化 - 一休.com Developers Blog

    記事は、一休.com Advent Calendar 2018の4日目の記事です。 qiita.com 宇都宮です。宿泊事業部でWebフロントエンドの開発をしています。 今日は、パフォーマンス改善に取り組むフロントエンドエンジニアの多くが頭を悩ませているであろう、サードパーティスクリプト(3rd Party JavaScript)について書きます。 サードパーティスクリプトとは サードパーティスクリプトとは、外部のドメインから読み込むJavaScriptのことです。典型的には、Google Analytics等のスクリプトが、サードパーティスクリプトに該当します。 一休.comでは、サードパーティスクリプトを、アクセス解析・広告のリターゲティング・A/Bテスト等、様々な用途に使用しています。これらのスクリプトは、一つ一つは小さなものであるため、画面表示のスピードに対するインパクトは意識

    サードパーティJavaScriptの最適化 - 一休.com Developers Blog
    efcl
    efcl 2018/12/06
    サードパーティスクリプトのパフォーマンス問題の分析や改善方法について
  • 一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog

    一休.com レストランは今年の 7 月 18 日、スマートフォン向け検索ページのリニューアルを行いました。このエントリーでは、その中身について少し紹介させていただきます。 検索ページの課題 一休.com レストランではスマートフォン向け検索ページに対して「遅い」という課題意識がありました。これは技術面で少しブレイクダウンすると; パーソナライズドを含む複雑な処理を行っているため、サーバーサイド処理が重い。 UI 上無駄な遅延処理を行っているため、クライアントサイドの描画が遅い。 というサーバー側とクライアント側両方の課題がありました。クライアントサイドの「無駄な遅延処理」というのは; 検索結果取得が REST API 化されているにも関わず、再検索の度にページリロードを行い、サーバーサイドの描画からやり直している。 という実装に問題がありました。下図がリニューアル前のページ描画の様子です

    一休.comレストランのスマートフォン検索ページがSPAになりました - 一休.com Developers Blog
    efcl
    efcl 2018/10/10
    Nuxt.jsでユニバーサルアプリ。 バックエンドのAPIサーバはそのままにして、NodeでBFFを作ってNuxt.jsのSSRでHTMLを返す
  • 一休.comスマホサイトのパフォーマンス改善(JavaScript編) - 一休.com Developers Blog

    宿泊事業部の宇都宮です。 一休.com スマホサイトのホテルページパフォーマンス改善プロジェクトでは、フロントエンドには以下のような要件がありました。 デザイン面は既存を踏襲する 機能はほぼ従来通り 日付等を変更した際の再検索は、画面遷移を挟まず、画面内で行えるようにする パフォーマンスをできるだけ改善する 要するに、従来と同様の機能+αを実現し、かつ、従来と同等以上のパフォーマンスを実現する、というミッションです。 このために、どのような取り組みを行ったか、紹介します。 パフォーマンス目標値の設定 まず、パフォーマンスの目標値を設定する必要があります。モバイルでは、ユーザの帯域幅は回線や時間帯によって大きな変動があります。多少回線状況が悪くても、閲覧を妨げない程度のパフォーマンスを実現する必要があります。 一休へアクセスするユーザのモニタリングを見ると、極端に遅い回線を使っているユーザ

    一休.comスマホサイトのパフォーマンス改善(JavaScript編) - 一休.com Developers Blog
    efcl
    efcl 2018/09/21
    Calibreを使ったパフォーマンス計測とBudgetの設定、ファイルサイズの削減による最適化、Vueの`v-if`と`v-show`の処理の違い、遅延ロードなどのパフォーマンス改善について
  • 1