こんにちは、Reiです！
JavaScriptだけで画面を作っていると、
気づけば1つのファイルにいろんな処理が詰め込まれてしまいがちです。
たとえば、
- 入力欄を作る
- ボタンを作る
- リストを表示する
- 削除の処理を書く
といった内容が、1つの大きなコードの中にまとまって入ってしまいます。
最初はそれでも問題なく動きますが、
機能が増えてくると、
「どこに何が書いてあるのか分からない…」
という状態になりやすくなります。
Reactでは、このような画面を
「意味のあるまとまりごとの部品」として考えます。
この考え方が
コンポーネント思考 です。
コンポーネント思考とは？
コンポーネント思考とは、
1つの画面をそのまま書くのではなく、
意味のあるまとまりごとに分けて考えることです。
たとえば、TODOアプリであれば、
- 入力エリア
- 追加ボタン
- TODOの一覧
- TODOの1行分
このように、画面を部品として捉えることができます。
このように分けておくと、
「入力を直したいならここ」
「一覧の表示を変えたいならここ」
というように、見る場所が自然と決まってきます。
最初は「分けるのが面倒そう」と感じるかもしれませんが、
コードが増えてくるほど、この分け方のありがたさを実感できます！
なぜ分けると分かりやすくなるのか？
画面を部品ごとに分けると、
それぞれの「役割」がはっきりします。
たとえば、
「追加ボタンの見た目だけ変えたい」と思ったときに、
ボタンの部分だけ見ればいい状態になります。
もしすべてが1つのファイルにまとまっていると、
関係ないコードの中から目的の部分を探す必要が出てきます。
コンポーネントに分けることで、
- どこを見ればいいか迷いにくくなる
- 修正する範囲が小さくなる
という状態を作ることができます。
コンポーネントは「部品を増やす」というより、
コードを整理するための考え方に近いです。
Reactでいうコンポーネントとは？
Reactでは、この「部品」を
JSXを返す関数として表現します。
const WelcomeMessage = () => {
return <p>ようこそ、Reactの世界へ！</p>;
};
この関数は、「メッセージを表示する部品」として使えます。
Reactでは、こうした関数を組み合わせて、
画面全体を作っていきます。
最初は少し不思議に感じるかもしれませんが、
「見た目を返す関数」と考えると理解しやすくなります。
コンポーネントはどう分ければいい？
ここが一番迷いやすいポイントです。
最初は「どこまで分ければいいの？」と悩むと思います。
実際、自分も
・細かく分けすぎて分かりにくくなる
・逆に1つにまとめて整理できなくなる
という状態を何度も経験しました…。
そのため、最初はシンプルに
「どこで区切ると自然か」 という視点で考えるのがおすすめです。
① 役割がひとまとまりになっているか
画面の中で「ひとつの役割」としてまとまっている部分は、
コンポーネントに分けやすいポイントです。
<header>
<h1>マイアプリ</h1>
</header>
このコードは「ヘッダー」という役割を持つ、ひとまとまりのUIです。
このように、
「何をしている部分か一言で説明できる」なら、
コンポーネントとして分ける目安になります。
② 同じ形が繰り返されていないか
同じ見た目や構造が繰り返されている場合も、
コンポーネントに分けるタイミングです。
<div className="user-card">
<h2>田中太郎</h2>
<button>詳細を見る</button>
</div>
<div className="user-card">
<h2>佐藤花子</h2>
<button>詳細を見る</button>
</div>
このようなコードは、1つのコンポーネントにまとめることで、
同じUIを何度でも使い回せるようになります。
さらに、見た目を変更したいときも、
1箇所直すだけで全体に反映されます。
この2つの視点を意識するだけでも、
分け方のヒントが見えてきます。
最初から完璧にやろうとしなくても大丈夫です。
少しずつ慣れていけば、自然と整理できるようになります。
コンポーネント思考があると何が変わる？
コンポーネント思考が身につくと、
画面の見え方が変わってきます。
これまでは、
「画面をまとめて書く」
という感覚だったものが、
- 画面を部品に分ける
- それぞれに役割を持たせる
- 最後に組み合わせる
という考え方に変わっていきます。
この視点を持てるようになると、
- どこを直せばいいか迷いにくくなる
- 同じUIを使い回しやすくなる
- 画面が大きくなっても整理しやすくなる
といった変化が出てきます。
Reactが大きな画面でも扱いやすいのは、
この「分けて作って、組み合わせる」という考え方と相性がいいためです。
まとめ
今回は、コンポーネント思考について整理しました。
＼＼ 今回のまとめ ／／
・ コンポーネント思考は、画面を意味のある部品として分けて考える方法
・ 「役割がまとまっているか」「同じ形が繰り返されているか」が分けるヒントになる
・ 分けることで、どこを見ればいいか迷いにくくなる
最初は分け方に迷っても問題ありません。
少しずつ
「このまとまりは分けられそうだな」
と考えるクセがついてくると、
コードの見え方が自然と変わっていきます。
次は、この部品にデータを渡して表示を変えるための
「props」の考え方を学んでいきましょう！
コメント