100日後にReactをちょっと理解するデザイナー - リアクトってなんだ？
私は限界インハウスUIデザイナー。最近、エンジニアの工数が不足し、開発を効率化するため、デザインシステムを導入し浸透する活動をしている。
そこで出てくるのが「React」だ。リアクトって何すか…フロントエンドチームから説明はしてもらえるのだが、自分でも調べておかないとやばい。
HTMLとCSSがちょっと書けるレベルのデザイナーが、Reactについて調べた記録を残していくよ。
Reactって何ですか？
いつもならGoogle先生に聞く所だが、ChatGPT先輩に聞いてみた。
ーーReactって何ですか
Reactは、Facebookが開発したJavaScriptライブラリで、ユーザーインターフェース（UI）を構築するために使用されます。仮想DOMを利用して高いパフォーマンスを提供し、コンポーネントベースのアーキテクチャでUIを構築します。SPAや大規模なWebアプリケーションの開発に向いています。
エンジニアと同じ様な回答が返ってきた。遠慮せずに何回でも聞けるのが先輩の良い所だ。もっと聞いてみよう。
そもそも、JavaScriptって何だ？
概要
HTMLとCSSを書いて、「アニメーションをつけるやつ」くらいの認識で止まっている。JavaScriptってそもそも何なんだ？
JavaScriptは、ウェブページの動的な要素を制御するために使用されるプログラミング言語の一つです。
おおむね、合ってるっちゃ合ってるか？
用途
JavaScriptは主に次のような用途で利用されます：
1. クライアントサイドのスクリプティング: ユーザーのブラウザ上で実行され、動的なコンテンツを生成し、ユーザーと対話するために使用されます。
2. イベント処理: ボタンのクリックやフォームの送信などのイベントに応じてアクションを実行します。
3. 非同期通信: ウェブページとサーバー間でデータを非同期にやり取りするために使用されます。Ajax（Asynchronous JavaScript and XML）はその代表例です。
4. ブラウザオブジェクトモデル（DOM）の操作: HTMLやXML文書の構造をプログラム的に変更するために使用されます。
ちょっと待った。いっぱい用語が出てきたぞ。1つずつ見ていこう。
クライアントサイドとは？フロントエンドとの違いは？
ユーザーのブラウザ上で実行されるコードや処理を指します。主にJavaScriptがクライアントサイドのプログラミング言語として使われます。クライアントサイドの処理は、ユーザーのデバイス上で行われます。フロントエンドはユーザーエクスペリエンスの広い範囲を指し、クライアントサイドは特にユーザーのデバイス上で実行されるコードに焦点を当てます。
簡単に言えば、フロントエンドはユーザーが直接対話する部分全体を指し、クライアントサイドはその中でもユーザーのデバイス上で実行されるプログラムに焦点を当てた用語です。
スクリプティングとは？
簡単なプログラムを書いて、特定の仕事やタスクを自動で行うことです。スクリプトは通常、高水準のプログラミング言語を使って書かれ、例えばデータ処理、ウェブ開発、自動化などに使われます。
クライアントサイドのスクリプティングってどういうこと？
ウェブページが読み込まれた後も、ユーザーがページ上での操作に対して迅速に応答することができます。例えば、フォームの入力を検証したり、動的なコンテンツを読み込んだりする際に利用されます。
あ〜そういうことか。いつもエンジニアと、仕様の相談をしているので理解できる。再読み込みしなくても処理ができるやつだ！（アホ）
クライアントサイドのスクリプティング:
概要: ユーザーのブラウザ上で実行されるスクリプトを指します。
例: ページが読み込まれた後に動的な要素を生成したり、ユーザーの操作に応じてコンテンツを変更したりすることが含まれます。
イベント処理:
概要: ユーザーがブラウザ上で行うアクション（例: ボタンのクリック、フォームの送信など）に対する応答として行われる処理を指します。
例: ボタンがクリックされたときに特定の関数を実行したり、マウスが特定のエリアに入ったときにイメージを変更したりすることが含まれます。
非同期通信:
概要: ページの再読み込みなしにデータをサーバーとやり取りする手段を提供します。Ajax（Asynchronous JavaScript and XML）は、非同期通信の実現手段の一例です。
例: ページが読み込まれた後に、ユーザーがボタンをクリックすると、JavaScriptを使用してバックエンドからデータを非同期で取得して、その結果をページに反映させることが含まれます。
う〜ん。なんか違うことは分かった。
ブラウザオブジェクトモデル（DOM）とは？
ブラウザオブジェクトモデル（DOM）とは何ですか
ウェブページの構造や内容をプログラムで操作するための仕組みです。ウェブページ上の要素にアクセスし、変更することができ、動的なコンテンツやインタラクティブな機能を実現できます。
う〜ん。なんか動くやつだな。
DOMの特徴 - 文書ツリー構造
1. 文書ツリー構造: DOMは、HTMLやXML文書をツリー構造として表現します。文書の各要素（タグ、テキスト、属性など）はノードとして表現され、親子関係や階層構造を持ちます。
出た「ノード」ってよくエンジニアが言ってるやつだ！
主な種類のノードには以下があります：
要素ノード（Element Node）: HTMLやXML文書の要素（例: <div>、<p>、<a>など）が対応するノードです。ツリー構造の中で親子関係を持ちます。
テキストノード（Text Node）: HTMLやXML文書のテキストが対応するノードです。例えば、<p>このようなテキスト</p>の場合、"このようなテキスト"がテキストノードとして扱われます。
属性ノード（Attribute Node）: HTMLやXML文書の要素の属性が対応するノードです。例えば、<a href="https://example.com">リンク</a>の場合、hrefが属性ノードとして扱われます。
コメントノード（Comment Node）: HTML文書内のコメントが対応するノードです。例えば、<!-- これはコメントです -->の場合、"これはコメントです"がコメントノードとして扱われます。
これらのノードは、DOMを通じてプログラムからアクセスされ、変更されたりします。JavaScriptを使用してDOMを操作する際に、これらのノードに対して様々な処理を行うことが一般的です。
おお、知ってる顔だな。君たちはノードとして扱われていたのか！！
DOMの特徴 - その他
2. プログラムによるアクセスと変更: JavaScriptなどのスクリプト言語を使用して、DOMをプログラムからアクセスし、変更することができます。これにより、動的なコンテンツの生成、要素の属性の変更、新しい要素の追加、既存の要素の削除などが可能となります。
3. イベント処理: DOMはイベントモデルを提供し、ユーザーアクション（クリック、入力など）やブラウザの状態変化（ページの読み込み完了など）などのイベントに対応するための仕組みを提供します。これにより、ユーザーの操作に反応して動作するウェブページを実現できます。
これはさっき見たやつ。
4. クロスプラットフォーム性: DOMはプログラミング言語に依存しない仕様であり、主にJavaScriptが使用されますが、他の言語でも利用可能です。これにより、異なるプラットフォームやブラウザで一貫性のあるウェブページの構築が可能です。
DOMはウェブ開発において非常に重要であり、クライアントサイドのスクリプティングにおいて、ページの動的な操作やインタラクションの実現に広く使用されています。
JavaScriptライブラリ
JavaScriptライブラリって何ですか？
JavaScriptで書かれた再利用可能なコードの集まりであり、特定の機能やタスクを簡素化し、効率的に処理するための便利な機能や関数を提供します。これにより、開発者は特定の機能をゼロから実装する必要がなくなり、効率的にウェブアプリケーションを開発できます。
中略
ライブラリは通常、オープンソースで提供され、コミュニティや開発者によって継続的にメンテナンスされています。
はあん。だからjQueryがどうした、Meta社がどうのって話になるのね。Reactもその一つですと。
ここまでのおさらい
ーーReactって何ですか
Reactは、Facebookが開発したJavaScriptライブラリで、ユーザーインターフェース（UI）を構築するために使用されます。
ここまでは、わかりました。
仮想DOM
ーーReactって何ですかの続き
仮想DOMを利用して高いパフォーマンスを提供し、コンポーネントベースのアーキテクチャでUIを構築します。
仮想DOMとは
ブラウザの実際のDOMと同じ構造を持つが、メモリ内で管理される仮想的な表現です。
なるほど、分からん。
ブラウザに表示されるウェブページの変更を効率的に行うための方法です。実際のページの模造品をメモリ内で作り、変更があるか比較してから本物のページをアップデートします。これにより、速くて効率的なページの更新が可能になります。
なんか、聞いたことがあるような気はする。
以下は、仮想DOMの基本的な動作を理解するための流れです：
1. 初期の仮想DOMの作成: アプリケーションの初回レンダリング時、実際のDOMと同じ構造を持つ仮想DOMがメモリ内に作成されます。
2. 状態の変更: ユーザーの操作やデータの変更に応じて、新しい状態がアプリケーションに適用されます。
3. 仮想DOMの更新: 新しい状態が適用された後、新しい仮想DOMが生成されます。この仮想DOMは、変更が加えられた部分のみを反映した構造を持ちます。
4. 差分比較: 新しい仮想DOMと前回の仮想DOMを比較し、実際に変更が加えられた部分を特定します。
5. 実際のDOMへの適用: 差分が特定されたら、その部分のみを実際のDOMに適用します。これにより、必要な部分だけが再描画され、全体のパフォーマンスが向上します。
なるほどね〜全然分かんないけど、デザインする側からすると…
ユーザーの操作やデータの変更に応じて、新しい状態をアプリケーションに適用させたい時にいつも使ってるやつで、新しい仮想DOMと前回の仮想DOMを比較し、必要な部分だけを再描画するってことか〜
仮想DOMとコンポーネントベースのアーキテクチャ
でも、なんでそれが、コンポーネントベースのアーキテクチャになるの？
再利用性と保守性: コンポーネントベースのアーキテクチャでは、UIを小さな再利用可能な部品（コンポーネント）に分割します。これにより、同じコンポーネントを異なる部分で使いまわすことができ、コードの再利用性と保守性が向上します。
それは知ってる。
局所的な状態管理: 各コンポーネントは自己完結型であり、それぞれが独自の状態（state）を管理します。これにより、局所的な状態管理が可能で、コンポーネントごとに状態の変更が行えます。
あ、そっか。必要な部分だけを再描画するときに、各コンポーネントが自己完結していることで、局所的な状態管理が可能になるのか。
いつも状態別のコンポーネントを作っているけど、あれを、あのまんま扱ってホイホイ局所的に状態管理をしているって訳か。
だから、一枚絵としてデザインするのではなく、コンポーネントの集合としてデザインすることで、Reactと相性の良い画面設計になるってことか〜
この組み合わせにより、コンポーネントベースのアーキテクチャと仮想DOMが協力して、再利用可能で効率的なUIの構築を実現します。コンポーネントごとに仮想DOMが管理され、変更があった場合には局所的な更新が行われるため、大規模なアプリケーションでもパフォーマンスを維持しながら柔軟性を提供します。
ぼんやりと概要が分かった気がするので、本日はここまで。
この記事が気に入ったらサポートをしてみませんか？