Reactの基本

## 最低限覚えておきたいことまとめ
最初に学んだ基本事項をアウトプットとして記事にします。
初学者のため、誤った表現や誤解を生む表現・不正確な理解などありましたらお知らせ頂けますと大変助かります。

### Reactのフォルダと雛形
##### 1\.publicフォルダ 
この中で大切なのはindex.htmlの以下の部分
`<div id="root"></div>`
JSでレンダリングした要素を差し込むための目印の役割をしている。


##### 2\.srcフォルダ
- index.js
idに`root`が付与されている`div`タグに対して`import`した`createRoot`によって…
(`id="root"`のDOMを取得する)
そうすることでReactの最初の画面が表示される。
この部分はお決まりみたいなものなので、深い部分は追々理解していくでOK。
ちなみに`createRoot`という単語があれば、それはReact18ということ。
```jsx:雛形
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`ファイルを`import`することで、`App.jsx`に記述した内容を表示できる。
`StrictMode`はデフォルトで設定されているもので、より厳密に記述するために機能する。
何かおかしな記述がある時にそれがわかるため、使用が推奨されている。

- App.jsx
index.js側で`import`し、App.jsx側では`export`することで、App.jsxの記述をindex.jsで関数として呼び出すことができる。

### jsx記法
Reactは画面の要素をJSの関数で表現する。
関数を作り、その関数を`render`メソッドの中で呼び出す流れ。
例 )
`App`という関数を作り、表示する要素を`return`で返す。
その関数を`render`の中で呼び出すことで画面に表示できる。
```jsx:index.jsのみで表示する場合
//上記雛形は省略
const App = () => {
    return <h1>お疲れ様です</h1>
};

root.render(
    <StrictMode>
        <App />
    </StrictMode>
);
```
この表示がjsx記法の基礎
ちなみにアロー関数の返却する中身が単一行のため、省略して
`const App = () => <h1>お疲れ様です</h1>;`
としてもOK。

- `return`以降が複数行となる場合の関数の書き方
この場合`return()`のように`()`をつければ良い。
ただ、`return`の中身は何かしらのタグで囲まれていないとエラーが表示される。
```jsx:エラーが表示される記述の例
const App = () => {
    return (
        <h1>お疲れ様です</h1>
        <p>いかがお過ごしでしょうか</p>
    ) 
};
```
表示されるエラーを見ると`jsx fragment`が必要ということがわかる。
そのため`return`の中身を`div`タグなどで囲ってあげる必要がある。
この時に使うものとしては
・`div`タグ
・`React.Fragument`タグ(`StrictMode`の`import`記述部分で少し追記が必要)
・`<>`タグ(上記のショートハンドで`import`の追記も必要ない)
基本は`div`か`<>`を用い、どちらを使うかは状況による。
```jsx:jsx flagmentを記述してエラーを解消
const App = () => {
    return (
        <>
          <h1>お疲れ様です</h1>
          <p>いかがお過ごしでしょうか</p>
        </>
    ) 
};
```

### コンポーネントの使い方(カンタン解説)
以下のコードのように一つの関数に表示されるすべての要素を書いてしまうと、かなり長くなるし従来のJSと同じになってしまう。
しかしReactなら、コンポーネントという単位に切り分けることで関数の使い回しができるため、スッキリした状態で表現できる。
```index.js
//上記雛形は省略
const App = () => {
    return (
         <>
          <h1>個人的に好きなお寿司のネタ</h1>
          <p>今回はこれは欠かせないという個人的な寿司ネタを紹介します</p>
          <ul>
            <li>マグロ</li>
            <li>サーモン</li>
            <li>はまち</li>
        　</ul>
         <p>書きすぎても邪魔なのでこのくらいにしておきます</p>
        </>
    )
};

root.render(
    <StrictMode>
        <App />
    </StrictMode>
);
```
以下から3つのステップで流れを説明
##### 1\.コンポーネント用のファイルを作成
関数単位でコンポーネントを作成すると良いので、先ほど作った関数App用にApp.jsxというファイルをsrcフォルダ配下に作成する。
そしてindex.jsに記述していた関数AppをApp.jsxに以降。
```App.jsx
const App = () => {
    return (
        <>
          <h1>お疲れ様です</h1>
          <p>いかがお過ごしでしょうか</p>
        </>
    ) 
};
```

##### 2\.`export`によって他のファイルからの参照を可能にする
しかしこの状態だと関数AppはApp.jsx内でしか呼び出せないため、他のファイルからも参照できるようにする必要がある。
そのために必要なのが`export`。
関数を定義する前に`export`と記述することで他のファイルからの参照が可能になる。
`export const App = () => {省略`

またindex.jsから関数Appの記述がなくなったため、以下の`App`の呼び出しができていない状態になる。
```index.js
root.render(
    <StrictMode>
        <App />　//関数Appがファイル内に存在しないためエラーとなる
    </StrictMode>
```

##### 3\.`import`によって他のファイルから関数Appを参照する
エラーを解消するためには、参照する側のファイルに`import`の記述が必要。
今回はindex.jsxからAppコンポーネントを参照したいので、index.jsxに`App`をimportする記述を追加。
`import { App } from "./App":`
こうすることで、`<App />`でコンポーネントを使用することが可能になる。

