未来を創る、テックコミュニティー

6/17 代表勉強通信~Reactのお勉強④

草場代表
2020/06/17

こんばんは。代表の草場です。

引き続き、「Learning React: A Hands-On Guide to Building Web Applications Using React and Redux, Second edition」を読んでいます。5章「Creating Complex Components」、6章「Transferring Properties」に関してです。
コンポーネントは、Reactがビジュアル要素を再利用可能な小さなレンガのように振る舞うことを可能にする主要な方法であり、それ自体を動作させるのに必要なHTML、JavaScript、およびスタイリングをすべて含んでいます。コンポーネントは再利用性に加えて、コンポーザビリティを可能にします。コンポーネントを組み合わせて、より複雑なコンポーネントを作ることができます。

5章では、単純なカラーパレットカードを作ります。
A figure shows a pink colored palette card with the hex code #FF6663 mentioned at the bottom.

すごく簡単ですが、Reactを使ってこれらのカードを作ります。2つのステップを踏みます。

1.主要なビジュアル要素を特定する。
2.コンポーネントが何であるかを把握する。

1に関して。最初のステップは、扱うすべてのビジュアル要素を特定することです。わかりやすいビジュアル要素はカードそのものです。カードの中には2つの異なる領域があります。特定の色を表示する正方形の領域と、16進数の値を表示する白い領域です。
ビジュアル要素をビジュアル階層にアレンジします。目的は、重要なビジュアル要素を特定し、それ以上分割できなくなるまで親と子の配置に分割することです。
カラフルな正方形はこれ以上分割できません。ラベルを囲む白い領域はさらに分割することができます。これで視覚的な要素の識別と分割が完了です。次のステップ2では、これを使ってコンポーネントを識別していきます。

ステップ2に関して。これまでに特定したビジュアル要素のうち、どの要素がコンポーネント化され、どの要素がコンポーネント化されないのかを把握する必要があります。すべてのビジュアル要素をコンポーネントにする必要はないです。複雑なコンポーネントだけを作成する必要はなく、バランスを取る必要があります。
コンポーネント化に関しての一般的なルールは、「コンポーネントは一つのことだけを行うべきだ」ということです。
今回の例では、ビジュアル階層を見ると、カードと色付きの四角の両方がコンポーネントを作るのに適しているように見えます(そうなのか、、)。それと、16進数の値を表示するためのラベルです。

コンポーネントが特定できたので、作成。これは簡単です。3章、4章で学んだ通り。3つのコンポーネントを定義します。この本では、コンポーネントの名前は「Card」「Label」「Square」としています。

ポイントは、親コンポーネントから属性を子コンポーネントに渡す、ということです。

これに関しては6章に詳しくあるので、また明日。

明日もReact。

この記事を書いた人
草場代表
エディター