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

Contents

はじめに
React レンダリングの更新処理
React ユーザー定義の関数と’プロパティ(props)’
React ユーザー定義の関数からさらにユーザー定義関数を呼ぶ
React Clockコンポーネントのカプセル化
React カプセル化 Step1
まとめ

はじめに

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

第9回では、公式サイトに従い、テスト用サブドメインでHello Worldの派生からJPG画像の表示、最後には、ユーザー入力のブロックについて確認しました。(sample1-5, sample6-10)

さすがにindex.htmlページにサンプルコードをベタがきしていたので、サンプルページを別ページに分割しました。

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

React レンダリングの更新処理

定期的にレンダリングの更新処理を行います。

14行目 setInterval()により１秒毎に tick()関数が呼び出されます。現在時刻を取得し表示します。

３箇所のTime Zoneで表示してみました。動きがあるサンプル実装だと少し進化した気分になります。

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

function tick() {
  const element = (
    <div>
      <h2>It is {new Date().toLocaleTimeString('en-US',{ timeZone:'America/New_York'})} at NewYork.</h2>
      <h2>It is {new Date().toLocaleTimeString('ja-JP',{ timeZone:'Asia/Tokyo'})} at Tokyo.</h2>
      <h2>It is {new Date().toLocaleTimeString('en-US',{ timeZone:'UTC'})} UTC time .</h2>
    </div>
  );
  ReactDOM.render(element, title);
}

setInterval(tick, 1000);

React ユーザー定義の関数と’プロパティ(props)’

今回は、elementにユーザ定義の関数を埋め込んでみます。

7行目のelementに’Welcome’というユーザー定義の関数を指定しています。さらに属性nameを指定しています。属性nameに値’Swim Lover’を入れると、props.name=’swim lover’を指定してWelcom関数を呼び出す動作になっています。これは仕様として覚えるしかないのだと思います。

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

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Swim Lover" />;

ReactDOM.render(
  element,
  title
);

結果は特に面白いものではありません。

React ユーザー定義の関数からさらにユーザー定義関数を呼ぶ

App()というユーザー定義関数からWelcomeというユーザー定義関数を呼んでいます。

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

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Swin Lover" />
      <Welcome name="Bike Lover" />
      <Welcome name="Running Lover" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  title
);

これも結果は、特に面白いものではありおません。

React Clockコンポーネントのカプセル化

サンプル9でclockの更新処理を実装しました。

以下はサンプル9のコードですが、render処理に渡しているのは、const データであるelementであり、elementの中で、Date()関数をコールしていおり、なにかごちゃまぜ感があり、違和感を感じます。

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

function tick() {
  const element = (
    <div>
      <h2>It is {new Date().toLocaleTimeString('en-US',{ timeZone:'America/New_York'})} at NewYork.</h2>
      <h2>It is {new Date().toLocaleTimeString('ja-JP',{ timeZone:'Asia/Tokyo'})} at Tokyo.</h2>
      <h2>It is {new Date().toLocaleTimeString('en-US',{ timeZone:'UTC'})} UTC time .</h2>
    </div>
  );
  ReactDOM.render(element, title);
}

setInterval(tick, 1000);

React カプセル化 Step1

render処理で、Date()関数で時刻取得を行い、取得したdateを引数として、Clock()コンポーネントを呼び出します。

Clock()コンポーネント作ることで、コードのまとまり感が出てきました。

しかし、Date()関数が、まだ、render()内で呼ばれています。時間処理に関するものは、Clock()内ですべてまとめて行うようにしたほうがより整理されたコードになります。

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

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

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

setInterval(tick, 1000);