結局、React とは何なのか?

 

私が React を学び始めようと思った頃、「React とは」で検索をかけてヒットしたページをいろいろ読みましたが、

どれもいまいちピンと来なかったので、

今回は

  • React はどの点においてユニークか
  • React は結局何をしているのか

を中心に、React とは何かについてお話します。


なぜ React が作られたのか

公式サイトのページに、なぜ React が作られたのかに関する説明があります。

つまり、なぜ React が必要になったのか、ということです。

テンプレートを使わない

公式サイトには「ユーザインターフェース構築のための JavaScript ライブラリ」とあります。

それまで Web アプリケーションの UI(ユーザインタフェース)は、

テンプレート構文や HTML ディレクティブという特殊な属性によって作られていました。

{{ name }}とか<li ng-repeat="item in collection">とかいうやつです。


しかしこれでは1つのファイルの中にいろいろ書かないといけないので、見通しが悪い。

それにテンプレート文やディレクティブで使用できるプログラミングには限界がありました。


そこで React はテンプレートを使わず、コンポーネントという小さな部品を使って UI を作ることにしました。

React はテンプレートの代わりに JavaScript そのものを使用するため、

より柔軟でパワフルなコーディングができるようになります。


テンプレート構文などは主がHTMLで、動的な書き換えは従でした。

しかし React では JavaScript が主であって、これでメインのHTML構造を作成するという発想です。

フレームワーク(使用必須)ではなくライブラリ(使用はユーザの任意)なのも、JavaScript が主だからといえます。

これが React のユニークなところなんじゃないかなと思っています。

データを変更すると自動で HTML が書き換わる

それまではひとつのデータが変わるとそのたびに HTML 構造の再レンダリングが必要でした。

しかも変更が反映されない部分でさえ、HTML 構造全体を書き換えるので、非常に非効率的でした。


しかし React では、データが変わるたびに特定の処理が呼び出され、

変化した部分だけを再レンダリングするようにします。


React は結局何をしているのか

React がやっているのは

  • JavaScript で HTML 構造を作り
  • すでにある HTML の特定の場所にそれを挿入する

これが全てです。


headタグなど最低限のコードが書かれた HTML ファイルが用意されており、

それは例えば

1
2
3
4
5
6
7
8
<html>
    <head>
        ...
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

のようになっています。

当然これは空白のページになります。

<div id="root"></div>の中に、JavaScript で作成した HTML 構造を挿入することで、

最終的なページが出来上がります。


HTML の挿入は JavaScript ファイルの中でReactDOM.renderメソッドによって行われ、

引数に挿入するコンポーネント(部品)と挿入位置を指定します。


コンポーネントは別のファイルで定義でき、その中で JavaScript を使って HTML 構造を作成します。

通常、JavaScript で HTML 構造の作成(DOM 操作)をするときには、例えば次のようにします。

1
2
3
const app = document.createElement("div");
app.className = "app"
app.innerText = "Hello";

いちおう、React はライブラリなのでこの書き方も使用することができます。

しかし、JSX を使うとより HTML に近い形で書くことができます。

1
2
3
<div className="app">
    Hello
</div>

他にも state(コンポーネント内部の変数)や props(コンポーネント外部から定義する変数)などが使えますが、

これらはすべて HTML 構造を動的に作成するためにあるものです。


やっていること自体は、HTML 構造を作って HTML の特定の位置に挿入することだけです。


以上、React とは何かについて解説してみました。

この記事がお役に立てれば幸いです。

では👋