【React、ChakuraUI】とりあえずそういうことかとなるVstck、Hstack

🏗 はじめに

Reactでタスク管理アプリを作る際に、
ChakraUIのstackを使ってUIがすぐ整えられて感動を覚えたので共有したく記事にしました。

Chakra UI を使うとレイアウトを簡単に構築できます。
特に VStack と HStack を使うことで、要素を縦・横に直感的に配置できます。

本記事では VStack と HStack の違いを、実際のコードと画像で比較しながら見ていきます。

（細かい説明は省略します！仕組みや詳細気になることは公式ドキュメントや他記事を参考にしていただけたらと思います）

---

📌 コード例

以下のコードの Stack を VStack にした場合と HStack にした場合のレイアウトを比較してみます。

1. VStack の場合（縦並び）

<VStack spacing={4} align="stretch">
  <Button colorScheme="blue">ボタン1</Button>
  <Button colorScheme="red">ボタン2</Button>
  <Button colorScheme="green">ボタン3</Button>
</VStack>

2. HStack の場合（横並び）

<HStack spacing={4}>
  <Button colorScheme="blue">ボタン1</Button>
  <Button colorScheme="red">ボタン2</Button>
  <Button colorScheme="green">ボタン3</Button>
</HStack>

---

🔍 VStack あり vs なし の比較

僕が作成中のタスク管理アプリにて途中段階ですが
Vstackありなし違いを見ていきましょう。

1. VStack あり

<VStack spacing={4} align="stretch" p={4}>
  <h1 data-testid="title">タスク管理アプリ</h1>
  <Button onClick={openAddModal}>タスクを登録する<IoAddCircleSharp /></Button>
  <TableContainer>
    <Table variant="simple" data-testid="table">
      <TableCaption>タスクリスト</TableCaption>
      <Thead>
        <Tr>
          <Th>タスク名</Th>
          <Th>かかる見込時間</Th>
        </Tr>
      </Thead>
      <Tbody>
        {todos.map((todo) => (
          <Tr key={todo.id}>
            <Td>{todo.title}</Td>
            <Td>{todo.time}</Td>
          </Tr>
        ))}
      </Tbody>
    </Table>
  </TableContainer>
</VStack>

2. VStack なし（フラット配置）

<div style={{ padding: "16px" }}>
  <h1 data-testid="title">タスク管理アプリ</h1>
  <Button onClick={openAddModal}>タスクを登録する<IoAddCircleSharp /></Button>
  <TableContainer>
    <Table variant="simple" data-testid="table">
      <TableCaption>タスクリスト</TableCaption>
      <Thead>
        <Tr>
          <Th>タスク名</Th>
          <Th>かかる見込時間</Th>
        </Tr>
      </Thead>
      <Tbody>
        {todos.map((todo) => (
          <Tr key={todo.id}>
            <Td>{todo.title}</Td>
            <Td>{todo.time}</Td>
          </Tr>
        ))}
      </Tbody>
    </Table>
  </TableContainer>
</div>

この例だと小さな差ですが、
子要素全体をVstackで囲うだけで要素感覚や幅を良い感じにしてくれます。

---

💡 違いを体感しよう

• VStack あり → 縦方向に統一感のあるレイアウト
• VStack なし → 要素がバラバラに配置される可能性
• spacing を調整することで、間隔を簡単に設定可能

実際にコードを書いて動かしてみると、理解が深まるはず！

---

🎯 まとめ

Chakra UI の VStack と HStack を使えば、
要素を 縦 に並べるか 横 に並べるかをシンプルに制御できます。

また、実際のアプリで VStack を使うことで、
レイアウトが整理され、デザインの統一感 も得られます。

ぜひ、自分のプロジェクトで試してみてください！🔥