【コピペでOK】Vue.jsでTodo appを作る方法

今日はVue.jsでTodo appを作ってみました。

Todo appはシンプルですが、シンプルな中に色々なプログラミングの要素が入っており、初学者の方はつまづきやすいポイントだと思います。

ですので、本来のTodo appはCRUD実装を行うのが普通なのですが初学者の肩でもわかりやすいように今回は極力シンプルな実装にしてみました。

CRUDとは

CRUD（クラッド）とは、ほとんど全てのコンピュータソフトウェアが持つ永続性[1]の4つの基本機能のイニシャルを並べた用語。その4つとは、Create（生成）、Read（読み取り）、Update（更新）、Delete（削除）である。ユーザインタフェースが備えるべき機能（情報の参照/検索/更新）を指す用語としても使われています

出典:wikipedia

一見ややこしいですが、CRUDは

登録・変更・削除・参照機能のこと

と覚えてください。

直接コードの中にコメントで一つ一つのコードを解説する事にしましたので、ご自身のエディタなどにコピペして見てみてくださいね。

それでは早速行ってみましょう٩( 'ω' )و

この記事を書いている人

早速実装

早速実装して見た結果がこちらです。

See the Pen MWbLQeV by shino (@rytym0720) on CodePen.

上記が全てのコードになります。

こちらをコピペしても使えますが、以下でコメントを使いながら１行ずつ解説しております。

HTML

//HTML
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel ="stylesheet" href="css/style.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <title>Document</title>
</head>
<body>
  <div class="main">
  <div id="app">
  <div class="title"> 
    <h2>TODO list</h2></div>
//フォームをクリックした際に.preventで再読み込みしないようにしています
  <form v-on:submit.prevent>

    <p>以下にTodoを入力してください</p>

//未入力時のバリデーション用でidを振ったpタグを用意しておきます
   <p id="attention"></p>

　　　//v-modelでnewItemというプロパティと双方向データバインディングを出来るようにします。
    <input type="text" v-model="newItem" class ="text">

    //ボタンを押したらaddItemを呼び出すようにしています
    <button class="add" v-on:click="addItem">追加する</button>
  </form>

//動的に出力されるTodo listです。
  <ul>
//todosという配列の中にあるtodo要素を繰り返し出力します
  <li v-for="(todo, index) in todos">

//todo.isDoneはJSでタスクの完了or未完了を判断する真偽値を指定するためのものです
<input type="checkbox" v-model="todo.isDone">

//タスクが完了済みであればタスクに横線を引くcss追加します
 <span v-bind:class="{done:todo.isDone}">{{todo.item}} </span>

//削除ボタンです。(index)という引数はチェックボックスと連動して削除するために必要です
<button class="delete" v-on:click="deleteItem(index)">削除</button>
    
  </ul>
</div>
</div>
</body>
</html>

CSS

//CSS

body{
  width:100%;
  background-color: #dcdcdc;
}

#app{
  display:block;
  margin:10% auto;
  background-color: #fff;
  padding: 50px;
}

.main{
  margin: 0 auto;
  width: 80%;
}

.title{
  width: 100%;
  background-color: skyblue;
  text-align: center;
  color: beige;
}

/* ボタン */
.add{
background-color: #add8e6;
border: none;
color: white;
width: 100px;
height: 30px;
margin: 16px;
}

#attention{
  color:red;
}

.delete{
  background-color: #d3d3d3;
  border: none;
  color: white;
  width: 100px;
  height: 30px;
  }

  /* テキストエリア */
.text{
  margin-left: 5px;
  height: 30px;
  padding-bottom: 5px;
}

ul{
  padding-left: 0;
}

li{
  line-height: 2;
}

#app ul{
  list-style: none;
}

#app li >span.done{
  text-decoration:line-through;
}

JavaScript

//JavaScript
let app =new Vue({
  el:"#app",
  data:{
    newItem:'',
    todos:[]
  },
  methods:{
addItem:function(event){
//バリデーション用です。もしテキストエリアに入力された値が無い場合、注意文を出します。
    if(this.newItem==''){
      let attention =document.getElementById('attention');
      attention.textContent = "Todoを入力してください。";
      return;
}    
//もしテキストエリアに入力があれば注意文は表示しません
     if(this.newItem!==''){
      attention.textContent = "";
}    
    //Todoが終了したかどうかを見極める真偽値です
    var todo = {
      item:this.newItem,
      isDone:false
    };
//配列に新しいTodoを追加します
  this.todos.push(todo);
    this.newItem = '';
  },
//HTMLのチェックボックスの(index)と連動して指定されたTodoを消去します
    deleteItem:function(index){
      this.todos.splice(index,1)
    }
}
  
})

ポイント

//フォームをクリックした際に.preventで再読み込みしないようにしています
  <form v-on:submit.prevent>

HTML16行目のこの部分ですが、

preventは日本語にすると「防ぐ」と訳せます。

何を防ぐかと言うと、ここでは再読み込みすることを防ぐと言う事ですね。

このpreventが入っていないとエラーになってしまいますのでご注意ください。

  methods:{
  addItem:function(event){
    if(this.newItem==''){
      let attention =document.getElementById('attention');
      attention.textContent = "Todoを入力してください。";
      return;
}    
     if(this.newItem!==''){
      attention.textContent = "";
}

JavaScirptの11行目からのこの部分はバリデーションです。

バリデーションとは

・フォームの内容が正しく入力されているかチェックする"仕様"のことです。正しく入力されていない場合は注意喚起で入力を促すようにします。

13行目のreturnは、フォームが正しく入力されていない場合はここでプログラムを読む事は終わりにしたいため(先に進ませないために)記載します。

逆にテキストエリアに入力がある場合はこのままプログラムを読んで欲しいのでreturnは不要です。