記事の内容は、2024年中旬にドラフト記載された草案をそのまま掲載したものとなります。ご承知おきの上でお楽しみいただければ幸いですー！

はじめに

React学習を始めたきっかけや、今回の記事の目的を簡単に説明します。

学んだこと

まずは、土台となるJavaScriptを体系的に学習しました。
その後は実際に、バニラJavaScriptのみでTODOアプリをいちから作ってみました。

　基本的に画面の部品にリスナをセットして関数処理を実行させている
　オブジェクト指向的言語ではない（ようだ..?）
　「next~」とか「previous~」
　リスナ起動された部品コンポネントを基準とした周りのコンポネントへのアクションは、これらの記法で容易に実装できた！

　想像していたより柔軟にいろいろと実装できそうだと感じました～(((o(ﾟ▽ﾟ)o)))

ただオブジェクト指向じゃないという点を鑑みると大規模アプリケーション開発は、規模数が大きくなるにつれて大変になるだろうと感じました。
バニラで実装されている巨大プロダクトってあるのでしょうか。
ご存じの方はぜひ教えていただければ嬉しいです。

まずは、こちらもReactの記法を体系的に学びました。
その後（以下同文）

render（レンダリング）…画面描写処理のこと
コンポネント（関数）
- Porps（引数）…分割代入や省略記法が適用できる
- Style（CSS）…CSSがオブジェクト定義可能
状態（State）
- useState()を呼びだすことで前回の画面表示内容との差分を比較できる
- 特定のコンポネントではバッチ処理が実行されている
  - 更新対象：グローバル変数（言い方があっているか不明だが）or ローカル変数のどちらであるかを注意して実装する必要がある。
フック
関数コンポネントの一番最初に定義しなければならない。
- useState/useEffect
再レンダリング
親コンポネントが再レンダリングされたら子コンポネントも同じく再レンダリングされる
→　それを拒否する（子コンポネントは再レンダリングさせない）方法もある
Reactの配列処理では一意となるKeyの指定を忘れないこと

ピュアなJSは「手続き型」、Reactは「宣言型」と呼ばれるそう。
Propsとして何を渡してあげるのがベストになるかを検討する

渡される側のProps名と受け取る側のProps名が合致されるように意識する。
→　TypeScriptでの記法もまた考慮する

Reactの記法を基礎からサラッと学べてよかったです。
この後はTypeScriptやNode.jsなどほかのフレームワークなども使用してみて、
それぞれのできること・できないことを肌で感じてみたいと思います。

今一番気になっているのはThree.js！
（3Dアニメ―ションを実装してみたい^^