ReactJS - DOM: 基礎者のガイド

こんにちは、将来のReact開発者さんたち！ReactJSとDocument Object Model（DOM）の興味深い世界にあなたたちを案内する旅に興奮しています。私はコンピュータサイエンスを教えて数年間、多くの生徒が最初はこの概念に苦戦しているのを見てきましたが、信じてください、一度理解すると、自転車に乗るのと同じで - 忘れることはありません！

DOMとは？

ReactとDOMの関係に踏み込む前に、基礎から始めましょう。DOMをあなたのウェブページの家系図と考えてください。あなたのページ上の各要素 - ボタンやパラグラフ、画像など - はこの木の家族の一員です。家族の一員の髪型や服装を変えるのと同じように、これらのDOM要素を操作して、ウェブページの外観や動作を変更することができます。

ReactDOM: Reactとブラウザの橋

さあ、私たちのスター選手、ReactDOMを紹介します。ReactDOMを超効率的なパーソナルアシスタントとして考えてください。其主要な仕事は、あなたが作成したReactコンポーネントをブラウザが理解し表示できる形に変換することです。

ReactDOMの使用方法

簡単な例から始めましょう：

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, React World!</h1>;
ReactDOM.render(element, document.getElementById('root'));

このコードスニペットでは、ReactDOMに私たちのelement（単純なh1見出し）を取り、IDが'root'のDOM要素の中にレンダリングするように指示しています。これは、アシスタントに「この写真（私たちのReact要素）を壁のフレーム（'root'要素）に載せてくれ」と言うのと同じです。

ReactDOMServer: サーバーサイドでのReactの提供

次に、ReactDOMServerを紹介します。これはReactDOMの双子の兄弟で、裏で働いています。ReactDOMがブラウザ内で処理する間、ReactDOMServerはサーバー上でReactコンポーネントをレンダリングする手助けをしてくれます。

以下に簡単な例を示します：

import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);

このコードは、私たちのすべてのAppコンポーネントをHTML文字列に変換します。これは、Reactアプリのポラロイド写真を撮るようなものです - ブラウザに素早く送信できるスナップショットです。

ReactDOMClient: 新しい子どもの登場

React 18とともに、ReactDOMClientが登場しました。これはReactDOMの若い、よりエネルギッシュな兄弟で、パフォーマンスと新機能に焦点を当てています。

以下のように使用することができます：

import React from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(<App />);

アプリを直接レンダリングする代わりに、まず「root」を作成します。このrootは、React 18のすべての新しい機能を楽しむために私たちのReactアプリを植える特別な鉢のようなものです。

ReactDOMClientの適用

実際のシナリオでReactDOMClientをどのように使用できるか、もう少し深く見ていきましょう：

import React from 'react';
import { createRoot } from 'react-dom/client';

function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

const root = createRoot(document.getElementById('root'));
root.render(<Counter />);

この例では、簡単なカウンターアプリを作成しています。createRoot関数は私たちのReact 18環境を設定し、自動バッチングなどの新しい機能を利用できるようにします。

ReactDOMメソッドの比較

これまで話した異なるメソッドを理解するために、以下の便利な表を示します：

メソッド	使用場所	目的
ReactDOM.render()	ブラウザ	React要素をDOMにレンダリング
ReactDOMServer.renderToString()	サーバー	ReactコンポーネントをHTML文字列にレンダリング
ReactDOMClient.createRoot()	ブラウザ	React 18の機能のためのrootを作成
root.render()	ブラウザ	作成されたrootにコンポーネントをレンダリング

結論

そして、ここまでReact DOMの景観を旅しました。クラシックなReactDOMからサーバーサイドのReactDOMServer、そして新鮮なReactDOMClientまでです。覚えておいてください、プログラミング言語（またはそれ以外の言語）を学ぶのと同じように、練習は完璧を生みます。これらの概念を自分のプロジェクトで実験することを恐れずに。

私が生徒たちにいつも言うように、コーディングは料理と同じです - 最初は散らかすかもしれませんが、時間と練習を積むことで、すぐに美味しいReactアプリケーションを手に入れることができるでしょう！それでは、コードを手を汚して、楽しいReact開発を始めてください！

Credits: Image by storyset