インタラクティビティの追加

このページでは、コンポーネントに「振る舞い」を追加する方法について学びましょう。

インタラクティビティとは？

インタラクティビティ（対話性）とは、UI の文脈では、ユーザーとシステムが相互に作用する性質を指します。「作用」がどんなものかは、ノーマン（1986）の行動モデル¹で考えてみると少し分かるかもしれません。

このモデルのステップ 2. 3. 4. は「行動」で、ステップ 5. 6. 7. は「評価」とまとめることができます。そして、「ユーザーの外」をシステムに置き換えてください。そうすると、図の矢印の向きについて次のように解釈できます。

ユーザーの視点では:

• ユーザーの「行動」: システムへの出力
• ユーザーの「評価」: システムからの入力

システムの視点では:

• ユーザーの「行動」: ユーザーからの入力
• ユーザーの「評価」: ユーザーへの出力

この、ユーザーとシステムが相互に作用する（入力と出力のサイクルを回している）状態には、インタラクティビティがあると言えます。

ヒント

ユーザインタフェース設計 | junkato.jpに UI 設計に関する理論、評価手法などが分かりやすくまとまっています。

Web では、ユーザーからの入力をイベントとして扱うのですが、React においてもそれは同じです。

それでは、インタラクティビティの追加の内容を進めていきましょう。

理解度チェック

学んだことを思い出しながら、折りたたみを展開して書かれているキーポイントが自分の理解と合っているか確認しましょう。

インタラクティビティとは？

ユーザーとシステムが相互に作用する性質のことです。

イベントに応答する方法

JSX にイベントハンドラーを追加します。

イベントへの応答で学びましょう。

ユーザーの操作をコンポーネントで記録する方法

useState を使って state 変数を追加します。

state：コンポーネントのメモリで学びましょう。

React がブラウザーの画面を更新する仕組み

次の 3 つのステップで更新されます:

1. レンダー（描画）のトリガー（引き起こし）
2. コンポーネントのレンダー
3. DOM へのコミット（反映）

useState を使って state 変数を追加します。

レンダーとコミットで学びましょう。

JavaScript 変数代入と state の更新の違い

JavaScript 変数代入は即時に変数の値を更新しますが、state の更新は即時ではありません。次のレンダーで値が更新されます。

state はスナップショットであるで学びましょう。

次のレンダーまでにひとつの state を複数回更新する方法

const [state, setState] = useState(0) のとき、setState(state + 1) ではなく、setState((state) => state + 1) のように記述して state を更新します。

一連の state の更新をキューに入れるで学びましょう。

オブジェクトや配列の state を更新するときに注意すること

state.objectProperty = "value" や state.splice(0, 0, "value")² のように、オブジェクトや配列を書き換え（ミューテーション）ても state は更新されません。

常に state は読み取りにだけ使用（不変、イミュータブル）して、更新するときは新しいオブジェクトや配列を作ります。 setState({ ...state, objectProperty: "value" }) や setState(["value", ...state ]) のように、スプレッド構文 ... を使うのが簡単です。

state 内のオブジェクトの更新とstate 内の配列の更新で学びましょう。

Footnotes

1. Norman, D. A., & Draper, S. W. (Eds.). (1986). User centered system design: New perspectives on human-computer interaction. CRC Press. ↩

2. Array.prototype.splice() はその場（in-place）で値を更新します ↩