理解を深めるためのメモ兼、思い出すため用です。

作成したもの

今回作成するオリジナルアプリの見た目の作成、ヘッダーのフィルターボタンの追加を行いました。

見た目の作成

App.jsx：ルートの設定

App.jsx

function App() {
  return (
    <Router>
      <Box pb="60px">
        {" "}
        {/* 下のメニューが被らないように余白を作る */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/analysis" element={<Analysis />} />
          <Route path="/calendar" element={<Calendar />} />
        </Routes>
      </Box>
      <Navbar />
    </Router>
  );
}

Navbar.jsx：画面下のボタン（今は必要最低限、css部分はAI）

Navbar.jsx

const Navbar = () => {
  return (
    <Flex
      as="nav"
      fixed="bottom"
      position="fixed"
      bottom="0"
      width="100%"
      bg="white"
      borderTop="1px solid #eee"
      justify="space-around"
      py="5"
    >
      <Link to="/">
        <Text fontSize="ms">一覧</Text>
      </Link>
      <Link to="/analysis">
        <Text fontSize="ms">分析</Text>
      </Link>
      <Link to="/calendar">
        <Text fontSize="ms">カレンダー</Text>
      </Link>
    </Flex>
  );
};

Home.jsx：ホーム画面全体（HeaderとCardCompを扱ってる）
→ここが今回の肝。フィルター機能。これについては後ほど記述。見た目はreturn以降の部分

Home.jsx

const Home = () => {
  // ダミーデータ
  const data = [
    { id: 1, name: "ワイヤレスイヤホン", price: "5,800", category: "Amazon", date: "2026/01/29" },
    { id: 2, name: "冬物ニット", price: "3,200", category: "SHEIN", date: "2026/01/28" },
    { id: 3, name: "スマホケース", price: "1,500", category: "Amazon", date: "2026/01/27" },
  ];
  // 「現在選択中のカテゴリ」を管理するState（初期値は "全て"）
  const [selectedCategory, setSelectedCategory] = useState("全て");

  // カテゴリだけを取ってきて配列で管理
  const categories = ["全て", ...new Set(data.map((item) => item.category))];

  // 表示するデータを選定するところ
  // 選択中のカテゴリが「全て」ならdataを、それ以外ならdataの中のカテゴリと一致するものだけ取り出す
  const filteredData =
    selectedCategory === "全て"
      ? data
      : data.filter((item) => item.category === selectedCategory);

  return (
    <Box minH="100vh" bg="gray.50">
      {/* Headerに、現在の選択状態と、カテゴリ配列、「今、どのカテゴリが選ばれているか」を書き換えるための専用リモコンを渡す */}
      <Header
        categories={categories}
        selectedCategory={selectedCategory}
        setSelectedCategory={setSelectedCategory}
      />

      <Box p={4} pb="100px">
        {/* 選定されたデータの中身を1つずつ取り出してCardCompに渡す */}
        {filteredData.map((item) => (
          <CardComp
            key={item.id}
            name={item.name}
            price={item.price}
            category={item.category}
            date={item.date}
          />
        ))}
      </Box>

      {/*「＋」ボタン */}
      <IconButton
        icon={<AddIcon />}
        colorScheme="orange"
        isRound
        size="lg"
        position="fixed"
        bottom="100px"
        right="20px"
        shadow="2xl"
        onClick={() => alert("追加機能はこれから実装！")}
      />
    </Box>
  );
};

Header.jsx

Header.jsx

const Header = ({ categories, selectedCategory, setSelectedCategory }) => {
  return (
    <VStack
      p={4}
      borderBottom="1px solid #eee"
      spacing={3}
      bg="white"
      position="sticky"
      top="0"
      zIndex="10"
    >
      <Text fontSize="xl" fontWeight="bold">
        Recap
      </Text>
      <HStack spacing={2} overflowX="auto" width="100%" py={1}>
        {/* 受け取ったカテゴリ一覧から1つずつ取り出す */}
        {categories.map((cat) => (
          <Button
            key={cat}
            size="sm"
            borderRadius="full"
            // 選ばれているカテゴリなら色を塗りつぶし(solid)、そうでなければ枠線(outline)
            variant={selectedCategory === cat ? "solid" : "outline"}
            colorScheme="orange"
            // クリックされたら、HomeのselectedCategoryを更新する
            onClick={() => setSelectedCategory(cat)}
          >
            {cat}
          </Button>
        ))}
      </HStack>
    </VStack>
  );
};

CardComp.jsx

CardComp.jsx

const CardComp = ({ name, price, category, date }) => {
  return (
    <Box p={4}>
      <Box bg="orange.100" p={5} borderRadius="lg" shadow="md" mt={4}>
        <Flex align="center">
          <VStack align="start" spacing={0}>
            <Text fontWeight="bold">{name}</Text>
            <Text fontSize="sm" color="gray.600">
              {category}
            </Text>
          </VStack>

          <Spacer />

          <VStack align="end" spacing={0}>
            <Text fontWeight="bold">¥{price}</Text>
            <Text fontSize="xs">{date}</Text>
          </VStack>
        </Flex>
      </Box>
    </Box>
  );
};

フィルタリング機能

やりたいこと

画像のようにカテゴリごとにヘッダーにボタンを作成
ボタンを押したら、そのカテゴリの履歴だけを表示する

1.カテゴリごとにヘッダーにボタンを作成

Home.jsx

  // カテゴリだけを取ってきて配列で管理
  const categories = ["全て", ...new Set(data.map((item) => item.category))];

Setは、重複する値は格納しない。
これを活用して、ダミーデータdataをマップしてカテゴリを1つずつみていけば、重複せずにカテゴリを全て取り出すことができる。

あとは、このカテゴリの配列をHeaderコンポーネントに渡してあげれば良い。

Header.jsx

      <HStack spacing={2} overflowX="auto" width="100%" py={1}>
        {/* 受け取ったカテゴリ一覧から1つずつ取り出す */}
        {categories.map((cat) => (
          <Button>{cat}</Button>
        ))}
      </HStack>

受け取ったカテゴリ一覧をmapで1つずつみて、Buttonをそれぞれ生成すればOK。

2.ボタンを押したら、そのカテゴリの履歴だけを表示する（フィルタリング）

Home.jsx

  // 「現在選択中のカテゴリ」を管理するState（初期値は "全て"）
  const [selectedCategory, setSelectedCategory] = useState("全て");

  // 表示するデータを選定するところ
  const filteredData =
    selectedCategory === "全て"
      ? data
      : data.filter((item) => item.category === selectedCategory);

まずは、Home.jsxに選択されているカテゴリを管理するStateを用意
filteredData：選択中のカテゴリが「全て」ならdataを、それ以外ならdataの中のカテゴリと一致するものだけ取り出す。（selectedCategoryがAmazonなら、データの中のcategoryがAmazonのものだけ取り出す。）

Home.jsx

        {filteredData.map((item) => (
          <CardComp
            key={item.id}
            name={item.name}
            price={item.price}
            category={item.category}
            date={item.date}
          />
        ))}

そして、CardCompにはfilteredDataでフィルタリングしたデータを渡す。すると自動でフィルタリングされる！

Header.jsx

      <HStack spacing={2} overflowX="auto" width="100%" py={1}>
        {/* 受け取ったカテゴリ一覧から1つずつ取り出す */}
        {categories.map((cat) => (
          <Button
            key={cat}
            size="sm"
            borderRadius="full"
            // 選ばれているカテゴリなら色を塗りつぶし(solid)、そうでなければ枠線(outline)
            variant={selectedCategory === cat ? "solid" : "outline"}
            colorScheme="orange"
            // クリックされたら、HomeのselectedCategoryを更新する
            onClick={() => setSelectedCategory(cat)}
          >
            {cat}
          </Button>
        ))}
      </HStack>

そして、

variant={selectedCategory === cat ? "solid" : "outline"}で選択されているボタンの見た目を変える。
onClick={() => setSelectedCategory(cat)}でクリックされたら選択中Stateを変更する。

以上です！ご覧頂きありがとうございました！