以下はAuto importの紹介。importの記述を自分で一から行うケースは少ないらしい。
```index.jsx
root.render(
    <StrictMode>
        <App />　//この部分を記述する際に表示されるAuto importを使えばラク
    </StrictMode>
```

##### コンポーネント化のまとめ
1, コンポーネント用のファイルを作成
基本的に関数単位で作成する
(拡張子`jsx`はReactのコンポーネント用拡張子)

2, コンポーネント側(参照元)ファイルに`export`を記述
他のファイルからの参照を可能にする

3, `import`によって他のファイルから関数Appを参照する
コンポーネントを使いたいファイルに記述することでコンポーネントを参照できる

### Reactのイベントの扱い方
ボタンをクリックした時や要素をホバーした時などの、イベントの扱い方を解説
今回はクリックイベントで考え、以下のコードを基本としていく。
```App.jsx
const App = () => {
    return (
        <>
          <h1>お疲れ様です</h1>
          <p>いかがお過ごしでしょうか</p>
          <button>ボタン</button>
        </>
    ) 
};
```

##### 1\.イベントやcssのスタイル名称はすべてcamelCase記述
Reactの関数名などjsに関数するものはパスカルケース記述なのに対し、イベントやcss関係はcamelCaseで記述していく。
今回考えるクリックイベントでは以下のようになる。
` <button onClick=>ボタン</button>`

##### 2\. ReactにJSの記述であると認識させるには`{}`が必要
以下の`=`以降の記述はJSの記述になるため、`{}`が必要となる。
` <button onClick={}>ボタン</button>`

##### 3\. `{}`内にアロー関数を記述
`onClick`をしたときにJSの関数を実行したいので`{}`内はアロー関数で記述する。
最終的に以下のようになる
`onClick`をした時、`alert`を表示させるクリックイベント
```App.jsx
const App = () => {
    return (
        <>
          <h1>お疲れ様です</h1>
          <p>いかがお過ごしでしょうか</p>
          <button onClick={ () => alert() }>ボタン</button>
        </>
    ) 
};
```

##### イベントを関数として切り出す場合
上記のような記述だと、イベントが増えたり関数内の処理が多くなると可読性が悪くなる。
そのため、イベントを関数として切り出すことによって可読性をあげる方法を解説。
まずは`return`直上に先ほどと同様にアロー関数で関数を定義。
```App.jsx
const App = () => {
    const onClickButton = () => alert();
    return (
        //省略
    ) 
};
```
そして`button`タグ内の`onClick`に関数名を記述し呼び出す。
そうすることで、`onClick`を実行した時に`onClickButton`という関数を実行するという処理を行うことができる。
```App.jsx
const App = () => {
    const onClickButton = () => alert();
    return (
        <>
          <h1>お疲れ様です</h1>
          <p>いかがお過ごしでしょうか</p>
          <button onClick={onClickButton}>ボタン</button>
        </>
    ) 
};
```

### Reactのスタイルの扱い方
スタイルを当てる時はJSのオブジェクト形式で記述する。
そのためイベントの時と同様に`{}`内にスタイルの中身を記述していく。
`<h1　style={}>お疲れ様です</h1>`

例えば`color: red`のスタイルを充てる場合は
`<h1　style={{ color: "red" }}>お疲れ様です</h1>`
のようになる。

ポイントは2つ
- `{}`はJSを認識するためと、オブジェクトの記述のために2つ必要
- `red`なども文字列のスタイルは`""`で括る必要がある

##### JSの変数としてスタイルを定義する方法
一つの要素に複数のスタイルが充てられる場合、イベントと同様に予め切り出して記述し、任意の場所で呼び出す方が可読性を向上できる。
以下のコードを見ると、`{}`が2重になっていた理由が分かりやすい。
`p`タグに`contentStyle`に記述したスタイルが適用される。
```App.jsx
const App = () => {
    const onClickButton = () => alert();
    const contentStyle = {
        color: "red",
        fonSize: "16px",
        fontWight: "bold",
        margin: 10, //数値はそのまま記述できる
    }
    return (
        <>
          <h1 style={{ color: "red" }}>お疲れ様です</h1>
          <p style={contentStyle}>いかがお過ごしでしょうか</p>
          <button onClick={onClickButton}>ボタン</button>
        </>
    ) 
};
```

