• Skip to content
  • Skip to secondary menu
  • Skip to primary sidebar

pluto-consultant.com

プログラマ&おつまみ動画コンテンツ作者のつれづれブログ

  •   ABOUT  
  • Udemyオンライン講座
  • お料理youtube
  • プログラミング日記

JSXの基本について~React#2

2020年12月21日 by pluto Leave a Comment

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

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

 

 

■-目次-■ 

  • 【JSXでのコード記述とは】
    • 【通常のJavaScriptで、DOM操作をした場合】
    • 【JSXの記述でDOM操作をした場合】
    • JSXのトランスパイラーの役割がポイント

【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の記述についてでした!

Filed Under: プログラミング塾 Tagged With: Javascript, React

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Primary Sidebar

筆者

1988年生まれ女性。神戸大学卒業。

「世の中にもっと多くのフリーランサー、家にいながらでもキャリアを構築できる環境を持てる人が増えていけば良いのに」との思いから奮闘。本業ではIT企業にて、会計システムや業務システムの設計、新プロダクト開発を担当しています。自身が強みを持つ「IT」や「プログラミング」を生かし副業プログラマとしても活動。また、「業務」「会計」「経営」を軸にブログでスキルアップ術・ノウハウを紹介しています。 無類の「料理好き」「おつまみ好き」なので、ちょこちょこ自分が作った料理を動画にまとめて、アップしています。

Copyright © 2021 · Magazine Pro on Genesis Framework · WordPress · Log in