【React（初心者）】JSXのメリットがやっと理解できた。

10294 ワード
React JSX JSX テキストリンク

２週間くらい前からReactの勉強を始めたのですが、開発言語に関しては今では「TypeScriptを使うのが当たり前」とのこと・・・。
そのため、一度しっかり勉強しようと思い、サバイバルTypeScriptを昨日読み始めました。
読み進めていくうちに、やっとJSXというもののメリットを理解できるようになりました（執筆者の皆様、ありがとうございます。）。

・サバイバルTypeScript

前提

まずプログラミングの記法には、命令型と宣言型があります。
カレーを作るとして、、、

・命令型
プログラミング中にあるデータに対して命令を出す書き方。
要は細かく宣言する必要がある。
（イメージ）
カレー粉は1かけら使ってください。
お肉は100g使ってください。
にんじんは0.5本使ってください。
じゃがいもは以下略）

・宣言型
プログラム中の対象物の性質の宣言によって目的を達成する書き方。
（イメージ）
カレーを作ってください。
fin

参考
・宣言的？ Declarative?どういうこと？ - Osaki Hiroyukiさん
・命令型プログラミング - G学院プログラミング用語解説
・宣言型プログラミング - G学院プログラミング用語解説

メリットは何か？

下のリストを出力したいとします。

HTMLで書くとこのようになります。
（JS Fiddle等のオンラインエディターで出力されることを確認してみてください。）
JS Fiddle

HTML
<ul>
  <li>リンゴ</li>
  <li>オレンジ</li>
  <li>ぶどう</li>
</ul>

しかし、ReactはJavaScriptのライブラリなので、もし上記リストを出力したいとなった場合、本来ならば下のように書かなければなりません。一々このように書かなければならないのでは大変です。

HTML
<div id="addList">リスト要素を上に追加</div>
JavaScript
const list = document.createElement("ul");  // ul要素を生成
const apple = document.createElement("li"); // li要素を生成
apple.innerText = "リンゴ"; // li要素に"リンゴ"というテキストを追加
list.append(apple); // list要素にappleというli要素を追加
const orange = document.createElement("li");
orange.innerText = "オレンジ";
list.append(orange);
const grape = document.createElement("li");
grape.innerText = "ぶどう";
list.append(grape);

const currentDiv = document.getElementById("addList"); // idが"addList"という要素を取得
document.body.insertBefore(list, currentDiv); // "addList"の直前に"list"というul要素を追加

しかし、JSXというReactで採用されている言語では下のように宣言的な書き方が可能なのです（要は楽に書ける）。これがJSXのメリットです。

JSX
function Fruits() {
  return (
    <ul>
      <li>リンゴ</li>
      <li>オレンジ</li>
      <li>ぶどう</li>
    </ul>
  );
}

参考
・Reactでいいねボタンを作ろう

まとめ

A. JSXはJavaScriptの拡張言語です。
JavaScript Syntax Extension、またはJavaScript XMLの略で、JavaScriptの中でHTML/XMLをかけるようにしたものです。
要は
本来はJavaScriptの中で、JavaScriptの書き方で書かなければならない
→JavaScriptの中でXML/HTMLを書けるようにした言語
ということです。
※上の例で「XML出てきてないじゃないか」と思う方もいらっしゃると思いますが、公式ドキュメントだと下のようにXMLが書かれていました。実際Reactを勉強していて、XMLを書いたことはないので、この辺りどのように使われているのかは今後勉強していければと思います。
バリバリ使っていました汗
自分でコンポーネントを作成して、それを出力する場合ですね。

JSX
App.tsx
import React from 'react';
import './App.css';
​
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <LikeButton />   {/* 関数コンポーネントを出力 */}
      </header>
    </div>
  );
}
​
function LikeButton() { // 関数コンポーネントを作成
  return <span>いいねボタン予定地</span>;
}
​
export default App;

出典
・Reactでいいねボタンを作ろう

参考
JSX
Draft: JSX Specification

HTMLやJavaScriptとDOM要素という概念に対する理解が浅かったため、上記を理解するのに時間がかかったように思います。この辺りはまだまだ学習が必要だと痛感しました。
以上、簡単にJSXのメリットまとめでした。
（理解が間違っている点があればご指摘ください。）