作りながら覚えるReact目次はじめにフリーワード発音を実装する発音ボタンを実装するまとめはじめにスマートスピーカーの発音サービスを作りながらReactを学んでいくシリーズ、第6弾です。Home切り替え部分を実装しました。今回はフリーワード発音機能を実装していきます。フリーワード発音を実装する前回、UI変更に伴いこのようなファイル構成にしていきましたね。今回、このようなフリーワードの入力エリア、また発音ボタンを実装していきます。通常のHTMLでのテキストフォームはこのような形で実装します。name="name">そして通常のJavaScriptの場合、この入力フォームに入力された値を取得し、送信ボタンが押されたらその値を送信するという流れになります。Reactの場合には入力フォームを監視し、文字入力(値変更)がある毎にStateを更新しフォームをレンダリングし、送信ボタンが押されたらStateの値を送信するとなります。わかりづらいかもしれないので、実際のこのフォーム部分のコードを見ていきましょう。constructor初期化処理を行います。}前回の記事でspeaker_typeを設定しましたが、今回はtext_valueを設定します。これはフォームの入力内容に関するStateです。前回の記事にあったように、thisをbindしておきます。次にフォームの変更イベントを見ていきます。e.target.valueは後ほど見ていく入力フォームの値が入ってきます。Stateのtext_valueに入力フォームの値を設定していますね。次に入力フォーム部分を見ていきます。こちらはその名の通り、デフォルト値を設定するオプションです。constructor内で””、つまり空文字を設定していました。次にonChangeの部分を見ていきます。onChange={this._changeText}ここはonChange、つまりフォーム入力内容の変更があった場合にイベントが発動します。ここの入力フォームについてはこのような流れとなります。入力フォームを再レンダリング発音ボタンの実装では、発音ボタンを実装していきます。先にJSX部分を見ていきます。this._onClick()}こちらは何回か今までみた形ですね。アロー関数でthisをbindしています。ここで実現したい仕様はスピーカーの種類を見てコマンド発音前の呼びかけコマンドを実行し、そちらと入力フォームのテキストと合わせ発音するというものです。Google、音楽かけて」と発音してくれるイメージです。使い方はこちらの記事でも解説しましたね。使用しswitch文で場合分けしています。alexaの場合には、constのalexa.js内のデータから呼びかけコマンド(pre_commands)をpre_commandsに代入しています。合わせ、その内容を発音しています。今回のコードでは、通しで一旦コードを確認してみます。<p>スマートスピーカーのコマンドを日本語で発音して代行してくれるサイトです。コマンドをクリックすると発音されます。noreferrer">こちらから</a>お願いします。}}まとめ今回はReactにおける入力フォームの使い方、またそちらの値を送信する処理をご紹介しました。次はスピーカーの種類を選択し、コマンドのカード部分を発音させる処理を実装していきます。マーケター・ディレクター・エンジニアなど何でも屋。COBOLからReactまで色んなことやります。PagesでReactアプリケーションを公開!【作りながら覚えるReact】アプリでもっと便利に!気になる記事をチェック!記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。palanでは一緒に働く仲間を募集しています正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。マーケター・ディレクター・エンジニアなど何でも屋。COBOLからReactまで色んなことやります。デザイナーアメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。デザイナーWebAR/VRのデザインと3DCG制作がメインです。肩書きは「アニメ案件に関わりたいデザイナー」。マーケタードイツでWEBマーケティングしています。使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。デザイナーフロントエンドデザイナー。CSS、JSの実装を担当しています。NativeやReact360をよく触っています。エンジニアサーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。デザイナーSketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。好きな食べものは生ハムとお寿司とカレーです。エンジニアサーバーサイドエンジニアからフロントエンドエンジニアになりました。Nativeでのアプリ開発をしています。エンジニアサーバーサイドエンジニア。SIerを経て2019年7月に入社。Railsを使った開発を行っています。WebGLとReactが強みと言えるように頑張ってます。DamienWebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。TOP運営会社お問い合わせプライバシーポリシーは株式会社palanの運営する情報メディアです。おいしいデザイン・プログラミング情報をお届けします。クリエイター向けの記事を可愛く更新中!。