反応への道

Dec 01 2022

React は、Web アプリケーションの構築に使用される最高の Javascript ライブラリの 1 つです。React を理解するには、React が内部でどのように機能するかを理解する必要があります。

UnsplashのKsenia Yakovlevaによる写真

React は、Web アプリケーションの構築に使用される最高の Javascript ライブラリの 1 つです。React を理解するには、React が内部でどのように機能するかを理解する必要があります。この記事では、React の基礎、未加工の React API、内部でどのように機能するかを調べ、最後に再利用可能な React コンポーネントを作成します。

Javascript と HTML DOM の概念について基本的な知識があることを前提としています。そうでない場合は、ここでこれらの概念を確認できます: JavaScript ガイド、DOM の紹介。

それでは本題に入りましょう！！

Web ページはどのように作成されますか?

Web の仕組みに興味を持ったことはありますか? Web サイトの URL を入力して [Enter] をクリックするとどうなりますか? 私たちの画面でそのウェブページをどのように見ることができますか? 順を追って見ていきましょう。

1. Web サイトを検索すると、HTTP 要求がサーバーに送信されます。

2. サーバーは Web サイトのファイルを送信します。

3. ブラウザはこれらのファイルを解析します。最初に HTML ファイルが解析され、次に CSS および JavaScript ファイルが解析されます。

4. ブラウザーは、解析された HTML から DOM を構築し、画面に表示します。

これは、Web ページが画面に表示される方法です (DNS サーバーや HTTP プロトコルなどの概念は他にもありますが、それは私たちの関心領域ではありません)。それと同じくらい簡単ですが、待ってください、この DOM は何ですか? それはどこから来たのか？DOM について少し調べてみましょうか。

DOM は、論理ツリーを持つ HTML ドキュメントを表すドキュメントオブジェクトモデルを指します。各ブランチにはノードが含まれ、各ノードにはオブジェクトが含まれます。DOM メソッドは、DOM へのアクセスを許可します。これらのメソッドを使用すると、文書の構造と内容を変更できます。

ご存知のように、HTML は Web の基本的な構成要素であり、HTML を使用して Web ページを作成できます。「Hello world!!」を表示する簡単な Web ページを作成してみましょう。以下に示すように：

<html>
  <body>
    <div id="root">
      <h1 id="greet">Hello World!!</h1>
    </div>
  </body>
</html>

JavaScript が DOM とやり取りできるようにするには、HTML ファイルにスクリプトタグを追加する必要があります。これにより、DOM 内の要素を作成、削除、または更新するコードを記述できます (これを DOM 操作と呼びます)。

上記で作成した「Hello World!!」とやり取りする JavaScript コードを見てみましょう。ページの内容を「Wassup World!!」に変更します。

JavaScript を使用した HTML 要素の作成:

JavaScript を使用して HTML 要素を変更できることがわかったので、 id として「root」、divの子としてh1を持つdivを含む Web ページを作成してみましょう。h1には「Hello World!!」が含まれています。コードは以下のサンドボックスにあります。

ただし、JavaScript を使用して要素を作成することは必須です。このタスクを達成するには、Javascript に段階的な手順を提供する必要があります。たとえば、id を持つdivを作成する場合は、最初にそのdiv要素を作成し、次にid属性を設定し、最後にこのdiv をその親に追加する必要があります。もうやりすぎです。どのように作成するかではなく、作成する要素だけを JavaScript に伝える方法 (宣言型アプローチ) があるとしたらどうでしょうか? 多くの JavaScript コードを削減します。いいですね。しかし、どうやってそれを達成するのでしょうか? この命令的かつ宣言的なアプローチとは何ですか?

命令型プログラミングは、何かを行う方法であり、宣言型プログラミングは、行うことに似ています。これは、命令型プログラミングと宣言型プログラミングに関する美しい記事です。

React は宣言型言語です。つまり、内部で何が起こっているかを気にせずにコードを書くことができます。

それでは、宣言型プログラミングがどのように私たちの生活を楽にするかを見てみましょう。

React API の概要:

React API には、DOM を操作するためのメソッドが含まれています。例: React.createElement() および ReactDOM.render()。React.createElement() メソッドは、document.createElement() と ReactDOM.render() を document.append() として同等であると考えてください。これらの方法を詳しく見てみましょう。

React.createElement() は、作成する要素と小道具の 2 つの引数を取ります。ID が「root」でテキストが「Hello World!」の単純なdivタグを作成する場合は、内部は次のようになります。

const elementType = "div";
const elementProps = {id: "root", children: "Hello World!!"}
const newDiv = React.createElement(elementType, elementProps)

const elementType = "h1";
const elementProps = {className: "heading", children: "Hello World!!"}
const heading = React.createElement(elementType,elementProps)

ReactDOM.render(heading,document.getElementById("root"))

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(heading)

