コンポーネントを理解しよう

2022-01-04
Next.js
React
HTML

はじめに

細かい実装の部分ではなく、課題を通じてつまずいた部分をどのように理解していったのか？を中心に書いていきます。同じようなところで悩んでいる方への参考になれば幸いです。

今回はコンポーネントに関して深ぼっていきたいと思います。

この記事の概要

コンポーネントのイメージをつかむ

コンポーネントには２種類ある

propsの使い方を理解

２種類のコンポーネントの使用例

コンポーネント

コンポーネントという概念、利便性をつかむのに時間がかかりました。

Reactを学習し概念はつかめましたが、利便性を理解できいなかったのでWEBサイトを作成するときに、コンポーネントをうまく活用できませんでした。

結果、最初はコードを大量に書いていました。ちょっと修正したい箇所があったとしても、何箇所もチェックする必要がありました。

コンポーネントのイメージ

書籍を読んだり、コードを書いてもしっくりこなかったので、図にしてイメージを掴んでいきます。（親会社と子会社で例えます。※子会社がコンポーネント）

１体のロボットを作ろうとしたとき、親会社が０➝１で作成しません。腕はA社、頭はB社、足はC社と、各子会社へ発注をかけます。

イメージはこんな感じ。

コンポーネントとはパーツ（部品）をつくっていくこと

すごい端的に書きましたが、親会社は指示出しと、各子会社が作成したパーツを一体のロボットに組み上げていくイメージです。

コンポーネントは２つのタイプがある

コンポーネントの考え方は理解できました。しかし、更に学んでいくと何やら同じコンポーネントでも、使い方が２種類あるのではないか！？２種類をイメージで掴んでいきます。

①ダイレクトにパスを渡すタイプ

材料から仕様書も全て子会社が準備しており、親会社は完成したパーツを受け取り１体のロボットを完成させていく。子会社から親会社へ、ダイレクトにパスされます。

②材料を渡して作ってもらうタイプ

親会社が子会社へ、使ってほしい材料を渡します。受け取った子会社は材料を使用して、パーツを作っていきます。

props

親会社から子会社へ材料を渡すには props（日本語：小道具）というキーワードが必要になってきます。

実際にコードで見ていきましょう。

// 親会社がArmsという子会社へ青色のネジを指定 <Arms nezi='Blue' /> // 子会社の受け取り方 export const Arms (props) => { <> return ( <p>{ props.nezi }<p /> ) </> }

親会社から子会社を指定すると同時に、渡したい材料を指定します。指定したら自動的に子会社へ情報を渡すよう、親会社は動きます。

子会社は props で親会社全体の要素を受け取ります。受け取ったら、指定された材料だけを抽出したいので props.nezi と指定する。

props.nezi と何回も記述するのがめんどくさいときもあります。シンプルにしちゃいましょう。

// 親会社がArmsという子会社へ青色のネジを指定 <Arms nezi='Blue' /> // 子会社の受け取り方 export const Arms (props) => { const { nezi } = props // propsで受け取った情報をneziという変数へ代入 <> return ( <p>{ nezi }<p /> ) </> }

★受け取り方のポイント★

const { nezi } = props と変数に代入するとき、親会社で使用している nezi と一緒にする必要があります。

親会社から複数指定があった場合は

<Arms nezi='Blue' ita='Red' color='Green'/> // 子会社の受け取り方 export const Arms (props) => { const { nezi, ita, color } = props // propsで受け取った情報をnezi,ita,colorという変数へ代入 <> return ( <p>{ nezi }<p /> <p>{ ita }<p /> <p>{ color }<p /> ) </> }

{ nezi, ita, color } の順番は{ ita, color, nezi } でもOKですし、２つだけの指定{ nezi, color } だけでも問題ないです。

「２種類のコンポーネントがあること」「propsという使い方があること」が理解出来たと思います。

概念は出来たとしても、実際にどう使っていけばいいのか、メリットは何か？が理解出来ないという壁にぶつかりました…

コンポーネントの使用例・メリット

①ダイレクトにパスを渡すタイプ

親会社から、子会社に作成してほしい仕様、作成ルールなどがガッチリ決まっており、子会社に自由にやらせても問題ないときは楽だと思います。

WEB制作に置き換えると、

個人で開発する場合

パーツ要素数が少ない場合

簡易的に作成したい場合

実際にコードを書いてみます。

// index.js（親会社） import { Parts } from '../components/sample' export default function Home() { return ( <div className='m-5'> <Parts /> </div> ) }

// sample.jsx(子会社) export const Parts = () => { return ( <> <div>私の会社は、青色のパーツを作成します。</div> </> ) }

出力結果

シンプルですね。sample.jsx（子会社）が作成した文章を、index.js（親会社）がそのまま受け取り、出力しています。

②材料を渡して作ってもらうタイプ

こちらのほうが利用頻度は高いと思います。

メリットは渡す材料だけ変えれば、汎用的に使用できるということです。

例えば、親会社（index.js）で１つの子会社へ色違いのパーツを作って欲しいケースを想定して、コードを書いてみます。

// index.js（親会社） export default function Home() { return ( <div className='m-5'> <Parts color='text-blue-500' messageColor='青色'/> <Parts color='text-red-500' messageColor='赤色'/> <Parts color='text-green-500' messageColor='緑色'/> </div> ) }

export const Parts = (props) => { const { color, messageColor } = props; return ( <> <div className={color}>私の会社は、{messageColor}のパーツを作成します。</div> </> ) }