### `props`の使い方
`props`とは、コンポーネントに対して渡す引数のようなもの。
例えば同じコンポーネントでも、通常は黒文字、別の場合は赤文字で表示するなど使い分けをしたい場合がある。
その時に2つコンポーネントを作ると大変なので、見た目や振る舞いが変わる部分には`props`を使ってコンポーネントに柔軟性を与える。
例えば、以下のように`p` タグの色だけ変化させたい場合に`props`を使うと、どれだけスッキリするかを考える。
2つの`p`タグがあり、`color`だけ違うのでそれぞれ変数を用意している場合。
```App.jsx
const App = () => {
    const onClickButton = () => alert();
    const contentStyleA = {
        color: "blue",
        fonSize: "16px",
    }
    const contentStyleB = {
        color: "green",
        fonSize: "16px",
    }
    return (
        <>
          <h1 style={{ color: "red" }}>お疲れ様です</h1>
          <p style={contentStyleA}>いかがお過ごしでしょうか</p>
          <p style={contentStyleB}>最近は筋トレにハマっています</p>
          <button onClick={onClickButton}>ボタン</button>
        </>
    ) 
};
```
##### 1\.コンポーネントを格納するフォルダを作成
`src`フォルダ配下に`components`というフォルダを作成。
コンポーネント分割する場合はこのように`components`フォルダを作り、その中にコンポーネントを格納していく場合が多い。

##### 2\. `components`フォルダにファイルを作成
今回は`p`タグをコンポーネント化したいので、`colorFulMessage.jsx`というコンポーネントファイルを作成。

##### 3\.　ファイルに関数コンポーネントを作成
まずは関数コンポーネントの雛形を記述。
この時`export`も忘れないように注意する。
```colorFulMessage.jsx
export const ColorFulMessage = () => {
        const contentStyleA = {
            color: "blue",
            fonSize: "16px",
        };
        return <p style={contentStyleA}>いかがお過ごしでしょうか</p>;
};
```

##### 4\.元のファルで参照する
`ColorFulMessage`が元々あったApp.lsxでコンポーネントを呼び出す。
この際Auto importで`import`の記述を追加するのを忘れずに。
```App.jsx
const App = () => {
    const onClickButton = () => alert();
    return (
        <>
          <h1 style={{ color: "red" }}>お疲れ様です</h1>
          <ColorFulMessage />
          <p style={contentStyleB}>最近は筋トレにハマっています</p>
          <button onClick={onClickButton}>ボタン</button>
        </>
    ) 
};
```

##### 5\.`props`で条件を渡して動的に変わるコンポーネントにする
このままだと「お疲れ様です」という要素しか表示されないので、その問題を解決していく。
`props`を渡す場合は、渡す方と渡される方の両ファイルで修正が必要になる。
今回は文字色をテキスト内容を変えていきたいので、それぞれ`props`を渡す。

- 渡す方の修正(App.jsx)
コンポーネントを使っているタグの中に、任意の名前で`props`を渡すことができる。
`ColorFulMessage`タグの中に`color`と`message`という`props`にそれぞれ値を渡していく。
```App.jsx
<ColorFulMessage color="blue" message="いかがお過ごしでしょうか" />
```

- 渡される方の修正(colorFulMessage.jsx)
先ほど`props`は引数のようなものと述べた通り、関数コンポーネントの引数の部分で`props`を受け取ることができる。
引数なの名前はなんでも良いが、わかりやすく`props`をするのがおすすめ。
```colorFulMessage.jsx
export const ColorFulMessage = (props) => {
        const contentStyleA = {
            color: "blue",
            fonSize: "16px",
        };
        return <p style={contentStyleA}>いかがお過ごしでしょうか</p>;
};
```
上記コード時点の引数`props`には
`{color: "red", message: "いかがお過ごしでしょうか"}`が格納されている。
App.jsxで指定した`props`が渡されているのがわかる。
そして固定で設定した`color`とテキストの内容をそれぞれ`propsのcolor`,`propsのmessage`となるように修正する。
```colorFulMessage.jsx
export const ColorFulMessage = (props) => {
        const contentStyleA = {
            color: props.color, //propsのcolor
            fonSize: "16px",
        };
        return <p style={contentStyleA}>{props.message}</p>; //propsのmessage
        
};
```
最後にもう一つの`p`タグ、「最近は筋トレにハマっています」の部分もコンポーネントを使っていく。
以下が最終的なコードとなる。
```App.jsx
const App = () => {
    const onClickButton = () => alert();
    return (
        <>
          <h1 style={{ color: "red" }}>お疲れ様です</h1>
          <ColorFulMessage color="blue" message="いかがお過ごしでしょうか" />
          <ColorFulMessage color="green" message="最近は筋トレにハマっています" />
          <button onClick={onClickButton}>ボタン</button>
        </>
    ) 
};
```

#### コンポーネントを普通のタグのように使用する方法
これまではコンポーネントを以下のように使用してきたが、本来の`p`タグのように、開始タグと終了タグがあった方が使いやすいという場面もある。
そのような場合を考える。
```App.jsx
          <ColorFulMessage color="blue" message="いかがお過ごしでしょうか" />
          <ColorFulMessage color="green" message="最近は筋トレにハマっています" />
```
##### 1\.コンポーネントの参照先の修正
本来の`p`タグと同様の記述に直す。
```App.jsx
          <ColorFulMessage color="blue">いかがお過ごしでしょうか</ColorFulMessage>
          <ColorFulMessage color="green">最近は筋トレにハマっています</ColorFulMessage>
```

