中安拓也のブログ

プログラミングについて書くブログ

【Angular】シャイニングブルートウキョウでは、プログラムがあなたを条件分岐する!!

f:id:l08084:20181224205343p:plain

はじめに

Vue.jsの公式ドキュメントに、質問するとユーザーの代わりにYES or NOの意思決定を行ってくれるWebAPI(YesNo.WTF)が紹介されていたのをきっかけに、AngularでYesNo.WTFを呼び出して結果を表示するアプリを作ってみました。

タイトルはお馴染みのロシア的倒置法をもじったもので、シャイニングブルーというのは2020東京オリンピックのボランティア名の候補の一つだそうですよ。

引用元の記事

算出プロパティとウォッチャ — Vue.js

今回の記事では、上記のVue.jsのサンプルコードをAngularに書き換えてみます。

試しに触ってみる

完成版をGitHub Pagesに上げているので、実際に触って遊ぶこともできます!

YES or NO形式の質問を入力して500ミリ秒待つと質問に対する適当な回答(YES or NO)と愉快なGIF画像が表示されるぞ!

完成版のデモのリンク(https://l08084.github.io/ng-yes-or-no/)

全体のコードに興味がある人はGitHubに掲載されている下記コードを参照のこと

github.com

実装

バージョン情報

JavaScriptのフレームワークとしてAngularを、CSSのフレームワークとしてAngular Materialを使いました。

  • angular@7.0.7
  • angular/material@7.2.0
  • angular/cli@7.0.7
  • rxjs@6.3.3

質問フォーム作成

まず(YesNo.WTF)に投げかける質問を入力する質問フォームを作成します。

質問フォームのコンポーネントクラス

Angularのモデル駆動型フォーム(Reactive駆動型)を使用していて、全角か半角のを文末に入力しないといけないバリデーションもかけています。

質問フォームのテンプレート

// 入力フォームの値が変更された場合、500ミリ秒間隔で値を取得する
this.questionForm.get('question').valueChanges.pipe(debounceTime(500))
    .subscribe((searchText) => {

Vueのサンプルコードでは、lodash_.debounce(func, [wait=0], [options={}])を使用してyesno.wtf/apiへのリクエスト回数を制限していましたが、本コードではAngularらしく(?)RxJSdebounceTimeを利用してAPIへのアクセスを500ミリ秒間隔に制限しています。

あと全然知らなかったんですが、RxJS 6系だとpipe()メソッドを使わないとオペレーター(この例だとdebounceTime)使えないんですね......

回答を表示するコンポーネントを作成する

続いて、APIの回答結果(YES or NOとGIF画像)を表示するコンポーネントを作成していきます。

回答を表示するコンポーネントクラス

回答を表示するコンポーネントのテンプレート

作っててGIF画像って<img>タグで表示するんだ〜って思いました。まあそりゃそうでしょって感じですが

動作確認

実際に質問を入力してみましょう。ちゃんと動いていますね

f:id:l08084:20181224194508p:plain
実際に質問している様子

あとがき

サンプルコードの写経以上、クソアプリ未満といった感じでした。明日からはもうちょいがんばろう。ね、ハム太郎