2018年5月14日

プログラミング

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

React 作りながら覚えるReact

はじめに

Reactの基本をサービスを作りながら学んでいくシリーズの第二回！
前回はCreate React Appを使い、スマートスピーカーの発音サービス（Smart Speaker’s Commands Speaker）を作っていきました。

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

今回はJSXを使用しUIを作っていきます。
また、コンポーネントを追加する方法もご紹介します。

UIを作っていく

前回はBootstrapとFont AwesomeをCDNから呼び出しましたね。
今回はそれらを使用し、JSXでデザインを作っていきます。

src/app.js

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <div className="bg-dark">
            <div className="container">
              <div className="row">
                <div className="col-sm-2 col-md-2 py-3">
                  <h4 className="text-white">
                  <i className="fas fa-microphone"></i>
                     SSCS
                  </h4>
                </div>
                <div className="col-sm-10 col-md-10 py-3">
                  <p className="text-white">スマートスピーカーのコマンド発音代行サービス</p>
                </div>
              </div>
            </div>
          </div>
        <div className="jumbotron">
          <header className="text-center">
            <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>
          </header>
        </div>
        <div className="container">
          <div className="row">
            <div className="col-sm-6 mb-2 mt-2">
              <h2><i className="fab fa-amazon"></i> Alexa</h2>
              <div className="row">
                <div className="col-sm-6 mb-2 mt-2">
                  <button className="card">
                    <div className="card-body">
                      <h4 className="card-title text-left">
                        <i className="fas fa-play"></i>　
                        音楽かけて
                      </h4>
                      <p className="card-text text-left">
                        ランダムで音楽をかけてくれるコマンドです。
                      </p>
                    </div>
                  </button>
                </div>
              </div>
            </div>
            <div className="col-sm-6 mb-2 mt-2">
              <h2><i className="fab fa-google"></i> Google Home</h2>
              <div className="row">
                <div className="col-sm-6 mb-2 mt-2">
                  <button className="card">
                    <div className="card-body">
                      <h4 className="card-title text-left">
                        <i className="fas fa-play"></i>　
                        音楽かけて
                      </h4>
                      <p className="card-text text-left">
                        ランダムで音楽をかけてくれるコマンドです。
                      </p>
                    </div>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

基本的にHTMLとほぼ同じような形で書いています。
classではなくclassNameであるところがポイントです。

これでコマンドを1つずつ追加していけば、一応はUIは出来上がりそうですね。

コンポーネントを追加する

これでもUIは問題なさそうですが、1つずつコマンドを追加していくのは大変そうです。

また、前回の記事にあったReactの特徴として Component-Based の説明として「コンポーネントは再利用することができ、より効率的なUI構築を可能にします。」とありました。
このコマンドを表示する部分については、コンポーネントを使用することで再利用していくのが良さそうですね。

ディレクトリ

Reactのディレクトリ構成については好みもありますが、今回はsrcの下にcomponentsというディレクトリを作り、その中に共通のパーツを入れていきましょう。
speaker_button.js というファイルを作っていきます。

src/components/speaker_button.js

import React, { Component } from 'react';

export default class SpeakerButton extends Component {
  render() {
    return (
      <div className="col-sm-6 mb-2 mt-2">
        <button className="card">
          <div className="card-body">
            <h4 className="card-title text-left">
              <i className="fas fa-play"></i>　
              音楽かけて
            </h4>
            <p className="card-text text-left">
              ランダムで音楽をかけてくれるコマンドです。
            </p>
          </div>
        </button>
      </div>
    );
  }
}

前回学んだJSXですね。
app.jsで2回呼び出されていたコマンド発音ボタンについて、共通化しコンポーネント化しました。

AlexaとGoogle Homeでコマンドが異なるケースがありますが、その対策として後ほどpropsを使っていきます。

では、このコンポーネントをapp.jsから呼び出してみましょう。
とはいっても何も難しいことはなく、importで先程のコンポーネントから、exportしていたクラス名であるSpeakerButtonを呼び出すだけです。

import React, { Component } from 'react';
import './App.css';
import SpeakerButton from './components/speaker_button';