##### 2\.コンポーネント側の修正
`children`という決まった要素にタグの中身を置き換える。
これは特に定義していなくても、タグで囲ったものを`children`という名称で受け取るもの。
```colorFulMessage.jsx
export const ColorFulMessage = (props) => {
        const contentStyleA = {
            color: props.color,
            fonSize: "16px",
        };
        return <p style={contentStyleA}>{props.children}</p>;
};
```

`children`を使う方法では、コンポーネントのタグの中に階層構造があるようなものも渡すことができるという利点がある。
どちらを使うかはケースバイケース。

#### `props`の改善とよくある記述方法
上記の記述だと毎回`props`を書くのが面倒になってくるため、それをJS記法に則って省略する。
→オブジェクトの分割代入を使用
>分割代入の解説はこちら
>
https://qiita.com/naoki-atjp/items/e61d63a082cd0bf5e0c6#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E5%88%86%E5%89%B2%E4%BB%A3%E5%85%A5

##### 1\.`props`から`color`と`children`というプロパティを取り出していく。
```colorFulMessage.jsx
export const ColorFulMessage = (props) => {
        const { color, children } = props; //分割代入
        const contentStyleA = {
            color: props.color,
            fonSize: "16px",
        };
        return <p style={contentStyleA}>{props.children}</p>;
};
```

##### 2\.不要になった`props`の記述を消す。
```colorFulMessage.jsx
export const ColorFulMessage = (props) => {
        const { color, children } = props; 
        const contentStyleA = {
            color: color,
            fonSize: "16px",
        };
        return <p style={contentStyleA}>{children}</p>;
};
```

##### 3\.オブジェクトの省略記法でさらに簡略化
プロパティの名前と設定している変数名が同じなので、省略記法が使える。
>オブジェクトの省略記法の解説はこちら
>
https://qiita.com/naoki-atjp/items/e61d63a082cd0bf5e0c6#6%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E7%9C%81%E7%95%A5%E8%A8%98%E6%B3%95
```colorFulMessage.jsx
export const ColorFulMessage = (props) => {
        const { color, children } = props; 
        const contentStyleA = {
            color, 
            fonSize: "16px",
        };
        return <p style={contentStyleA}>{children}</p>;
};
```

#### コンポーネントの引数の部分で分割代入を行う方法
引数の`props`を分割代入の部分に丸々置き換えてしまう。
`props`の文字がなくなってしまうので、何が行われているのかわからなくなりがちな記法。
シンプルにJSの分割代入を引数のところで行なっているだけと考える。
```colorFulMessage.jsx
export const ColorFulMessage = ({ color, children }) => {
        const contentStyleA = {
            color, 
            fonSize: "16px",
        };
        return <p style={contentStyleA}>{children}</p>;
};
```
開発者によってどのパターンで記述するかは異なる。

### `state`について
`state`とは、それぞれのコンポーネントが持っている**状態**のこと。
Webプリケーションの画面の中で扱う色々な情報・状態を`state`の中で管理する。
例えば
・今エラーがあるのかないのかという状態
・モーダルが開いているのかいないのかという状態
・ユーザーが入力した情報やAPIなどの情報
これら全てを`state`、**状態**として管理していく。

これまでの記述を用いて`state`を記述していく。
##### 1\. `state`を`useState`で定義する
Reactで`state`を使う場合は、「この値は`state`として定義します」というのを宣言する必要がある。
`state`の定義にはReactに用意されている`useState`というフック(関数)を使う。

`useState`を`import`し、関数なので関数として記述する。
`import`はAout importを使える。
```App.jsx
import {useState} from "react"; //ここを追加
import {ColorFulMessage} from "./components/colorFulMessage";

const App = () => {
    useState(); //ここを追加
    const onClickButton = () => alert();
    return (
        //省略
    ) 
};
```

##### 2\.配列の分割代入で`useState`に関数を渡す
実際の状態(state)とその状態(state)を更新していくための関数を受け取る。
`useState`は配列を返却する関数なので配列の分割代入を使用する。
更新するための引数には更新関数を受け取るが、名前は`ser`+`stateの変数名`とするのが一般的。
```App.jsx
const App = () => {
    const [num, setNum] useState();
    const onClickButton = () => alert();
    return (
        //省略
    ) 
};
```
>配列の分割代入の解説はこちら
>
https://qiita.com/naoki-atjp/items/e61d63a082cd0bf5e0c6#%E9%85%8D%E5%88%97%E3%81%AE%E5%88%86%E5%89%B2%E4%BB%A3%E5%85%A5

