ReactがわからないというよりJavaScriptがわからなかったのです


# はじめに
**React**はユーザインタフェース構築のための**JavaScript**ライブラリです。次のような[利点](https://ja.reactjs.org/)があるため、**HTML**、**CSS**、 **jQuery** を学習し、Web制作者目指しているような方も**React**にも興味を持つと良いと思いました。**JavaScript**をある程度学習していれば、**React**はそんなに難しくないからです。

1. コンポーネントベース
    * ブロックを組み立てるようにユーザインタフェースを構築できる
    * 見通しがよく、苦痛が少ない
2. 一度学習すれば応用が効く
    * サーバー上でもレンダーできる
    * モバイルアプリケーションの中でも動く([React Native](https://reactnative.dev/))

**React**を二ヶ月くらい学習し、真似してコードが多少書けるようになった時、私はそのコードにどうにも腑に落ちませんでした🥺。その頃の私は**React**以前に**JavaScript**がよくわかっていなかったのです。そんな少し前の自分に説明するつもりで書いてみた記事になります。
# サンプルコード1
このサンプルは[Toggle]ボタンをクリックするたびに、ボタンの上の絵文字が👍と👎の間で切り替わるという簡単なものです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/345563/4397b80d-3036-a6f3-a036-8cccab5f1533.png)

```
import React, { useState } from "react";

const App = () => {
  const [liked, toggleLiked] = useState(false);
  const handleToggle = () => toggleLiked(!liked);

  return (
    <>
      <p>useState Sample #1</p>
      <p>{liked ? "👍" : "👎"}</p>
      <button onClick={handleToggle}>Toggle</button>
    </>
  );
};

export default App;
```
[StackBlitz](https://stackblitz.com/edit/use-state-sample1?file=src/App.js)

**今の自分**「**useState**（**ステートフック**）を使用しています。シンプルで何の問題もないですね。」

**昔の自分**「なんだか、わかったようなわからないような。すっきりしないのです🥺。そもそも**フック**ってどういうこと？意味があまりわからないです🥺。」

**今の自分**「**フック**は何種類かあるのですが、**ステートフック**とは**クラスコンポーネント**では普通に持つことができる**ステート**（コンポーネントがその内部に変数のように持つオブジェクト）を**ファンクショナルコンポーネント**（関数コンポーネント）にも持たせられるようにするための関数です。それでは、次のコードはわかりますか？」

# サンプルコード2
こちら見た目や動きは先程のものと同じです。コードの行数は16から36(うち3行はコメントだけの行）と倍増しました。

```
import React from "react";

export default function App() {
  const stateArray = React.useState(false); // stateArray[0]の初期値をfalseにする
  // 戻り値は以下の配列
  // stateArray[0]: true(👍) または false(👎)が入る
  // stateArray[1]: stateArray[0]を設定する関数
  let liked = stateArray[0];
  const setLiked = stateArray[1];

  function handleToggle() {
    if (liked === true) {
      setLiked(false);
    } else {
      setLiked(true);
    }
  }

  if (liked === true) {
    return (
      <div>
        <p>useState Sample #2</p>
        <p>👍</p>
        <button onClick={handleToggle}>Toggle</button>
      </div>
    );
  } else {
    return (
      <div>
        <p>useState Sample #2</p>
        <p>👎</p>
        <button onClick={handleToggle}>Toggle</button>
      </div>
    );
  }
}
```

[StackBlitz](https://stackblitz.com/edit/use-state-sample2?file=src/App.js)

**昔の自分**「コードが長くなりましたが、大分親しみやすいコードです。**React.useSate**が要素数2の配列を返し、0番目の要素が設定した値の参照用。1番目の要素が、その値を設定する関数を指し示すわけですね。」

**今の自分**「**サンプルコード1**([StackBlitz](https://stackblitz.com/edit/use-state-sample1?file=src/App.js))の以下の部分は、**React**ライブラリのエントリポイント（名前空間）の**React**をインポートし、**React**の中にある**useState**を特定の名前付きでインポートをしています。この辺りの詳細は[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import)を見てください。」

```
import React, { useState } from "react";
```

**今の自分**「**サンプルコード1**([StackBlitz](https://stackblitz.com/edit/use-state-sample1?file=src/App.js))の以下の部分は、[**分割代入**(Destructuring assignment)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)という構文で、配列から値（あるいはオブジェクトからプロパティ）を取り出して、別個の変数に代入できる書き方になります。

```
const [liked, toggleLiked] = useState(false);
```

**昔の自分**「[**アロー関数**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)は知っているのですが、Appという関数の中に handleToggleという関数があるのはどういうことでしょうか？」
**今の自分**「これは[**クロージャ**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures)というやつです。マトリョーシカ人形の親子で例えると、親（関数）から子（関数）の心の内（子の変数など）は見ることができませんが、子からは親の心の内（親の変数など）を見ることができる仕組みです。」

**昔の自分**「なるほど。この辺り、**React**の話しではなくて、全部**JavaScript**の話ですね？」

**今の自分**「そのとおりです。そして、return で返している**HTML**みたいなタグ構文は[**JSX**](https://ja.reactjs.org/docs/introducing-jsx.html#gatsby-focus-wrapper)と呼ばれる**JavaScript**を拡張した書き方です。」

**昔の自分**「それは教材で習いました。これがコンパイルされて、ブラウザで実行可能なコードに変換するのでしたね？」

**今の自分**「そうです。上のコードは**React**のライブラリの関数を1つ呼んでいることと、[**JSX**](https://ja.reactjs.org/docs/introducing-jsx.html#gatsby-focus-wrapper)が使われている以外は表面上はただの**JavaScript**として理解できます。」

# Reactを少し勉強してみて感じたこと
## 1. [**JSX**](https://ja.reactjs.org/docs/introducing-jsx.html#gatsby-focus-wrapper)を用いたUIコンポーネント作成は楽しくてわかりやすい
  * 見通しよく作成でき、他人と分担もしやすいです

   ```
   <Navbar />
   <TodoList />
   <Footer />
   ```
## 2. 親コンポーネントが子コンポーネントに [**props**](https://ja.reactjs.org/docs/components-and-props.html) を渡す方法は1方向で単純でわかりやすい
* 渡した値は変更されない決まり
* 親が子に関数を渡して子から呼んでもらうことなどができる（[コンポーネントに関数を渡す](https://ja.reactjs.org/docs/faq-functions.html)）

## 3. **ファンクショナルコンポーネント**は**クラスコンポーネント**よりシンプルで書きやすい
* これから作るだけなら**ファンクショナルコンポーネント**だけでよいと思います
* 必要なら**ファンクショナルコンポーネント**以下のフックを組み合わせるなどして、ローカルステート、グローバルステート、ライフサイクルを扱うなど、**クラスコンポーネント**と同じようなことができる
    * [**useState**](https://ja.reactjs.org/docs/hooks-reference.html#usestate)
    * [**useEffect**](https://ja.reactjs.org/docs/hooks-reference.html#usecallback)
    * [**useCotenxt**](https://ja.reactjs.org/docs/hooks-reference.html#usecontext)
    * [**useReducer**](https://ja.reactjs.org/docs/hooks-reference.html#usereducer)
    
## 4. [**Babel**](https://babeljs.io/)や[**Webpack**](https://webpack.js.org/)とかのややこしい設定は不要
* [**Create React App**](https://create-react-app.dev/)や[**Next.js**](https://nextjs.org/)や[**Gatsby**](https://www.gatsbyjs.com/)を使えば知る必要がない
* 環境構築で悩む必要なし
* それらについて概要は[こちら](https://ja.reactjs.org/docs/create-a-new-react-app.html)

## 5. **CSS**は好みに合わせて色々な書き方ができる（[CSS とスタイルの使用](https://ja.reactjs.org/docs/faq-styling.html)）
* 個人的には[**styled-components**](https://styled-components.com/)が良さそうに思っていますが、賛否両論あるみたいですね。

# 参考資料
1. [現代の JavaScript チュートリアル](https://ja.javascript.info/)
2. [JavaScript学習の格安教材（ LinkdIn Premium、ドットインストールPREMIUM、YouTube ）](https://software.pitang1965.com/skill-set/javascript/) // 私のブログのメモです