UI の記述
このページでは、UI を意味のある粒度に抽出したり再利用できるコンポーネントについて学びましょう。
コンポーネントとは？
「この部品は、この見た目と振る舞いをしてほしい」を管理する仕組みです。
チャット（会話）UI を例に、もう少し具体的に説明します。
この画像では、あなたがミーティングの日程調整をしている最中のようです。
見た目として何が実装されているのか着目すると、次のような要素があることが分かります。
- だれの発言か分かる名前
- 顔写真
- いつの発言か分かるタイムスタンプ
- 発言の内容
また、どんな振る舞いが提供されているか想像してみると、次のような振る舞いがあると便利かもしれません。
- 引用
- 返信
- 本文のコピー
- 発言の訂正
コンポーネントは、このような（チャットの）見た目と振る舞いを管理できます。
おや、スズキさんから返信があったようです。
あなたの発言とは違うところもありますが、似ているところもあるようです。
違うところ:
- 発言者がスズキさんであること
- スズキさんの顔写真
- 発言の時刻
- 顔写真が発言の左に配置されている
似ているところ:
- 見た目
- 顔写真が円形
- 吹き出しが角丸四角形
- 文字の大きさ、色
- 同じ振る舞いができてもおかしくない
- さすがに自分以外の発言が訂正できるのはおかしいかな？
コンポーネントでは、このような「似ているけど、ちょっと違う」を扱う方法があり、props という、コンポーネントにデータを渡す仕組み、を使う方法が特によく使われます。
タカハシさんも日程調整に参加してきたようです。
会話が続いて、よりチャットらしくなってきました。
コンポーネントは、このように沢山の同じ見た目と振る舞いを提供する必要があるときに、繰り返し使用することができます。
コンポーネントが可能にすること
チャット UI の例からまとめると、コンポーネントを作ることで、次のことが可能になります:
- 見た目と振る舞いを定義できる（一貫性）
- 「似ているけどちょっと違う」を定義できる（柔軟性）
- 繰り返し使用できる（再利用性）
それでは、UI の記述の内容を進めていきましょう。
理解度チェック
学んだことを思い出しながら、折りたたみを展開して書かれているキーポイントが自分の理解と合っているか確認しましょう。
コンポーネントとは？
「この部品は、この見た目と振る舞いをしてほしい」を管理する仕組みです。
コンポーネントが可能にすること
コンポーネントを作ることで、次のことが可能になります:
- 見た目と振る舞いを定義できる（一貫性）
- 「似ているけどちょっと違う」を定義できる（柔軟性）
- 繰り返し使用できる（再利用性）
コンポーネントの作り方
コンポーネントを別のファイルに移動する方法
次のように移動します:
- コンポーネントの移動先になる JavaScript ファイルを用意する
- 用意したファイルにコンポーネントの関数定義を移動し、エクスポートする
- コンポーネントを使用するファイルでインポートする
コンポーネントのインポートとエクスポートで学びましょう。
React コンポーネントで使用するマークアップの形式
JSX という、HTML によく似た JavaScript の拡張構文を使用します。
JSX でマークアップを記述するで学びましょう。
マークアップの中で JavaScript 式を使う方法
波括弧 {} の中で JavaScript 式を使うことができます。
JSX に波括弧で JavaScript を含めるで学びましょう。
コンポーネントに props を渡す方法
コンポーネントを呼び出すときに、HTML で属性を書くのと同じように JSX に書きます。
コンポーネントに props を渡すで学びましょう。
表示を出し隠しする方法
JavaScript の if 文、&& 演算子、? : 演算子などを使います。
条件付きレンダーで学びましょう。
データの集まりからコンポーネントを繰り返し表示する方法
JavaScript の Array.prototype.filter()、Array.prototype.map() などを使います。
リストのレンダーで学びましょう。
コンポーネントに渡された props が同じときは常に同じ表示にする方法
コンポーネントを純関数にする必要があります。そのためには例えば:
- 呼び出される前に存在していたオブジェクトや変数を変更しないこと
- コンポーネントのロジック（処理）はできるだけコンポーネントが返す JSX の中で表現すること
コンポーネントを純粋に保つで学びましょう。
React がコンポーネント同士の関係を表現する構造
ツリー（木）構造を使用します。
UI をツリーとして理解するで学びましょう。