2018年5月29日

プログラミング

Reactでスマートスピーカーのコマンド発音サービスを作ろう(5)【作りながら覚えるReact】

目次

  1. はじめに
  2. UIを構築する
  3. スピーカーを切り替える
  4. 処理の流れを確認する
  5. まとめ

はじめに

スマートスピーカーの発音サービスを作りながらReactを学んでいくシリーズ、第5弾です。
前回はデータをconstファイルに格納し、そちらをmapで展開しました。

今回はUIをリッチにして、ラジオボタンやフリーキーワードの発音ボックスを実装していきます。

UIを構築する

今回はデザイナーさんにUIをリッチにしてもらいました。

before

_2018-05-19 18.50.24.png (124.4 kB)

after

 2018-05-29 0.24.33.png (628.0 kB)

だいぶデザインが洗練されましたね!!
こちらで公開されています!

コンポーネント構成

新しいデザインについて、コンポーネントの構成を考えていきます。
全体はApp.jsで管理しますが、ヘッダー部分をheader.js、カード部分を含むメインの部分をmain.jsと分割することにします。

srcディレクトリのJavaScriptファイルはこのような構成になります。

├── App.js
├── components
│   ├── header.js
│   ├── main.js
│   └── speaker_button.js
├── const
│   ├── alexa.js
│   └── google.js
├── index.js

App.jsもこのようにシンプルになります。

import React, { Component } from 'react';
import './App.css';
import Header from './components/header';
import Main from './components/main';

class App extends Component {
  render() {
    return (
      <div>
        <div className="bg-dark header">
          <div className="container py-3">
            <div className="logo">
              <h1 className="text-white">
              <i className="fas fa-microphone"></i>
                SSCS
              </h1>
            </div>
            <p className="text-white">スマートスピーカーのコマンド発音代行サービス</p>
          </div>
        </div>
        <Header/>
        <Main/>
    </div>
    );
  }
}

export default App;

HeaderとMainに分けることでだいぶすっきりしましたね。
一番上のロゴなどについてもコンポーネントにまとめてしまい、App.jsをよりすっきりさせるのも良いかもしれません。

では、今回はheader.js部分を実装していきます!

スピーカーを切り替える

説明文などはそのままとして、AlexaとGoogle Homeを切り替えるボタンを実装していきます。

Alexa選択時

 2018-05-29 10.48.59.png (21.5 kB)

Google Home選択時

 2018-05-29 10.48.24.png (24.4 kB)

一見、どう実装するのかイメージがわかないかもしれませんが、考えてみるとこれはAlexaかGoogle Homeかを選択するラジオボタンである、とも言えそうです。

実装するこのラジオボタンの機能を整理してみましょう。
1. デフォルトでAlexaが選択され緑のスタイルが当たる
2. Google Homeを選択すると赤のスタイルが当たり、Alexaの選択が解除される
3. 再度Alexaを選択すると緑のスタイルが当たり、Google Homeの選択が解除される

こうしたなにかイベントを通じて見かけの変更(再レンダリング)が発生する場合、Stateを使用していきます。

Stateとは

Stateとは、コンポーネントが持つ「状態」です。
わかりやすく言ってしまえば、コンポーネントが持つデータのことです。

コンポーネントが持つデータといえば、以前の記事でPropsをご紹介しました。
PropsとStateのちがいはどこにあるのでしょうか。

Propsは親コンポーネントから渡される値であり、不変なデータです。
それに対してStateはコンポーネント自身が持っている状態であり、可変なデータです。
またコンポーネント内でStateを更新することで、コンポーネントが再描画されます。

少し難しいかもしれないので、今回のケースで考えていきましょう。

  1. デフォルトでAlexaが選択され緑のスタイルが当たる
    →この状態(コンポーネントが描画された初期状態)ではスピーカーのStateにAlexaが設定されている。
     2018-05-29 10.48.59.png (21.5 kB)

  2. Google Homeを選択すると赤のスタイルが当たり、Alexaの選択が解除される
    →Google Homeが選択されるとスピーカーのStateにGoogleが設定され、再描画され、Google Homeの選択状態になる。
     2018-05-29 10.48.24.png (24.4 kB)

  3. 再度Alexaを選択すると緑のスタイルが当たり、Google Homeの選択が解除される
    →Alexaが選択されるとスピーカーのStateにAlexaが設定され、再描画され、Alexaの選択状態になる。
     2018-05-29 10.48.59.png (21.5 kB)

では、こちらをコードにしていきます。

header.js

import React, { Component } from 'react';
import {Alexa} from '../const/alexa';
import {Google} from '../const/google';

export default class Header extends Component {
  constructor(props) {
    super(props);
    this.state = {
      speaker_type: "alexa",
    };
    this._toggleButton = this._toggleButton.bind(this);
  }

  _toggleButton(e) {
    this.setState({speaker_type: e.target.value});
  }

