DESIGNMAP

  1. TOP
  2. 公開講座
  3. React入門
  4. JSXでコンポーネントをつくろう — React入門【Vol.2】

JSXでコンポーネントをつくろう — React入門【Vol.2】

今回はJSXを使ってコンポーネントを書いていきます。

JSXはReactとは別な技術で必須というわけではないのですが、要素の階層が深いコンポーネントを書いていくとなると、JSXでないとコードが読みにくくなります。

JSXはXMLベースのマークアップ言語です。

テキストエディタを立ち上げ、任意の場所に「jxs1.html」として保存します。太字のところの記述に注意してください。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello World</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
    <script type="text/babel">

    ReactDOM.render(
      <h1>Hello world!</h1>,
      document.getElementById('app')
    );

    </script>
  </body>
</html>

保存して、Chromeで実行すると「Hello world!」が表示されます。
react2-1

<h1>Hello world!</h1>,

がJSXです。HTMLに似ています。

JSXはそのままではWebブラウザでは動作しません。JavaScriptに変換する必要があります。

<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

Babelというツールを読み込んでいます。BabelがJSXをJavaScriptに変換してくれます。

<h1>Hello world!</h1>

はBabelによって

React.createElement("h1", null, "Hello, world!");

のJavaScriptのコードに変換されます。

<script type="text/babel">

を記述するのがポイントです。単に<script>だけですとBabelが動作しませんので注意が必要です。

カスタムコンポーネントもJSXで書いてみましょう。
下記のコードを「jxs2.html」として保存します。scriptタグの前後のコードは省略しています。

…
…
<script type="text/babel">

    class HelloWorld extends React.Component {
      render() {
        return <h1 className="head">Hello World!</h1>;
      }
    }

    ReactDOM.render(
      <HelloWorld/>,
      document.getElementById("app")
    );

</script>
…
…

前回よりすっきり書けることがわかります。class属性は、classNameと書く点以外はHTMLに近い記法で書けます。

HelloWorldタグはユーザーが独自につくったタグです。XMLは自由にタグを定義できます。

<HelloWorld/>,

の最後のスラッシュがポイントです。このスラッシュを抜いて実行するとシンタックスエラーがでて、Webブラウザには何も表示されなくなります。実際にエラーを確認してみましょう。スラッシュを抜いて、保存してChromeで開いてください。

Chromeの画面は真っ白です。画面の任意の場所を右クリック→[検証]をクリックします。デベロッパーツールが表示されます。[Console]をクリックすると、「Uncaught SyntaxError: embedded: Unterminated JSX contents」が確認できます。
react2-2

終了タグがないタグを書く時は、スラッシュを忘れないように注意してください。
これはXMLのルールです。

ではより実践に近いコンポーネントをJSXで書いてみましょう。

下記のコードを「jxs3.html」として保存します。

…
…
    <script type="text/babel">

    class TodoList extends React.Component {
      render() {
        return (
          <div className="todo-list">
            <h1>Todo List</h1>
            <ul>
              <li>切手を買う</li>
              <li>区役所に電話をする</li>
              <li>封筒を買う</li>
            </ul>
          </div>
        );
      }
    }

    ReactDOM.render(
      <TodoList/>,
      document.getElementById('app')
    );

    </script>
…
…

保存して、Chromeで開きます。下図のように表示されます。
react2-3

このJSXはBabelで次のようなJavaScriptのコードに変換されます。React.createElementの記述が複雑で、読むのが大変です。

React.createElement(
  "div",
  { className: "todo-list" },
  React.createElement("h1", null, "Todo List"),
  
  React.createElement(
    "ul", null, 
    React.createElement(
      "li", null, "切手を買う"
    ),
    React.createElement(
      "li", null, "区役所に電話をする"
    ),
    React.createElement(
      "li", null, "封筒を買う"
    )
  )
);

コンポーネントは今回のようにタグを入れ子にすることも可能です。
注意したいのはrenderメソッドは、単一の要素しか返すことができない点です。

class TodoList extends React.Component {
      render() {
        return (
          <div className="todo-list">
            <h1>Todo List</h1>
            <ul>
              <li>切手を買う</li>
              <li>区役所に電話をする</li>
              <li>封筒を買う</li>
            </ul>
          </div>
        );
      }
    }

のように全体をdiv要素などで一つの要素としてくるんでreturnさせる必要があります。

下記のような複数の要素を返すコードはシンタックスエラーになります。

return (
            <h1>Todo List</h1>
            <ul>
              <li>切手を買う</li>
              <li>区役所に電話をする</li>
              <li>封筒を買う</li>
            </ul>
        );

今回はここまでとします。

スポンサーリンク

プロフィール

DESIGNMAP
ディレクター
ON VISITINGを制作・運営。
お問い合わせ