メインコンテンツまでスキップ

APIとの連携

APIから商品リストを表示するシンプルなEコマースサイトを構築し、以下の機能を実装する：

  • フィルター（filter）: フィールドによるフィルタリング（例：カテゴリ）
  • ライブサーチ: 商品名による検索
  • ソート（sort）:
    • 価格によるソート用のinput range作成
    • 商品名の「昇順」または「降順」ソート
  • ページネーション（pagination）: データをページ単位で表示するページネーション作成

操作要件​

  • インターフェース: 人気のEコマースサイト（Shopee、Tiki、Amazon等）を参考に、美しくユーザーフレンドリーなインターフェースを作成
  • フィルター、ソート、ページ変更の度に対応するAPIを呼び出して結果を更新
  • 検索入力時にdebounceを追加（300ms待機）
  • 複数条件の同時組み合わせ（search + category + sort）
  • flexboxまたはgridboxによる商品カード表示。内容：
    • サムネイル画像
    • 商品名
    • 価格
    • カテゴリ
  • 現在のページ番号と総ページ数を表示。1ページあたり12商品表示
  • fetch APIまたはaxiosを使用してAPI呼び出し
  • UX/UI: ローディング状態、空状態、エラーハンドリングを追加してユーザー体験を向上
  • レスポンシブ: 全デバイスで最適表示を保証

デモAPI​

ドキュメント: https://dummyjson.com/docs/products
ベースURL: https://dummyjson.com/products

重要なエンドポイント​

機能エンドポイント例
商品リスト取得/products?limit=10&skip=0https://dummyjson.com/products?limit=10&skip=0
商品検索/products/search?q=phonehttps://dummyjson.com/products/search?q=phone
カテゴリフィルター/products/category/smartphoneshttps://dummyjson.com/products/category/smartphones
カテゴリリスト取得/products/categorieshttps://dummyjson.com/products/categories