栗田 将悟

インバウンド向け飲食店予約サービス ■プロジェクト概要 多言語対応をしているWebの申し込みフォームから予約リクエストを受け取り、予約管理チームが予約管理システムを使い日本の飲食店の予約の代行をするというサービスです。 ■開発対象 ・予約リクエストサイト（React.js, Redux） ・予約管理システム（React.js, Redux） ・API（Spring Framework） ・バッチ（Spring Framework） ■自身の役割 予約リクエストサイト、予約管理システムの両システムのフロントエンドのメインコーダーを担当しました。 プロジェクトの立ち上げから参画し、フロントエンドの技術選定を致しました。 仮想DOMの魅力からReactを選定し、Reactとの相性の良さからReduxを選定しました。 ■課題 予約管理システムはデザイナーがつかなかったので、私がデザインを考えなくてはならなかったことが課題でした。 それまでアダプティブデザインでの開発経験しかなかったのですが、プロジェクト構成の簡易化のためにレスポンシブデザインに挑戦しました。 具体的には予約詳細画面で、PC画面では項目名と項目が横並びのものをPhone画面では縦並びにするようなデザインを作成しました。 また要件にはありませんでしたが、予約検索結果をテーブルで並べ、カーソルが乗った予約の色を動的に変えるデザイン、予約検索欄に入力した条件を一括でリセットできるボタンの設置、予約編集の際に望まない文字が入れられた際に動的にエラーを表示するバリデートなどを実装しユーザーファーストを意識したUIになるように工夫しました。 ■成果 両システムともシングルページアプリケーションで構築したので、高パフォーマンスを実現することができました。 React.jsの特徴であるコンポーネントを意識してシステムを構築したことで、わかりやすいソースコードになり、既存のコンポーネントを呼び出してコーディングできるようにしたので、後続の開発の負担を軽減することができました。 UIはユーザーファーストを意識して開発したので、予約管理のスタッフからUIを変更して欲しいという要望は0件にすることができ、使いやすいと好評をいただくことができました。