このテーマのゴール
ここで身につけたいのは、「ボタンを押すとテキストが表示されたり消えたりする」コンポーネントを自分で作れるようになることです。
この小さな動きの中に、React の重要ポイントがぎゅっと詰まっています。
- 状態（state）で「表示するかどうか」を管理する
- ボタンのクリックイベントで state を切り替える
- state の変化に応じて JSX の表示を変える
この 3 つが理解できれば、モーダル、アコーディオン、FAQ の開閉など、実用的な UI が作れるようになります。
完成イメージのコード
シンプルな「表示／非表示」コンポーネント
"use client";
import { useState } from "react";
export function ToggleText() {
const [isVisible, setIsVisible] = useState(false);
function handleToggle() {
setIsVisible(!isVisible);
}
return (
<div style={{ padding: "16px", border: "1px solid #e5e7eb", borderRadius: "8px" }}>
<button
onClick={handleToggle}
style={{
padding: "6px 12px",
borderRadius: "9999px",
border: "none",
backgroundColor: "#3b82f6",
color: "white",
cursor: "pointer",
marginBottom: "12px",
}}
>
表示を切り替える
</button>
{isVisible && (
<p style={{ fontSize: "14px", color: "#374151" }}>
このテキストは「表示中」です。
</p>
)}
</div>
);
}
このコンポーネントをページで使うとこうなります。
import { ToggleText } from "./ToggleText";
export default function Page() {
return (
<main style={{ padding: "24px" }}>
<h1>表示／非表示コンポーネントの例</h1>
<ToggleText />
</main>
);
}
useState で「表示するかどうか」を管理する
状態（state）とは何か
今回のキモはこの行です。
const [isVisible, setIsVisible] = useState(false);
ここでやっていることを丁寧に説明すると、
isVisibleは「今テキストが表示されているかどうか」を表す値setIsVisibleは「isVisible を変更するための関数」useState(false)は「最初は非表示（false）からスタートする」という意味
つまり、
- 最初は
isVisible = false - ボタンを押したら
setIsVisible(true)に変わる - もう一度押したら
setIsVisible(false)に戻る
という「ON/OFF のスイッチ」を React の state で作っているわけです。
JSX の中で state を使って表示を切り替える
この部分がとても重要です。
{isVisible && <p>このテキストは「表示中」です。</p>}
これは「条件付きレンダリング」と呼ばれる書き方で、
isVisibleが true →<p>...</p>が表示されるisVisibleが false → 何も表示されない
という意味になります。
React は、&& の左側が false のとき、右側を描画しません。
これを使うと、「表示／非表示」の切り替えがとてもシンプルに書けます。
ボタンのクリックで state を切り替える
onClick とイベントハンドラ
ボタンの部分を見てみましょう。
<button onClick={handleToggle}>表示を切り替える</button>
onClick={handleToggle} は、
「このボタンが押されたら handleToggle を実行してね」
という意味です。
その handleToggle の中身がこれ。
function handleToggle() {
setIsVisible(!isVisible);
}
ここでやっているのは、
isVisibleが true なら false に- false なら true に
切り替えるだけです。
つまり、ボタンを押すたびに ON/OFF が反転する仕組みになっています。
「イベント → state 更新 → 再描画」の流れ
React の UI はこの流れで動きます。
ユーザーがボタンを押す
→ onClick が発火
→ setIsVisible が呼ばれる
→ isVisible の値が変わる
→ React がコンポーネントを再描画
→ isVisible の値に応じて表示が変わる
この「state が変わると画面が自動で更新される」という仕組みが、
React の最大の特徴です。
もう一歩：ボタンの文言も切り替える
「表示する／隠す」を分かりやすくする
少しだけレベルを上げて、ボタンの文言も切り替えてみましょう。
<button onClick={handleToggle}>
{isVisible ? "隠す" : "表示する"}
</button>
こうすると、
- 非表示のとき → 「表示する」
- 表示中のとき → 「隠す」
と、ユーザーにとって分かりやすい UI になります。
まとめ：このコンポーネントでつかんでほしいこと
この「表示／非表示切り替えコンポーネント」で、絶対に押さえてほしいのは次の感覚です。
state は「変わる値」を覚えておくための仕組み
onClick で「いつ state を変えるか」を決める
state が変わると React が自動で画面を描き直す
条件付きレンダリングで「表示／非表示」を簡単に切り替えられる
ここが腑に落ちると、
- アコーディオン（開閉 UI）
- FAQ の「答えを表示」ボタン
- モーダルの表示／非表示
- メニューの開閉
など、実用的な UI がどんどん作れるようになります。
もしよければ、このコンポーネントに「フェードイン／フェードアウト風のアニメーション」を足す方法も紹介できます。
次のステップとしてとても良い練習になります。