React.jsでタイマーを作ってみる
React.jsを使って、タイマーを作ってみます。
A JavaScript library for building user interfaces | React
参考:
Top-Level API | React
ReactのAPIを眺めてみた - Umi Uyuraのブログ
reactjs - React.jsのState - Qiita
JavaScript - React.jsのチュートリアルを触る - Qiita
reactjs - React component ライフサイクル図 - Qiita
reactjs - React.jsのComponent Lifecycle - Qiita
下準備
まず、timerappディレクトリの中にtimerapp.htmlを作っておきます。
さらにnodeでのwebサーバも過去記事を参考に設定しておきます。uraway.hatenablog.com
htmlファイルの設定
多分必要であろうものを読み込むようにしておきましょう。
$ node server.jsを実行した時に、Hello, worldと表示されるようにします。
//timerapp.html <!DOCTYPE html> <html> <head> <title>ReactTimer</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> </head> <body> <div id="container"></div> <script type="text/babel"> React.render( <h1>Hello, world!</h1>, document.getElementById('container') ); </script> </body> </html>
このReact.render();のあるscript内にコードを書いていきます。
まず、React.createClass();で新しくコンポーネントのクラスを作成します。その際、renderメソッドを持ったオブジェクトを含める必要があります。
var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0}; }, tick: function() { this.setState({secondsElapsed: this.state.secondsElapsed + 1}); }, componentDidMount: function() { this.interval = setInterval(this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); }, render: function() { return ( <div>secondsElapsed: {this.state.secondsElapsed}</div> ); } }); ReactDOM.render(<Timer />, document.getElementById('container'));
- getInitialStateはコンポーネントがマウント(装着?設置?とにかく、何かを実行可能な状態にすることらしい)される前に一度だけ実行され、this.stateの初期値が返される。つまりコンポーネントのstateを初期化する。この場合、secondsElapsedを初期化して、その初期値である0を返す。
- setStateでコンポーネントのstateを更新する。この場合、tickが実行されれば、現在のseceondsElaspedに1が足される。
- componentDidMountは、レンダーリングが発生した直後に一度だけ実行される。この場合、このコンポーネントのintervalメソッドを実行する。さらにこのintervalメソッドは、tickメソッドを1000ミリ秒ごとに実行する。
参考:JavaScript でタイマーを使う(setInterval(),setTimeout()) | Try Lifelog
- componentWillUnmountは、DOMからコンポーネントがアンマウントされる直前に実行される。この場合、アンマウント時に、intervalの繰り返しを終了する。なくても動くが、Timerの処理やDOMのイベントは解除しておくべきらしい。
これでタイマー、というかカウンター?の完成
1000ミリ秒ごとにtickが実行され、初期値0のsecondsElaspedはその度に1追加されていくという仕組み。