Reactの環境構築時のメモ

## Reactの環境構築
- [新しい React アプリを作る:Create React App](https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app)

```
npx create-react-app my-app
cd my-app
npm start
```

- 
    - すでに空のgit用のフォルダがある場合は ` npx create-react-app .` でいいっぽい
        - githubの環境作りのメモは以下
        - [GitHubのリポジトリを作るときに参考にしたサイト](https://qiita.com/teambo/items/ffad82a2d865fcbdc847)
    - `npm start` するとreactアプリケーションがビルドされローカル環境が構築され`http://localhost:3000` で動作検証可能
    - vue.js(vue-cli)だとオプションを設定するがreactは不要
        - [vue-cliを使ってプロジェクトを作成し起動するまでの手順](https://qiita.com/teambo/items/34c042a6433eceb73ccf)

## react create appで作られるもの


- react create appだと以下内容がデフォルトで含まれているらしい
    - JSX変換処理や最新のJavascript記法を以前のブラウザでも使えるようにするトランスパイル処理(Babel?)
    - ソースファイルを1個の*.jsにまとめるバンドル処理
    - ファイルの変更件シュルト自動再トランスパイル、ブラウザの自動リロード
    - コードエラーの実行前検出(ESLint)
    - 実行時に発生したエラーをブラウザ上でわかりやすく表示
    - 本番環境用のソースコード圧縮・最適化
    - TypeScriptを使いたい場合は以下コマンド

```
npx create-react-app my-app --template typescript
```


## デバッグ環境の作成
### VS Code上でやる方法
- ~~参考：[VSCodeでReactをデバッグする方法](https://qiita.com/keisukeengineer/items/cb64984597d2aa5a3952)~~
    - これは古い方法。Debugger for Chromeを入れようとしたら、deprecatedになっていた
- VS Code標準？のdebugツールででできた。
### ブラウザ上でやる方法。
- 参考：[Reactアプリのデバッグ方法](https://qiita.com/s_harada/items/3a06567c1e7d8ec8b1780)
    - `React Developer Tools`を入れる

## 不明点の雑メモ(体型的に勉強していないので、バラバラと書いてく)
### TypeScriptを採用したら、型の指定をしないとエラーになって困った
- type scriptを利用する場合、型を指定しないと`暗黙のanyのエラー`が発生します
    - 型の指定は引数で `変数: 型`と指定すれば解決する。最悪`変数： any`で解決する(やってはいけない)

### React×TypeScriptの時、型の指定ってどこでするのが正しいん？？？
- 関数型コンポーネントの引数(Props)の型の指定をどこでするべきか
    - 参考：[【初心者】React × TypeScript 基本の型定義](https://zenn.dev/ogakuzuko/articles/react-typescript-for-beginner#3.-props%E3%81%AE%E5%9E%8B%E5%AE%9A%E7%BE%A9)
    - この人は関数コンポーネントとかの外側で定義してる(使いまわすならそうか。可読性的にもそうか)

### 関数コンポーネントの引数への引き渡しでオブジェクトで渡し方がわからん！！配列とか詰むやんけってなった時の解消法
```javascript
const HogeComponent = (props:LoginUser) => {
  return <div> hello {props.name}! your nickname is {props.nickname}!!!!
}

//...(略)...
< HogeComponent loginUser={loginUser}> // ここをオブジェクトで一気に渡したい
```
- 参考：[React(TypeScript)のコンポーネントにオブジェクトを直接渡したい](https://teratail.com/questions/338709)
- `スプレッドして渡してください` ってなってるけど、オブジェクトを`foo={...hoge}`とすると`arrayじゃなきゃ使えないぜ`って怒られる
    - `foo={...hoge}`→`{...hoge}`にしたら解決した。変数指定した時点でPropの一要素として割付けしようとするので、fooがarrayじゃないってなって怒られるっぽい？

### TypeScriptの型定義のtypeとinterfaceの違い
- 参考：[interfaceとtypeの違い、そして何を使うべきかについて](https://zenn.dev/luvmini511/articles/6c6f69481c2d17)
- `公式ドキュメントでもinterfaceのほうが拡張にオープンなJavascriptのオブジェクト動作方式に似ているという理由でinterfaceをおすすめしています``

### ReactVFCってなんぞ？
- 参考：[【検証】React.FC と React.VFC はべつに使わなくていい説](https://kray.jp/blog/dont-have-to-use-react-fc-and-react-vfc/)
    - Reactのコンポーネントには3種類存在する
        - JSX.Element型
        - React.FC型
        - React.VFC型
    - 3つあるが`基本的には () => JSX.Element のままでOK`　らしい
    - `FC ／ VFC は非推奨とは言わないまでも、Github上の議論の中で積極的に使うべきではない傾向にあるということが分かりました` らしい
    - 細かくはサイト内を見るべし(今回の主題じゃないので読み飛ばしました)
- ReactVFCは型定義を行う際に便利な型っぽいので、TypeScriptを使う上ではほぼ必要ないっぽい

### 関数コンポーネントならぬ、クラスコンポーネントってやつもあるらしい
- ほとんど関数コンポーネントで賄えるので今は使われていない

### UseEffectとは？
- 参考：[副作用フックの利用法](https://ja.reactjs.org/docs/hooks-effect.html)
    - `useEffect は何をやっているのか？ このフックを使うことで、レンダー後に何かの処理をしないといけない、ということを React に伝えます`

```react
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

### API呼び出しはどうやってやる？
- 参考：[【React】fetchメソッドでREST APIを叩く方法](https://omathin.com/react-api-2/)

> ・axiosという3rd Partyのアプリを使用する方法
・JavaScriptのfetchメソッドを使う方法

- 参考：[【リソース取得APIの比較】fetchとaxiosの4つの相違点](https://zenn.dev/syu/articles/9840082d1a6633)
  - axiosのほうが良さそう(モダンなリクエスト用のライブラリっぽい)
- `npm install axios`したらエラーが出るようになったぞ・・・！
    - `npm audit`すると jestとかnode, reactがmissingって言われる
    - axiosに対応のライブラリがデフォだと入ってないのか？それともaxiosのinstall時に何か起きてるのか？何かが悪さをしていると思うが・・・(**そのうち調べる**)
    - 元々バージョン意識してなかったし`npm david`に頼ってみる
        - `npm install david -g`
        - `david update`
    - これをやっても肝心なreactが見つからねえってなった。調べてると[React: missing script: start](https://stackoverflow.com/questions/55932106/react-missing-script-start/55932212)という記事が出てきて、yarn.lockファイルが悪さをしてるっぽいことがわかった。yarnを利用しているわけでもないので指示通りに`npm uninstall -g yarn`で消してみたら解消(おそらくパッケージ管理の設定ファイルとかを変えなきゃいけないんだろうけど、そこら辺わからないので消す手段を取る)
    - というか本当はyarnが入っていて、恐らくyarnで管理する設定になっていたので`yarn add axios`で導入する必要があったと思われる

- axiosの方が3rd party製のライブラリなので、導入が必要となるがAPIリクエスト用のライブラリなので、色々と便利なはず

### axiosのレスポンス構造
- 参考：[axiosのgithubのReadme](https://github.com/axios/axios#response-schema)
    - data:Object
    - status:number
    - statusText:string
    - headers:Object
    - config:Object
    - request:Object

### axiosのパラメータ指定方法
- 参考：[axiosのパラメータ指定方法まとめ](https://qiita.com/taroc/items/f22f7dd5d6d5443c72a4)
    - QueryString
        - URLに直接つけるか、optionとして以下のようにつけること可能

```react
axios.get('/xxx', {
  params: {
    querystringparam: aaaaa
  }
});
```

### axiosで取得したデータが`does not exist on type 'never'.`って怒られるで
- TSを使っている関係で型定義をしなきゃならんの。。。。？ なのでTSでのaxiosの使い方を調べた方が良さそう
- 参考：[APIをリクエストするCustom HooksをTypeScriptで書いてみよう](https://zenn.dev/shikky0331/articles/96fe7208a6efb57f5b7e#javascript%E3%81%8B%E3%82%89typescript%E3%81%AB%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B)
    - 恐らくレスポンスに合わせて型定義をしてあげる必要がありそう！
- レスポンスの型定義をして、初期値をnullにしたら`Type 'null' is not assignable to type 'IXXXX'`って怒られた
    - 参考：[https://stackoverflow.com/questions/59715119/type-null-is-not-assignable-to-type-t](https://stackoverflow.com/questions/59715119/type-null-is-not-assignable-to-type-t)
        - tsconfig.jsonで`strictNullChecks`をoffにするか
        - nullも入るよって宣言してあげればいいらしい `XXX | null` みたいな感じ

### axiosで取得したデータをHTMLに描画しようとしたら`Object is possibly 'null'`って怒られました
- 参考：[TypeScriptで "Object is possibly null" と怒られたときにすること](https://qiita.com/fufufukakaka/items/5d4a2f2272b8f1a4a16f)
    - TSはnullの可能性があると怒られるので事前に検証するnullチェックが必要

### reactでパラメータによってHTMLの表示非表示を制御したい
- 以下みたいな感じでreturnする前にパラメータの値をチェックしてif文で制御すれば良さそう

```react
if(param) {
  return (
    <div> あるよ </div>
  )
} else {
  return (
    <div> ないよ </div>
  )
}
```

# **↓TODO↓**
# **↑TODO↑**

### 複数コンポーネントを跨いだ状態管理ってどうやんの？
- 参考： Software design 2021/8号
    - 大規模プロジェクトなら`Redux`
    - 中・小規模なら`Context API`
    - 小規模なら`useReducer`
- vueで言うとvuex