はじめに

最近、React.jsの勉強を始めました。
公式ページを参考にしていたのですが、なぜか日本語のページが見つからないため若干の苦労がありました。しなくていい苦労はしないに越したことはない……というわけで、後に勉強される方の役に立てばと簡単にコンポーネントについて記しておきます。恐らく一番初めに必要となる知識です。
JavaScriptの基礎知識があるという前提で解説していますのでご了承ください。
※公式ページの翻訳版ではありません。

React.jsの環境がまだないという方にはこちらのページをおすすめします。https://codepen.io/
開いたページの右上「Create」から「New Pen」を選択していただくとプログラムの入出力画面が表示されます。
入力したそばから下に結果が出力されますので、とりあえず触ってみたいという時にお使いください。(記事内ではHTMLやCSSの記述はしていません。)

基本のコンポーネント

コンポーネントとは?

UIを構築する要素のことです。React.jsではたくさんのコンポーネントを組み合わせてUIを構築していきます。

コンポーネントの定義

まずはコンポーネントを定義します。

var TestComponent = React.createClass({
    render: function() {
        return React.DOM.h1(null, 'Hello World');
    }
});

定義の際にはReact.createClassというメソッドを利用します。そういう決まりだと思ってください。
また、定義したコンポーネントの中にはrenderが必須です。そこに、そのコンポーネントで何をするのか、その機能(function)を書きます。
ここではh1要素を生成する機能を実装しています。htmlタグにすると <h1>Hello World </h1>となります。

コンポーネントの利用

定義したコンポーネントを利用します。

ReactDOM.render(
    React.createElement(TestComponent),
    document.getElementById('htmlId');
);

React.createElement(TestComponent)という表記で、先ほど定義したコンポーネントTestComponentを呼び出しています。
それをhtmlIdというidを持ったタグの中に生成しています。

React.jsを使用する上での基本は以上になります。
次は動的にコンポーネントを利用する方法を見ていきます。

動的なコンポーネント

Props

定義したコンポーネントに値を引き渡してその値を利用し結果を返す、というような実装をする場合、propsを使用します。

//コンポーネントの定義
var TestComponent = React.createClass({
    render: function() {
        return React.DOM.h1(null, this.props.val);
    }
});

//コンポーネントの利用
ReactDOM.render(
    React.createElement(TestComponent, {val: 'test'}),
    document.getElementById('htmlId');
);

valというプロパティをTestComponentに渡し、TestComponentからthis.propsという表記でアクセスしています。

State

コンポーネントには状態を持たせることができます。状態を持たせたい場合、stateを使います。
一度ステートと要素(タグ)を結び付けておけば、後でステートの状態が変わった際に自動で要素の内容も変更されます。

//コンポーネントの定義
var TestComponent = React.createClass({
  getInitialState: function() {
    return {count: 0}
  },
  render: function() {
    return React.DOM.div(
      null,
      React.DOM.button({onClick: this.onClick}, 'click'),
      React.DOM.span(null, this.state.count)
    );
  },
  onClick: function() {
    this.setState({count: this.state.count + 1});
  }
});

//コンポーネントの利用
ReactDOM.render(
    React.createElement(TestComponent),
    document.getElementById('htmlId')
);

この例では、ボタンをクリックするごとに右側に表示している数字が1ずつ増えていきます。

まず、getInitialStateというメソッドを使用してステートを初期化します。この書き方も決まり文句のようなものです。

renderの部分ではクリックするためのボタンと、表示される数字を生成しています。renderでは返却できるルート関数が一つのみのため、buttonタグとspanタグをdivタグで囲って一つにしています。

onClickで、ボタンがクリックされた際の動きを実装しています。最初に初期化したステートにthis.stateという書き方でアクセスし、それに1ずつ足しています。
数字を足す際、要素(spanタグ)に明示的に何か処理を行っているわけではありません。しかし一度ステートと結び付けておけば、ステートが更新されるたびに自動で要素も更新されます。

おわりに

以上がコンポーネントの基礎になります。
皆さんの中には、もっと簡単なReact.jsのコードを見たという方もいらっしゃるかもしれません。今回はコンポーネントの使い方がメインだったため、JSXを使わない書き方で説明しました。

JSXとは、簡単に言えばコンポーネントをHTMLを書くような感覚で簡単に記述できる言語です。
一番初めのコードをJSXを使用して書くと以下のようになります。

//コンポーネントの定義
var TestComponent = React.createClass({
    render: function() {
        return (<h1>Hello World</h1>);
    }
});

JSXを使わない場合、returnの部分は以下のようになっていました。

return React.DOM.h1(null, 'Hello World');

これだけでもだいぶ違いを感じられるのではないでしょうか。
もちろんそのままJavaScriptを使用しても問題ありませんが、利用すると時間短縮にもなり実装の効率は上がります。ぜひ使いこなしてください。
それでは。

Shere
  • はてなブログ
  • Twitter
  • Facebook
React.js超入門 ~コンポーネントの定義と利用~

Writer

  • Name

    笹下

  • Position

    ナックルの人

  • Profile

    映画と筋肉が好きです。筋肉があれば大抵の物事は解決します。もっと強い体が欲しい。