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

1. Reactのおさらい
執筆者：トビウオ

2. 目次
• Reactとは
• Reactの設計思想
• Reactでの書き方
• 「状態」をどう定義するか
• なぜuseStateなのか？

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

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

5. Reactの設計思想
• 「画面中、描画を変えないといけない場所だけ
再描画」するため、「仮想DOM」という仕組み
が組み込まれている
• これにより、動的なWebページもスムーズに動
かすことができる

6. Reactでの書き方
• コンポーネントは、JSX (HTML風の記法で書かれたオブジェクト)
を返すものとして定義されている
export default class OutputTag extends React.Component
<{list: string[]}> {
public render() {
return (
<h1>TODO一覧：</h1>
<ul>{this.props.list.map((w,i)
=>(<li key={i}>{w}</li>))}</ul>
);
}
}

7. Reactでの書き方
• 先ほどのはクラスを用いた古い書き方で、関数として表現する新し
い書き方だと次のようになる
export const OutputTag = ({list}:{list: string[]}) => {
return <>
<h1>TODO一覧：</h1>
<ul>{list.map((w,i)
=>(<li key={i}>{w}</li>))}</ul>
</>;
}

8. Reactでの書き方
export const OutputTag = ({list}:{list: string[]}) => {
return <>
<h1>TODO一覧：</h1>
<ul>{list.map((w,i)
=>(<li key={i}>{w}</li>))}</ul>
</>;
}
属性の定義
タグ名の定義
どのようなHTMLを返すか？

9. Reactでの書き方
export const OutputTag = ({list}:{list: string[]}) => {
return <>
<h1>TODO一覧：</h1>
<ul>{list.map((w,i)
=>(<li key={i}>{w}</li>))}</ul>
</>;
}
<OutputTag list={dataList}/>
使用方法
描画したもの

10. Reactでの書き方
• Reactには「ReactDOM.render」というメソッドがあり、これを指
定したHTMLタグに対して「適用」することで、画面を描画する
ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
).render(
<React.StrictMode>
<App />
</React.StrictMode>
);

11. Reactでの書き方
• 下をざっくり翻訳すると「id=“root”であるHTMLタグに対し、<App
/>タグ（これもReactコンポーネント）の情報を描画する」
ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
).render(
<React.StrictMode>
<App />
</React.StrictMode>
);

12. 「状態」をどう定義するか
• コンポーネントを関数として記述する、新しい書き方においては、
React Hooksと呼ばれる関数を別途使用する
export const CountButton = ()=> {
const [count, setCount] = useState(0);
const add = () => setCount(count + 1);
return <button onClick={add}>
Count: {count}
</button>;
}

13. 「状態」をどう定義するか
• React Hooksの一つに「useState」がある。この関数は、「変数」
と「変数を変更するための関数」を返す
export const CountButton = ()=> {
const [count, setCount] = useState(0);
const add = () => setCount(count + 1);
return <button onClick={add}>
Count: {count}
</button>;
}

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

15. なぜuseStateなのか？
• 普通の変数(「let count = 0;」など)だと、値を変更しても、画面が再
描画されない
• useStateを使うことで、「値が変更されたら画面が追従してくれる
変数」を提供できる。その変数を、データ読み込みやユーザーの入
力などで変化させ、画面を再描画させるのがセオリー