記事の内容は、2024年中旬にドラフト記載された草案をそのまま掲載したものとなります。ご承知おきの上でお楽しみいただければ幸いですー！
はじめに
React学習を始めたきっかけや、今回の記事の目的を簡単に説明します。
学んだこと
1. Reactを学ぶ前に知っておきたいモダンJavaScriptの記法
まずは、土台となるJavaScriptを体系的に学習しました。
その後は実際に、バニラJavaScriptのみでTODOアプリをいちから作ってみました。
-
基本的に画面の部品にリスナをセットして関数処理を実行させている
-
オブジェクト指向的言語ではない（ようだ..?）
-
「next~」とか「previous~」
リスナ起動された部品コンポネントを基準とした周りのコンポネントへのアクションは、これらの記法で容易に実装できた！想像していたより柔軟にいろいろと実装できそうだと感じました～(((o(ﾟ▽ﾟ)o)))
ただオブジェクト指向じゃないという点を鑑みると大規模アプリケーション開発は、規模数が大きくなるにつれて大変になるだろうと感じました。
バニラで実装されている巨大プロダクトってあるのでしょうか。
ご存じの方はぜひ教えていただければ嬉しいです。
2. Reactとは
まずは、こちらもReactの記法を体系的に学びました。
その後（以下同文）
- render（レンダリング）…画面描写処理のこと
- コンポネント（関数）
- Porps（引数）…分割代入や省略記法が適用できる
- Style（CSS）…CSSがオブジェクト定義可能
- 状態（State）
- useState()を呼びだすことで前回の画面表示内容との差分を比較できる
- 特定のコンポネントではバッチ処理が実行されている
- 更新対象：グローバル変数（言い方があっているか不明だが）or ローカル変数のどちらであるかを注意して実装する必要がある。
- フック
関数コンポネントの一番最初に定義しなければならない。- useState/useEffect
- 再レンダリング
親コンポネントが再レンダリングされたら子コンポネントも同じく再レンダリングされる
→ それを拒否する（子コンポネントは再レンダリングさせない）方法もある - Reactの配列処理では一意となるKeyの指定を忘れないこと
気づき・感想・まとめ
ピュアなJSは「手続き型」、Reactは「宣言型」と呼ばれるそう。
Propsとして何を渡してあげるのがベストになるかを検討する
個人的な注意点
渡される側のProps名と受け取る側のProps名が合致されるように意識する。
→ TypeScriptでの記法もまた考慮する
参考資料
- 使用したUdemy講座
【React18対応】モダンJavaScriptの基礎から始める挫折しないためのReact入門 - useStateの理解
ReactのuseStateについて丁寧に理解する
おわりに
Reactの記法を基礎からサラッと学べてよかったです。
この後はTypeScriptやNode.jsなどほかのフレームワークなども使用してみて、
それぞれのできること・できないことを肌で感じてみたいと思います。
今一番気になっているのはThree.js！
（3Dアニメ―ションを実装してみたい^^