はじめに 社内情報システム部 / CISO室 所属 コーポレートエンジニアの 大多和（id:rotom）です。 2022年12月5日、一休は本社オフィスを港区赤坂から千代田区紀尾井町の東京ガーデンテラス紀尾井町 紀尾井町タワーへ移転しました。 ヤフーや PayPay、ZOZO をはじめ、Zホールディングス各社やデジタル庁も入居するビルです。 新オフィスのコンセプト、概要についてはプレスリリースをご覧ください。 prtimes.jp 当社は2022年4月に働き方を刷新し、オフィスワークとリモートワークのハイブリッド制を導入しました。従業員がより高いパフォーマンスを発揮できるよう、オフィスワークの日を職種ごとに週1・3・5回に分けています。移転後の座席は、出社回数に応じて、フリーアドレス・グループアドレス・固定席の「ハイブリッド」とし、オフィス勤務時には従業員同士が円滑にコミュニケーションを取

プロダクト開発部デザイナーの安松と申します。 10/3、新サービスの「一休.comふるさと納税」がローンチしました。 選んだ宿がある自治体に寄附をすると、一休.comで使える割引クーポンを返礼品として、web上で受け取れるというサービスです。 一休.comの宿泊予約とは違ったサービスですが、予約へとつながるサービスをどのようにデザインに反映させたか、また一休.comの宿泊デザインシステムの活用やFigmaを使ったことを振り返ります。 目次 １） ふるさと納税サイトで意識したこと ２） 宿泊のデザインシステムを活かせるか ３） Figma導入後、初のゼロからデザイン ４） まとめ 1. ふるさと納税サイトで意識したこと サービスコンセプトのすり合わせ モックを作成するにあたりビジネスサイドから、サービスの概要やターゲット層に加え、一休.com（宿泊）のUIを活かしたい、とにかくシンプルに…な

こんにちは、プロダクト開発部の野口です。 一休にはたくさんの施設紹介ページがあるのですが、その中でもキュレーションページという流入数が高いページがありました。それをメイン動線であるリストページに統合したので、その経緯や裏側をご紹介します。 一休の施設掲載ページはたくさんある 一休には施設をまとめて掲載するページがたくさん存在します。 リストページ(メイン動線) https://www.ikyu.com/area/ma000000/t105/si1/?adc=1&asc=01&cid=20221008&cod=20221010&hoi=1,2&lc=2&mtc=003&per_page=20&pn=1&ppc=2&rc=1 キュレーションページ https://www.ikyu.com/theme/t105/ 観光ページ 特集ページ などなど。。。 その中でも今回はキュレーションページをリス

前回好評だった一休と出前館のオンライン・イベント Frontend Meetup の第2回を開催します。 イベント後のアーカイブ動画を公開しませんのでご興味がある方はぜひご参加ください！ 日時：9/29(木) 18:00~20:00 費用：無料 場所：オンライン（Zoom） お申し込みは以下のリンクからお願いします。 ikyu.connpass.com 時間 内容 登壇者 18:00 ご挨拶 18:05 - 18:25 一休. com/Yahoo!トラベルのNuxt3移行における開発プロセス 杉田 隆紀 18:25 - 18:45 React 18 に見るユーザーファーストなローディング表示 yoshiyamay 18:45 - 19:05 Testing for Demae-can App 黒澤 慎治 19:05 - 19:35 パネルディスカッション 20:00頃 終了

Apollo Client は複雑 Apollo Client が向いているケース 一休.com に Apollo Client は必要ないかもしれない では何を使えばいいの？ 複雑なアプリケーションには Apollo を使えばいい？ もう一つのリッチなクライアント、Relay の話 結局、何を使えばいいのか この記事は一休 × 出前館 Frontend Meetup でお話した内容をブログにまとめたものです。 user-first.ikyu.co.jp speakerdeck.com GraphQL クライアントと聞いて一番に思い浮かぶライブラリは何でしょうか？ 多くの方にとっては Apollo Client ではないかと思います。npm trends を見ても Apollo Client のダウンロード数は urql や relay などほかのクライアントと比べ圧倒的です。 実際、一休

