React~基礎編~Stateパターン

react

React学習記録

前回のReact~基礎編~サイコロアプリケーションでは、ReactのStateを使った簡単なアプリケーション開発を学びました。今回は、ReactのStateパターンを学びましょう。

前提条件

React環境構築(Node.js)が構築済みであること

プロジェクト準備

学習に必要なプロジェクトを準備しましょう。

setStateの仕様

以前、「setState」を使うことで、Stateを更新できることを学びました。

少し復習しておきましょう。

ボタン押下に伴って数値をカウントする簡単なプログラムを作成します。余力がある人は、独力で作ってみてください。

KOUKI
KOUKI

復習は必ずしてください。学習した内容はすぐに忘れます(体験談)

上手く実装できたでしょうか?

Propsと違いStateの値は可変であるため、setStateで書き換え可能なのでしたよね。※Propsは書き換え不可

しかし、注意点があります。

次のプログラムを実行してください。

onTripleClick関数を追加しました。一回のクリックで、3回分クリックしたことにできる関数です。

この結果はどうなると思いますか?

プログラムを実行してみましょう。

数値が0->1に変わっていますが、意図した挙動ではありませんね。

setStateは、非同期で処理されます。そのため、setStateを呼んだ時に他の処理が終了しているか否かを考慮しません

onTripleClickに記述した3つのsetStateは、それぞれStateの状態を書き換えますが、Stateの状態が反映される前に後続の処理が上書きしてしまいます。

例えば、3番目のsetStateの値を変更してみましょう。

プログラムを実行してみましょう。

numberが0->4に変わりましたね。本当は、6に変化して欲しいのです。

setState Callback Form

「setState Callback Form」を使うと先ほどの事象を解決することができます。

javaScriptには、コールバック関数というものがあります。関数の中から他の関数を呼び出して実行できるタイプの関数です。

setStateの中でコールバックを行うと、どのようになるか確認してみましょう。

onTripleClick関数を書き換えました。動作を確認してみましょう。

意図した挙動になりましたね。

公式サイトでも以下の注意喚起がされています。

setState() は、コンポーネントを更新するための即時のコマンドではなく、要求として考えてください。パフォーマンスをよくするために、React はそれを遅らせて、単一パスで複数のコンポーネントを更新することがあります。React は state の変更がすぐに適用されることを保証しません。
setState() は常にコンポーネントを直ちに更新するわけではありません。それはバッチ式に更新するか後で更新を延期するかもしれません。これは setState() を呼び出した直後に this.state を読み取ることが潜在的な危険になります。代わりに、componentDidUpdate または setState コールバック(setState(updater, callback))を使用してください。どちらも更新が適用された後に起動することが保証されています。前の state に基づいて state を設定する必要がある場合は、下記の updater 引数についてお読みください。

ちなみに次の様な書き方もできます。

こちらの方がわかりやすいでしょうか。

KOUKI
KOUKI

この辺りは、少し難しいですね。
伝えたいことは、setStateは非同期で処理されるので、2つ以上の処理を行いたいときはコールバック処理を行う必要があるといった内容です。

応用:ロトシックスアプリ

KOUKI
KOUKI

setStateのコールバックを使って、アプリケーション作成に挑戦してみましょう。

プログラミング学習には、アウトプットが必要不可欠です。アプリケーションを作成することで、アプトプットが十全に行えます。

しょぼいのでいいのです。自分の頭を使って、アウトプットに挑戦してみてください。

ここでは、ロトシックスアプリを作ってみます。

<仕様>
・画面上に6つの番号を表示させる
・6つの番号の内、当たった番号の数だけ当選順位が繰り上がる
 1 つ当たり -> 参加賞、6つ当たり -> 1等

プロジェクト作成

当選番号の作成

最初は、当選番号を作成します。

WinningNumber.jsにその責務を負わせます。

続いて、App.jsを編集します。

npm startをして、画面に表示させてみましょう。

次に、番号にスタイリングをつけていきます。

これを6つ並べて当選番号にします。

当選機能を実装

当選番号の実装が完了したので、次は、当選機能の実装を行いましょう。

表示できましたね。

ちなみに、タイトルと当選番号は、Stateにより変更可能です。

スタイルもつけておきましょう。

App.jsも戻しておきます。

続いて、当選機能を作成します。

当選番号の配列を作成して、当たりくじと突き合わせする処理を追加しました。

番号が当たった数に応じて、異なるメッセージを生成しています。

メッセージ表示領域には、別のjavaScriptファイルを作成しましょう。

動作確認をしてみましょう。

なお、当たりやすいように番号が1及び2のみしか生成されなくしています。

KOUKI
KOUKI

しょぼいですが、こんな感じでガンガンアプリーケーションを作っていきましょう!

次回

もう少しStateに慣れるため、アプリケーションを作成していきましょう。

コメントを残す