##### 3\.`state`に初期値を設定する
定義した`state`は普通の変数と同じなので、初期値を設定することができる、
`useState`の`()`の中身に記述したものが初期となる。
下記の場合だと、`state` `num`の初期値は`0`
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickButton = () => alert();
    return (
        //省略
    ) 
};
```

##### 4\.`state`の値を画面に表示する
`console`で確認しても良いが、今回はわかりやすいように画面に表示する。
`state`はJSのオブジェクトなので`{}`で記述するのを忘れずに。

```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickButton = () => alert();
    return (
        <>
          <h1 style={{ color: "red" }}>お疲れ様です</h1>
        　<ColorFulMessage color="blue">いかがお過ごしでしょうか</ColorFulMessage>
          <ColorFulMessage color="green">最近は筋トレにハマっています</ColorFulMessage>
          <button onClick={onClickButton}>ボタン</button>
          <p>{num}</p>
        </>

    )
};
```

##### 5\.更新関数を使って更新する
`setNum`という更新関数を使って本当に更新できるのかを確認する。
今回はボタンをクリックしたら`state`の値がカウントアップされていくような実装をして確かめる。
準備としてボタンの名前、クリックイベントの関数名をわかりやすいものに変更しておく。
また、クリックイベントの`alert`は削除し関数を記述していく
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickCountUp = () => {};
    return (
        <>
          //省略
          <button onClick={onClickCountUp}>カウントアップ</button>
          <p>{num}</p>
        </>
    )
};
```
- 下記のように`setNum`関数を記述すると、ボタンをクリックすると`0`だった値が`100`に更新されることがわかる
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickCountUp = () => {
        setNum(100);
    };
    return (
        //省略
    )
};
```
- 次は+１ずつカウントアップされるようにしていく
ボタンをクリックすると、現在の`state`の値に`+1`された値が返される。
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickCountUp = () => {
        setNum(num + 1);
    };
    return (
        //省略
    )
};
```

#### `state`を使う時の注意点2つ
##### 1\.`state`の更新関数を呼んだ瞬間に`state`が更新されるわけではない
例えば以下のように`setNum`関数を2行に増やした場合、ボタンを押しても先ほどと変わらず1ずつしかカウントアップされない。
これはReactのバッチ処理によるもので、この処理によってユーザーは快適に利用できている。
流れとしては
①一つ目の`setNum`関数が評価される(`num`は`0`で変更後は`1`になる)
ーーーーこの段階で更新は行われていないので`num`の値は`0`から変わっていない
②二つめの`setNum`関数が評価される('num'は'0'で変更後は`1`になる)
③全ての`setNum`関数を評価したので更新する(最終的に値は`1`)
**Reactの`state`更新は特定の関数の中でバッチ化されている**
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickCountUp = () => {
        setNum(num + 1); //まだstateは更新されていない
        setNum(num + 1); //最後の関数まで評価したら最後に`state`は更新される
    };
    return (
        //省略
    )
};
```

・特定の関数内で今の`state`の状態を参照して更新したい時の記述

この場合、更新関数の中で関数を受け取るようにする。
そしてその関数には引数を渡すことができる。
この引数の中には`num`が入るが、この`num`は本当の今の値が格納されている。

下記の場合、`setNum`の中にアロー関数を記述し、引数には`prev`という最新の値を格納する変数を記述。
そして、やりたい処理は今の値つまり`prev`に1を足した値を返すことなのでそれを記述。
結果はボタンをクリックすると2ずつカウントが増えていく。
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickCountUp = () => {
        setNum((prev) => prev + 1); //この値を保持し
        setNum((prev) => prev + 1); //ここで保持した値を元に更新関数を評価
    };
    return (
        //省略
    )
};
```

##### 2\.`useState`は関数コンポーネントの一番上でしか呼べない
```App.jsx
const App = () => {
    const [num, setNum] useState(0);　//一番上にいないといけない
    const onClickCountUp = () => {
        //ここでuseStateを呼び出してもエラーになる
        setNum((prev) => prev + 1); 
        setNum((prev) => prev + 1); 
    };
    return (
        //省略
    )
};
```

### 再レンダリンングについて
ボタンクリックで顔文字の表示非表示機能を用いて、再レンダリングについて考える。
まずは準備段階として表示の切り替え機能を作っていく。
その後再レンダリングの説明を行う。
これまでのコードに以下の2行を追加した内容を基本として進めていく。
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickCountUp = () => {
        setNum((prev) => prev + 1); 
        setNum((prev) => prev + 1);
    };
    return (
        <>
          <h1 style={{ color: "red" }}>お疲れ様です</h1>
        　<ColorFulMessage color="blue">いかがお過ごしでしょうか</ColorFulMessage>
          <ColorFulMessage color="green">最近は筋トレにハマっています</ColorFulMessage>
          <button onClick={onClickButton}>ボタン</button>
          <p>{num}</p>
          <button>on/off</button> //ここを追加
          <p>Σ('◉⌓◉’)</p> //ここを追加
        </>
    )
};
```
#### ボタンの表示非表示機能を作る
まずは`state`を使って表示と非表示の状態を持たせる。
そして`true`と`false`を判別。
最終的にボタンでそれを切り替えられるようにしていく。
今回は4ステップで解説。
##### 1\.`state`を用意する
`state`を使うためには`useState`ga必要なので用意する。
そして、`useState`は配列の分割代入なので`const [] = useState()`のような雛形となる。
そして`state`の名称と更新関数名はそれぞれ`isShowFace` `setIsShowFace`とする。
初期値は`true`
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const [isShowFace setIsShowFace] = useState(true);
    const onClickCountUp = () => {
        //省略
    };
    return (
        <>
          //省略
          <button>on/off</button> //ここを追加
          <p>Σ('◉⌓◉’)</p> //ここを追加
        </>
    )
};
```
##### 2\.`isShowFace`が`true`の時だけ顔文字を表示される
ここで論理演算子を使う。
今回は特定のフラグが`true`の時だけ要素を返却したい場合は`&&`を使用。
`isShowFace`が`true`の場合だけ`<p>Σ('◉⌓◉’)</p>`を評価する処理となる。
すなわちボタンの状態が`true`の時だけ顔文字が表示されるということ。
```App.jsx
const App = () => {
    //省略
    };
    return (
        <>
          //省略
          <button>on/off</button> 
          {isShowFace && <p>Σ('◉⌓◉’)</p>} //左側がtrueなら右側を評価
        </>
    )
};
```
この記述をした後に`useState`の初期値を`false`にすると、画面に顔文字は表示されなくなる。
なぜなら、`isShowFace`が`false`だと論理演算子の右側が評価されないから。
>論理演算子の解説はこちら
>
https://qiita.com/naoki-atjp/items/e61d63a082cd0bf5e0c6#10%E8%AB%96%E7%90%86%E6%BC%94%E7%AE%97%E5%AD%90

