f:id:rennnosukesann:20180515230713p:plain:w300

※ここで述べるJSXはReact.jsで利用されるものを指します。

JSXとは

JSXはFacebook社が開発した、Reactの内部でHTML記述をより簡潔に書くためのJavaScript拡張構文です。

ReactではHTMLの出力を主にJavaScript上で定義します。というのも、Reactはコンポーネント指向を想定したライブラリであるためです（下記リンク参考）。

コンポーネント指向とは、「View(HTML)の構造・見た目と振る舞いを一つの単位とする」設計をメインに据える開発手法です。例えば、ログイン画面のログインボタンを作成する場合「ログインボタンの構造を定義するHTML」「ログインボタンのデザインを決めるCSS」「ログインボタンのロジックを定義するJS」をひとまとめにして作ります。

コンポーネント指向で設計する上で、ReactではHTML記述をJavaScript内部で行い、そこに変数や条件分岐などの動的なロジックを埋め込んでいきます。このHTML記述にJSXは用いられます。

Usage

では実際にどのようにHTMLを定義していくのでしょうか。
React標準のcreateElementを使えば、以下のようにHTMLを定義できます。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      React.createElement('div', null, 
        React.createElement('p', null, 'Hello, JSX!'));
    );
  }
}

しかし、これではHTMLタグを新しく追加するたびにReact.createElementを呼び出さなくてはいけません。これでは冗長すぎます。

そこでJSXの出番です。
JSXによって、上記のHTML定義を以下のように書き換えることができます。

class App extends Component {
  render() {
    return (
      <div><p>Hello, JSX!</p></div>
    );
  }
}

スクリプト中に直接HTMLタグを書いてしまいましたが、JSXが導入されていれば問題なく解釈されます。 JSXを使うことで冗長なReact.createElementがなくなっただけでなく、見た目も自然なHTMLを記述することができました！

もちろんJavaScript内のできごとなので、JSXによって記述されたHTML内に式を仕込むことだってできます。式は{}で囲むことで挿入できます。

class App extends Component {
  render() {
    return (
      <div><p>現在の時刻 : {new Date().toLocaleFormat()}</p></div>
    );
  }
}

逆に、JavaScript内部に記述しているために普段のHTMLとは異なる書き方をしなければならない箇所があります。例えばタグを識別・修飾するための属性classは、JavaScriptの予約語とかぶるためclassNameと記述しなければなりません。

class App extends Component {
  render() {
    return (
      <div className="cls_hello_jsx"><p>Hello, JSX!</p></div>
    );
  }
}

Install

JSXがどのようなものかはわかりましたが、どのようにReact+JSXを始めればよいのでしょうか。

実はFacebook社が提供した開発ツールであるcreate-react-appを利用することで、ビルド設定などを行わずともすぐに開発を始めることができます。

Node.jsのインストール

※検証環境は MacOS X High Sierraです。

ツールをインストールするため、Node.jsを先にインストールします。

brew install node

※Windowsの方はこちらからお願いします！ダウンロード | Node.js

Node.jsをインストールすることでパッケージマネージャnpmが使えるようになるので、早速create-react-appをインストールしていきましょう。

$ npm install -g create-react-app

※Windowsの方はコマンドプロンプト上で実行をお願いします。

これでインストール完了です！
create-react-appコマンドが使えるようになります。

# 適当なディレクトリを作成
$ mkdir React-JSX; cd React-JSX
# アプリを作成
$ create-react-app my-app
# 作成完了
$ ls my-app
README.md          package-lock.json  public/
node_modules/      package.json       src/

作成したアプリはすぐ実行することができます。

$ cd my-app
# 開発モードで起動（localhost:3000）
$ npm start

npm startでアプリを立ち上げるとブラウザが起動し、アプリケーションが表示されます。

f:id:rennnosukesann:20180518003117p:plain

表示できました！

このアプリケーションのView（src/App.js）はすでにJSXで記述されています。JSXをいじり始める際はここを少しずつ改良していくのもありだと思います。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

参考

reactjs.org

qiita.com

Ren's blog

@rennnosuke_rk 技術ブログです

【React】JSX

JSXとは

Usage

Install

Node.jsのインストール

参考