BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース ReactがES6クラスのサポートを導入

ReactがES6クラスのサポートを導入

ブックマーク

原文(投稿日:2015/03/16)へのリンク

FacebookがReactのv0.13をリリースした。ES6クラスもサポートする。

Reactは,リアクティブなユーザインターフェース開発のための,FacebookによるJavaScriptライブラリである。Instagramアプリの開発に加えて,Facebook自体でも部分的に使用されている。

React v0.13”という記事では,同社の開発者であるBen Alpert氏が,ES6クラスのサポートで,"さらに柔軟なコンポーネントの記述が"可能になること,最終的にReact.createClassをリプレースする予定であることなどを説明している。

ES6クラスに関してはSebastian Markbåge氏が,“React v0.13.0 Beta 1”という記事で,さらに詳しく説明している。

氏によれば,

JavaScriptにはもともと,クラスシステムは組み込まれていません。一般的なフレームワークはどれも,独自にそれを組み込んでいます。私たちも同じことをしました。これはつまり,フレームワーク毎にわずかに違うセマンティクスを学ばなければならない,ということになります。

私たちは,クラスシステムの設計作業をしたくないと考えました。クラスの生成に関しては,何であれ,JavaScriptの慣用的な手法を利用したかったのです。

React 0.13.0では,Reactコンポーネントの生成にReact,createClassを使う必要はなくなりました。トランスパイラがあれば,ES6のクラスも使えます。jsx --harmonyのようにharmonyオプションを使えば,react-toolsに同梱されたトランスパイラを利用できます。

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

React.render(<HelloMessage name="Sebastian" />, mountNode);

APIとしては,getinitialState以外,期待されそうなものはほとんど揃っています。クラスの状態を指定する慣用的な方法として,単純にインスタンスのプロパティを使用することにしたからです。同じように,getDefaultPropspropTypesも,実際にはコンストラクタのプロパティに過ぎません。

export class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  tick() {
    this.setState({count: this.state.count + 1});
  }
  render() {
    return (
      <div onClick={this.tick.bind(this)}>
        Clicks: {this.state.count}
      </div>
    );
  }
}
Counter.propTypes = { initialCount: React.PropTypes.number };
Counter.defaultProps = { initialCount: 0 };

その他にも,React CoreやReact Tools,JSXなどに多数の変更点がある。

React Coreの新機能としては,React.findDOMNode(component)React.cloneElement(el, props)が,トップレベルAPIに追加されている。これまでのcomponent.getDOMNoce()ではなく,React.findDOMNode(component)を使う必要がある点に注意が必要だ。将来的にはさらに多くのパターンが使えるようになる。React.cloneElementは,React要素のコピーを生成するためのものだと説明されている。React.addons.cloneWithPropsに近いが,keyrefを保持し,styleclassNameの自動的なマージを行わない点が違う。

React Toolsでは,jsxコマンドで--targetオプションが新たに利用可能になった。Reactユーザはこれを使って,ECMAScriptバージョンをターゲットに指定することができる。

React 0.13ではJSXが大きく変更されている。要素内で>/を使用した場合,これまでは文字列として扱われていたが,JSXのパース方法が変わったため,パースエラーとして扱われるようになった。これによる影響を受けた人に対してAlpert氏は,“npmのjsx_orphaned_brackets_transformerパッケージを使って,JSXコードの潜在的な問題の検出と修正が可能”だと述べている。

React 0.13は現在,ここからダウンロード可能だ。

この記事に星をつける

おすすめ度
スタイル

BT