Ugo

Webエンジニアのためのプログラミング情報サイト

  • ReactのJSX記法を勉強する！コンポーネントの種類とその使い方。

ReactのJSX記法を勉強する！コンポーネントの種類とその使い方。

ReactのJSX記法を勉強する！コンポーネントの種類とその使い方。

この記事では、Reactコンポーネントを作成するうえで欠かすことの出来ないJSX記法について説明したい。

JSXはコンポーネントを作成するために使用されるJavaScriptを拡張した構文。

Reactで開発をおこなうためうえでは要となる部分なのでしっかりと理解しておきたい。

目次

JSXとは？

JSXとはReactで使用されるJavaScriptを拡張した構文のこと。

ReactのUIコンポーネントの外見や動作を定義するために使われる。

AngularのテンプレートのようにHTMLを拡張するのではなく、JavaScriptを基本としてHTML要素を書き出すための機能を拡張しているのが特徴だ。

Reactアプリの開発においてJSXは必ず使わなければいけない訳ではないが、使用することが推奨されている。

コンポーネントの作成

では、JSXを使用してコンポーネントを作成する流れを確認しよう。

関数コンポーネントとクラスコンポーネント

Reactには 「関数コンポーネント」「クラスコンポーネント」という2種類のコンポーネントが存在する。

それぞれの特徴を挙げると以下のようになる。

  • 関数コンポーネント
    返り値としてJSXを返すタイプのコンポーネント。
    現在ではこの関数コンポーネントがおもに使用される。
  • クラスコンポーネント
    render()メソッド内にJSXを記述するタイプのコンポーネント。
    React.componentクラスを拡張して定義する。

この記事では、関数コンポーネントを例にコンポーネントの作成方法を説明する。

ReactDomでコンポーネントを描画する

まずは新規のReactアプリを作成しよう。

*Reactアプリの作成方法を確認したい人はこちらの記事をどうぞ。

アプリを作成したら、「src」フォルダ内のすべてのファイルを削除してindex.jsを新しく作成する。

作成したindex.jsに以下の通り記述する。

import ReactDOM from 'react-dom';

const App = () => {
  return <div>Hello React!!</div>;
}

ReactDOM.render(<App />, document.getElementById('root'));
  • 1行目 ➡ ReactDomというコンポーネントを描画するために必要なモジュールをインポートしている。
  • 3～5行目 ➡ “Hello React!!”というテキストを返すシンプルな関数を定義している。
    これがシンプルなJSX文の例だ。
  • 7行目 ➡ render関数を使用して定義したコンポーネントを描画する。
    render関数では、1つ目の引数として描画したいコンポーネントを2つ目の引数に描画する要素を指定する。
    ここでindex.html内にあるrootというIDを持つ要素に描画するように指示している。

問題が無ければ以下のようにテキストが表示されるはずだ。

index.htmlファイルについて

ウェブサイトの制作経験がある人であれば知っていると思うが、publicフォルダ内にあるindex.htmlはアプリを開いたときに最初に表示されるページだ。

index.htmlにはrootというIDを持つdiv要素があり、Reactではこの要素の中にアプリのすべてが呼び出される。

Reactを含むSPA（シングルページアプリケーション）では、このようにひとつの要素にアプリ全体が読み込まれる。

JSXを使わない記述方法

ReactではJSXを使用してコンポーネントを作成することが推奨されているが必ずJSXを使用しなければならない訳ではない。

ここではJSXを使わずに簡単なコンポーネントを作った例を確認してみよう。

JSXを使用したパターン

import ReactDOM from 'react-dom';

const App = () => {
  const text = 'Hello React!!';
  return <div>text</div>;
};
ReactDOM.render(<App />, document.getElementById('root'));

このコンポーネントをJSXを使用せずに書くと例として以下のようになる。

JSXを使用しないパターン

import ReactDOM from 'react-dom';
import React from 'react';

const textElement = React.createElement('div', {}, 'Hello React!!');
ReactDOM.render(textElement, document.getElementById('root'));

JSXの記法

ここからはJSXの記述のルールを詳しく見ていこう。

JSXはJavaScriptの拡張版

先の章で述べたようにJSXはJavaScriptにHTMLコンポーネントの記述法などを拡張したReactのための構文だ。

よってすべてのJSX内ではすべてのJavaScriptコードは有効となる。

以下の例はJSX内で変数やif構文などを使用している。

import ReactDOM from 'react-dom';

const App = () => {
  let text = 'React!!';
  if (true) {
    text = ' new text.';
  }
  return <div>Hello {text}</div>;
};
ReactDOM.render(<App />, document.getElementById('root'));

なおすべてのJSX文はアプリを実行する際に通常のJavaScriptへと変換される。

複数の要素を配置する

1つのコンポーネントに複数の要素を配置する場合はそれぞれの要素をdivなどで囲む必要がある。

以下の例ではテキストとボタンを追加して配置している。

import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <div>Hello React!!</div>
      <button type="submit">Click here</button>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

複数の要素を配置する場合、returnの後に丸カッコを使用してさらにカッコ内にdivを配置する。

divを追加したくない場合はFragmentタグもしくは空白タグを使用する。

import ReactDOM from 'react-dom';
import { Fragment } from 'react';

const App = () => {
  return (
    <Fragment>
      <div>Hello React!!</div>
      <button type="submit">Click here</button>
    </Fragement>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <>
      <div>Hello React!!</div>
      <button type="submit">Click here</button>
    </>
  );
};
ReactDOM.render(<App />, document.getElementById('root'));

JSX内でコメントを使用する

JSX内でコメントを使用する場合は「/* */」もしくは「//」を鍵カッコで囲んで使用する。

{/* これはただのコメントです。 */}

2重スラッシュ「//」を使用してコメントを書く場合はコメントの前後で改行する必要がある。

{
  // これはただのコメントです。
}
MENU