最近、ずっとPCと向き合っているので生活環境を変えていかないとな〜と思っています。
今日は、Reactを勉強していて
“Reactでは直接オブジェクトを変更することはしないこと”と学んできました。
Reactを使用してmapメソッドやsliceメソッド、findメソッド等を使うようになって、
その理由がなんとなく理解できてきたので記事にしようと思います。
データ操作のやり方
データ操作においては、ミューテート、イミュータブルがあるそうです。
ミューテートについて
データやオブジェクトの中身を直接的に変更することを指すようです。
下記が例になります。
イミュータブルについて
一度作成したらその値や状態が変更はできず、新しいデータやオブジェクトが作成されることを指すようです。
下記が例になります。
ミューテートのメリットデメリット
メリット：
値を直接変更できるのでコードが読みやすくなるのかなと考えています。
デメリット：
Reactの場合、配列やオブジェクトが変更された場合どこで何が変更されたのか追跡する機能があリマhした。なので、配列やオブジェクトを直接変更せずに複製(クローンみたいな感じ)で作れるので何が違うのかをみれるのでバグが出にくいのかなと考えています。
Reactでのデータ操作
Reactでの状態管理にはuseStateフックを使用することを学びました。
イミュータブルな状態をReactで行う例が下記になります。
ですので、Reactでは何が変更されたのかという機能を活かすために、イミュータブルなデータが使われているのかなと考えています。
補足：
ミューテートとミュータブルの違いがごちゃごちゃになってしまったので、調べてみました。
- ミューテート（Mutate）:
- 動詞: “mutate” は「変更する」や「変異させる」という行為を指します。
- プログラミングコンテキスト: データやオブジェクトの状態を変更する操作を指します。つまり、既存のデータやオブジェクトを変更することを示します。例えば、リスト内の要素を追加、削除、更新することなどが該当します。これは通常、ミュータブルなデータ構造（例：JavaScriptの配列やオブジェクト）に対して行われます。
- ミュータブル（Mutable）:
- 形容詞: “mutable” は「変更可能な」や「変異しやすい」という性質を表します。
- プログラミングコンテキスト: データ構造が変更可能であることを示します。つまり、ミュータブルなデータ構造は、その内容や状態が直接変更可能で、変更操作によって元のデータ構造が変更されることがあります。例えば、ミュータブルな配列は、要素の追加や削除が可能で、これにより配列自体が変更されます。
簡単に言えば、ミューテートは変更の行為（動詞）を指し、ミュータブルは変更可能な性質（形容詞）を指します。ミュータブルなデータ構造に対してミューテート操作を行うことが一般的で、この操作によってデータやオブジェクトの状態が変化します。一方、イミュータブルなデータ構造は変更不可能であり、変更操作によって新しいデータ構造が生成されます。
だそうです。
今回のまとめ
- Reactではイミュータブルを使う(データを複製して値を変更・利用する)
- 理由として、Reactがオブジェクトの値を追跡する機能があるため
でした。
最初意味がよくわからなかったのですが、触っていくうちになんとなーく理解できるようになってきました。
個人の見解も入れてみて書いてみたので違ったりした場合は、ご連絡いただけれると幸いです。
よろしくお願いいたします。
今日はここまでです〜。
