Reactを学んでみる

元々はWebデザインを学んでみたかったりした性分なので、ずっとフロントエンド の技術を勉強してみたかった。しかし、心の中で業務でフロントエンドあんまり使わないし、、、とか謎の言い訳をしたりしながらPHPとLaravelを学んでみたり。

と、いうわけでやりたいことをやることにしました。

もちろんそれだけでは生きていけないので、Salesforceの資格の勉強をした上で、やっていこうと思います。Reactならギリギリ業務で使う可能性出てきたし、JavaScriptは業務で使う可能性大になってきているいい流れ。

このNotionBlogもReacとNext .jsで構築されているので、早いうちにデザインの修正をしたい。 Instagramと連携とかさせても面白いよねー。

学習方針

こちらを参考に、学習を進めていこうと思います。

▶︎Qiita : Reactの学習、今からやるならこうする

学習記録

Progate　React Ⅰ

Stateについて

値の変更する際に使用する。フロントからアクセス可能な変数定義をまとめた場所ってイメージかな。。。？

Progate　React Ⅱ

コンポーネント、popsについて

LWCなどと同様のコンポーネントという考え方について学んだ。コンポーネント化するためには、外側から値を設定し、動的に値を出力する必要がある。それを可能にするのがprops。値を渡すのにJavascriptでループさせて表示させたりできるのは便利だと思った。

Progate　React Ⅲ

上記二つの復習。clickをトリガ にstateを変更。propsを受け取って表示したり。

Progate　React Ⅳ

-これぞSPAと言った感じか。初めから作成物に取り掛かるのではなく、作成物が完成するまでのゴールをいくつか設けているので、検証と開発を同時並行できてわかりやすい。普段の開発もゴールを細分化していくと開発しやすいし改めて学び。

-そういえば、今まで自分が触ってきたVisualforceとかは、BlooleanのプロパティでHTMLをだし分けていた。HTML上にずらずら書いたものをプロパティで判断していたから、視認性が悪かった。Reactでは、if文で変数にJSXを入れることで、表示の切り替えを行っているため分岐も見やすくなる。本体のJSXも変数一つになるので全体的にも見通しやすい。これはメリットだなぁと感じる。

※ProgateでもEmmetが使えると嬉しい、、、

React公式チュートリアル

▶︎React公式チュートリアル

state

・コンポーエントが何かを「覚える」ためにはstateを使用する。

・定義されているコンポーネント内部でプライベートと見なすべきもの。

・setStateでレンダリングが走る。

複数の子供要素からデータを集めたい、または２つのコンポーネントに互いにやりとりさせたいと思った場合

・親コンポーネント内で共有のstateを宣言する必要がある。

・親コンポーネントはpropsを使うことで子に情報を返すことができる。

→子コンポーネントが兄弟同士、あるいは親との間で常に同期されるようになります。

制御されたコンポーネント

とあるコンポーネントが自我を持たず、仕事をこなしてくれるようになった。親の言うことを聞いてくれるコンポーネントへと。。。

イミュータビリティはなぜ重要なのか。「チュートリアル参照」

一般的に、変化するデータに対しては2種類のアプローチがある。1番目のアプローチはデータの値を直接いじってデータをミューテート（書き換え）すること。2番目のアプローチは望む変更を加えた新しいデータのコピーで古いデータを書き換えること。

・ミューテートを伴うデータの変化

var player = {score: 1, name: 'Jeff'};
player.score = 2;

・ミューテートを伴わないデータの変化

var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});
// playerをコピーして、score属性を2に変更

直接データを変更しないことで以下のメリットがある。

List項目にKeyが必要である理由

Reactではコンポーネントが再レンダリングされる際に、以前との変更点を参照する。その際に、ユニークなKeyを持ち比較している。

key はグローバルに一意である必要はありません。コンポーネントとその兄弟の間で一意であれば十分です。