こちらの記事でReact.jsの概要や基本的な使い方を説明しました。そして、今回はReact.jsでwebアプリを作る際に、効率的にアプリが作れるような技術(考え方)を紹介します。
コンポーネントという考え方は、CSS設計等、様々なwebエンジニアリングで使われています。
それは、Reactでも同様です。
コンポーネントという形で、パーツごとに機能を分けていき、最終的に一つのプロダクトを作ることで、リファクタリングの観点や生産性の観点でメリットがたくさんあります。
※おもちゃのレゴをイメージするとすごくわかりやすいです！一つ一つのブロックがコンポーネント。そのブロックを組立てていって家(webアプリ)を作るイメージです。
コンポーネントの作り方
Reactのコンポーネントは基本的にはClassを使って作成していきます。
まずは、下の画像のような、ボタンをクリックするとアラートが発生するコンポーネントを作成してみましょう。
この簡単なコンポーネントは以下のコードで作成できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class TestComponent extends React.Component { constructor (props) { super(props) } clickHandler (e) { alert(this.props.name) } render () { return <button onClick={this.clickHandler.bind(this)}>クリックして！</button> } } ReactDOM.render( <TestComponent name="プロパティname" />, document.getElementById('root') ) |
「class コンポーネント名 extends React.Component {内容}」にて、Reactを拡張する形で、class宣言をします(もう、そういうものだと覚えちゃいましょう)
constructor
Classの最初のメソッド【constructor()】では、コンポーネントを作成したときに渡されるプロパティを受け取ったり、state(状態)を登録したりします。
render
一番最後のメソッド【render()】では、returnで返した値をDOMとして描写します。
clickHandler
このメソッドはReact内の命名規則ではなく、わたしが作ったメソッドで、renderで描写されるbuttonがクリック(onClick)されたときに実行されます。
ここでは、constructorで受け取ったプロパティをalertで表示しています。
以上のように、基本的なコンポーネントは簡単に作ることができます。
コンポーネントを複数使う
今度は、alertで表示させる文字列が異なるボタンを複数作ってみましょう!
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
class TestComponent extends React.Component { constructor (props) { super(props) } clickHandler (e) { alert(this.props.name) } render () { return <button onClick={this.clickHandler.bind(this)}>{this.props.title}</button> } } ReactDOM.render( <div> <TestComponent title="1を表示" name="1" /> <TestComponent title="2を表示" name="2" /> <TestComponent title="3を表示" name="3" /> </div> , document.getElementById('root') ) |
Componentを複数使い、それぞれに異なるプロパティを与えると、ボタンの文字やアラートされる文字列を変更することができます。
このように、宣言したComponentに対して、異なるプロパティを与えることで、webアプリの様々な場所でパーツを組み立てるようにwebアプリを制作することが出来るのです！
状態(State)を持たせる
Componentを更に便利に使うために、状態(state)という概念を紹介します。
Stateはもうその言葉の通り、各インスタンスに状態をもたせることができる機能です。
それでは、State(状態)の使い方を確認するために、先程作成したアラートを、クリックする度に数字が増えていくアラートに変更しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
class TestComponent extends React.Component { constructor (props) { super(props) this.state = { number: 0 } } clickHandler (e) { let newNumber = this.state.number + 1 this.setState({ number: newNumber }) alert(this.state.number) } render () { return <button onClick={this.clickHandler.bind(this)}>{this.props.title}</button> } } |
コンポーネントをインスタンス化する際に、constructorメソッドで、「this.state = {}」という形で、stateを設定します。
ここでは、stateのnumberというキーに0を設定しました。一度、状態を登録してしまえば、同じクラス内でそのstateにアクセスできるようになります。
そして、クリックした時(clickHandlerメソッド)に、alertで現在の状態を表示し、「this.setState」で状態を更新(ここでは、state.numberに1を足す)します。こうすることで、クリックする度にstateのnumberに1が足されていき、次のクリック時には1が追加された数字がalertされるという構造です。
コンポーネントというパーツを組み立てていき、状態を常に更新し合えば、立派なwebアプリが出来ます！
CyberAgentさんが力を入れているAbemaTVのようなとてもリッチなwebサイトはReact.jsを利用して作られています。
一見複雑なwebアプリも、状態(state)を更新できるようなコンポーネントにプロパティをわたして、そのコンポーネントをいくつも組み合わせることで作られているのです。
Reactはフロントエンドとしてweb制作に携わっていくためには必須の技術ですので、是非、Reactを体験してみてください！
