はじめに

こんにちは、今回は今最も人気のフレームワークの一つであるReactについて、まとめてみました。
プログラミング学習経験がまだ３ヶ月の僕が学んでみて、「なるほど〜」「ここ難しいな」と思った部分を中心に書きましたので、ぜひご覧ください。

※なお、記事内容と事実が違う可能性もありますので、ご了承ください。

そもそもReactとは？

Reactの特徴はざっくり言うと、以下の二つです！

・効率的に作りやすい・運用しやすい
・シンプルに求人数多い

Reactは、Facebookによって開発され、現在では多くの企業や開発者によって使用されています。
その理由の一つは、とても速く動き、コードを何度も使い回すことができるからです。
これにより、効率的に作業を進められます。（後で詳しく説明します！）

Reactの魅力

コンポーネントベースのアーキテクチャ

Reactの特徴の一つは「コンポーネントベース」の設計です。

大きなプログラムを小さな部品（コンポーネント）に分けることができます。
※レゴみたいなイメージなので、なんか楽しい。
このおかげで、コードを再利用しやすく、修正や追加も簡単になります。

バーチャルDOMの概念

ReactはバーチャルDOMという仕組みを採用しています。

バーチャルDOMは、実際のDOM操作を最小限に抑え、プログラムが素早く画面の変化を反映できます。
これにより、効率的なUIの更新が可能となり、ウェブサイトが速く動き、使いやすくなります。

イメージこんな感じ

1. Reactが仮想のDOMを用意（実際のDOMをコピーしたもの）
2. 仮想のDOMと実際のDOMの差分をチェック
3. HTMLに対して、差分したものだけ、JavaScriptが実際のDOMヘ適用するよう処理

全体を更新というよりは、変更した部分のみ更新されるから、効率的ってこと。

ライブラリが充実している

Reactを使うと、多くの便利なツールやライブラリ（例えば、ReduxやReact Routerなど）を利用できるので、基本なんでもできます。

学習時につまづきやすいポイント

stateの管理に注意

Reactでは、コンポーネントが持つ状態（state）を管理することが重要です。

例えば、ボタンをクリックしたときにカウントを増やすアプリを考えてみましょう。
この場合、カウントの値をステートとして管理します。
ステートを変更する際には、setState関数を使います。
直接stateを変更するのではなく、setState関数を使うことでReactが変更を検知し、画面を適切に再描画します。

サンプルコード

function Counter() {
  // カウントの値をステートとして宣言
  const [count, setCount] = useState(0);

  // ボタンがクリックされた時にカウントを増やす関数
  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={incrementCount}>カウントを増やす</button>
    </div>
  );
}

この例では、useStateフックを使ってカウントのstateを宣言し、setCount関数でカウントを更新しています。ボタンがクリックされると、カウントが増える仕組みです。

常に最新の状態として持たせたいデータは何か？を考えることが重要！

コンポーネントの再利用

Reactでは、コンポーネントを再利用することが推奨されています。

例えば、同じデザインのボタンを複数の場所で使いたい場合、一つのボタンコンポーネントを作成して再利用できます。
これにより、コードの重複を避け、保守が楽になります。

サンプルコード

// 共通のボタンコンポーネントを作成
function CustomButton({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

このボタンコンポーネントを他のコンポーネントで再利用する例です。

サンプルコード

import CustomButton from './CustomButton';

function App() {
  const handleClick = () => {
    alert('ボタンがクリックされました');
  };

  return (
    <div>
      <h1>コンポーネントの再利用の例</h1>
      <CustomButton label="クリックしてください" onClick={handleClick} />
    </div>
  );
}

この例では、CustomButtonコンポーネントをAppコンポーネント内で再利用しています。ラベルとクリックイベントをpropsとして渡すことで、再利用しやすいコンポーネントを作成できます。

コンポーネント間でどうpropsを受渡してるのかを常に把握しながら書いていくのが、難しい...

最後に

以上、Reactについてざっくりとした説明でした！
まだ学習中かつ慣れない部分もありますが、とにかく触ってみて理解してみることが今は重要なので、まだまだ精進します。

ここまで読んでいただきありがとうございました！！