Webアプリ開発 React.js フロントエンド環境 Part(11) | 初心者向けWEB技術と機械学習のBlog

Contents

はじめに
React カプセル化 Step2
React Clock関数をクラス化する
React propsからstateへ
まとめ

はじめに

こんにちは、swim-loverです。初心者向けのWebアプリ開発記事です。フロントエンド環境にReact.jsを使用しています。今の目標は、出席簿アプリを作ることです。

第10回では、公式サイトに従い、テスト用サブドメインでReact レンダリングの更新処理からClockコンポーネントのカプセル化について確認しました。(sample6-10, sample11-15)

引き続き、Reactの勉強を進めていきたいと思います。

React カプセル化 Step2

第10回は、React カプセル化Step1まで確認しました。

Step1のコードは、1. render()関数内で、時刻取得関数Date()を呼び出している。2. 1秒周期タイマーの呼び出し位置が独立している。の２点でコードの改良の余地があります。

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    title
  );
}
setInterval(tick, 1000);

React Clock関数をクラス化する

React.Component を継承するClockクラスを作成します。

Clock関数の中コードをClockクラスのRenderメソッドに移動します。

propsをthis.propsに書き換えていることに注意します。

class Clock extends React.Component {
  render() {
    return (
      <div>
        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
        <h2>It is {this.props.date.toLocaleTimeString('en-US',{ timeZone:'America/New_York'})} at NewYork.</h2>
        <h2>It is {this.props.date.toLocaleTimeString('ja-JP',{ timeZone:'Asia/Tokyo'})} at Tokyo.</h2>
        <h2>It is {this.props.date.toLocaleTimeString('en-US',{ timeZone:'UTC'})} UTC time .</h2>
      </div>
    );
  }
}

Clock関数からClockクラス化は問題なく動作します。見た目に変化はありません。

Clockクラスの改良を更に進めていきます。

React propsからstateへ

this.propsをthis.stateに書き換えます。

また、Clockクラスコンストラクターで、時刻取得関数Dateを呼びます。

const title= document.querySelector('#hello_world_14');

class Clock extends React.Component {
  constructor(props) {
    super(props);
    console.log('call constructor()')
    this.state = {date: new Date()};
  }
  render() {
  console.log('call render()')
    return (
      <div>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
        <h2>It is {this.state.date.toLocaleTimeString('en-US',{ timeZone:'America/New_York'})} at NewYork.</h2>
        <h2>It is {this.state.date.toLocaleTimeString('ja-JP',{ timeZone:'Asia/Tokyo'})} at Tokyo.</h2>
        <h2>It is {this.state.date.toLocaleTimeString('en-US',{ timeZone:'UTC'})} UTC time .</h2>
      </div>
    );
  }
}

function tick() {
  console.log('call tick()')
  ReactDOM.render(
    <Clock />,
    title
  );
}

setInterval(tick, 1000);

実行結果は、一秒周期でtick関数を呼び出しているにもかかわらず、時刻表示は更新されません。