Reactもコーディングもそんなに変わんねえよって話

ゆうたろう｜みんなで課題のゴールへ向かう案内人

2024年10月11日 13:53

コンポーネントを積み重ねろ・・・！！

「　まずはパーツを作ってからコーディングせよ！！　」

この意識でコーディングされてるコーダさん、多いと思います。

めちゃくちゃ正解。
最高。
まじセンスあります。

というか、実はReactの構築も同じ考え方だったりするんですよ！！！

でも正直思いません？

「コンポーネントって結局何やねん・・」

ですよね。わかります。

そんな迷える子羊たち（僕もしかりw）を救うべく
今回はコンポーネントについて書いていきます！！

そもそもコンポーネントってなんぞ

コンポーネントとは、部品、成分、構成要素などの意味を持つ英単語。
ITの分野では機器やソフトウェア、システムの構成する部品や要素などのことを意味する。

出典：IT用語辞典

なるほど。分からん。
一発目からいきなり分からん。

そんな声が聞こえてきます。

要は、
Webサイト内で使いまわしできるパーツ
ということ。

・ヘッダー
・フッター
・サイドバー
・セクションタイトル
・ボタン
・etc…
が集まって 1つのサイトになるよ！ って感じ！

あえて人間に例えるなら、、

・トップス
・パンツ
・キャップ
・ネックレス
・靴
・靴下
・etc…
を着たら今日のコーデ完成！！って感じでしょうか

コンポーネントに分けるメリット

予測・・・クラス名からどういった振る舞いをするかが想像できる
拡張・・・誰が携わっても同一の品質でコーディングできる
保守・・・要素を追加・削除した際に他の要素に影響を及ぼさない
再利用・・・他の場所でも同じよう使いまわしできるパーツがある

これらの言葉、
コーダーさんなら聞いたことくらいはあるのではないでしょうか・・？

そうです。みんな大好きCSS設計の考え方です！！

コンポーネントに分けていくことで、
自然とこの原則が実現されるんですねええ！！

あと個人的にめっちゃ良いなあ&大事だと思っているのが、

「　ひとつのコンポーネントはひとつのことだけをするべき　」

という考え方！！

ボタンはボタンであるべきだし、
ボタン以外のセクションやパーツに
不要な影響を与えないようにする必要がありますよね！

さっきの人間の例えで言うと、

靴下がボタン閉めたりチャック閉めたりしたら怖いよね？

っていうこと！！

「　確かに。コンポーネント化ってやっぱり大事よね　」

と感じているであろう皆さん、
ここまでの記事で思ったことありません・・？

いや普通にHTMLコーディングの話やないかーい

ええ、そうなんです。

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

って感じでそれぞれを呼び出すと・・・

ほらできた！！！
（※今回CSSはApp.cssにバーって書いてるけど
ホントは各パーツごとに書くよ😌）

どう？？
簡単でしょ・・？？

呼び出す場所でテキストを変えるにはどうするんですかーー
それくらい普通にHTMLで良くないっすかーー
もっとReactっぽいの見せてほしいっすーーーー

と言いたい気持ちは超わかります・・！

が、それはまた別でまとめますね！！
（だから気になる人はフォローしてチェックしてねはーと）

ちなみにお気づきかもですが、
「className」というのが
HTMLのclassになります！

JSXのお作法なので
まあそんなもんかーくらいで今は大丈夫。

ちなみにちなみにJSXの簡単な紹介はこちらの記事に書いてます😇

よかったらこちらも読んでみてネ

ふう。。
ここまでつらつら書いてきたけど改めて・・・

ReactもHTMLコーディングも
基本はあんま変わんねえなあ！！！！

「　React＝ゴリゴリのエンジニアさんがやるもの　」
ってイメージが強烈にあると思うけど、
基礎基本はHTMLコーディングとあんまり変わんない。

「　お、、　さては僕・私でもできるかも・・？　」

って思ってくれる人が増えたらいいなあ

そんな想いを密かに持ちながら今後も頑張って書いていきます！！！

よかったらハートボタンぽちっとしてってね〜

ではでは！！

この記事が気に入ったらサポートをしてみませんか？