Skip to content

Instantly share code, notes, and snippets.

🌴
On vacation

NAKAYASU TAKUYA l08084

🌴
On vacation
Block or report user

Report or block l08084

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@l08084
l08084 / Heroes.vue
Created Feb 22, 2019
ヒーローズコンポーネント
View Heroes.vue
<template>
<div>
<h2>My Heroes</h2>
<div>
<label>Hero name:
<input v-model="heroName" placeholder="name">
</label>
<button v-on:click="add(heroName)">add</button>
</div>
<ul class="heroes">
@l08084
l08084 / Messages.vue
Created Feb 22, 2019
メッセージコンポーネント
View Messages.vue
<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>
View store.js
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" },
@l08084
l08084 / Dashboard.vue
Last active Feb 22, 2019
ダッシュボードコンポーネント
View Dashboard.vue
<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>
@l08084
l08084 / index.js
Created Feb 20, 2019
vue-routerの設定ファイル
View index.js
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({
@l08084
l08084 / App.vue
Created Feb 20, 2019
ルートコンポーネント
View App.vue
<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>
@l08084
l08084 / main.js
Created Feb 20, 2019
Vue.jsのエントリファイル
View main.js
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
@l08084
l08084 / answer.component.html
Created Dec 24, 2018
回答を表示するコンポーネントのテンプレート
View answer.component.html
<!-- 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>
@l08084
l08084 / answer.component.ts
Created Dec 24, 2018
回答を表示するコンポーネントクラス
View answer.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { YesnoWtfResponseEntity } from '../question/yesno-wtf-response.entity';
/**
* YesNo.WTF APIのレスポンス(回答とGIF画像)を表示する
* コンポーネントクラス
*
* @export
* @class AnswerComponent
*/
@l08084
l08084 / question.component.html
Created Dec 24, 2018
質問フォームのテンプレート
View question.component.html
<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="質問(文の最後に?をつけてください)"
You can’t perform that action at this time.