この記事の目的
Next.js × Tailwindでハンバーガーメニューを作りながら useState の理解を深める。
今回できるもの
useState とは
useState とはコンポーネント内で 状態(state)を管理するための React Hooks の機能の一つです。
JavaScript では変数を使って値を保存しますが、React では UI と状態を連動させるために「State」という仕組みを使います。
React の関数コンポーネントでは、useState を使って状態を管理します。
詳しくは React 公式ドキュメントへ
今回実装するコード
"use client";
import React, { useState } from "react";
import Link from "next/link";
export default function Nav() {
const [isOpen, setIsOpen] = useState(false);
const navToggle = () => {
setIsOpen(!isOpen);
};
const navClose = () => {
setIsOpen(false);
};
return (
<div>
<button
onClick={navToggle}
className={`bg-black text-white text-2xl w-10 h-10 fixed top-3 right-3 rounded-lg z-2 transition-all duration-300 transform`}
>
{isOpen ? "×" : "≡"}
</button>
<nav
className={`bg-gray-300 h-full w-50 fixed top-0 right-0 z-1 transform transition-transform duration-300 ease-in-out flex flex-col justify-center items-center ${
isOpen
? "translate-x-0"
: "translate-x-full flex flex-col justify-center items-center"
}`}
>
<ul className="flex flex-col justify-center items-center">
<li className="pr-5">
<Link onClick={navClose} href="/">
Home
</Link>
</li>
<li className="pr-5">
<Link onClick={navClose} href="/about">
About
</Link>
</li>
<li className="pr-5">
<Link onClick={navClose} href="/blog">
Blog
</Link>
</li>
</ul>
</nav>
</div>
);
}
コードの解説
① useState でメニューの開閉を管理
まずメニューが開いてるか閉じてるかという状態を作ります。
useState では 状態を更新するための関数に set をつけて書きます。
現在の状態が isOpen という変数 更新後が setIsOpen になります。
const [ isOpen, setIsOpen ] = useState(false);
日本語で書くとこんな感じになります。
const [現在の状態を表す変数, 状態を更新するための変数] = useState(初期の状態);
今回の場合は初期値は false なので最初はメニューが閉じている。
② ボタンでメニューを開閉する処理を作る
今のままだと特に何も起きないので ボタンを押したらメニューが開閉する仕組みを作ります。
navToggle という関数を作り 先程の state を反転させるという処理を加えます。
const navToggle = () => {
setIsOpen(!isOpen);
};
setIsOpen に !isOpen（今の反対の値）を渡しているので
false なら true true なら false になります。
メニューが閉じてるなら開き 開いてるなら閉じる
押したら今の逆になると考えればいいです。
③ ボタンで三項演算子を使って管理する
② で作った関数をボタンで動かし三項演算子を使ってメニューの開閉を管理します。
<button onClick={navToggle}>
{isOpen ? "×" : "≡"}
</button>
ここで使っている {isOpen ? "×" : "≡"} は三項演算子です。
JavaScript では「条件 ? 真の場合 : 偽の場合」という形で使います。
つまり、このコードはこういう意味になります 👇
• isOpen が true のとき → "×" を表示
• isOpen が false のとき → "≡" を表示
初期値は false なので閉じている。
<button onClick={navToggle}>
{isOpen ? "true" : "false"}
</button>
④ css を使って動的に切り替えてメニューをスライド表示
③ でも使った三項演算子を使って実際に css を当ててメニューを実装します。
<nav
className={`bg-gray-300 h-full w-50 fixed top-0 right-0 z-1 transform transition-transform duration-300 ease-in-out flex flex-col justify-center items-center ${
isOpen
? "translate-x-0"
: "translate-x-full flex flex-col justify-center items-center"
}`}
>
</nav>
ここでの三項演算子の役割
isOpen ? "translate-x-0" : "translate-x-full ..."
isOpen の状態によって、
メニューを 画面内に表示するのか、外に隠すのか を判断しています。
• isOpen が true → "translate-x-0" → メニューを右からスライドイン
• isOpen が false → "translate-x-full" → メニューを右側に隠す
つまり、③ でやった「× or ≡」の切り替えと同じ考え方で、
ここでは 当てる css を切り替えてメニューの開閉を行ってるということです。
最後に
今回は、useState を使って
ハンバーガーメニューの開閉を管理する仕組み を作りました。
使っているのはたった数行のコードですが、
React の「状態管理」と「条件分岐の考え方」がしっかり身につく内容です。
この方法はハンバーガーメニュー以外にも、
• モーダルウィンドウの表示・非表示
• タブ切り替え
• アコーディオン（FAQ など）
など、いろいろな 場面 で応用できる ので、ぜひ他の場面でも試してみてください。
小さなコンポーネントでも、
useState と三項演算子を使いこなせるようになると
動きのあるインタラクティブなサイトがどんどん作れるようになります 💡
Discussion