環境
MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0
まとめ
あるstate(ここではnum)を受け取り、
別のstate(ここではisShowFace)を更新関数(ここではsetIsShowFace)を用いて更新する。
ソースコードの前に
フォルダ構成
folda_structure
├── public/
│ ├── index.html
└── src/
│ ├── index.js(index.jsx)
│ └── App.js(App.jsx)
index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
index.js
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
ソースコード（App.js）
解説
-
num + 1で、引数numを1つずつ増やす -
useState(false)で、isShowFaceの初期値をfalseに設定する -
||で、引数(state)isShowFaceがfalseの時にsetIsShowFace(true)でisShowFaceをtrueにする -
&&で、引数(state)isShowFaceがtrueの時にsetIsShowFace(false)でisShowFaceをfalseにする -
&&で、引数(state)isShowFaceがtrueの時に＼(^o^)／ｵﾜﾀが表示される
App.jsx
import { useState } from "react";
export const App = () => {
const [num, setNum] = useState(0);
const onClickCountUp = () => {
setNum(num + 1);
};
const [isShowFace, setIsShowFace] = useState(false);
if (num > 0) {
if (num % 3 === 0) {
isShowFace || setIsShowFace(true);
} else {
isShowFace && setIsShowFace(false);
}
};
return (
<>
<button onclick={onClickCountUp}>カウントアップ</button>
<p>{num}</p>
{isShowFace && <p>＼(^o^)／ｵﾜﾀ</p>}
</>
);
};
Tips
-
||: 左側がfalseの場合に右側実行 = 左側がtrueの場合は何もしない -
&&: 右側がtrueの場合に右側実行 = 左側がfalseの場合は何もしない
処理
numが0から1にカウントアップされる時
-
numは初期値の0、isShowFaceは初期値のfalse - カウントアップ
buttonを押す -
numが1になる -
1は3で割り切れないので、elseに入る -
isShowFaceの初期値falseなので、何もしない -
＼(^o^)／ｵﾜﾀは表示されない
numが2から3にカウントアップされる時
-
numは2、isShowFaceはfalse - カウントアップ
buttonを押す -
numが3になる -
3は3で割り切れるので、if文の条件の最初の式に入る -
isShowFaceのfalseなので、setIsShowFace(true)でisShowFaceをtrueにする -
＼(^o^)／ｵﾜﾀが表示される
numが3から4にカウントアップされる時
-
numは3、isShowFaceはtrue - カウントアップ
buttonを押す -
numが4になる -
4は3で割り切れないので、elseに入る -
isShowFaceのtrueなので、setIsShowFace(false)でisShowFaceをfalseにする -
＼(^o^)／ｵﾜﾀは表示されない
イメージ