class App extends Component {
  render() {
    return (
      <div>
        <div className="bg-dark">
            <div className="container">
              <div className="row">
                <div className="col-sm-2 col-md-2 py-3">
                  <h4 className="text-white">
                  <i className="fas fa-microphone"></i>
                     SSCS
                  </h4>
                </div>
                <div className="col-sm-10 col-md-10 py-3">
                  <p className="text-white">スマートスピーカーのコマンド発音代行サービス</p>
                </div>
              </div>
            </div>
          </div>
        <div className="jumbotron">
          <header className="text-center">
            <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>
          </header>
        </div>
        <div className="container">
          <div className="row">
            <div className="col-sm-6 mb-2 mt-2">
              <h2><i className="fab fa-amazon"></i> Alexa</h2>
              <div className="row">
                <SpeakerButton>
                </SpeakerButton>
              </div>
            </div>
            <div className="col-sm-6 mb-2 mt-2">
              <h2><i className="fab fa-google"></i> Google Home</h2>
              <div className="row">
                <SpeakerButton>
                </SpeakerButton>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

<SpeakerButton>
</SpeakerButton>

発音ボタン部分がだいぶコンパクトになりましたね。

Propsを渡す

先程補足でも記載しましたが、今のところだとSpeakerButton内では、Google Homeなのか、Alexaのボタンなのかという情報がわかりません。
ですが、実際に発音する際にはGoogle HomeとAlexaでは呼びかけのセリフが異なりますし、そもそもコマンドが異なってくるケースがあります。

まず、AlexaのSpeakerButtonなのかGoogle HomeのSpeakerButtonなのかがわかるようにする必要がありそうです。

そんなときはPropsを使用します。

Propsとは

Propsは、コンポーネント呼び出し時に設定する属性値（情報）です。当然、呼び出されたコンポーネントの中でも属性値を参照することができます。
また、値については一回値を設定した後は変更ができない、という性質を持っています。

つまり、今回のケースだとApp.js内からSpeakerButtonを利用する際にPropsを設定することができますが、子コンポーネント内でPropsの書き換えはできません。（参照はできる）

具体的な使い方としては、
<コンポーネント Props名= 値>
のような形で設定します。

例えば今回のような場合だと、このようになります。

<SpeakerButton speaker_type="alexa">
</SpeakerButton>

<SpeakerButton speaker_type="google">
</SpeakerButton>

speaker_typeにalexa（google）を設定しSpeakerButtonコンポーネントを呼び出しています。

呼び出された側では、this.props.Props名で取り出すことができます。
今回の場合this.props.speaker_typeでalexaかgoogleかの値を取得します。

speaker_button.js でこのようにspeaker_typeの値を表示させてみましょう。

<h4 className="card-title text-left">
  <i className="fas fa-play"></i>　
  {this.props.speaker_type}音楽かけて
</h4>

すると、こちらのようにPropsとして指定したspeaker_typeが表示されるはずです。

JSX内では中括弧{}で囲むことでJavaScriptの式を中に書くことができます。

まとめ

今回はJSXでUIを作っていきました。
また共通部分をコンポーネント化し、コードをすっきりさせ、Propsの渡し方も解説していきました。
次回はコマンドの表示部分とデータ部分を分割し、実際に発音もさせていきます。

Reactのお仕事に関するご相談

Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

この記事は
参考になりましたか？

AUTHOR

Eishi Saito 総務

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

2022年5月13日

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

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

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。企画からシステム開発、3DCG、デザインまで一貫して承ります。

WebARへ

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

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

話を聞いてみたい

運営メンバー

Eishi Saito 総務

sasakki デザイナー

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

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

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

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

はらたエンジニア

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

こぼりともろうエンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

ささいエンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

Damien

WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

かっきー

まりな

suzuki

miyagi

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

デザイナーをしています。好きな食べ物はラーメンです。

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています！

nishi tomoya

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

Kainuma

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

sugimoto

asama

ando

iwasawa ayane

oshimo

異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。これからたくさん吸収していきます！

【CSS】CSSだけでタブ切り替えを作る方法

【CSS】CSSのみで三角と矢印を作る方法

Figmaの基本【これからはじめるFigma】

npmのpackage.jsonと依存関係を理解しよう！

APIから値を取得し表示する 【これからはじめるReact Native】

レイアウトを整える【これからはじめるReact Native】

プロジェクト管理ツールAsanaの基本的な機能とおすすめポイント

Google Calendar + Trelloが実現? タスク管理サービス、Sunsama

Google Data Portalでデータを可視化する

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

目次

はじめに

UIを作っていく

コンポーネントを追加する

ディレクトリ

Propsを渡す

Propsとは

まとめ

Reactのお仕事に関するご相談

この記事は参考になりましたか？

AUTHOR

Eishi Saito 総務

関連記事

Reactでオセロゲームを作る

Slack OAuth x React で Slack ユーザー認証を作ってみた！

Reactで使えるバリデーションライブラリを紹介！

Hasura Cloud × Auth0 × React でお手軽にTodoアプリを作ってみた！

Blitz.jsとTailwind CSSでメモ帳アプリの作成【第２弾】

コンポーネントを実装するときに意識すること

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

簡単に自分で作れるWebAR

palanはWebARの開発を行っています

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

運営メンバー

Eishi Saito 総務

sasakki デザイナー

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

Sayaka Osanai デザイナー

はらた エンジニア

こぼり ともろう エンジニア

ささい エンジニア

Damien

ゲスト bagelee

かっきー

まりな

suzuki

miyagi

ogawa

いわもと

taishi kobari

kubota shogo

nishi tomoya

aihara

nagao

Kainuma

sugimoto

asama

ando

iwasawa ayane

oshimo

APIから値を取得し表示する【これからはじめるReact Native】

この記事は
参考になりましたか？

palanはWebARの開発を
行っています

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

はらたエンジニア

こぼりともろうエンジニア

ささいエンジニア