プロダクト開発部デザイナーの河村恵です。昨今、デザインシステムを用いた「UI / UXの品質担保」「トンマナの統一」「再利用性の向上による開発効率のUP」が注目されつつある中、一休.comでも本格的なデザインシステムの構築を目指し、プロジェクトが発足しました。 本記事では、プロジェクト発足から一休.comならではの課題・実際に作っているUIガイドラインについてなど赤裸々にお話ししたいと思います。 目次 １） プロジェクト発足に至る経緯 ２） プロジェクトの進め方 ３） 実際に作っているUIガイドライン ４） まとめ 1.プロジェクト発足に至る経緯 CTOからのフィードバック そもそも「デザインシステム導入しよう！」となったきっかけは、CTO（以下直也さん）から一休.com と Yahoo! トラベルの2システムを一つに統合することで実現した、Yahoo!トラベルのリニューアル（詳しくはこち

一休と、「出前館」を運営する株式会社出前館でオンライン・イベントを開催します。 今回はフロントエンド開発をテーマとして両社のエンジニアにお話いただきながら、様々な学びを得ることを目的としたイベントです。 イベント後のアーカイブ動画を公開しませんのでご興味がある方はぜひご参加ください。 日時：6/30(木) 18:00~20:00 費用：無料 場所：オンライン（Zoom） お申し込みは以下のリンクからお願いします。 ikyu.connpass.com 発表テーマ プロダクトのタイプ別 GraphQL クライアントの選び方（一休 / 管理画面 / 新規サービス） 一休/Yahooトラベル、マルチブランドにまたがるデザインシステム 20年続いているサービスの注文画面をGraphQLを活用して作り直した話 ライフインフラとなるために進めているアクセシビリティ向上への取り組み 多くの方のご参加をお待

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

はじめに データサイエンス部の平田です。 ディープラーニングのモデルを作る際、学習データが少ないことが原因で精度が上がらない場合、データのかさまし（augmentation）を行うことがあります。 画像の場合は、オリジナルに対して回転させたりノイズを少し加えることで同じラベル付けがされている別の画像を作り出すことができ、それを学習データに加えることで頑健なモデルになります。 ただし、テキストの場合は回転させると意味不明になるのでどういう操作をしてかさましするかというのを考える必要があります。 そこで、EDA(Easy Data Augmentation)というものが考案されました。参考 Synonym Replacement：文中の単語の内n個、同義語に置き換える Random Insertion：文中の単語をランダムに選んで同義語にしてランダムな場所にinsert、n回繰り返す Rand

こんにちは。宿泊事業本部の宇都宮です。この記事では、GraphQLをベースに、GoとTypeScriptでスキーマを共有しながら開発を進める方法について紹介します。 この記事は 一休.com Advent Calendar 2019 の16日目の記事です。 GraphQLとは ライブラリの選定 コードファースト vs スキーマファースト Goによるサーバ実装 TypeScriptによるクライアント実装 おわりに 参考文献 GraphQLとは GraphQLは、Facebookによって開発された、Web APIのための クエリ言語 です。その特徴もSQLに似ていて、データの取得や更新を宣言的な記述によって行うことが出来ます。 仕様は公開されており、リファレンス実装として graphql-js がありますが、それ以外にも様々な言語でGraphQLサーバを実装できます。 GraphQLでは以下の

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

qiita.com この記事は、一休.com Advent Calendar 2019の6日目の記事です。 こんにちは、nakashunです。 普段は情シスみたいなことをやっています。 今年のAdvent Calendarについて、Slackでこんなご意見を頂いたので書いてみます。 意外と表に出てこない、入社時に支給されるパソコンに加え 追加で購入する場合・交換する場合のルールも公開してみようと思います。 パソコンの購入・交換ルールの基本スタンス パソコンの購入・交換のルールについては、Qiita:teamで告知しています。 社員はQiita:teamを参照し、自分のパソコンを追加購入するのか・交換するのかを判断します。 上長の承認を得た後、情シスが購入手続きを行う流れになっています。 ルールを簡単にまとめると 故障修理・故障交換などを除く全てのPC購入にこのルールが該当するよ 購入するP

フロントエンドエンジニアのid:ninjinkunです。この記事は一休.comアドベントカレンダーの1日目の記事です。 一休.coｍレストランの管理画面リニューアルプロジェクトにおいて、CSSフレームワークのBulmaを導入しました。結論としては、採用して良かったと思っています。 このエントリではBulmaを選定した理由と、採用後に見えたPros / Consについて述べたいと思います。 なお今回リニューアルした一休.comレストランの管理画面の概要は以下の通りです。 レストラン店舗向けの管理画面 店舗の方と一休スタッフの両方が使う DAUは数千の規模 主な用途は在庫の管理と、プラン（コース）や席の管理 現在は店舗を限定してリリース済み 具体的には以下のような画面で構成されています。 UIフレームワークは必要か？ まずそもそもUIフレームワークは必要かという議論があります。 今回のプロジェ

