vue.jsでタスクリストを作ってみた

プログラミング

 

こんにちは月子です。

駆け出しエンジニアですからね、プログラマーぽい記事もたまには……

 

今回はvue.jsでタスクリストを作ってみました。

その名も「褒めてくれる タスクリスト」です!

 

 

入れた機能
・今日/今月/今年ごとにタスク追加
・タスク削除
・タスク完了ごとに褒めてくれるアラート
シンプルですね。
駆け出しエンジニアなので、生ぬるい目で見てくださると嬉しいです。
あとインデントをeclipseでは整えていたのに、貼り付けた瞬間にぐちゃぐちゃになり、絶望したので修正していません。許してください。
それでは早速行きましょう!

HTML

まずはタスクを入れるテキストボックス、
今日/今月/今年を選ぶセレクトボックスを作ります。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script th:src="@{/webjars/vue/2.5.3-1/vue.js}"></script>
<script th:src="@{/webjars/jquery/1.11.1/jquery.min.js}"></script>
<link href="/css/common.css" rel="Stylesheet" type="text/css" />
 <style>
 [v-cloak] {
 display: none;
 }
</style>
</head>
<body>
<div class="center">
<div id="list_vue" v-cloak>
<br></br>
<select v-model="selected">
<option disabled value="">いつのタスクですか</option>
<option v-for="option in options" v-bind:key="option.id" 
v-bind:value="option.id">
{{ option.name }}
</option>
</select>
<div></div>
<input type="text" v-model="addTask"></input>
<button v-on:click="addTaskButton">タスク追加!</button>
<br></br>
</div>
</div>
<script th:src="@{/vue/listVue.js}"></script>
</body>
</html>

余談ですが、v-forするときはkeyを使わないと不具合の原因になるそうです。

 

さて次はタスクリストを作成します。
タスクボタンの下に、テーブルを突っ込んでいきましょう。

<table class="list" style="display:inline;">
<tbody>
<tr>
<th>今日</th>
</tr>
<tr  v-for="(today,index) in todayList" v-bind:key="today.id">
<td>
{{today.id}}.{{today.task}}
<button v-on:click="deleteButton('todayList',index)">×</button>
</td>
</tr>
</tbody>
</table>
<table class="list" style="display:inline;">
<tbody>
<tr>
<th>今月</th>
</tr>
<tr v-for="(month,index) in monthList"  v-bind:key="month.id">
<td>
{{month.id}}.{{month.task}}
<button v-on:click="deleteButton('monthList',index)">×</button>
</td>
</tr>
</tbody>
</table>
<table class="list" style="display:inline;">
<tbody>
<tr>
<th>今年</th>
</tr>
<tr v-for="(year,index) in yearList"  v-bind:key="year.id">
<td>
{{year.id}}.{{year.task}}
<button v-on:click="deleteButton('yearList',index)">×</button>
</td>
</tr>
</tbody>
</table>

htmlはひとまず完成です。

style=”display:inline;”でテーブルを横並びにしています。
もっとスマートなやり方がありそうですが…

 

vue.jsの実装

 

vueを見ていきましょう。

var vm = new Vue({
el: '#list_vue',
data:{
todayList : [
{ id:1,
task: "例:A社に電話をかける"
}
],
monthList : [{
id:1,
task : "例:資格の勉強をする"
}],
yearList : [{
id:1,
task : "例:サントリーニ島へ行く"
}],
addTask : "",
//セレクトボックス
selected: '',
options: [
{ id: 1, name: '今日' },
{ id: 2, name: '今月' },
{ id: 3, name: '今年' }
]
},
methods:{
addTaskButton : function() {
var list = "";
//セレクトボックスで何が選んだか
switch(this.selected){
case 1 :
list = this.todayList;

break;
case 2 :
list = this.monthList;

break;
case 3 :
list = this.yearList;

break;
}

list.push({
id: list.length+1,
task : this.addTask,
})

this.$set(this,"addTask","");
},
//削除用ボタン
deleteButton : function(list,index){
//どのリストを選んだか
var taskList = "";
var num = null;
switch(list){
case "todayList" :
taskList = this.todayList;

break;
case "monthList" :
taskList = this.monthList;

break;
case "yearList" :
taskList = this.yearList;

break;
}

//第一引数:押したところの配列の番号、第二引数:いくつ削除するか
taskList.splice(index,1);
//削除したデータのidを振り直す
$(taskList).each(function(i){
this.id = i + 1;
});
}
}
})

 

簡単に説明をば…

addTaskButtonメソッドでは、
セレクトボックスで何を選んだかによって、switch文で条件分岐をしています。
当てはまったリストに、push()で末尾にidとタスク内容を加えるようにしています。

deleteButtonメソッドでは、まず二つを引数で渡しています。

 

第一引数:リストの文字列
第二引数:index

 

たとえば「今日リスト」であれば「’todayList’,index」を渡しています。
そしてvue側で「list,index」を受け取っています。

第二引数では、何番目のループかを渡すことができます。
第一引数の文字列が何かで、またまたswitch文で条件分岐します。

ここで「何のリストの、何番目のタスクの削除ボタンが押されたか」を調べています。

もっとスマートなやり方が絶対あると思うのですが、筆者はこれしか思いつきませんでした。

 

