こんにちは！Reiです (˵ •̀ ᴗ – ˵) ✧
Reactを学び始めると、よく出てくるのが「コンポーネント」という言葉。
でも最初は、
「部品ってどういうこと？」
「なんでわざわざ分ける必要があるの？」
と思うやすいポイントでもあります 👀
実際、画面をそのまま一気に書いたほうが、最初はラクに感じやすいです…！
ただ、機能が増えてくると、
1つのファイルにいろんな処理が集まってしまって、だんだん見通しが悪くなってきます 💦
そこで大事になってくるのが コンポーネント思考 です！
今回は、Reactのコンポーネント思考とは何か、なぜ必要なのか、どんな基準で分けると考えやすいのかを順番に整理していきます！
＼＼ この記事で学べること ／／
・コンポーネント思考の基本が分かる
・画面を部品で考えるメリットが分かる
・どこでコンポーネントを分ければいいかの考え方が分かる
Reactの理解を深めるうえで、この考え方はかなり土台になります。
ここがつかめると、今後のPropsやStateの理解もしやすくなりますよ ᥫᩣ ̖́-
Reactのコンポーネント思考とは？
コンポーネント思考とは、
1つの画面をそのまま大きく作るのではなく、意味のあるまとまりごとの部品に分けて考えるという考え方です。
たとえば、TODOアプリならこんな感じ ↓
・入力欄
・追加ボタン
・TODO一覧
・TODO1件分の表示
こうして見ると、
画面全体も「いくつかの部品の集まり」として見ることができます👀
この部品1つ1つを コンポーネント と言います。
Reactでは、コンポーネントを組み合わせながら画面を作っていきます！
1つの大きな画面より整理しやすくなる理由
もし画面のすべてを1ファイルにまとめて書くと…
・入力欄の処理
・ボタンの見た目
・一覧の表示
・削除の処理
のように、いろんな役割が1か所に集まりやすくなります。
最初は動いていても、コードが増えるほど「どこを直せばいいのか分からない…」となりやすいです ( ; ˘-ω-)
その点、部品ごとに分けておくと、
「入力まわりはここ」
「一覧表示はここ」
のように、見る場所を絞りやすくなるのです！
つまり、コンポーネント思考は、「部品を増やすため」というより、画面を整理しながら作るためにある考え方なんです。
Reactでコンポーネントに分けるメリットは？
コンポーネント思考は大事なんですが、
メリットが見えないと「なんで分けるの？」となりやすいです。
ここでは、分けることで何がラクになるのかを整理していきます！
どこを修正すればいいか迷いにくくなる
コンポーネントに分けておくと、それぞれの役割が見えやすくなります。
たとえば「追加ボタンの見た目だけ変えたい」と思ったとき、ボタンのコンポーネントを見れば解決するし、「一覧の表示ロジックを変えたい」となった場合も、一覧のコンポーネントを見ればいいので、探す範囲がぐっと狭くなります！
逆に全部が1つのファイルに入っていると、関係ないコードも一緒に追うことになって、修正に入るまでに時間がかかってしまいます 💦
同じUIを使い回しやすくなる
同じ見た目のパーツが何度も出てくるときも、コンポーネントにしておくと便利です。
たとえば、ユーザー情報を表示するカードが複数ある場合、1つのコンポーネントを使い回す形にできます。
そうしておくことで、
・同じ見た目を何度も書かなくていい
・修正が1か所で済む
・表示の統一感を保ちやすい
というメリットがあります！
Reactで開発がしやすいと言われる理由の1つは、こうした「再利用しやすさ」にあります！
コードが大きくなっても整理しやすい
小さなアプリのうちは、1ファイルでもなんとか読めますが、機能が増えてくると、まとめて書いたコードは一気に読みづらくなります。
コンポーネントごとに分けておくと、「このファイルは何をしているのか」がはっきりするので、内容を理解しやすくなります。
1つ1つの役割が整理されていることで、全体の構造もつかみやすくなるのがポイントです！
つまり、今だけでなく、あとから見返しやすくするためにも大事な考え方なんです 👀
コンポーネントはどう分ければいい？
ここがいちばん悩ましいところ！
分けるのが大事だと分かっても、どこで区切るかは最初かなりわからないですよね 💦
なので、判断しやすい基準をいくつかご紹介します！
役割がひとまとまりかで考える
まずは 1つの役割としてまとまっているか で考えてみましょう！
<header>
<h1>マイアプリ</h1>
</header>
これは「ヘッダー」という1つの役割を持ったまとまりです。
このように、「この部分は何をしているのか？」を一言で説明できるかがポイントになります。
もし説明できるなら、それは1つのコンポーネントとして切り出しやすいまとまりってことです！
逆に、いくつも役割が混ざっている場合は、
もう少し分けられる余地があるかもしれません 👀
このように、「何をしている部分か一言で説明できるか」を基準にすると、分けるポイントが見つけやすいです 🔍
同じ形が繰り返されているかで考える
次に、同じ見た目や構造が繰り返されているかどうかみてみましょう！
<div className="user-card">
<h2>田中太郎</h2>
<button>詳細を見る</button>
</div>
<div className="user-card">
<h2>佐藤花子</h2>
<button>詳細を見る</button>
</div>
こうした同じような構造のコードが並んでいるなら、、コンポーネントとして切り出せるサイン！
個別に書いていくのではなく、コンポーネントとして分けておくことで、1つのコードをもとに同じ構造を持った要素を繰り返し使えるようになります。
毎回同じようなHTMLを書くより、部品として切り出したほうがコードの重複が減って、全体も見やすくなります！
ここまでやってきてくどくど言っているけど、
分けすぎなくても大丈夫
ってことです！
ここまで見てきて、え！？ってなりますよね 笑
ここで伝えたいのが、細かく分ければ分けるほど正解というわけではないこと。
実際、
・細かく分けすぎて逆に追いにくくなる
・まとめすぎて責務が多くなる
というのは、どちらもよくあります。
なので最初は、
「このまとまりは自然に名前を付けられるかな？」
「同じ形として再利用できそうかな？」
くらいの視点で、無理してまとめようとしなくてOKということ。
最初から完璧に分けようとしなくて大丈夫ですし、書きながら調整していけば問題ありません (˵ •̀ ᴗ – ˵) ✧
今回のポイントおさらい !!
ここまでの内容を整理するとこんな感じ ↓
コンポーネント思考
・画面を意味のある部品ごとに分けて考える方法
・Reactの画面づくりの土台になる考え方
コンポーネント
・JSXを返す部品
・組み合わせて画面全体を作っていく
分けるときの視点
・役割がひとまとまりになっているか
・同じ形が繰り返されているか
・分けすぎず、自然な単位で考える
最初は「どこで分ければいいんだろう？」と悩みやすいですが、最初から分けようとしなくても大丈夫。
手を動かしながら、
「このまとまりは1つの部品として切り出せそうかな？」
と考えていく中で、少しずつ感覚がつかめてきます 💡
まずはシンプルに分けてみるところから、気軽に試してみてください！
最後に
コンポーネント思考は、最初は少しふわっと見えやすい考え方です。
でも、Reactを触っていく中で、
「なるほど、こういうことか」と実感しやすくなっていく部分でもあります！
もし今「どこで分ければいいのか難しいな」と感じていても、それはかなり自然なこと。
まずは、「この部分は1つの役割として切り出せそうかな？」って考えるところから始めましょ ᥫᩣ ̖́-
コメント