簡易仕様書.md

アプリ名

TapEats

対象OSおよびブラウザ

Chrome, Firefox, Safari, Edge

開発環境

VSCode

開発言語

Typescript

開発期間

8日間

フレームワーク

react@18.2.0, TailwindCSS@3.3.5

設計ドキュメント

Figmaファイル

機能一覧

• レストラン検索 : ホットペッパーグルメサーチAPIを使用して、現在地周辺の飲食店を検索する。
  • 検索範囲 : 現在地からの範囲を5段階で指定できる。
  • ジャンル絞り込み : 店舗のジャンルを指定して検索できる。
• レストラン情報取得 : ホットペッパーグルメサーチAPIを使用して、飲食店の詳細情報を取得する。
  • マップ遷移 : 店舗の所在地を示したGoogleマップページに遷移できる。

コンセプト

近くの飲食店をワンタップで検索できる。

こだわったポイント

• 状態管理 : ReactQueryを用いることで、データ取得時の「ロード中」「エラー」などの取得状態を簡単に管理。
• ロード画面 : APIからのデータ取得中はロード画面を入れることでUXを向上。
• WebStorageの利用 : ページをリロードすると現在地を取得する前の初期画面に戻ってしまったので、sessionStorageを活用して検索条件を保持するようにした。
• カスタムフック化 : GeoLocationAPIの現在位置取得に関する処理をカスタムフック化することでコードの複雑化を改善。
• エラーハンドリング : ホットペッパーAPIではエラーの場合でも200OKが返ってくるため、レスポンスデータの中身で判断するように実装。
• Tailwind CSS : 効率的にCSSを実装するためにTailWind CSSを利用。また予め用意したカラーを使うためデフォルトのカラーパレットを拡張した。

デザイン面でこだわったポイント

• 食欲をそそるオレンジ色をテーマカラーに。(当初は赤色にしようと思っていたが警告色でもあるため却下)
• ジャンルで絞り込む事ができるため、店舗一覧にそれぞれのジャンル名を目立つように表示。
• モーダルの「閉じる」「マップを見る」ボタンは親指で押しやすいように画面下部に配置。
• ロード中はローディングアニメーションを表示。
• レスポンシブ対応。

アドバイスして欲しいポイント

• 技術面 :
  • コンポーネントの設計について : 「src/components/」内のコンポーネントをさらにフォルダ分けする場合、どのようなフォルダを作成して分けるべきか。
• デザイン面 :
  • 表示する情報の取捨選択 : 店舗一覧画面では最低限必要な項目を表示させたつもりだが、他の項目と入れ替えたほうがいいか、またデザインでこういった取捨選択をする際にどのようなことを意識すべきか。

自己評価

Reactについて、ある程度の基礎的な技術は持っていると思っているが、カスタムフックやReactQueryといった技術を使って本格的にアプリ開発をしたことがなかったので、今回の開発を通してそれらの技術を活用することができたので勉強になった。