そして削除した後、idを降り直して終了です。
これをやらないと、番号がめちゃくちゃになってしまいます。

以上がタスクリストの作り方でした。

しかし私は思います。

 

普通過ぎてつまらん

 

そう思った私は悪ふざけをはじめました。

タスクを頑張ってこなしたのに、単純に消すだけなんて寂しい。
そうだ、ほめてくれるタスクリストを作ろう!!!!

 

褒めてくれるアラートを出す

 

ということで、作りました。

まずvueのdataに褒めてくれるアラートを追加します。

//アラートを出す
alertFlg :false,
alert_t : ['がんばった!','えらい!','すごい!','すばらしい'],
alert_m : ['天才か・・・・?','この世で一番えらい!','えらいので今日は唐揚げ4kg食べていい'],
alert_y : ['自由に歩けるということは、人生を、自信をもって歩いて行けるということなのだ。
\n~サルバトーレ・フェラガモ~',
'自信を持て!ぼくは世界一だと。\n~ドラえもん~',
'自分のことを、この世の誰とも比べてはいけない。それは自分自身を侮辱する行為だ。
\n~ビル・ゲイツ~']

 

今年のタスクをクリアすると、偉人たちの名言が現れます。

このアラートをランダムで出すようにしましょう。

 

deleteButton : function(list,index){
//どのリストを選んだか
var taskList = "";
var num = null;
switch(list){
case "todayList" :
taskList = this.todayList;
num = Math.floor(Math.random() * this.alert_t.length);
alert(this.alert_t[num]);

break;
case "monthList" :
taskList = this.monthList;
num = Math.floor(Math.random() * this.alert_m.length);
alert(this.alert_m[num]);

break;
case "yearList" :
taskList = this.yearList;
num = Math.floor(Math.random() * this.alert_y.length);
alert(this.alert_y[num]);

break;
}

//index:押したところの配列の番号、第二引数:いくつ削除するか
taskList.splice(index,1);
//削除したデータのidを振り直す
$(taskList).each(function(i){
this.id = i + 1;
});
}
再登場のdeleteButtonメソッドです。
ランダムに数字を返し、アラートで出るようにしています。 (おみくじアプリとかで使われているやつです)

 

最初は楽しかったのですが、だんだんアラートがうざくなってきたので、
褒められたいときだけ褒めてくれる仕様にしました。

 

<input type="checkbox" id="alertFlg" v-model="alertFlg">
 <label for="alertFlg">褒められたい!</label>
</input>

 

vueにはalertFlgを追記し、条件式でtrueのときだけアラートを出すようにしました。

これで無事に完成しました!やったね!

承認欲求が強めな人も満足いくタスクリストができました。

何かアドバイスなどがあれば、ツイッターのリプがDMでくださると幸いです。

 

 

お読みいただき、ありがとうございました!

 

 

 

***

派遣から正社員として、内定をもらいました!

 

Twitterでは、未経験エンジニアとして経験・知識を発信しています!

お気軽にフォロー・リプライしてください☺️

 

【未経験からエンジニアになりたい人、おすすめのプログラミングスクール】

(コロナの影響で、オンラインでの無料説明会で案内しています)

 

1、GEEK JOB

私が通っていたプログラミングスクールです!

1番のメリットは、

無料の転職サポート&プログラミング教育を受けられることです

私もGEEKJOBで転職サービスを受けて、入社しましたが、

最初から最後まで完全に無料でした。

プログラミングできるかな・・・と不安な方は、

最初は無料の説明会と体験会もあるので、

お試しで行くのも1つの手ですよ♩

 

無料説明会はこちら

2、TECH::EXPERT

「有料でもいいから手厚いサポートを受けたい」という方は、

私も大好きなマコなり社長が経営しているTECH::EXPERTをおすすめします!

なんと、質問し放題の環境が整っています。

未経験エンジニアとしての経験談なのですが、

質問できる環境ってありがたいですし、なにより成長ができます!

相談会や説明会は無料です。


無料相談会はこちら

3、DMM WEBCAMP

DMMが開催しているプログラミングスクールです。

こちらは有料ですが、条件を満たすことで

支払った教育訓練経費の最大70%が教育訓練給付金として支給されます。

 

こちらも相談は無料です。

無料相談はこちら

 

 

無料・有料どちらがいいかは体感だと、

有料の方がサポートが手厚い傾向です(当たり前ですよねw)

しかし無料だから適当というわけではないですし、

私のように転職を繰り返してお金がない人からしたら、

無料スクールはすごくありがたい存在でした🎵

 

有料スクール→手厚いサポートが欲しい人
無料スクール→自主的に勉強できる人・お金がない人

 

自分にあった方を選んでくださいね^ ^

 

この記事を書いた人
月子

経歴なし / スキルなし / お金なし
文学部卒業し、社会人になり転職3回。
3重苦になりながらも、プログラミングスクールへ。
4月からSESの会社で、未経験エンジニアとして働きます。
フリーランスエンジニア&副業で年収1千万いくのが夢です。
新婚です。

駆け出しプログラマーの毎日
プログラミング
スポンサーリンク
駆け出しプログラマーの毎日
月子の新婚生活記

コメント

タイトルとURLをコピーしました