React は、コードで React を使用するための出発点です。npm を介してパッケージとしてインストールするか、 unpkg.comで入手可能なスクリプトファイルを使用できます。わざわざインストールする必要がないので、サンプルコードでスクリプトファイルを使用しましょう。

同じ「Hello World!!」を再作成してみましょう。React API を使用したページ。

React.createElement() の children プロパティは、プレーンテキストにすることも、別の要素にすることもできます。これが、ネストされた要素を作成する方法です。例として、次の HTML コードを考えてみましょう。別の div を子として含むコンテナーとしての div 。子divタグには、「Hello」と「World」というテキストを含む2 つのスパンタグが含まれています。コードサンドボックスへのリンク

React API でネストされた要素を作成する

ネストされた要素を作成するには、ネストされたメソッドを使用する必要があるため、コードを読んで理解することが非常に困難になります。
そのため、より読みやすいコードが必要です。コードを読みやすくする別の方法はありますか? React API を使用する代わりに、HTML のような構文を記述できたらどうでしょうか? ここでJSXが登場します。JSX について少し学びましょう。

JSX:

JSX は HTML に似た構文 (HTML ではありません) であり、生の React API に対する構文糖衣です。これらすべての React メソッドは、JSX の助けを借りて、単純な HTML のような構文で記述できます。

JSX は Javascript ではないため、ブラウザーが理解できる JavaScript にトランスパイルする必要があります。

Babel は、JSX を Javascript にトランスパイルするトランスパイラーです。以下に示すように、すべての JSX は Babel によって React API に変換されます。

Babel で JSX を Javascript にトランスパイルする

前の画像に見られるように、<div id=”root”> はReact.createElement(“div”,{id:”root”},children)に変換されます。これは、Babel が JSX を React API に変換する方法です。

私たちのプロジェクトで Babel を利用するには、 unpkg.comのスクリプトファイルを使用する必要があり、 type=” text/babel”に言及している script タグ内で JSX を書き始めることができます。より明確にするために、以下のサンドボックスを参照できます

私たちは、Javascript を使用して DOM を強制的に変更することから、JSX を使用することへと大きく前進しました。Javascript とは異なり、JSX を使用している間は要素を作成する方法に悩まされることはありません。それらを DOM を変更する React API に変換するのは Babel の仕事です。

これが、React の宣言型アプローチが私たちの生活を楽にする方法です。しかし、まだ終わったわけではなく、React の主なアイデア、つまり再利用性が欠けています。再利用可能な React コンポーネントを作成しましょう。

React コンポーネントの作成 :

関数はコードを共有することで私たちの生活を楽にすることがわかっているので、JSX コードを関数として共有することもできますが、これらは React ではコンポーネントと呼ばれます。

例を見てみましょう。

<div className="container">
  <div className="msg">Hello World!!</div>
  <div className="msg">Bye World!!</div>
</div>

function message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      {message("Hello World!!")}
      {message("GoodBye World!!")}
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

const element = React.createElement("div",{className="container"},
  React.createElement(message,"Hello World!!"),
  React.createElement(message,"GoodBye World!!")
)

要素ではなく、メッセージ関数をパラメータとして React.createElement() に渡しました。関数をパラメーターとして React.createElement() に渡すと、React Reconcilerは渡されたパラメーターを使用してその関数を呼び出します。リコンサイラーがホスト要素に遭遇すると、レンダラーがそのマウントを処理します。

ホストコンポーネントは、ホスト環境(ブラウザーやモバイルデバイスなど) に属するプラットフォーム固有のコンポーネントです。DOM ホストの場合、これらはdivやimgなどの HTML 要素である可能性があります。

この例では、 message ("Hello World!!")とmessage ("GoodBye World!!")の 2 つの関数呼び出しが発生し、両方の関数が次の値を返します。

<div className="msg"> Hello World!! </div>

生の React API を使用するよりも JSX を使用してコードを読みやすくするのと同じように、カスタムコンポーネント (Javascript 関数) に JSX を使用すると、コードがよりクリーンで読みやすくなります。JSX を取得して React API にトランスパイルするのは Babel であることを思い出してください。そのため、文字列ではなく名前で関数を渡すように Babel を構成する必要があります。

カスタムコンポーネントを JSX タグとして使用するには、Babel がカスタムコンポーネントとして認識できるように、関数名の最初の文字を大文字にする必要があります。次のようになります。

function Message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      <Message>Hello World!!</Message>
      <Message>GoodBye World!!</Message>
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

万歳!! 最初の React コンポーネントを作成しました

結論：

これが、React が舞台裏でどのように機能するかです。これは、物事が内部でどのように機能するかを説明する基本的な記事に過ぎず、状態、仮想 DOM、調整など、React を強力かつ効率的にする他の多くの概念があることを忘れないでください。