はじめに
Vue.jsの公式ドキュメントに、質問するとユーザーの代わりにYES or NOの意思決定を行ってくれるWebAPI(YesNo.WTF)が紹介されていたのをきっかけに、AngularでYesNo.WTFを呼び出して結果を表示するアプリを作ってみました。
タイトルはお馴染みのロシア的倒置法をもじったもので、シャイニングブルーというのは2020東京オリンピックのボランティア名の候補の一つだそうですよ。
引用元の記事
今回の記事では、上記のVue.jsのサンプルコードをAngularに書き換えてみます。
試しに触ってみる
完成版をGitHub Pagesに上げているので、実際に触って遊ぶこともできます!
YES or NO形式の質問を入力して500ミリ秒待つと質問に対する適当な回答(YES or NO)と愉快なGIF画像が表示されるぞ!
完成版のデモのリンク(https://l08084.github.io/ng-yes-or-no/)
全体のコードに興味がある人はGitHubに掲載されている下記コードを参照のこと
実装
バージョン情報
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らしく(?)RxJSのdebounceTime
を利用してAPIへのアクセスを500ミリ秒間隔に制限しています。
あと全然知らなかったんですが、RxJS 6系だとpipe()
メソッドを使わないとオペレーター(この例だとdebounceTime
)使えないんですね......
回答を表示するコンポーネントを作成する
続いて、APIの回答結果(YES or NOとGIF画像)を表示するコンポーネントを作成していきます。
作っててGIF画像って<img>
タグで表示するんだ〜って思いました。まあそりゃそうでしょって感じですが
動作確認
実際に質問を入力してみましょう。ちゃんと動いていますね
あとがき
サンプルコードの写経以上、クソアプリ未満といった感じでした。明日からはもうちょいがんばろう。ね、ハム太郎