🔰【React】setTimeout()の使い方

1. まず、setTimeoutって何？

setTimeoutは 「指定した時間が経った後に、一度だけ処理を実行する」 関数です。
JavaScriptに元々ある機能で、Reactでも同じように使えます。

例：

setTimeout(() => {
  console.log("3秒後にこれが表示されます！");
}, 3000);

3000 は「3秒（3000ミリ秒）」を意味します。

3秒後に console.log の処理が動きます。

2. Reactで使うときの注意点

Reactは「コンポーネント」が何度も再描画（レンダー）されるので、setTimeoutを使うときは少し工夫が必要です。

基本的な使い方（useEffectと一緒に使う）

import { useEffect, useState } from "react";

function App() {
  const [message, setMessage] = useState("待機中...");

  useEffect(() => {
    const timer = setTimeout(() => {
      setMessage("3秒経ちました！");
    }, 3000);

    // クリーンアップ（不要なタイマーを消す）
    return () => clearTimeout(timer);
  }, []);

  return <h1>{message}</h1>;
}

3. ポイント解説

useEffect の中に setTimeout を書く
→ コンポーネントが表示されたときに一度だけ実行されます。

clearTimeout(timer) を return に書く
→ コンポーネントが消えるとき、無駄なタイマーを解除できます（メモリの無駄を防ぐ）。

4. よくある使い道

表示を少し遅らせる

例：ローディング画面を2秒だけ表示してから本画面を見せる

通知メッセージを数秒で消す

例：「保存しました！」を3秒後に非表示にする

アニメーションや演出

例：文字を順番に表示する（タイプライター効果）

まとめ

setTimeout =「〇秒後に一度だけ動く」

ReactではuseEffectと一緒に使うのが安全

忘れずにclearTimeoutも書くと安心

サンプルコード：3秒でメッセージを非表示にする

import { useState, useEffect } from "react";

function App() {
  const [showMessage, setShowMessage] = useState(true);

  useEffect(() => {
    // 3秒後にメッセージを消す
    const timer = setTimeout(() => {
      setShowMessage(false);
    }, 3000);

    // クリーンアップ（コンポーネントが消えたらタイマーも消す）
    return () => clearTimeout(timer);
  }, []);

  return (
    <div>
      {showMessage ? <p>保存しました！</p> : <p>（メッセージは消えました）</p>}
    </div>
  );
}

export default App;

動き

最初は「保存しました！」と表示される。

3秒後、自動的に「（メッセージは消えました）」に変わる。

これを発展させると「通知機能」「トーストメッセージ（右下にポップアップするやつ）」みたいな仕組みが作れます 👍

サンプルコード：ボタンを押したら3秒で消える通知

import { useState, useEffect } from "react";

function App() {
  const [showMessage, setShowMessage] = useState(false);

  useEffect(() => {
    let timer;
    if (showMessage) {
      // メッセージが表示されたら、3秒後に非表示にする
      timer = setTimeout(() => {
        setShowMessage(false);
      }, 3000);
    }

    // クリーンアップ
    return () => clearTimeout(timer);
  }, [showMessage]); // showMessageが変わったときに動く

  return (
    <div>
      <button onClick={() => setShowMessage(true)}>通知を表示</button>
      {showMessage && <p>✅ 保存しました！</p>}
    </div>
  );
}

export default App;

動き

最初は何も表示されていない。

ボタンを押すと「✅ 保存しました！」が出る。

3秒後、自動的にメッセージが消える。

では、Reactで「右下からポップアップして、3秒後に消えるトースト通知」のサンプルを作ってみましょう。

サンプルコード：右下に出るトースト通知

import { useState, useEffect } from "react";

function Toast({ message, onClose }) {
  useEffect(() => {
    // 3秒後に閉じる
    const timer = setTimeout(() => {
      onClose();
    }, 3000);

    // クリーンアップ
    return () => clearTimeout(timer);
  }, [onClose]);

  return (
    <div style={styles.toast}>
      {message}
    </div>
  );
}

function App() {
  const [showToast, setShowToast] = useState(false);

  return (
    <div>
      <button onClick={() => setShowToast(true)}>通知を表示</button>

      {showToast && (
        <Toast
          message="✅ 保存しました！"
          onClose={() => setShowToast(false)}
        />
      )}
    </div>
  );
}

// CSSをオブジェクトで定義
const styles = {
  toast: {
    position: "fixed",
    bottom: "20px",
    right: "20px",
    background: "#333",
    color: "#fff",
    padding: "10px 20px",
    borderRadius: "5px",
    boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
  },
};

export default App;

動き

ボタンを押すと、右下に黒い背景のトーストがポップアップする

3秒後、自動的に消える