100日後にReactをちょっと理解するデザイナー - コンポーネントが表示されるまで

足蟹@UIデザイン自社開発

2024年1月2日 19:13

私は限界インハウスUIデザイナー。最近、エンジニアの工数が不足し、開発を効率化するため、デザインシステムを導入し浸透する活動をしている。

そこで出てくるのが「React」だ。リアクトって何すか…フロントエンドチームから説明はしてもらえるのだが、自分でも調べておかないとやばい。

HTMLとCSSがちょっと書けるレベルのデザイナーが、Reactについて調べた記録を残していくよ。

書ける様になるまではいかなくても、実際エンジニアが何をやっているのかを、UIを設計する立場から知っておきたい。

例のごとく、ChatGPTに解説を依頼した。

コンポーネントが表示されるまで

ReactアプリケーションのコンポーネントがHTMLとしてブラウザに表示されるまでの基本的な流れ

コンポーネント作成

例えば、Header.jsというファイルにヘッダーコンポーネントを作成する場合:

ChatGPT

// Header.js
import React from 'react';

class Header extends React.Component {
  render() {
    return <h1>This is the Header component</h1>;
  }
}

export default Header;

↓コンポーネントをインポート

App コンポーネントのレンダリング (app.js)

import React from 'react';
import Header from './Header'; // Headerコンポーネントをインポート

class App extends React.Component {
  render() {
    return (
      <div>
        <Header /> {/* Headerコンポーネントを呼び出す */}
        {/* 他のコンポーネントやHTML要素の配置 */}
      </div>
    );
  }
}

export default App;

App コンポーネント内で他のコンポーネントが呼び出され、コンポーネントツリーが形成されます。

ChatGPT

↓ レンダリング

エントリーポイント(index.js)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // アプリケーションのメインコンポーネント

ReactDOM.render(<App />, document.getElementById('root'));

通常、ReactDOM.render() メソッドを使用して、ReactコンポーネントツリーをブラウザのDOMにマウントします。
上記の例では、<App /> が document.getElementById('root') 内にレンダリングされます。

コンポーネントツリーのレンダリング:
App コンポーネント内で他のコンポーネントが呼び出されると、それらのコンポーネントも再帰的にレンダリングされます。各コンポーネントの render() メソッドが呼び出され、JSXが仮想DOMに変換されます。

ChatGPT

↓ JSXが仮想DOMに変換される

仮想DOM

仮想DOMから実際のDOMへの変換:
仮想DOMはReactが管理するメモリ上の表現であり、変更があった場合にReactが最適な方法で実際のDOMに変更を適用します。
変更があると、Reactは差分を検出し、変更が必要な部分のみを効率的に更新します。

ChatGPT

↓変換

実際のDOM

HTMLの生成:
Reactが仮想DOMから実際のDOMに変更を適用すると、最終的にブラウザに表示されるHTMLが生成されます。

ChatGPT

↓HTMLの生成

HTMLがブラウザ上に表示される

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="stylesheet.css"> <!-- cssは指定しないと効かない -->
    <title>ここにページタイトル</title>
  </head>
  <body>
    <div id="root"></div><!-- index.jsのroot -->
    <script src="bundle.js"></script><!-- JavaScriptファイルの読み込み -->
  </body>
</html>

この記事が気に入ったらサポートをしてみませんか？