React.jsのJSXの解説

Share on Facebook
Pocket
LINEで送る
Bookmark this on Google Bookmarks

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

JSXって

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

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

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

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

 

JSXの使い方

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

Babelのインポート

 

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

 

JSXの注意点

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

閉じタグは必須

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

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

 

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

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

 

 

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

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

 

classとforは注意

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

 

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

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

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

変数埋め込み

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

 

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

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です