世界一優しいReactの基本その4 -Propsとは-

## はじめに
前回はReactのイベントとスタイルを学びました。今回はReactの重要なPropsについてを書いていきたいと思います。

https://qiita.com/k-tetsuhiro/items/cb30125d81a80ad37e5d

## Props
Propsとはコンポーネントに渡す変数のようなものです、
コンポーネントは受け取ったpropsの値を使って処理を行います。

例えば文字を表示するコンポーネントがあった場合、『通常時は黒文字、<font color="red">エラー時は赤文字</font>』を表示する場合、それぞれコンポーネントを用意するのではなく、コンポーネントのスタイルを変数によって動的に切り替えたいと思います。

※コンポーネントについてはこちら

https://qiita.com/k-tetsuhiro/items/88ae3c7eee4aa78942b8

### Propsの基礎
Propsの基礎を実際のコードで学んでいきたいと思います。

まずは下記のようなスタイルが適用されているAppコンポーネントがあります。

```App.jsx
export const App = () => {
    
    // スタイル
    const contentStyle = {
        color: "red",
        fontSize: "20px"
    };

    return (
        <div>
            <h1>Title</h1>
            <p style={contentStyle}>Hello</p>
        </div>
    )
}

```

### コンポーネントへの切り出し

次にここのpタグのところを別コンポーネントとしてcomponents/ColorMessage.jsxに切り出してみます

```components/ColorMessage.jsx
export const ColorMessage = () => {
    // スタイル
    const contentStyle = {
        color: "red",
        fontSize: "20px"
    };

    return (
        <>
            <p style={contentStyle}>Hello</p>
        <>
    )
}

```

```App.jsx
import { ColorMessage } from "./components/ColorMessage";

export const App = () => {
    return (
        <div>
            <h1>Title</h1>
            <ColorMessage />
        </div>
    )
}
```
これでコンポーネントとして切り出しが出来ました。

### Propsの使い方
このままだとColorMessageコンポーネントは常にHelloという文字しか表示できず、また色もredのみになってしまいます。そこで次は`Props`を使って、App.jsx側から**変数を用いて色と表示するメッセージ**を指定してみます。

まずは呼び出す方のApp.jsxで変数としてpropsを渡していきます。
`color=xxx, message=xxx` とします。

```App.jsx
import { ColorMessage } from "./components/ColorMessage";

export const App = () => {
    return (
        <div>
            <h1>Title</h1>
            <ColorMessage color="blue" message="World" />
        </div>
    )
}

```

次にColorMessageコンポーネント側を修正してみます。
引数にpropsをとり、colorの指定を`props.color`に、表示する内容を`{props.message]`に変更します。

```components/ColorMessage.jsx
export const ColorMessage = (props) => {
    // スタイル
    const contentStyle = {
        color: props.color,
        fontSize: "20px"
    };

    return (
        <>
            <p style={contentStyle}>{props.message}</p>
        <>
    )
}
```
propsを使うことで無事にコンポーネントに変数を使用することができ、動的に変化させることが出来ました。


### propsのchildren
propsには特別なものとして`children`があります。
先程はprops.messageとしてコンポーネントの要素を指定しましたが、コンポーネントの中の要素は全てchildrenで取得できます。具体的に例を見ていきましょう。

```jsx
// childrenは未設定
<ColorMessage />

// childrenはhogeが取得できる
<ColorMessage>hoge</ColorMessage>

// childreは複数の要素が取得できる
<ColorMessage>
    <div>
        <h1>title</h1>
        <p>hello</p>
    </div>
</ColorMessage>
```

これ利用するとさきほどmessageで渡しいた要素は、中に入れてしまえばchildrenで取得することができます。
ここでは`Hello World!`という中身がchildrenとして取得できます。
```App.jsx
import { ColorMessage } from "./components/ColorMessage";

export const App = () => {
    return (
        <div>
            <h1>Title</h1>
            <ColorMessage color="blue">Hello World!</ColorMessage>
        </div>
    )
}
```

```components/ColorMessage.jsx
export const ColorMessage = (props) => {
    // スタイル
    const contentStyle = {
        color: props.color,
        fontSize: "20px"
    };

    return (
        <>
            <p style={contentStyle}>{props.children}</p>
        <>
    )
}
```


## Propsのテクニック
propsを指定する際に毎回`props.xxx`と指定するのは面倒です。
そこで**分割代入**を利用するととても便利です。


※分割代入はこちらを参考に

https://qiita.com/k-tetsuhiro/items/4e9e299f4f18f87ff8dc#%E5%88%86%E5%89%B2%E4%BB%A3%E5%85%A5

分割代入を用いると、propsからこんな感じで変数に代入ができます。

```components/ColorMessage.jsx
export const ColorMessage = (props) => {
    // propsを分割代入
    const { color, children } = props;

    // スタイル
    const contentStyle = {
        color: color, // props.colorでなくてよい
        fontSize: "20px"
    };

    return (
        <>
            <p style={contentStyle}>{children}</p> // props.childrenでなくてよい
        <>
    )
}
```

また分割代入ではプロパティ名と一致していれば更に省略ができます。
一見書き忘れのように見えますが、これを使うと更に便利になります。

```components/ColorMessage.jsx
export const ColorMessage = (props) => {
    // propsを分割代入
    const { color, children } = props;

    // スタイル
    const contentStyle = {
        color:, // プロパティ名のcolorと一致しているのでcolor: colorと書かなくて良い
        fontSize: "20px"
    };
    ...
}
```

さらに引数の時点で分割代入することも可能です

```components/ColorMessage.jsx
export const ColorMessage = ({ color, children}) => {
    // 引数でpropsを分割代入しているので不要になる
    // const { color, children } = props;

    // スタイル
    const contentStyle = {
        color:, // プロパティ名のcolorと一致しているのでcolor: colorと書かなくて良い
        fontSize: "20px"
    };
    ...
}
```


## まとめ
propsはコンポーネント同士で値を渡す変数のようなものです。
書き方が色々あって複雑のように思えますが、基礎をしっておけばこんな書き方で書いているな、と読み解けるはずです。
また、**propsはReactにおいてとても重要な概念**になるので基礎をしっかりと抑えておきたいところです。