序文
Reactは、ウェブやモバイルのフロントエンドを開発するための最も人気のあるJavaScriptパッケージの1つで、Meta（旧Facebook）によって開発され、開発者はフロントエンドページを完成させるための再利用可能なコンポーネントを作成することができる。
しかし、Reactは厳密にはフレームワークではないことに注意する必要がある。ReactはUIコンポーネントのレンダリングだけを担当するからだ。しかし、ReactはAngularやVueといったフレームワークの代替ソリューションを提供し、複雑なフロントエンド・ページの機能に取り組むことを可能にしてくれる。
この記事では、Reactの重要な構文であるJSXを紹介する。
JSXは、Reactを記述する一般的な方法のひとつでもあるので、次のセクションで説明しよう。
- JSXとは？
- JSX言語メソッド
- JSXでReactコンポーネントを構築する
JSXとは？
JSXの話をする前に、前回の記事で説明したReact DOMの構文を復習しておこう。
const disc = React.createElement("h1", "Hello World") ReactDOM.render(dish, document.getElementById("root"))
上記のReact構文は、以下のHTML DOMに変換できる。
<div id="root">
<h1><span class="ez-toc-section" id="hello-world"></span>こんにちは世界<span class="ez-toc-section-end"></span></h1>
</div>
上のコードから想像できるように、JavaScriptのReact構文は比較的理解しにくく、さらに何千行もある複雑なHTMLファイルであれば、コードはさらに複雑で理解しにくくなるだろう。
そこでフェイスブック・チームはReactを開発する一方で、フロントエンドのウェブ・コンポーネントを構築するための新しい、より簡潔な構文であるJSXを追加することで、この欠点にも対処した。
JSXは、"JS "JavaScriptと "X "XMLの2つの単語からなる頭字語である。 JSXはHTMLに多少似ているが、基本的にはReactの構文で構成されるコンポーネントであり、以下は簡単なJSXの例である。
import React from 'react'; import ReactDOM from 'react-dom/client'; /ul> ); const root = ReactDOM.createRoot(document.getElementById('root'));
真ん中はHTMLの構文とほぼ同じだが、プログラムの最初と最後はJavaScriptの構文になっているのがわかるだろう。
実際、コンピューターはJSX構文を翻訳して純粋なHTMLを生成するツールをいくつか使っている。
JSX言語メソッド
JSX構文はHTMLのように見えますが、実はJavaScriptとReactの構文なので、JSX構文の説明です。
className
一般的なHTML構文では、タグにクラスを追加したい場合、次のように記述します。
<h1 class="hi"><span class="ez-toc-section" id="hello-world-2"></span>こんにちは世界<span class="ez-toc-section-end"></span></h1>
しかし、JSX構文では、タグに任意のクラスを追加するには、classNameに変更します。
<h1 classname="hi"><span class="ez-toc-section" id="hello-world-3"></span>こんにちは世界<span class="ez-toc-section-end"></span></h1>
入れ子要素
JSXの構文はHTMLと同じで、ネストされたフォーマットをサポートしている。 JSXは独自のコンポーネントを作成し、それをネストされたフォーマットにすることもできる。
<AnimalList> <犬 /> <猫 /> <鳥 /> </AnimalList>
複合式
JSX自体もJavaScriptの構文なので、以前に説明したJavaScriptの構文や、例えばテンプレート・リテラルなどのES6の構文を完全にサポートしています。
const Fruits = ["リンゴ","バナナ","サクランボ"] const myElement = (
<ul>
<li>{果物[0]}</li>
<li>{果物[1]}</li>
<li>{果物[2]}</li>
<div>「${フルーツ[0]}が大好きです」</div>
</ul>
);
JSXでは、JavaScriptの変数を中かっこで囲んだり、テンプレート・リテラル構文を使って文字列とJSXを組み合わせたりすることができます。
JavaScript Map
JavaScriptの構文が使えるので、Arrayの組み込みmap関数を使ってJSXと統合することもできる。
const Fruits = ["リンゴ","バナナ","サクランボ"] const myElement = ( <ul> {fruits.map(element=>{ <li>{element}</li> })} </ul> ) ;
マップ機能を使えば、複数のliをグループ化することもできます。
JSXでReactコンポーネントを構築する
最後に、冒頭のコードを例にコンポーネントの作り方を説明する。
import React from 'react'; import ReactDOM from 'react-dom/client'; /ul> ); const root = ReactDOM.createRoot(document.getElementById('root'));
1行目と2行目は、reactとreact-dom/clientですでに書かれているライブラリを呼び出したり、組み込み関数を使ったりするために使う。
真ん中のconstは宣言に使われ、その中にJSX構文を入れることができ、そこにHTMLを書くことができ、それが終わるとmyElementという要素ができる。
最後に、ReactDOMのcreateRoot関数を使って "id="root "のDOMを作成し、作成したmyElement要素をrootに入れます。
以上のプロセスを経て、Reactコンポーネントを作ることができる。
結語
この記事では、Reactコンポーネントを簡単に構築するためにも使用される、非常に重要なReactの構文であるJSXについて説明します。また、JSXの原理や構文、コンポーネントの作り方についても解説します。
ご意見、ご質問がございましたら、お気軽にコメントをお寄せください！
この連載が気に入ったら、より多くの人に見てもらえるよう、遠慮なく「いいね！」やシェアをお願いします！
引用
リアクト・ヴァナキュラー・スポーツ・シリーズ
JavaScriptの高度な関数 - React Vernacular キャンペーン 04
JavaScript非同期待ち - React Whitepaper キャンペーン03
日本語 
繁體中文 
English 
简体中文 
한국어 
Español