codingReactで簡単なストップウォッチを作ってみました。(サンプル)ストップウォッチの概要ごく一般的なストップウォッチの機能の他にラップタイムも記録できます。内容について以降で解説します。上記のコードを適当な名前(index.html等)で保存し、ブラウザで開くと動作します。こちらで動作サンプルが見れます。コードは通常のJavaScriptではなく、JSXというJavaScriptを拡張してReactコンポーネントを書きやすくした言語で記述しています。src="http://fb.me/JSXTransformer-0.13.1.js"></script>は、React本体およびJSXTransformer(html内のJSXをJavaScriptに変換する)を読み込んでおり、これによって、htmlに直接JSXのコードを書いてもブラウザ上で動作させることができます。(※2)this.setStateReactの特徴の1つは、アプリの状態が変化するごとに、アプリの全要素を再描画するというものです。このストップウォッチでは、start/pause/lap/clearボタンをクリックすることで状態が変化します。ストップウォッチ特有の状態変化として、時間経過(このアプリでは33ms周期)でも状態が変化します。プログラムにおいては、これらの状態変化のタイミングで、this.setStateメソッドを経由して状態を保持する変数を変更するように記述しています。this.setStateを経由することで、React側に状態変化があったことを通知でき、Reactはすべてのコンポーネントをその時点の状態をもとに再描画します。VirtualDOM状態が変化する都度すべてのコンポーネントを再描画していると、コンポーネントが多い場合に性能が低下するため、ReactではVirtualDOM(仮想DOM)という技術で性能低下を回避しています。イメージ的には、まずメモリ上に仮想のDOMとしてコンポーネントを構築し、その後、仮想のDOMと実際のDOMとの差分を計算し、最終的に実際のDOMに対して必要な差分変更だけを適用します。することで、プログラマは複雑な状態遷移や処理の分岐をあまり考慮しなくてもよくなります。Reactにおけるタイマーイベントの利用ユーザの操作が無くても時間の経過が表示されるように、ストップウォッチ動作中は、タイマー(setInterval)により33ms(だいたい30fps)ごとに、tickメソッドを呼び出して経過時間(elapsed)を更新し、ストップウォッチのコンポーネントを再描画しています。tickメソッドでは以下のように経過時間を更新します。elapsed});},また、タイマーを停止できるように、計測開始時にsetIntervalの戻り値(タイマーID)をstateとして保持しておきます。Date(),});ストップウォッチを一時停止した際には、clearIntervalによりタイマーを停止しstateを更新します。this.state.elapsed,});さらに、このアプリではあまり意味はありませんが、コンポーネントがDOMから削除された際に呼び出されるcomponentWillUnmountイベントにおいても、タイマーが動きっぱなしにならないようにclearIntervalによりタイマーを停止しstateを更新しておきます。undefined});},動的なデータの追加(ラップタイム記録)ラップタイムはthis.state.lapsにラップタイムを配列として保持することで実現しています。lapボタンがクリックされた際にはstateの変更(配列の先頭へラップライムを追加)をしているだけです。stateの変更をトリガに画面が再描画され、意図したとおりにラップタイムのリストが表示されます。ラップタイムのリストの描画にはmapメソッドを使って、配列の要素に対して繰返し同じ処理を実行しています。key={lap.id}>{lap.label}</li>;})}スタイルの適用コンポーネントの要素にスタイルを指定することもできます。font-sizeやlist-style-typeのようなハイフンで連結している属性名は、fontSizeやlistStyleTypeのようにキャメルケースで指定します。'none',}};JSXのタグへの指定は以下のように行います。style={style.button}>reset</button>経過時間(ミリ秒)の整形プログラム内部では経過時間をミリ秒で保持していますが、ストップウォッチっぽくするために、ミリ秒から整形するために、getTimeSpanメソッドを定義しています。コードのコメントにも書いていますが、754567msを12:34.567という文字列に変換します。m+":"+s+"."+ms;},(100や1000を足してsubstring(1)をしているのは、0パディングのため)おわりに簡単なストップウォッチでも、start/pasue時の処理だけでなく、clearボタンが押された場合には経過時間をリセットし、さらにラップタイムをクリアしたりと意外と考慮する要素があります。簡単なアプリを作っただけですが、Reactを使うと、基本的に状態変化があった場合はすべて再描画されることを念頭にコードを記述するため、アプリを作る際の考慮漏れを防ぎやすくなるように感じました。Nativeのリリースがあったので試してみようかと思っています。JSXという名前のDeNAが開発したAltJSがありますが、それとは別物です。プロダクション環境ではブラウザ上でJSXからJavaScriptへ変換せずに事前にJavaScriptへコンパイルすることが推奨されています。以下のサイトを参考にさせて頂きました。ラップタイム機能を修正。Containers」を使うまでのメモです。Slack接続用のhubotをBluemix上で動かし、hubotのデータ保存先としてRedisを使ってみた手順を紹介します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。