  render() {
    return (
      <div className="jumbotron mv">
        <header className="mv_ttl">
          <h2>Smart Speaker's Commands Speaker (SSCS)</h2>
          <p>スマートスピーカーのコマンドを日本語で発音して代行してくれるサイトです。コマンドをクリックすると発音されます。<br/>
            コマンドの追加は<a href="https://github.com/eishis/smart-speakers-commands-speaker" target="_blank" rel="noopener noreferrer">こちらから</a>お願いします。
          </p>
          <div>
            <div className="radio_button">
              <input
                type="radio"
                value="alexa"
                name="s2"
                id="alexa"
                checked={this.state.speaker_type === "alexa"}
                onChange={this._toggleButton}
              />
              <label htmlFor="alexa" className="switch-alexa">Alexa</label>
              <input
                type="radio"
                value="google"
                name="s2"
                id="google"
                checked={this.state.speaker_type === "google"}
                onChange={this._toggleButton}
              />
              <label htmlFor="google" className="switch-google">Google Home</label>
            </div>
          </div>
        </header>
      </div>
    )
  }
}

では、ポイントを見ていきます。

  constructor(props) {
    super(props);
    this.state = {
      speaker_type: "alexa",
    };
    this._toggleButton = this._toggleButton.bind(this);
  }

まずconstructorで初期化処理を行っています。

    this.state = {
      speaker_type: "alexa",
    };

こちらでこのコンポーネントのstateを設定しています。
speaker_typeに初期値のalexaを設定しています。

this._toggleButton = this._toggleButton.bind(this);
こちらはわかりづらいかもしれません。
_toggleButtonは後で出てきますが、ボタンを切り替えるイベントです。
bindは以前こちらの記事でも解説しましたが、thisを拘束するためのものです。
初期化処理で一回bindをしておかないと、この_toggleButton上でthisのstate更新をできないので、必要な処理となります。

  _toggleButton(e) {
    this.setState({speaker_type: e.target.value});
  }

先程も解説しましたが、 _toggleButtonはスピーカの切り替えボタンが押された際のイベントです。
this.setState ではe.target.value、つまり選択されたボタンのvalueでStateの値を更新してます。

POINT!!

Stateの更新時には直接this.state = {}で更新するのではなく、必ずthis.setState()関数を使用します。
StateはPropsと異なり、可変(mutable)であると先程説明しましたが、this.stateの値については不変(immutable)のように考えるようにしましょう。
this.setState()を呼び出すことで、Stateを更新し再描画してくれます。
※Stateを直接更新しようとした場合、console上で Do not mutate state directly. Use setState()とメッセージが出てきます。

では、選択ボタン部分を見ていきます。

<div className="radio_button">
  <input
    type="radio"
    value="alexa"
    name="s2"
    id="alexa"
    checked={this.state.speaker_type === "alexa"}
    onChange={this._toggleButton}
  />
  <label htmlFor="alexa" className="switch-alexa">Alexa</label>
  <input
    type="radio"
    value="google"
    name="s2"
    id="google"
    checked={this.state.speaker_type === "google"}
    onChange={this._toggleButton}
  />
  <label htmlFor="google" className="switch-google">Google Home</label>
</div>

注目すべきは、ボタンのcheckedとonChange部分です。

  <input
    type="radio"
    value="alexa"
    name="s2"
    id="alexa"
    checked={this.state.speaker_type === "alexa"}
    onChange={this._toggleButton}
  />

checked={this.state.speaker_type === "alexa"}
checkedはこのボタンの選択状態を表します。
値として{this.state.speaker_type === "alexa"}が入っていますが、これはつまり「this.state.speaker_typeがAlexaの場合にチェックをする」ということです。

onChange={this._toggleButton}
ここは値が変わったら、つまりボタンが押されたら_toggleButtonイベントが発動します。

Google Home側も同じですね!

処理の流れを確認する

では、今回実装したスピーカー選択ボタンについて処理の流れを振り返っていきましょう。

  1. constructorでStateの初期化が行われる。speaker_typealexaが入る。
  2. Headerコンポーネントがレンダリングされる。checked={this.state.speaker_type === "alexa"} の部分がtrueになるので、Alexaボタンが選択状態になる
  3. Google Homeボタンを押す
  4. _toggleButtonイベントが発動し、speaker_typegoogleが入り、再レンダリングされる
  5. checked={this.state.speaker_type === "google"} がtrueになるので、Google Homeボタンが選択状態になる

POINT!!

setStateによる再レンダリングは、render()内のDOM(Document Object Mode)を対象としています。
では、「スマートスピーカーのコマンドを日本語で発音して代行してくれるサイトです。コマンドをクリックすると発音されます。」という説明部分も毎回レンダリングされてしまうのでは?と思われる方もいると思いますが、ちゃんと更新すべき差分のみ更新してくれます。
実は、ReactではVirtualDOMという仮想のDOMを保持し、実際に更新の対象となる部分(差分)だけDOM更新を行ってくれる仕組みがあるのです。

まとめ

今回はReactにおけるStateの役割、Propsとの違いなどを解説しながらスピーカーボタン(ラジオボタン)の実装を行いました。
header.jsには後、自由にコマンドを入力し発音してくれるフリーワード発音ボタンが必要となりますので、次回実装しながら解説していきます。

0

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP