ReactHooksを勉強し始めた（1週間くらいたった）ので途中まで記録
部署移動があってゲーム開発からインフラよりの人になった。 AWSの資格取ったりいろいろあったが、今は趣味（友達の影響）でReactの勉強をしている 例によってUdemyの講座を利用しているのだが、結構情報量が増えてきたので備忘録を残す
ReactHooksについて
まずReactというものがある。これはフロントエンド向けのJavaScriptライブラリのことらしい。ちなみに僕はjsはまったくわからん。 htmlとcssはなんか一時やろうとして途中でめんどくさくなって投げだしたのだが、その程度でも知識がないと学習きついかも。以下概要 https://www.webstaff.jp/guide/trend/webit/react/
Webアプリ作ろうと思ったときに使えるいろいろ便利なものという認識。 なんかよく知らんがこれやっておけばフロントエンド側は大体できるらしい。
これを使って綺麗なフロント側をつくる。あくまでフロント側なのでバックエンドは別途作成が必要。 友達はMicrosoft Azureとかのクラウドでいろいろやってるらしい。僕はあずーる分らんからバックエンドはAWSで作る予定。
フロント側、今までC#やってきたからそれ使えばいいんじゃね？という気持ちもあった。 が、僕はアプリ開発じゃなくてUnityの内部コード作ってただけなのでガワの知識がナイ。 あと今までなんどかPythonのプロジェクトとか作ろうとしたときに開発環境整える時点でダルすぎたので、あんまり使いたくない 少し触った感じReactの方がめちゃくちゃ分かりやすいのでこれで行きます。
開発環境の構築
やることは多いが、比較的楽。一個一個があまり重くないので。
・Node.jsの最新LTS版をインストールする ・コマンドプロンプトでnpxコマンドを使って任意の改装にreactプロジェクトフォルダを作る ・Visual Studio Codeを入れる ・VSCodeでプロジェクトフォルダを開く ・ターミナルを開いてnpm startコマンドを入力 ・reactの初期画面（というかブラウザ表示できる最初のテンプレート画面みたいなやつ）がブラウザで起動する ※ちょこちょこ拡張機能入れたりがある ここまでが準備
プロジェクトフォルダー構造
プロジェクトフォルダ内のsrcフォルダに、index.html, .css, .js などが存在する。この辺は基本いじらなくていいみたい（少なくとも現時点までは） index.jsを見ると、App.jsを参照し、これをhtmlに飛ばしていることが分かる。 要するにApp.jsでどういう表示をしたいかを書いていけばいいということらしい
Functionalコンポーネント
classコンポーネントというのもあるが、ReactHooksではFunctionalしか使わなくて大丈夫（そこがウリらしい） classと対比されることから、処理の塊を指すとみてよさそう Reactの基礎【コンポーネント】 だいたいあってるっぽいな...処理やデータの扱いが記述されたオブジェクトのことを指す。 これの組み合わせでページを作っていける。
コンポーネントにデータと処理がまとまっていたりするので拡張やメンテナンスが容易でいいよねというようなことを言われていた気がする Functionはまあ、メソッドだね
用語
Props：引数と思ってよい。propertiesの略 イベントハンドラー：ボタンオブジェクトのonClickとかonChangeとか。これはC#のイベントハンドラーと大体一緒。発生したイベントに応じてハンドラを引数として渡してくれる仕組みがあるので、これを使っていろいろやろうねって話 state：クラス（コンポーネント）内変数みたいなもの。厳密には子や孫が干渉できることになるが、まあざっくりそんな感じ useState：stateを更新するための関数。引数に受け取った値をstateにぶっこむ。 アロー関数：ラムダ式での関数定義のこと。"関数名= (引数) => {処理}"のアレね。 useEffect：レンダリングの度に実行される処理。Update的なアレ。すべてのレンダリングで反応するが、第二引数に[(監視するstate)]としておくことで、レンダリング前後でそのstateに変化があった場合のみ処理させる、ということができる。(レンダリング)=>(ユーザー操作とか何らかのトリガーでstateが変わる)=>(レンダリング※useEffectの監視対象なら実行)という流れ useContext：コンテキストで囲われたコンポーネントたちは、その範囲内で共通のvalueを使用可能になる。プロバイダーとコンシューマーという概念があり、createContextでコンテキストのプロバイダーを作成できる。囲われたコンポーネント側でコンシューマーとして使用を宣言すれば、valueを参照可能になる useReducer：stateに対し、あらかじめトリガー&それによってstateをどう変更するかを作成しておける（この定義をreducerとよぶ）。useStateとの違いは、useStateは引数を単にセットするだけだが、useReducerは引数を受けて何をするか、という風に広範な使い方を決めておける。
書き忘れていたが、変数を定義するときにいちいち型を指定しなくていい。勝手に向こうで扱ってくれる。これはpythonっぽいね
ライブラリや機能の話
APIデータを取得する方法
大きく二つある。 axiosという外部ライブラリを使う方法と、javascriptのfetchを使う方法。
axios.get(API取得用のURL) .then(res => { // 何か素敵な処理 }) axiosを使うと、jsondata形式でデータを取得できる。これをstateに入れておくことで、適宜情報の取り出しができる。
fetch(API取得用のURL) .then(res => res.json()) .then(res => { // 何か素敵な処置 }) fetchを使う場合、帰ってくるのがHTML型のデータなので、使い勝手を考えて.json()でjson形式に変換する。
useReducerとuseContextの組み合わせ
useReducerを使用可能なスコープは、普通にやるとreducerを定義したコンポーネント内に限定される。 親コンポーネントで作成したreducerを子以下のコンポーネントでも呼び出し、親のstateに何かしらの状態変化を起こせるようにできたら便利だね、ということでuseContextを併用して実現する。
AppContextのProviderで、引き渡すvalueを宣言する際にstate変数と、それに対するdispatch（reducer処理）を設定しておく。 AppContextコンポーネントで囲われた
