Facebook製のJavaScriptのフレームワークであるReact.jsがよく使われるようになってきて、 Rplayでも幾つかの案件で利用しています。主にView周りで利用されることが多く、威力を発揮しますが、部品単体（コンポーネント）のメソッドの読み込みタイミングなどが細かく指定できるために、混乱してしまうこともしばしばあります。
今回は、React.js+Reduxを利用した際のコンポーネント・コンテナ内でのメソッドの読み込みタイミングについてご紹介します。
今回のReact.jsの前提
Rplayのアプリケーション開発では、JavaScriptの構文チェックにはairbnbの構文チェックのeslintを利用しています。eslintを入れないと複数人での開発で書き方が異なってしまうからです。また、ルールが緩くても同様の問題が起きてアプリケーションが大きくなるほど修正が大変になってしまいます。
Githubの公式サイト
airbnbのeslintの導入方法などに関してはこちらに詳細を記載していますのでどうぞ。
一番最初に読み込まれるconstructor
constructor() {
// 一番最初に読み込まれます
}
一通りのコンポーネントの読み込みタイミングを分かった上で実際どのように使うのか、JavaScriptの処理でありがちなSetintervalを利用した繰り返し処理をReact.js+Reduxで行いたい場合どのように記述すればいいのか例をご紹介します。
ここでは、複雑にしないためにJavaScriptのフレームワークであるjQueryは利用しない方法で記述しています。アニメーションを多用しないようなアプリケーションの場合jQueryを利用する必要はありませんので導入時によく検討していただくと良いでしょう。
ReactでSetintervalを使った繰り返し処理
ここでは実際の例を用いて、処理の実行タイミングを紹介します。合わせて利用頻度の高いようなReact.jsでの繰り返し処理についてご紹介しているので分からないという方は参考にしてみてください。
下記は定期的に株式市場のデータなど値を定期的に取得することを想定しています。
constructor(props) {
super(props);
// マーケット値取得イベントの処理化
this.getMarket = this.getMarket.bind(this);
}
getMarket() {
const { dispatch } = this.props;
// 仮のイベントの記述なので利用する場合は、
// ご自身でactionなどにメソッドを作ってください。
dispatch(getMarketPrice());
}
// 描画が成功してDOMへのアクセスが可能になった時に発火
componentDidMount() {
this.interval = setInterval(this.getMarket, 10000);
// setIntervalのタイミングで何かをsetStateして、componentWillUnmountのタイミングで
// stateの数値と比較して、clearIntervalをするのが一般的な使われ方
}
// コンポーネントがなくなる時に実行
componentWillUnmount() {
clearInterval(this.interval);
}
おわり：読み込みのタイミングは大事
constructorで独自に作ったメソッド（今回の例で言えば：getMarketメソッド）を定義しておかないとエラーになったり、React.jsは多くの書き方があります。2016年12月現在では、ES6,2015が最近まで利用されてきましたが、ES7に移行していく日も近いでしょう。書き方はその時その時に応じてアップデートしていかなければいけませんし、それによって読み込みタイミングが変わるということもしばしばあります。
サービスを開発するときのプログラミングの基本
アプリケーションやクライアント案件などの案件の種類にもよりますが、基本的にはその時にプログラムを書いて終了ではなく、長期的にそのプログラムが残っていくものかという視点で書いていくと、より調べなければいけませんし、理解度も深まるとおもいます。ぜひ試してみてください。
JavaScriptを基礎的な学習から始めたい方
主に「見た目の動作・挙動のために」使われるJavaScriptですが、JavaScriptを基礎的なところから勉強したいという方におすすめのスクールはCodeCampかTECH::CAMPです。
マンツーマンでのオンライン動画はCodeCampで、全国どこでもインターネットとPCが一台あれば受講することが可能です。
マンツーマンで担当の講師がついてくれるので、わからないところがあれば時間内でいくらでも聞くことができます。これはプログラミングを効率的に上達させる方法でもあります。直接プログラミングスクールに通うにはその近くに住んでいないと定期的に通うのは難しいですよね。なので、近くにプログラミングスクールがないけど独学するのが難しそうなので、講師についてもらいたいという方は詳細をみてみると良いでしょう。
