![見出し画像](https://assets.st-note.com/production/uploads/images/157533679/rectangle_large_type_2_0dc94f321e6879e6c192d1d084f9a586.jpeg?width=1200)
Reactもコーディングもそんなに変わんねえよって話
コンポーネントを積み重ねろ・・・!!
「 まずはパーツを作ってからコーディングせよ!! 」
この意識でコーディングされてるコーダさん、多いと思います。
めちゃくちゃ正解。
最高。
まじセンスあります。
というか、実はReactの構築も同じ考え方だったりするんですよ!!!
でも正直思いません?
「コンポーネントって結局何やねん・・」
ですよね。わかります。
そんな迷える子羊たち(僕もしかりw)を救うべく
今回はコンポーネントについて書いていきます!!
そもそもコンポーネントってなんぞ
コンポーネントとは、部品、成分、構成要素などの意味を持つ英単語。
ITの分野では機器やソフトウェア、システムの構成する部品や要素などのことを意味する。
なるほど。分からん。
一発目からいきなり分からん。
そんな声が聞こえてきます。
要は、
Webサイト内で使いまわしできるパーツ
ということ。
・ヘッダー
・フッター
・サイドバー
・セクションタイトル
・ボタン
・etc…
が集まって 1つのサイトになるよ! って感じ!
![](https://assets.st-note.com/img/1728621308-8DaYAPFGHh34QO7k5lewprJZ.png?width=1200)
あえて人間に例えるなら、、
・トップス
・パンツ
・キャップ
・ネックレス
・靴
・靴下
・etc…
を着たら今日のコーデ完成!!って感じでしょうか
![](https://assets.st-note.com/img/1728622126-Qx8ehtua3r5nbLUF42gzmRNC.png)
コンポーネントに分けるメリット
予測・・・クラス名からどういった振る舞いをするかが想像できる
拡張・・・誰が携わっても同一の品質でコーディングできる
保守・・・要素を追加・削除した際に他の要素に影響を及ぼさない
再利用・・・他の場所でも同じよう使いまわしできるパーツがある
これらの言葉、
コーダーさんなら聞いたことくらいはあるのではないでしょうか・・?
そうです。みんな大好きCSS設計の考え方です!!
コンポーネントに分けていくことで、
自然とこの原則が実現されるんですねええ!!
あと個人的にめっちゃ良いなあ&大事だと思っているのが、
「 ひとつのコンポーネントはひとつのことだけをするべき 」
という考え方!!
ボタンはボタンであるべきだし、
ボタン以外のセクションやパーツに
不要な影響を与えないようにする必要がありますよね!
さっきの人間の例えで言うと、
靴下がボタン閉めたりチャック閉めたりしたら怖いよね?
っていうこと!!
「 確かに。コンポーネント化ってやっぱり大事よね 」
と感じているであろう皆さん、
ここまでの記事で思ったことありません・・?
いや普通にHTMLコーディングの話やないかーい
![](https://assets.st-note.com/img/1728621363-kn2JoS4NOyCM9va1wmuxlLrF.png)
ええ、そうなんです。
Reactも普通のコーディングと考え方はあんまり変わらないんです!!
ちっちゃいパーツから作っていくし
他の要素に影響を与えないようにするし
そのちっちゃいパーツを組み合わせてサイトを作るし
という流れ🔥🔥
const Title = () => {
return (
<h1 className="c-title">タイトルだよ</h1>
);
};
export default Title;
const Button = () => {
const onClick = () => {
alert('ボタンがクリックされたよ');
};
return (
<button className="c-button" onClick={onClick}>
ボタンだよ
</button>
);
};
export default Button;
↑みたいにTitle, Buttonとパーツを作って・・・
import './App.css'
import Title from './components/Title'
import Button from './components/Button'
function App() {
return (
<>
{/* タイトルを呼び出す */}
<Title />
{/* ボタンを呼び出す */}
<Button />
</>
)
}
export default App
って感じでそれぞれを呼び出すと・・・
![](https://assets.st-note.com/img/1728617798-hckmdsRKAxCZ6GP2UzqnSyaO.png?width=1200)
ほらできた!!!
(※今回CSSはApp.cssにバーって書いてるけど
ホントは各パーツごとに書くよ😌)
どう??
簡単でしょ・・??
呼び出す場所でテキストを変えるにはどうするんですかーー
それくらい普通にHTMLで良くないっすかーー
もっとReactっぽいの見せてほしいっすーーーー
と言いたい気持ちは超わかります・・!
が、それはまた別でまとめますね!!
(だから気になる人はフォローしてチェックしてねはーと)
ちなみにお気づきかもですが、
「className」というのが
HTMLのclassになります!
JSXのお作法なので
まあそんなもんかーくらいで今は大丈夫。
ちなみにちなみにJSXの簡単な紹介はこちらの記事に書いてます😇
よかったらこちらも読んでみてネ
ふう。。
ここまでつらつら書いてきたけど改めて・・・
ReactもHTMLコーディングも
基本はあんま変わんねえなあ!!!!
「 React=ゴリゴリのエンジニアさんがやるもの 」
ってイメージが強烈にあると思うけど、
基礎基本はHTMLコーディングとあんまり変わんない。
「 お、、 さては僕・私でもできるかも・・? 」
って思ってくれる人が増えたらいいなあ
そんな想いを密かに持ちながら今後も頑張って書いていきます!!!
よかったらハートボタンぽちっとしてってね〜
ではでは!!