Reactについての第一回目の記事にて、ReactのDOM操作の速さについて触れましたが、第二回目の記事では、ではReactでのどのような表現が、DOM操作を早くしているのか？についてお話したいと思います。

「Reactは仮想DOMを生成しているから、既存のJavaScriptの記述のようにDOMを生成するよりもスピードが速い」といわれても、イメージがしづらい人も多いのではないかとおもいますので、具体的に、両者がどのようなコードで成り立っているか、実際に超簡単なコードでご説明したいと思います。

【JSXでのコード記述とは】

実は、Reactは、JSXの記述で表現されているのです。名前だけお伝えしてもピンとこない人も多いと思いますが、具体的なコードを使って説明していきます。

【通常のJavaScriptで、DOM操作をした場合】

まずは、通常のJavaScriptでHTMLを記述する場合には、以下のようなコードを書きます。

※サンプル

const pluto = "<h1>Hello,World!</h1>"
const rao = "<h2>Good Morning!</h2>"
const ika = "<h3>How are you?"</h3>"

document.getElementById(''hoge).innerHTML = pluto
document.getElementById('rao').innnerHTML = rao
dovument.getElemerntById('ika').innerText = ika

・・これ、HTMLから取り出す量が増えてくると、コードの行数もかなり増えて、大変ですよね。。

【JSXの記述でDOM操作をした場合】

では次に、JSXでDOM操作する場合の記述についてみていきましょう。

※サンプル

return ( <react.fragment>
<div id = "hoge">
<h1>Hello,World!</h1>
</div>
<div id = "rao">
</h2>Good Morning!</h2>
</div>
<p id = "ika">How are you?</p>
</React.fragment>

どうでしょうか？先ほどのJavaScript記述よりもコンパクトで、すごく見やすいですよね。

JSXのトランスパイラーの役割がポイント

この、通常のコードよりも見やすくなったのは、JSXがトランスパイラーの役割を持っていることが関連しています。トランスパイラーとは、通訳、翻訳のような役割ということです。

トランスコンパイラ（他にトランスパイラ、ソース・トゥ・ソースコンパイラ、などとも）は、あるプログラミング言語で書かれたプログラムのソースコードを入力として受け取り、別のプログラミング言語の同等のコードを目的コードとして生成する、ある種のコンパイラである。

（Wikipediaより）

JSXはそのままでは実行できず、トランスパイラーを使って実行可能なJavaScriptに変換しています。その変換作業のことをトランスパイリングとよんでいるのです。JSXで書いたコードは私たち人間には可読性の高いシンタックスとなっておりますが、実は、そのままでは、ブラウザやノードではそのコードは実行されません。トランスパイラーの役割をもって、JSXのコードは自動的にJavaScriptに変換されたうえでブラウザに表示されるのです。

実は、このJSXをJavaScriptに変換する作業をしているのは、Babelというトランスパイラーが裏で動いて実行しているのです！Babelについて詳しく勉強する必要はありませんが、裏では、そのようなトランスパイラーが動くからこそ、JavaScriptで読み取れるのだ、ということは覚えていてください。

以上、本日は、JavaScriptとJSXの記述についてでした！