前書き
以前、個人アプリを開発した際にルーレット作ることがあったので今回は次回使う時用のメモとルーレットを作りたい人へのコード共有を兼ねて記事を作成します！
setIntervalを使えばできそうだなぁと思って実装したら副作用のせいでうまくできなかったのを覚えています。。笑
JavaScriptではルーレットを作れるけど、Reactでは副作用のせいでうまくできない。。！
という僕と同じ状況の方がいましたら是非ご覧ください
実装イメージは以下の通りです。
注意点
今回のコードはルーレットを動かす記述しか書いてありません。
そのため、実装イメージのようなスタイリングやアニメーションの記述は省かれております。
スタイリングやアニメーションは人によって異なると思いますので適宜お好みであててください。
コード
import { useState, useEffect, useCallback, memo } from "react";
export const Roulette = memo(() => {
const [start, setStart] = useState(false);
const [index, setIndex] = useState(0);
const rouletteContents = [
"カレー",
"パスタ",
"唐揚げ",
"天ぷら",
"中華",
"ハンバーグ",
"うどん",
"肉じゃが"
];
//ボタンの文言を変更する処理
const startRoulette = useCallback(() => {
setStart(!start);
}, [start]);
//ルーレットを回す処理
useEffect(() => {
if (start) {
const interval = setInterval(() => {
setIndex((oldIndex) => {
if (oldIndex < rouletteContents.length - 1) return oldIndex + 1;
return 0;
});
}, 50);//ルーレットの中身を切り替える速度
return () => clearInterval(interval);
} else if (!start) {
return () => clearInterval();
}
}, [start]);
return (
<>
<div>
<p>今日のメニューは・・・</p>
<p>{rouletteContents[index]}</p>
</div>
<button type="button" onClick={startRoulette}>
{start ? "ストップ" : "スタート"}
</button>
</>
);
});
最後に
参考になりましたでしょうか？
この他にもQiitaやTwitterでは文系大学生の僕がプログラミングについて発信してますのでフォローしていただけると嬉しいです！