この記事は一休.comアドベントカレンダー2018の3日目の記事です。 qiita.com 宇都宮です。宿泊事業本部でWebフロントエンドの開発をしています。 一休.comにVue.jsを導入して、約1年が経ちました。スマートフォン版の予約入力画面から始まり、PCとスマートフォン版のホテルページほか、さまざまなUIコンポーネントがVue.jsで実装されるようになってきています。 また、予約入力画面のような複雑な状態管理を伴う画面の実装のため、Vuexを導入しています。 ここ1年ほどVue.js + Vuexというスタックで開発を行ってきて、アプリケーションの設計について色々と思うところがあったので、今回は現状でどういう構成が最適と考えているか、紹介します。 Vue.jsアプリケーションのState Vueコンポーネントには、親から受け取るpropsと、自分自身で保持するstate(data

レストラン事業本部の田中( id:kentana20 )です。 先週末にDevLOVE Xというイベントで開発組織改善の取り組みについて5年間の取り組みと今後、というテーマでお話しました。 5年間でどれくらい一休の開発組織が変わったのか 技術面 組織面 それぞれで実施した改善について、改善の裏側で起こっていたことや自分の所感も含めてお話しました。 現在の一休について7/4(木)にお話します 来週開催するエンジニア向けの説明会で、上記の5年間の取り組みを経て、現在の一休がどうなっているのかをCTOの伊藤がお話します。 ikyu.connpass.com 説明会と書いていますが、会社・事業や開発体制のお話だけでなく 現在の開発組織やプロダクトの状況がどうなっているか 今後どのように改善を進めていくのか を含めてお話する予定です。 一休で働くことに興味がある方だけでなく いまの現場を改善するため

こんにちは。宿泊事業本部の宇都宮です。 最近、とあるマイクロサービスをローンチしました。このアプリケーションの業務的な役割は諸事情により省略しますが、以下のような特性をもっています。 社内の多くのサービスから利用される 一休.com 一休.comレストラン 一休.comギフト 一休.com海外 このサービスが落ちると、主要サービスの予約処理が止まる 😱 想定されるリクエスト数は、平常時で30req/sec、ピーク時には60req/sec程度になります。行う処理はシンプルで、DBにいくつかSELECT文を投げて、ビジネスロジックに沿った結果を返すことです。 また、基盤系のアプリケーションなので、各開発者の開発環境（WindowsとMacが混在）でも動作する必要があります。 したがって、このアプリケーションに求められる要件は、 高パフォーマンス 高信頼性 クロスプラットフォームで動作すること

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

宿泊事業本部フロントエンドエンジニアの宇都宮です。 2018年度下期は、一休.comホテルリストページ スマホ版の速度改善に取り組んできました。その結果、ページのデザインはそのまま、機能面はリッチにしつつ、プロジェクト開始前の約2倍のスピードでページが表示されるようになりました。 本記事では、高速化のためにどのような施策を行ったのか紹介します。 なお、Webサイトの高速化手法については、ホテル詳細ページ高速化プロジェクトを実施した際にも記事を書いています。これらの記事で紹介している手法（たとえば、Imgixによる画像最適化等）については、記述を省略しています。あわせてご覧ください。 一休.comスマホサイトのパフォーマンス改善（概要編） - 一休.com Developers Blog 一休.comスマホサイトのパフォーマンス改善（JavaScript編） - 一休.com Develop

一休.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 アドベントカレンダーの24日目の記事です。 qiita.com 社内情報システム部の大多和（id:rotom）です。 一休には2018年8月に入社し、情報システムエンジニアとして、IT を活用した業務改善、オフィス環境の構築を中心とした社内の「情シス」業務全般を担当しています。 本エントリでは、表立って登場することの少ない「情シス」が普段何をしているか、ご紹介していきます。 情シスのお仕事 社内情報システム部は「システム本部」に所属しており、現在 6人 のメンバで業務を行っています。 一休における情シスは以下の2つの側面を持っています。 コーポレートエンジニアリング：社内ツールやシステムの導入及び管理運用、bot やスクリプト開発による業務の効率化などの業務改善の他、オフィスの IT インフラ環境の構築、改善など、IT を活用し、より社員がよりパフォーマンスを発揮で