React

【React初級編】Reactで使用されるJSXのトランスパイルとは

React

 

今回はReactの文法で用いられるJSXについて解説したいと思います。JSXはHTML扱ったことがある方であれば簡単に理解、記述することが可能です。この機会に簡単におさらいしておきましょう。

React同様、JSXもFacebook社が開発したものになります。

JSXとは

JSXとは「JavaScript XML」の略でJavaScriptを拡張した言語です。JSXはReactを用いてHTMLを出力するための言語で、一言で言うとReactのマークアップ言語です。

JSXのメリットとしては以下の2つが挙げられます。

  • HTMLやXMLと記述が似ており、直感的に書くことが可能な点
  • JavaScriptよりコードが短くなるため処理が速い点

JSXのトランスパイル

JSXはReact内部でトランスパイルという処理が施され、JavaScriptに変換されます。

JSXのトランスパイルは暗黙的にBabelが行っています。参考:Babel

 

ではどのようにJSXがJavaScriptに変換されるか見ていきましょう。

以下の記述はJSXで書かれたコードになります。

function App() {
  return <h1>Hello World</h1>;
}

export default App;

 

これがトランスパイルされJavaScriptに変換されると以下のようなコードになります。

import React, { Component } from "react";

function App() {
  return React.createElement("h1", null, "Hello, World!");
}

export default App;

 

JSXでコーディングするか、JavaScriptでコーディングするか、どちらが容易であるかは一目瞭然ですね。これがJSXが直感的であるということになります。

JSXとJavaScript

JSXとJavaScript、両方記載することも可能です。

JavaScriptの定数を定義するconstを用いてHello Worldを表示させてみます。

function App() {
  const greeting = "Hello World";
  const dom = <h1>{greeting}</h1>;
  return dom;
}

export default App;

 

このようにJSXとJavaScriptを併用できることも覚えておきましょう。

まとめ

  • JSXとは「JavaScript XML」の略でJavaScriptを拡張した言語
  • JSXのメリットは、直感的であることと処理スピードが速いことである
  • JSXがJavaScriptに変換されることをトランスパイルと呼ぶ
  • JSXとJavaScript、両方記載することが可能

参考

 

 

今回はReactの文法で用いられるJSXについて解説しました。上記のポイントを押さえながら開発に取り組んでいきましょう。

COMMENT

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