React：超基本

Posted at 2025-02-02

はじめに

Reactを使用しているプロジェクトにアサインされようとしているが、超初見なので概要や関連する用語について学んだ結果をまとめてみようと思う。

※まとめてみたらほとんどDOMがイマイチ理解できず、半分くらいはDOMの説明となっている。

Reactは、ウェブアプリケーションのユーザーインターフェース（UI）を構築するための強力なJavaScriptライブラリです。
※Facebookによって開発され、現在では多くの開発者に愛用されています。

Reactの最大の特徴は、UIをコンポーネントと呼ばれる小さな、再利用可能な部品に分割することです。
これにより、複雑なUIも管理しやすくなり、コードの再利用性と保守性が向上します。

Reactは宣言的なプログラミングスタイルを採用しています。
これは、「どのように」ではなく「何を」表示するかに焦点を当てるアプローチです。
開発者はUIの最終的な状態を記述し、Reactがその状態を実現するために必要な手順を処理します。

Reactの宣言的なプログラミングの特徴は以下の通り。

例えば、以下のようなコードは宣言的です：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

このコードは、「props.nameを使って挨拶を表示したい」ということを宣言しています。Reactが内部でDOMを効率的に更新する方法を処理するため、開発者はその詳細を気にする必要がありません

Reactは仮想DOMという概念を使用して、効率的にUIを更新します。
これにより、実際のDOM操作を最小限に抑え、パフォーマンスを向上させています。

DOMとは、Document Object Modelの略で、Webページの構造や内容を表現し操作するための仕組みです。
もう少し言えば、HTMLやXML文書をプログラムから操作するためのインターフェースを提供するAPIと言えます。
以下にDOMの主な特徴を簡潔に説明します：

ツリー構造：HTMLやXMLの文書をツリー状の階層構造として表現します。
プログラムからのアクセス：JavaScriptなどのプログラミング言語からWebページの要素にアクセスし、操作することができます。
動的な操作：DOMを使用することで、以下のような動的な操作が可能になります：
- HTML要素の追加や削除
- 要素の属性変更
- テキストの書き換え
- スタイルの変更
クロスプラットフォーム：異なるプラットフォームでも同じ方法でWebページを操作できます。

DOMを理解することで、JavaScriptを使って動的なWebページを作成したり、ユーザーの操作に応じてページの内容を変更したりすることができるようになります。

仮想DOM（Virtual DOM）は、実際のDOMの軽量なコピーをメモリ上に保持し、効率的にUIを更新するための技術です。主な特徴は以下の通りです：

仮想DOMは、ReactやVue.jsなどの現代的なフロントエンドフレームワークで採用されており、大規模なWebアプリケーション開発において重要な役割を果たしています。

ちょっとこれだけだと（私が）理解できなかったので、もう少し噛み砕くと以下となる。
仮想DOMは差分のみを更新し、仮想DOMの仕組みは以下となる。

この仕組みにより、仮想DOMは必要最小限の更新のみを行い、パフォーマンスを向上させます。例えば、リスト内の一部の要素だけが変更された場合、変更された要素のみが更新され、リスト全体が再レンダリングされることはありません。

この最適化された更新プロセスにより、Reactなどのフレームワークは効率的なDOM操作を実現し、アプリケーションのパフォーマンスを向上させています。

以上