react.dev

8.1 KiB

Raw Blame History

id	title	permalink	prev	next
jsx-in-depth	JSXの深層	jsx-in-depth-ja-JP.html	displaying-data-ja-JP.html	jsx-spread-ja_JP.html

JSXはXMLに似たJavaScriptのシンタックスの拡張です。Reactでは、単純なJSXのシンタックスの変換を使うことができます。

なぜJSXを使うのでしょうか？

ReactでJSXの使用を強制されるわけではありません。生のJSを使うこともできます。しかし、JSXは簡潔で、木構造とReactの特性を定義しやすいシンタックスであるため、JSXを使うことをお勧めします。

デザイナーのようなカジュアルな開発者にとってはさらに馴染みやすいでしょう。

XMLにはバランスの取れた開始タグと終了タグという利益があります。このことで、関数がオブジェクトリテラルを呼んでいるのを読むよりも簡単に大きな木構造を作ることができます。

これはJavaScriptのセマンティックスを代替するものではありません。

HTMLタグ対Reactコンポーネント

ReactはHTMLタグ（文字列）とReactコンポーネント（クラス）の両方をレンダリングすることができます。

以下のようにJSXで小文字のタグ名を使用するだけで、HTMLタグをレンダリングできます。

var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));

以下のように大文字から始まるローカル変数を作成するだけで、Reactのコンポーネントをレンダリングできます。

var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));

ReactのJSXは大文字と小文字を使うことで、ローカルのコンポーネントクラスとHTMLタグを識別する習慣があります。

注意:

JSXはJavaScriptなので、 class や for といった識別子はXMLの属性名としては使用しません。代わりに、 ReactのDOMコンポーネントはDOMのプロパティ名がそれぞれ className や htmlFor といったものであることを期待します。

The Transform

ReactのJSXはXMLに似たシンタックスをネイティブなJavaScriptに変換します。XML要素や属性や子要素は React.createElement で渡される引数に変換されます。

var Nav;
// 入力 (JSX):
var app = <Nav color="blue" />;
// 出力 (JS):
var app = React.createElement(Nav, {color:"blue"});

<Nav /> を使うためには、 Nav 変数がスコープの中にないといけないことに注意してください。

以下のように、JSXはXMLシンタックスを使うことで、細かな子要素の使用も許可します。

var Nav, Profile;
// 入力 (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// 出力 (JS):
var app = React.createElement(
  Nav,
  {color:"blue"},
  React.createElement(Profile, null, "click")
);

以下のように、displayNameがundefinedの時には、JSXはクラスのdisplayNameを変数の割り当てから予測します。

// 入力 (JSX):
var Nav = React.createClass({ });
// 出力 (JS):
var Nav = React.createClass({displayName: "Nav", });

JSXを試し、どのようにネイティブなJavaScriptに変換されるか見るには、JSX Compilerを、すでに存在するHTMLをJSXに変換するにはHTMLからJSXへのコンバーターを使ってください。

JSXを使いたい場合は、始めてみましょうというガイドがどのようにコンパイルを設定するか示してくれます。

注意:

JSXという表現は常にReactElementを評価します。実際に実行する際の詳細はおそらく異なっているでしょう。最適化されたモードでは React.createElement のコードのバリデーションを避けるためにReactElementをオブジェクトリテラルとして配置するでしょう。

ネームスペース化されたコンポーネント

formのように、たくさんの子要素を持つコンポーネントを構築する際には、以下のように多くの変数を宣言しなければいけないでしょう。

// 変数宣言のあまりよくない部分
var Form = MyFormComponent;
var FormRow = Form.Row;
var FormLabel = Form.Label;
var FormInput = Form.Input;

var App = (
  <Form>
    <FormRow>
      <FormLabel />
      <FormInput />
    </FormRow>
  </Form>
);

これを単純で簡単にするために、 ネームスペース化されたコンポーネント では、以下のように他のコンポーネントを付属物として持つ1つのコンポーネントを使うことができます。

var Form = MyFormComponent;

var App = (
  <Form>
    <Form.Row>
      <Form.Label />
      <Form.Input />
    </Form.Row>
  </Form>
);

これを行うためには、以下のようにメインコンポーネントの付属物として、「サブコンポーネント」を作るだけで大丈夫です。

var MyFormComponent = React.createClass({ ... });

MyFormComponent.Row = React.createClass({ ... });
MyFormComponent.Label = React.createClass({ ... });
MyFormComponent.Input = React.createClass({ ... });

JSXはコードをコンパイルする際にこのプロパティをハンドルします。

var App = (
  React.createElement(Form, null,
    React.createElement(Form.Row, null,
      React.createElement(Form.Label, null),
      React.createElement(Form.Input, null)
    )
  )
);

注意: この特徴は v0.11 以上で使用できます。

JavaScriptの表現

アトリビュートの表現

JavaScriptで書いたものをアトリビュートの値として使うためには、その表現を引用("")ではなく波括弧({})で囲ってください。

// 入力 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 出力 (JS):
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

Booleanのアトリビュート

アトリビュートの値を記述しないと、JSXはそれを true として扱ってしまいます。false を渡すためには、アトリビュートが使われる必要があります。これらはHTMLのform要素の disabled 、 required 、 checked 、 readOnly といったアトリビュートを使う際によく見かけられます。

// 以下の2つはボタンを使用不能にするという意味でJSXでは同義です。
<input type="button" disabled />;
<input type="button" disabled={true} />;

// 以下の2つはボタンを使用不能にしないという意味でJSXでは同義です。
<input type="button" />;
<input type="button" disabled={false} />;

子要素の表現

同様に、JavaScriptは子要素を表現するのに使われることもあります。

// 入力 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 出力 (JS):
var content = React.createElement(
  Container,
  null,
  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);

JSXにコメントを加えるのは簡単です。ただのJSの書き方です。タグの内側にコメントを書く時には、 {} で囲うことに注意してください。

var content = (
  <Nav>
    {/* 子要素にコメントを書く時には、 {} で囲う */}
    <Person
      /* 複数
         行
         コメント */
      name={window.isLoggedIn ? window.name : ''} // 行末コメント
    />
  </Nav>
);

注意: JSXはHTMLに似ていますが、全く同じではありません。いくつかのキーの違いについてはJSXの理解をご覧ください。

8.1 KiB Raw Blame History