ReactはUIを作るためのJavaScript用のライブラリです。

コンポーネント指向で、アプリケーションを開発する上で状態の管理もしやすく、拡張性があります。

今回は環境構築とReactの特徴の1つであるJSXについて書きます。

Contents

環境構築

create-react-appのインストール

yarn add --dev create-react-app

Node.jsとyarnをインストールした後、create-react-appのインストールをします。

create-react-appをインストールすることで、Reactの開発で必要なbabelやwebpackといったものをマニュアルでインストールしなくても簡単に環境構築ができます。

アプリケーションの作成

yarn create-react-app app-name

create-react-appコマンドでアプリケーションの作成をします。

「app-name」のところは任意なアプリ名を記述します。

コマンドを実行するとアプリ名のディレクトリが作成されます。

アプリケーションの立ち上げ

yarn start

作成されたアプリのディレクトに移動してコマンドを実行すると、サーバが立ち上がりlocalhost:3000でブラウザに表示されます。

JSXについて

ReactではJSXというJavaScriptの拡張言語が使えます。

JSXとは「JavaScriptXML」の略で、JavaScript内でHTMLを簡単に記述することができるようになります。

実際にブラウザに表示するには、JSXのままではブラウザが認識をしないので、JavaScriptにトランスパイルされます。

JSXの利点

下記のコードはどちらもHello, world！と表示します。

JSXでの記述例

import React from 'react';

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

export default App;

JSXを用いない記述例

import React from 'react';

const App = () => {
  return (
    React.createElement(
      'div',
      'null',
      'Hello, world!'
    )
  );
}

export default App;

どちらも同じ結果を返しますが、JSXを用いることでJavaScript内でHTMLを簡単に記述することができます。

DOMに出力されるものが直感的になり可読性も良くなります。

JSXの基礎文法

それではJSXの基礎文法を見ていきます。

Reactパッケージをimportする

import React from 'react';

パッケージはJSXファイルの先頭でimportします。

{ }内でJavaScriptの記述ができる

import React from 'react';

const App = () => {
  const name = 'Taro';
  return (
    <div>I'm {name}</div>
  );
}

export default App;

// I'm Taro

JSXの{ }内ではJavaScriptが記述できます。

HTML属性の記述方法

JSXではJavaScriptの予約語と被ってしまうHTMLの属性は、通常のHTMLとは別の記述方法になります。

【class属性】

import React from 'react';

const App = () => {
  const name = 'Taro';
  return (
    <div className="my-name">I'm {name}</div>
  );
}

export default App;

// <div class="my-name">I'm Taro</div>

class属性はclassNameになります。

【for属性】

import React from 'react';

const App = () => {
  return (
    <label htmlFor="email">
      メールアドレス：<input id="email" />
    </label>
  );
}

export default App;

labelで使うfor属性はhtmlForになります。

属性名はキャメルケース

import React from 'react';

const App = () => {
  return (
    <div>
      <button className="click-button" onClick={() => console.log('Clicked!')}>CLICK</button>
    </div>
  );
}

export default App;

HTML属性のclassNameやhtmlFor同様、onClickやonChangeなどの属性名も全てキャメルケースで記述します。

空要素は閉じる

import React from 'react';

const App = () => {
  return (
    <label htmlFor="email">
      メールアドレス：<input id="email" type="email" value="" />
    </label>
  );
}

export default App;

HTML5では省略できますが、JSX内ではinputタグやimgタグなどの空要素は閉じる必要があります。

1つの要素しかreturnできない

import React from 'react';

const App = () => {
  return (
    <div>
      <label htmlFor="name">
        名前：<input id="name" type="text" value="" />
      </label>
      <label htmlFor="email">
        メールアドレス：<input id="email" type="email" value="" />
      </label>
    </div>
  );
}

export default App;

JSXでは1つの要素しかreturnできないので、複数の要素をreturnする場合は1つの要素にまとめます。

【エラー例】

import React from 'react';

const App = () => {
  return (
    <label htmlFor="name">
      名前：<input id="name" type="text" value="" />
    </label>
    <label htmlFor="email">
      メールアドレス：<input id="email" type="email" value="" />
    </label>
  );
}

export default App;

// Adjacent JSX elements must be wrapped ...

複数の要素をreturnしているのでエラーになります。

React.Fragmentについて

Reactでは複数の要素をreturnできない制約があるので、本来必要のないタグを記述しなければいけない場合があります。

それを避けるためにReact.Fragmentを使うことで、不必要なタグがない状態で展開することができます。

import React from 'react';

const App = () => {
  return (
    <React.Fragment>
      <label htmlFor="name">
        名前：<input id="name" type="text" value="" />
      </label>
      <label htmlFor="email">
        メールアドレス：<input id="email" type="email" value="" />
      </label>
    </React.Fragment>
  );
}

export default App;

// <label htmlFor="name">
//  名前：<input id="name" type="text" value="" />
// </label>
// <label htmlFor="email">
//  メールアドレス：<input id="email" type="email" value="" />
// </label>

<React.Fragment>はDOMには出力されません。

またReact.Fragmentにはシンタックスシュガーがあり、<>で記述することもできます。

import React from 'react';

const App = () => {
  return (
    <>
      <label htmlFor="name">
        名前：<input id="name" type="text" value="" />
      </label>
      <label htmlFor="email">
        メールアドレス：<input id="email" type="email" value="" />
      </label>
    </>
  );
}

export default App;

まとめ

  • create-react-appをインストールすることで簡単に開発環境が作れる。
  • JSXはJavaScriptの拡張言語で、JavaScript内でHTMLを記述することができる。
  • returnできる要素は1つだけ。
  • JSXで不要なタグを記述しないといけない場合は、「React.Fragment」を使う。

さいごに

以上、Reactの環境構築とJSXについてでした。

JSXがあることによって可読性が良く、VueのようにHTMLテンプレートに条件分岐などを記述しなくても良いので、コードが複雑になってもリファクタリングもしやすそうです。

参考