#はじめに#
- Reactを使って画面作成をしてみたいと思うようになり、サイトを調べて
https://ja.reactjs.org/tutorial/tutorial.htmlを試しにやってみました。 - ここにかかれていることをサイト内にあるスターターコード
https://codepen.io/gaearon/pen/oWWQNa?editors=0010を使って試したものになります。- ○×ゲームを作ることが題材となっています。
- スターターコードにチュートリアルに従いコードを書いていくことで動きを確認することはできました。
- 今回は、チュートリアルを進めていく中で、
propsとstateについて自分が理解したイメージを纏めておきたいと思います。- 技術的ではないかもしれません
#実行したことと理解したイメージ#
Reactを理解するために、Webの画面上に表現される複雑なユーザーインターフェースをコンポーネントと呼ばれる小さく独立した部品で構成されることの説明から始まる。
３×３の○×ゲームを作るにあたって、
- Squareという名前のコンポーネント：1マスの動きを表現するための部品
- Boardという名前のコンポーネント：部品のSquareを３×３で表現するための部品
- Gameという名前のコンポーネント： ボード上に表現されたSquareの情報をもとに勝敗やゲームの流れをコントールするための部品
を用意して、処理を行っていくことになる。
Reactにいくつか異なる種類のコンポーネントがあるが、ここではReact.Componetについて学ぶことができる
コードは、Reactのチュートリアルのサイトを見て頂きたいが、ここでは、コードを書きながら進んでいくので、その内容をイメージでとらえてみる。
まず初めに、Reactコンポーネントを3つ用意します。
Reactコンポーネントでは、props、stateを使って情報を描画していきます。
ひとまず、私の理解は、こんな感じです。
Propsは、引数のデータが格納されるエリアとは
チュートリアルでは、9つのマス目に、０～８の数字を描画していきます。
やりたいことは、こんな感じ
BoardからPropsを使って、Squareに渡して数字の描画を行いました。
プログラムとしては、チュートリアルに従い、
Boardは、このように書きました。
class Board extends React.Component {
renderSquare(i) {
return <Square value={i} />;
}
}
squareは、このように書きました。
class Square extends React.Component {
render() {
return (
<button className="square">
{this.props.value}
</button>
);
}
}
上記のようにコードを書いた場合の描画までの流れをイメージにしてみました。
state は、データを記憶しておくエリアとは
チュートリアルでは、マス目をClickされたら、X が描画できるようにしていきます。
やりたいことは、こんな感じ
Squareがクリックされたことを検知して、’X'を記憶して、ボタン名に’X’と描画できるようにする
Squareだけ、チュートリアルに従い、以下のように書き換えました。
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
}
render() {
return (
<button className="square" onClick={() => this.setState({value: 'X'})}>
{this.state.value}
</button>
);
}
}
上記のようにコードを書いた場合の描画までの流れをイメージにしてみました。
#まとめ#
-
Propsは、親から名付けられた変数名で値が格納され、子は、その名前の変数名で値を受け取ることができる -
Stateは、自身のcomponent内で状態を記録しておくことができる - したがって、親から引数として渡される
this.props.valueとthis.state.valueは、同じvalueであるが、異なるものであることを理解しておくことがポイントだと理解しました。