2022/12/23の勉強会で発表されたものです。

1. Reactのおさらい②
執筆者：トビウオ
〜状態 (state) の管理について〜

2. • 前回のあらすじ
• 状態(state)とは
• 状態管理の必要性
• Web標準における状態管理
• Reactにおける状態管理
• 「状態のバケツリレー」
目次

3. 前回のあらすじ
• 三大Webフロントエンドフレームワークの一角、React
npm trendsより取得。vueが跳ねてるのはvue 3が出てきたから

4. • 各要素をコンポーネント
に分割し、その粒度を積
み上げることでWebペー
ジを構成する
• 再利用性が高く、応用力
が高いUI構築が可能
入力部分
出力部分
画面全体
前回のあらすじ

5. 前回のあらすじ
export const OutputTag = ({list}:{list: string[]}) => {
return <>
<h1>TODO一覧：</h1>
<ul>{list.map((w,i)
=>(<li key={i}>{w}</li>))}</ul>
</>;
}
<OutputTag list={dataList}/>
Componentの使用方法
描画したもの
Componentの定義

6. 前回のあらすじ
export const OutputTag = ({list}:{list: string[]}) => {
return <>
<h1>TODO一覧：</h1>
<ul>{list.map((w,i)
=>(<li key={i}>{w}</li>))}</ul>
</>;
}
属性の定義
タグ名の定義
どのようなHTMLを返すか？
Componentの使用方法

7. state(状態) Web
表示
従来のような
サーバーサイドレンダリングの場合
サーバー
クライアント HTTP
リクエスト
HTTP
レスポンス
状態(state)とは

8. 状態(state)とは
表示
state(状態)
Web
state(状態)
サーバー
クライアント
HTTP
レスポンス
HTTP
リクエスト
シングルページアプリケーションの場合

9. 状態管理の必要性
• Webサイトではしばしば「状態」を問われる
• 通販サイトならカートの中
• ログインするサイトならアカウントの状態
• ゲームならプレイ中の状況（持ち物など）
• ReactなどSPAだと、クライアントが保持するこ
とが多い

10. 管理方法 難易度 リロード時 自由度
メモリ上に保持 簡単 消える 高い
URL上 簡単 消えない 低い
Cookie 難しい 消えない 低い
localStorage 普通 消えない 普通
IndexedDB 難しい 消えない 高い
Reactではこちらを
多用する
Web標準における状態管理

11. Reactにおける状態管理
export const CountButton = () => {
const [count, setCount] = useState(0);
const add = () => setCount(count + 1);
return <button onClick={add}>
Count: {count}
</button>;
}
Componentの定義の中で、「useState」という関数が使用できる

12. Reactにおける状態管理
export const CountButton = () => {
const [count, setCount] = useState(0);
const add = () => setCount(count + 1);
return <button onClick={add}>
Count: {count}
</button>;
}
「const [変数名, 変数を変更するための関数] = useState(初期値);」
といった書式で使う

13. • 「変数」はそのまま使う(読み込み専用)。「変数を変更するための
関数」の引数に値をセットすると、「変数」が書き換わる
Reactにおける状態管理
export const CountButton = () => {
const [count, setCount] = useState(0);
const add = () => setCount(count + 1);
return <button onClick={add}>
Count: {count}
</button>;
}

14. Reactにおける状態管理
export const CountButton = () => {
const [count, setCount] = useState(0);
const add = () => setCount(count + 1);
return <button onClick={add}>
Count: {count}
</button>;
}

15. Reactにおける状態管理
• 数字以外にも、任意の型で用意できる
• const [x, setX] = useState(‘foobar’);
• const [y, setY] = useState({ a: 3, b: ‘z’ });
• object型で用意した場合も、全部を置き換える必
要がある
• 「setY({ a: 4, b: ‘w’ });」などと記述する

16. const CountButton = () => {
const [count, setCount] = useState(0);
return <LabelButton label={`Count: ${count}`}>;
}
count LabelButton = ({label}:{label: string}) => {
return <button>{label}</button>
}
「状態」のバケツリレー
この場合、CountButtonからLabelButtonに、stateの情報が渡されている

17. const App = ()=> {
return <MainWindow>
<Frame1>
<Form1>
<Foo />
</Form1>
<Form2>
<Bar />
</Form2>
</Frame1>
</MainWindow>;
}
「状態」のバケツリレー
• 左のように階層が嵩むと、
stateを渡すための属性の
ため、定義がどんどん肥大
化しがち

18. 「状態」のバケツリレー
• この問題を解決す
る技術はあるが、
説明は別の機会に
……