React.jsのJSXの解説

2017年2月27日

前回書いたReact.jsのコードを、JSXに置き換えてみる。と書いたものの、JSXの説明で今回は完結し、次回書き直してみる。

[amazonjs asin="B01MUS2RP9″ locale="JP" title="JavaScriptエンジニアが手っ取り早くReactの基礎を理解するための「超」入門書"]

JSXって

JSXというのは、直感的にいうと「Javascriptの中にHTML(のようなもの)をそのまま記述できるようにしてくれるもの」。ただ、Javascriptに慣れていると逆に直感的にもわかりづらい。が、便利なことには間違いない。

前回、DOMを操作するときに、あくまでもJavascriptの記述方法でh1タグを挿入したりdivを挿入したりした。

render: function(){
    return React.DOM.h1("タイトル");
}

これを次のように書きなおすことができる。

render: function(){
    return <h1>タイトル</h1>;
}

意味がわからないかもしれないが、できてしまう。これはBabel(そのうち勉強して説明するかも)を利用することで実現している。Babel的な説明をすると「コードをトランスパイルしてJavascriptのコードとして吐き出して」いるために、うまくJavascriptのコードにしてくれている。ここは使う分にはあまり意識する必要のないところだろう。

 

JSXの使い方

JSXの使い方は、React.jsの他にBabelを使えるようにする必要がある。具体的には次の2点だ。（CDNでの利用方法）

Babelのインポート

 

<!-- React.jsの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<!-- ReactDOM.jsの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<div id="main"></div>
<!-- JSXを使うためのBabelの読み込み -->
<script  src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>

<script type="text/babel"> を指定する

<!-- type="text/babel" で指定する  -->
<script type="text/babel">
/* 実装を書く */
</script>

 

JSXの注意点

上で「Javascriptの中にHTML(のようなもの)をそのまま記述できるようにしてくれるもの」と書いたとおり、厳密にはHTMLではなく、Javascript用のxmlとして記述している。そのため、標準的なHTMLの記法ではうまく動作しないところもある。それらを列挙していく。

閉じタグは必須

brタグやinputタグのように閉じタグがない単一のタグも、xmlの記述に準じる必要があるため閉じタグが必要だ。

<br></br>
<input type="text"></input>

ただし、次のようにも記述できる。こっちの方が楽だろう。

<br />
<input type="text" />

 

改行して記述したいときは()をつける

タグが長い場合、改行して記述することも多くある。このときは、()でくくることで改行して記述できる。

render: function(){
    return (
        <div id="a">
            <div id="b">
                あいうえお
            </div>
        </div>
    );
}

 

 

イベントはキャメルケース（大文字小文字）で記述する

HTMLの場合、onClickやonChangeなど(もう素のコードでは使わないでほしいやつら)は全て小文字でも記述可能だったか、これらは明確にキャメルケースで記述する必要がある。

render: function(){

    return (
        <input type="button" onClick="clickEvent" />
    );
}

 

classとforは注意

classとforはJavascriptの予約語になっているため、「className」と「htmlFor」として記述する必要がある。

render: function(){
    return (
        <div className="classA">
            <label htmlFor="radio" />
        </div>
    );
}

 

styleは記述方法がかなり独特

styleはまず例を見てもらう。

render: function(){
    return (
        <div style={{ textAlign: "center";  }}>
    );
}

まず、styleをくくる部分については、2重中括弧{{  }}でくくる。また、text-alignやbackground-colorのようにハイフンでつないでいる形のものは、textAlignやbackgroundColorのようにキャメルケースで記述する。これが一番ややこしい。

変数埋め込み

注意というより機能に近いが、変数の埋め込みは中括弧{ } の中に記述することでJavascriptの変数を埋め込むことができる。これを使うと、上のstyleのややこしい部分をすべて変数埋め込みにしてしまうことが可能になりそう。

 

以上。次回、コードを書いてみる。

共有:

いいね:

いいね読み込み中…

Related posts:

  1. React.jsのコード例を自分用にまとめてみる(JSX)
  2. React.jsのコード例を自分用にまとめてみる(基本)
  3. React.jsで入力フォームを作成する
  4. React.jsをES6で書き直した

_,React.jsjsx,React.js

Posted by umentu_blog