takuya-nakayasu

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
import { debounceTime } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { YesnoWtfResponseEntity } from './yesno-wtf-response.entity';

/**
 * 質問フォームのコンポーネントクラス
 *
 * @export

takuya-nakayasu

<div class="container">
  <mat-card class="question-card">
    <mat-card-header>
      <mat-card-title class="question-title">YES/NO形式の質問をどうぞ！</mat-card-title>
    </mat-card-header>
    <mat-card-content>
        <form class="question-form" [formGroup]="questionForm">
            <!-- 質問の入力フォーム -->
            <mat-form-field class="input-field">
              <input matInput placeholder="質問(文の最後に？をつけてください)"

takuya-nakayasu

import { Component, OnInit, Input } from '@angular/core';
import { YesnoWtfResponseEntity } from '../question/yesno-wtf-response.entity';

/**
 * YesNo.WTF APIのレスポンス（回答とGIF画像）を表示する
 * コンポーネントクラス
 *
 * @export
 * @class AnswerComponent
 */

takuya-nakayasu

<!-- YesNo.WTF APIのレスポンス結果が格納されていない場合、非表示 -->
<div *ngIf="answer" class="response">
  <!-- 回答結果（YES or NOを表示） -->
  <div class="answer">
    {{answer.answer | uppercase}}
  </div>
    <!-- GIF画像を表示 -->
    <img class="gif" src="{{answer.image}}">
</div>

takuya-nakayasu

import Vue from 'vue'
import App from './App.vue'

import router from './router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router

takuya-nakayasu

<template>
  <div id="app">
    <h1>{{title}}</h1>
    <nav>
      <router-link to="/dashboard">Dashboard</router-link>
      <router-link to="/heroes">Heroes</router-link>
    </nav>
    <router-view></router-view>
    <Messages />
  </div>

takuya-nakayasu

import Vue from 'vue'
import Router from 'vue-router'

import Dashboard from '../components/pages/Dashboard'
import Heroes from '../components/pages/Heroes'
import HeroDetail from '../components/pages/HeroDetail'

Vue.use(Router)

export default new Router({

takuya-nakayasu

<template>
<div>
    <h3>Top Heroes</h3>
    <div class="grid grid-pad">
        <router-link
          v-for="hero in heroes"
          v-bind:key="hero.key" class="col-1-4"
          v-bind:to="{name: 'Detail', params : {id: hero.id}}">
            <div class="module hero">
                <h4>{{hero.name}}</h4>

takuya-nakayasu

export default {
    state: {
        heroes: [
            { "id": 11, "name": "Mr. Nice" },
            { "id": 12, "name": "Narco" },
            { "id": 13, "name": "Bombasto" },
            { "id": 14, "name": "Celeritas" },
            { "id": 15, "name": "Magneta" },
            { "id": 16, "name": "RubberMan" },
            { "id": 17, "name": "Dynama" },

takuya-nakayasu

<template>
<div v-if="messages.length">
    <h2>Messages</h2>
    <button class="clear" v-on:click="clear()">clear</button>
    <div v-for="(message, index) in messages" v-bind:key="index">
        {{message}}
    </div>
</div>
</template>