「結局全部で推しは何人いるの？」
きっかけは会う度に推しが増える私に対して友人が放ったこの一言だった。
30年生きているのでそれなりの数の出会いは経験してきた。(※推しの話)
幼少期、思春期、青年期、それぞれに出会った相手との大切な思い出がある。(※推しの話)
そうだ、私を通り過ぎて行った彼らのことを思い出と共に書き連ねてみよう。(※推しの話)
ということで、歴代の男たちを記録するアプリを作ってみた。(※推しの話)
歴代推し登録アプリ
以下からどうぞ。
使うとこんな感じ
名前、作品、出会った時期（幼少期～青年期まで選択）、推しポイントと自由書き込み欄を作った。
入力したら、［新規登録］ボタンを押すだけ。
結果こうなる。
ただのメモ帳みたいなものだけど、自分の好きな人たちの名前があるだけで楽しい。
ソースコード
Bootstrapなるものを使ってみた。すごい便利だ・・・。
CodePenで書いてみたんだけど、Qiitaに埋め込むとちょっと見づらいかも。
See the Pen 歴代推し登録アプリ by shigeyuri (@shigeyuri) on CodePen.
ので、ソースコードを直書きでも置いておく。
HTML
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>歴代推し登録アプリ</title>
</head>
<body>
<div id ="app">
<br>
<h1>歴代推し登録アプリ</h1>
<br>
<h5>これまでに出会った推しを記録してください。</h5>
<div class="border col-7">
<br>
<br>
<div class="row">
<div class="col-md">
<form>
<div class="form-group">
<label>名前：</label>
<input v-model:value="name" type="text" class="form-control" placeholder="レオン・S・ケネディ">
</div>
<div class="form-group">
<label>作品：</label>
<input v-model:value="contents" type="text" class="form-control" placeholder="バイオハザード4">
</div>
<div class="form-group">
<label>出会った時期：</label>
<select v-model:value="period" class="form-control" id="exampleFormControlSelect1">
<option>幼少期</option>
<option>少年少女期</option>
<option>中高生期</option>
<option>大学生期</option>
<option>それ以降</option>
</select>
</div>
<div class="form-group">
<label>推しポイント</label>
<input v-model:value="point" type="text" class="form-control" placeholder="顔面と身体能力。CVが森川智之。">
</div>
<div class="form-group">
<label>補足：</label>
<textarea v-model:value="other" class="form-control" rows="3" placeholder="最新作の3D映画BIOHAZARD Infinit DarknessがNetflixで見られる！"></textarea>
</div>
</form>
</div>
</div>
<div class="row center-block text-center">
<div class="col-1">
</div>
<div class="col-5">
<button type="button" v-on:click="addOshi" class="btn btn-outline-primary btn-block">新規登録</button>
</div>
<div class="col-5">
<button type="button" v-on:click="delOshi" class="btn btn-outline-secondary btn-block">削除</button>
</div>
</div>
<br>
<br>
<hr>
<br>
<h2>登録した推し一覧</h2>
<div class="row">
<div class="col-lg">
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">名前</th>
<th scope="col">作品</th>
<th scope="col">出会った時期</th>
<th scope="col">推しポイント</th>
<th scope="col">補足</th>
</tr>
</thead>
<tbody>
<tr v-for="item in OshiList">
<td> {{ item.name }}</td>
<td> {{ item.contents }}</td>
<td> {{ item.period }}</td>
<td>{{ item.point }}</td>
<td>{{ item.other }}</td>
</tr></p>
</tbody>
</table>
</div>
</div>
</li>
</ul>
<br>
</div>
</div>
</body>
</html>
JavaScript
const app = new Vue({
el: '#app', // Vueが管理する一番外側のDOM要素
data: {
// Vue内部で使いたい変数は全てこの中に定義する
name: '',
contents: '',
period: '',
point:'',
other: '',
OshiList: [], // これは配列
},
methods: {
// 関数はここ
addOshi: function() {
console.log('推しを追加したよ：', this.name, this.contents, this.period, this.point, this.other);
// 配列の先頭に現在のタスク内容を追加する（最後尾の場合はpush）
// this.OshiList.unshift(this.name, this.contents, this.period, this.point, this.other);
this.OshiList.unshift({name:this.name,
contents:this.contents,
period:this.period,
point:this.point,
other:this.other});
console.log('登録した推し一覧：', this.OshiList);
},
// 以下を追加、関数名はなんでもよい
delOshi: function() {
this.name = '';
this.contents ='';
this.period = '';
this.point = '';
this.other = '';
this.OshiList = [];
console.log('全ての推しを消したよ');
},
},
});
BootStrapが便利だった
これを作る上でBootStrapのCSSを使用したんだけど。めちゃくちゃ便利だった。
CSSとして別でゴリゴリ設定する必要がなく、オシャレ洗練デザインが全部決まってる。
メモ帳で一生懸命タグ打ち激ダサHPを作っていたかつての私に教えてあげたい。
一方で、登録した推し一覧がどうしても改行されてしまって見づらくなるところが気になっている。
作品名が長かったりするのである程度は仕方ないけれど。。
行や列の設定をもう少し見直して、より見た目の良い作りにしたいところ。
もっとリファレンスを読み込んで、色んなデザインを試してみたい。
感想
推しの名前を入力するだけで、文字を見るだけでちょっと幸せになれる。
それぞれの推しを思い返して、ここが大好きだった…！って思い返すのもよい。
推しは生活に幸せを与えるので、記録が多くなればなるほど楽しくなると思う。
因みに私は真剣に登録したら2時間かかった。(39人)
皆の推しリスト、作ったら教えてください。