[React] 入門編

## 概要
Reactの概要と基礎的な部分を整理したくまとめました。
これからReactについて学ぼう！といった方を対象にして記述しています。

## Reactとは何か？
#### 基本概念とその役割
  - ReactはMetaが開発した、UI(ユーザーインターフェース)を構築するためのJavaScriptライブラリです。
  - 主にSPA(シングルページアプリケーション)を作成するのに利用されています。

#### SPAとは？
  - 利用者がページを移動するたびに新しいHTML(ページを構成するコード)をサーバから読み込むのではなく、ブラウザ上でJSを利用し変更が必要な箇所部分を書き換えるアプリケーションを指します。
  - 変更が必要な箇所のみを書き換えてページ全体の再読み込みを避けることで、スムーズなページ移動を実現します。
    - 例 Google Maps、X(旧Twitter)など

## Reactを使う理由やメリット
####  HTMLとCSSだけを利用するよりも開発効率が向上する！
- コンポーネント(後述)が再利用可能なので、一度作成すると使いまわせて楽！
  - 開発スピードや保守性が向上するのが嬉しいポイント
- 効率的なレンダリングが可能
  - 変更点を最小限に抑えることで、スムーズに画面の変化を行えるアプリを制作可能です
#### 活発なコミュニティ
- Reactはコミニティが活発なため、問題に直面した際に解決策を見つけやすいです。
  - 数値で見ると、[Stack Overflow](https://stackoverflow.com/tags?tab=popular)では48万件以上の質問が寄せられており人気の高さが伺えます
#### 豊富なエコシステム
- Reactのエコシステムには、多くのサードバーティライブラリやツールが存在します
  - UIコンポーネントもサポートが多く、以下はその一例となります
    - [Chakra UI](https://v2.chakra-ui.com/)
    - [MUI](https://mui.com/)
    - [Yamada UI](https://yamada-ui.com/ja)
#### 公式ドキュメントが日本語で読める！
- [React公式ページ](https://ja.react.dev/)は日本語訳もされており、非常に読みやすいです
  - こういったドキュメントは英語のみの場合が多いのですが、やはり日本語で読める利点は大きいです。

## 基本的な構造と用語
#### 仮想DOM
##### DOMとは？
 -  DOM(Document Object Model)はHTMLやXMLドキュメントなどのマークアップ言語と、CSSをJavaScriptなどのプログラミング言語からアクセスできるようにするための仕組み
    -  実物を確認したい場合は、Chromeの検証ツールを開けば構造を見ることができます
##### 仮想DOMとは？
- 仮想DOMは簡単にいうとDOMのコピーにあたり、画面の更新時において以下のように利用されます
    1. Reactで作成したコンポーネントのレンダリング時に仮想DOM①が生成される
    2. 表示されている画面に変更を加える(文字が入力されたなど)ための再レンダリングが発生すると、新しい仮想DOM②が生成される
    3. 仮想DOM①、②の比較を行い、変更が必要な部分を特定する
    4. 特定した変更部分のみを実際のDOMへ適用する

#### JSX(JavaScript XML)
- JavaScript内でHTMLのような構文を書くための拡張子・ファイルを指します
  - TypeScriptを用いた場合は、TSXとなります
##### 得られるメリット
- 開発の効率とコード管理が楽になる
- コンポーネント内で条件分岐やループを利用して、複雑なUI構造を生成するのが容易
  - 例：APIでデータが取得できていたら、画面上に表形式で表示する

#### コンポーネント
  - Reactのアプリケーションにおいて、UIを構成する基本の単位を指します
    - 画面の要素をコンポーネント単位で作成していき、それをレゴブロックのように組み合わせてUIを作るイメージです
    - 基本的にコンポーネントはJSXを使用して記述されます

``` SampleComponent.jsx
export const SampleComponent = () => {
  return(
    <div>
        <text>サンプル用</text>
    <div/>
  )
}
```
##### 得られるメリット
- 開発効率の向上
  - コンポーネントの再利用(使い回し)ができるため、開発期間を短縮できる
  - コンポーネントごとに開発タスクを割り振れるので、効率的に開発を行える
- 保守性の向上
  - 何か変更があれば、対象のコンポーネントを修正すれば良い

#### プロパティ(props)
  - 親子関係となっているコンポーネントがあった場合、親から子のコンポーネントへ渡させるデータの集まりのこと
    - 下記のサンプルコードでは、ParentComponentからChiledComponentへデータの受け渡しを行なっている
    - コード中の「name」と「price」は任意で変更可能だが、「children」はReact側によって決められており変更不可

``` ParentComponent.jsx
import { ChildComponent } from "../../components/ChildComponent"
export const ParentComponent = () => {
  return(
    <>
      <ChildComponent name="りんご" price="100">
        <text>生産地：青森県</text>
      </ChildComponent>
    </>
  )
}
```
``` ChiledComponent.jsx
export const ChildComponent = (props) => {
  return(
      <div>
        <text>果物名：{props.name}</text>
        <text>価格：{props.price}円</text>
        {props.children}
      </div>
  )
}
```
#### 状態(state)
- Stateとは、コンポーネント内で管理するデータを指します
  - フォーム欄に入力される文字などもこれに該当します
  - 仮想DOM内でも言及した、画面の再レンダリングにも関わってくる重要な要素です

``` SampleForm.jsx
import { useState } from 'react';

export const SampleForm = () => {
  const [inputValue, setInputValue] = useState('');

  const handleFormChange = (event) => {
    setInputValue(event.target.value);
  }
  return (
    <>
      <label>
        Sample Form:{' '}
        <input
          value={inputValue}
          onChange={handleFirstNameChange}
        />
      </label>
      <p>{inputValue}</p>
    </>
  );
}

```
- 上記サンプルコードの動きを説明すると以下になります
    1. フォームに文字が入力される
    2. 文字が入力されるたびに、onChangeイベントが発生する
    3. onChangeイベントにより、handleFormChange関数が呼び出される
    4. handleFormChange関数では以下の処理が行われる
       1. event.target.value でフォームに入力された値を取得
       2. setInputValue(event.target.value)で、inputValueの値(状態)を更新する
    5. ReactはinputValueの値(状態)が更新されたことを認識する
    6. Reactは再レンダリングを実行する
    7. 再レンダリングの時に以下の処理が行われる
       1. inputタグのvalue属性が、新しいinputValueの値で更新される
       2. pタグ内の、{inputValue}が新しい値で更新される
    8. 更新された画面が表示される

## おわりに
本記事ではReactの入門として、基本概念を中心に記載しました。
実際に手を動かして試してみたい場合は、トレーニングが行えるサイトのURLを
添付していますので、そちらで学んでみるのもアリです！


## 参考
#### React概要
- React の流儀
  - https://ja.react.dev/learn/thinking-in-react
- UI の記述
  - https://ja.react.dev/learn/describing-the-ui
- React のルール
  - https://ja.react.dev/reference/rules
- React の概要
  - https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/react-overview
- ２０２３年に React を使うべき理由
  - https://www.uxpin.com/studio/jp/blog-jp/why-use-react-ja/

#### SPA関連
- 今さら聞けないSPA（シングルページアプリケーション）とは
  - https://qiita.com/shinkai_/items/79e539b614ac52e48ca4
- [React / React Router] SPAを作成するために知っておくべき基本事項
  - https://qiita.com/PenPe/items/697b179c14aff9759dbd

#### 仮想DOM関連
- DOMとは？仕組みや構造を解説！HTMLやJavaScriptとの関係は？
  - https://udemy.benesse.co.jp/development/dom.html
- 【React】仮想DOMって何！？コンポーネントのレンダリングと描画について理解しよう！
  - https://qiita.com/seira/items/6767e222890c9890ecb9
- 100秒で理解する仮想DOM
  - https://zenn.dev/ak/articles/00616eb99523c2

### JSX関連
- JSX でマークアップを記述する
  - https://ja.react.dev/learn/writing-markup-with-jsx

#### propsとstate関連
- コンポーネントに props を渡す
  - https://ja.react.dev/learn/passing-props-to-a-component
- Reactの基本：PropsとStateの理解
  - https://qiita.com/h-i-ist/items/ce0b444e051358e00058
- 【React】再レンダリングの仕組みと最適化
  - https://zenn.dev/b1essk/articles/react-re-rendering
- 【イラストで分かる】Reactとライフサイクル
  - https://zenn.dev/koya_tech/articles/16d8b11b5062bd

#### トレーニング
- チュートリアル：三目並べ
  - https://ja.react.dev/learn/tutorial-tic-tac-toe
- React を使って初めての Web アプリを作成する
  - https://learn.microsoft.com/ja-jp/training/paths/react/