##### 3\.ボタンで表示非表示を切り替えられるようにする
`button`タグに`onClick`イベントを割り当てていく。
そして、`onClick`が押された時に実行される関数を定義する。
今回は`onClickToggle`という関数名で用意。
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const [isShowFace setIsShowFace] = useState(true);
    const onClickCountUp = () => {
        //省略
    };
    const onClickToggle = () => {} //関数を定義
    };
    return (
        <>
          //省略
          <button　onClick={}>on/off</button> 
          {isShowFace && <p>Σ('◉⌓◉’)</p>}  //クリックイベントを用意
        </>
    )
};
```

##### 4\.関数の処理を記述
`onClickToggle`の処理としては、`setIsShowFace`のフラグを切り替えていきたい。
なので`setIsShowFace`関数を呼び出す。
関数の実行方法として、`(!isShowFace)`と記述する。
`!`がついていると、現在`true`なら`faise、現在`false`なら`true`というように逆の状態が返却されるようになる。
最終的なコードは以下の通り。
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickCountUp = () => {
        setNum((prev) => prev + 1); 
        setNum((prev) => prev + 1);
    };
    const onClickToggle = () => {
        setIsShowFace(!isShowFace);
    }
    return (
        <>
          <h1 style={{ color: "red" }}>お疲れ様です</h1>
        　<ColorFulMessage color="blue">いかがお過ごしでしょうか</ColorFulMessage>
          <ColorFulMessage color="green">最近は筋トレにハマっています</ColorFulMessage>
          <button onClick={onClickButton}>ボタン</button>
          <p>{num}</p>
          <button>on/off</button> 
          {isShowFace && <p>Σ('◉⌓◉’)</p>}
        </>
    )
};
```
これでボタンクリックによる顔文字の表示非表示を切り替えが可能になった。
この記述を元に再レンダリングを解説していく。

#### 再レンダリングとは
そもそも「レンダリング」とは画面に要素を表示すること。
それを再表示することを「再レンダリング」という。
動きの流れとしては、Reactが`state`の更新を検知することで再レンダリングが実行される。
例えばカウントアップボタンがクリックされて数値が変わったり、ボタンをクリックして顔文字の表示非表示が切り替わったりなど、`state`が更新されるたびに再レンダリングが行われていく。
- コンポーネントが再レンダリングされる条件3つ
1,`state`が更新された時(前述の通り)
2,`props`の値が変わった時
3,親コンポーネントが再レンダリングされた時
##### `props`の値が変わった時とはどういうことか
`props`の説明の際に作成した`ColorFulMessage`コンポーネントのように、`props`を受け取っているコンポーネントの`props`の値が変化した時に再レンダリングが実行される。
例えば以下のコードだと、`color`と`children`が`props`の値。
これらの値が変わるときに再レンダリングされる。
```colorFulMessage.jsx
export const ColorFulMessage = ({ color, children }) => {
        const contentStyleA = {
            color, 
            fonSize: "16px",
        };
        return <p style={contentStyleA}>{children}</p>;
};
```
##### 親コンポーネントが再レンダリングされた時とはどういうことか
以下のコードでは`App`コンポーネントの中に`ColorFulMessage`コンポーネントが入っている。
つまり`ColorFulMessage`コンポーネントから見て`App`コンポーネントは親コンポーネントに該当する。
そのため親である`App`コンポーネントが再レンダリングされたら、子である`ColorFulMessage`コンポーネントも再レンダリングされる。
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickCountUp = () => {
        setNum((prev) => prev + 1); 
        setNum((prev) => prev + 1);
    };
        const onClickToggle = () => {
        setIsShowFace(!isShowFace);
    }
    return (
        <>
          <h1 style={{ color: "red" }}>お疲れ様です</h1>
        　<ColorFulMessage color="blue">いかがお過ごしでしょうか</ColorFulMessage>
          <ColorFulMessage color="green">最近は筋トレにハマっています</ColorFulMessage>
          <button onClick={onClickButton}>ボタン</button>
          <p>{num}</p>
          <button>on/off</button> 
        　{isShowFace && <p>Σ('◉⌓◉’)</p>}
        </>
    )
};
```
### `useEffect`について
先ほどまでの処理において、カウントが3の倍数になったら顔文字を表示する機能を追加する。
その過程で再レンダリングの副作用が発生するので、その解消法ほとして`useEffect`を解説していく。
以下のコードを初期段階として機能を実装していく。
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickCountUp = () => {
        setNum((prev) => prev + 1); //1ずつカウントされる
    };
        const onClickToggle = () => {
        setIsShowFace(!isShowFace);
    }
    return (
        <>
          <h1 style={{ color: "red" }}>お疲れ様です</h1>
        　<ColorFulMessage color="blue">いかがお過ごしでしょうか</ColorFulMessage>
          <ColorFulMessage color="green">最近は筋トレにハマっています</ColorFulMessage>
          <button onClick={onClickButton}>ボタン</button>
          <p>{num}</p>
          <button>on/off</button> 
        　{isShowFace && <p>Σ('◉⌓◉’)</p>}
        </>
    )
};
```

##### 1\.判定式を記述する
「もし3の倍数なら…」という処理なので判定式if文を記述する。
`(num % 3 === 0)`は`num`を3で割った値が0であるという式。
その時`isShowFace`を`true`にし、そうではないなら`false`にするという判定式になる。
```App.jsx
const App = () => {
    //省略
    if (num % 3 === 0) {
        setIsShowFace(true);
    } else {
        setIsShowFace(false);
    }
    return (
        //省略
    )
};
```
##### 2\.エラーを解消する
このままだと無限に再レンダリングされてしまうためエラーが表示される。
現在の動きを解説すると以下のようになっている。
①Appが最初にレンダリングされる
②条件式でセット関数が呼ばれる
③セット関数が呼ばれた結果再レンダリングされる
④上の記述からされていく
⑤条件式でセット関数が呼ばれる…etc
このように条件式のタイミングで毎回再レンダリングされてしまい、一生`return`以下に到達できないという再レンダリングのループが無限に発生してしまっている。
次からこの問題の解消方法を解説する。
- フラグが`true`に設定されている場合はセット関数が呼ばれないようにする
`true(truethy)`の時はセット関数を評価しない、`false(faulsy)`の時のみセット関数を評価するといった処理になるため論理演算子を使用する。

**`num`の値が3の倍数の時**
フラグが`true`なら`||`の右側は評価されないので何もせずに終わる。
フラグが`false`なら`||`の右側が評価され`true`になる。
**`num`の値が3の倍数ではない(`else`の)時**
フラグが`true`なら`&&`の右側が評価されるので`false`になる。
フラグが`false`なら`&&`の右側は評価されないので何もせずに終わる。
```App.jsx
const App = () => {
    //省略
    if (num % 3 === 0) {
        isShowFace || setIsShowFace(true); //フラグがtrueなら終了
    } else {
        isShowFace && setIsShowFace(false); //フラグがfalseなら終了
    }
    return (
        //省略
    )
};
```
##### 3\.`num`が0以上の時だけという条件を追加
少しコードの仕上げを行なっていく。
現在のコードは`useState`の初期値が`true`なので最初から顔文字が表示されてしまう。
そのため初期値は`false`に設定しておく。
さらに、`num`が0以上の時だけ条件式を実行するようにする。
```App.jsx
const App = () => {
    //省略
    if (num > 0) {
        if (num % 3 === 0) {
            isShowFace || setIsShowFace(true); //フラグがtrueなら終了
        } else {
            isShowFace && setIsShowFace(false); //フラグがfalseなら終了
        }
    }
    return (
        //省略
    )
};
```
結果として、最初は非表示で3の倍数の時だけ顔文字が表示されるようになった。

#### 再レンダリングの副作用について
ここまでコードを記述するとon/offボタンが機能しなくなってしまっている。
このバグの原因は以下のコードの次の流れによって発生している。

例えばカウントが3の倍数で顔文字が表示されている状態から考えると
①`onClickToggle`関数が実行され、`setIsShowFace`の状態が`false`になる
②再レンダリングされる
③if文が評価され、フラグが`false`なので論理演算子によって`true`に戻る

つまり、処理上はほんの一瞬だけ`false`の瞬間があるものの、最終的には`true`になってしまうので表示としてはボタンが機能していないことになってしまっている。
このように`state`の数が増えたりすると、それぞれが干渉し合って動かなくなるバグが生じることがある。
このバグの解消に`useEffect`というフックを用いる。
```App.jsx
const App = () => {
    const [num, setNum] useState(0);
    const onClickCountUp = () => {
        setNum((prev) => prev + 1); 
    };
    const onClickToggle = () => {
        setIsShowFace(!isShowFace);
    }
    if (num > 0) {
        if (num % 3 === 0) {
            isShowFace || setIsShowFace(true); 
        } else {
            isShowFace && setIsShowFace(false);
        }
    }
    return (
        <>
          <h1 style={{ color: "red" }}>お疲れ様です</h1>
        　<ColorFulMessage color="blue">いかがお過ごしでしょうか</ColorFulMessage>
          <ColorFulMessage color="green">最近は筋トレにハマっています</ColorFulMessage>
          <button onClick={onClickButton}>ボタン</button>
          <p>{num}</p>
          <button>on/off</button> 
        　{isShowFace && <p>Σ('◉⌓◉’)</p>}
        </>
    )
};
```

##### 1\.`useEffect`を記述する
`useEffect`は関数なので関数の形で記述し、Auto importで`import`も忘れずに行う。
そして`useEffect`は第一引数に関数を渡すことができるので、アロー関数を記述する。
```App.jsx
const App = () => {
    //省略
    if (num > 0) {
        if (num % 3 === 0) {
            isShowFace || setIsShowFace(true); 
        } else {
            isShowFace && setIsShowFace(false);
        }
    }

    useEffect(() => {});
    
    return (
        //省略
    )
};
```

##### 2\.`useEffect`に第二引数を持たせる
このままでは、他の部分と変わらず毎回再レンダリングされてしまうので、第二引数に配列を持たせることで特定の場合だけ再レンダリングされるようにする。
- 第二引数を空配列とした場合
```App.jsx
const App = () => {
    //省略

    useEffect(() => {
    
    }, []);
    
    return (
        //省略
    )
};
```
このように`useEffect`の第二引数を空配列とした場合、最初のマウント時のみ処理が実行され、それ以降は再レンダリングされなくなる。

- 第二引数を`num`とした場合
```App.jsx
const App = () => {
    //省略

    useEffect(() => {
    
    }, [num]);
    
    return (
        //省略
    )
};
```
このように`useEffect`の第二引数を`num`とした場合、最初のマウント時は同様に処理が実行され、それ以降は`num`の値に変更があった時のみ関数の処理が再レンダリングされるようになる。

##### 3\. if文を`useEffect`に格納する
先ほど記述したif文を`useEffect`の関数に格納することで、on/offボタンが機能しないというバグを解消できる。
`useEfec`の第二引数に`num`を渡しているので、if文の処理は`num`に変更があった時にだけ評価されるようになる。

具体的な流れは…
これまでは`onClockToggl`が実行されたときに再レンダリングされ、if文が毎回評価されていたので、結果として意図しない方向に更新されてしまっていた。
しかし`useEffect`の第二位引数の配列に`num`を渡すことによって、`onClickToggl`が実行されてもif文が評価されることはなくなったので、`onClickToggle`によって行われた更新のみが行われるという流れによるもの。

この`[num]`のような配列を**依存配列**mと呼ぶ。
```App.jsx
const App = () => {
    //省略

    useEffect(() => {
        if (num > 0) {
            if (num % 3 === 0) {
                isShowFace || setIsShowFace(true); 
            } else {
                isShowFace && setIsShowFace(false);
              }
            }
        }, [num]);
    
    return (
        //省略
    )
};
```
ちなみにReactからは`useEfect`はなるべく使わないようにと言われている。
`useEfect`は複雑なので無闇に使うのではなく、使うケースはよく吟味していく。

### 補足：`export`の種類
1,`default export`
2,`namede export`

これまで使用してきた`export`は`named export`である。
```colorFulMessage.jsx
export const ColorFulMessage = (props) => {
};
```

一方で`default export`は以下のように記述する。
```colorFulMessage.jsx
const ColorFulMessage = (props) => {

};

export default ColorFulMessage;
```

それぞれの`export`に応じた`import`の記述が必要になる。
- `namede export`の場合
```App.jsx
import {ColorFulMessage} from "./components/colorFulMessage";
```
- `default export`の場合
```App.jsx
import ColorFulMessage from "./components/colorFulMessage";
```
見た目の違いは`{}`有無だけで、`detault export`は`{}`が不要になる。
ただ、機能において2点異なる部分がある
#### 1\.`import`名の自由度
`namede export`の場合は`{}`の中身は`export`の時に設定した名前と一致している必要がある。
しかし`default export`の場合は、`import`するときの名前を自由に変えることができる。

例えば以下のように`export`していたとしても
```colorFulMessage.jsx
const ColorFulMessage = (props) => {

};

export default ColorFulMessage;
```
以下のように`import`することが可能である。
```App.jsx
import Hoge from "./components/colorFulMessage";
const App = () => {
    //省略
    return (
        <>
          <h1 style={{ color: "red" }}>お疲れ様です</h1>
        　<Hoge color="blue">いかがお過ごしでしょうか</Hoge>
          <Hoge color="green">最近は筋トレにハマっています</Hoge>
        </>
    )
};
```
#### 2.一つのファイルで使える数の違い
`default export`は一つのファイルで一つしか`import`ができない。
一方で`namede export`は`{}`内をカンマで区切って複数`import`ができる
例
```App.jsx
import {ColorFulMessage, Hoge} from "./components/colorFulMessage";
```

2種類あるものの可能な限り`named export`の使用が推奨されている。
`defauld export`だと`import`名の不一致によってバグが発生するなど、予期せぬエラーが起きる可能性があるため。
特別な意図がない限り`default export`は使わない。