VueでTODOアプリを作る方法をサンプルコード付きで解説するぞ

オムそば

Vue.jsでとりあえずTODOアプリを作ってみよう！

ってことで、まずTODOアプリを作成して開発に慣れたいという方は多いのではないでしょうか。

アプリケーション開発は実践あるのみなので、ざっくり覚えたら軽く何か作ってしまった方が知識が身に付きやすいです。

という訳で今回はVue.jsでTODOアプリを作る際のサンプルコードを公開します！

オムそば

この記事はコピペでもOKですが、下記のような事前知識があると内容が理解しやすいです！

基本的なHTML・CSS（SCSS）・JSの書き方
Vue.jsのv-forやv-ifといったタグの使い方
JSでローカルストレージに値を入れる・取ってくる方法

今回作るTODOリストの内容
【Vue.js】TODOアプリサンプルコード
【Vue.js】TODOアプリの細かい説明
まずVue.jsの基礎を学びたい方は
1. Udemyフロントエンド講座
2. Vue.jsの書籍

今回作るTODOリストの内容

オムそば

この記事の内容を理解すると、下記のようなものを作成することが出来るようになります！

TODOの追加 / 削除 / 編集
TODOが完了したら横線を引いてチェック
ブラウザを閉じても値を保持（ローカルストレージ）

全部完成したら、自分なりの機能を追加したり、別のアプリケーションに応用するのも面白そうですよね。

今回のアプリはそのままコピペで使えますが、各部分の説明も併せてするので是非最後まで読んで見てください！

【Vue.js】TODOアプリサンプルコード

今回作成したTODOアプリです。

See the Pen
TODO_MadeWithVue by sasa0330 (@sasa0330)
on CodePen.

HTML・CSS・JSタブからそれぞれのコードを見ることが出来ます。

Resultタブから実際の表示画面を確認することが出来ます。

Resultタブの画面でTODOの追加、削除など色々と弄ってみてください。（バグってたらごめなさい）

では続いて各コードの説明をしていきます！

【Vue.js】TODOアプリの細かい説明

HTML：TODOリストの追加

前提として、Vue.jsの性質上、id=”app”の中でしかVue.js特有のタグを使用することはできません。

<!-- TODO追加エリア -->
<div class="input-todo-area">
  <input
    type="text"
    v-model="inputAdd"
    placeholder="edit me"
    class="input-todo"
  />
  <button @click="addItem" class="input-btn">追加</button>
</div>

画面上部のTODOリスト追加部分です。

TODO追加のinputボックスにv-modelを指定することで、JS側に用意しているinputAddという変数と連動させています。また追加ボタンを押すと、JSのaddItemメソッド内の処理が動き、TODOリストに内容を追加することが出来ます。

HTML：v-forでTODOリストを表示

  <!-- TODO追加一覧表示エリア -->
  <div class="stock-todo-area">
    <div
      v-for="(todo, index) in todos"
      :key="todo"
      class="todo-list_contents"
    >
      <!-- TODO左側のテキスト表示部分 -->
      ...（後で説明
      <!-- TODO右側のボタン表示部分 -->
      ...（後で説明）
  </div>
</div>

TODOリストを一覧表示している部分です。

v-for=”(todo, index) in todos”でTODOリストを順番に表示しています。このtodosにはTODOリストに表示するデータが配列で渡ってきます。for文によってtodosの内容を一つずつtodoに渡します。todoにはTODOの内容が含まれているので、これを順番に画面に表示しています。

HTML：TODOリストのテキスト

<div class="todo-list_text">
  <label class="label" v-if="!todo.isEditMode">
    <input
      type="checkbox"
      @click="saveCheckState(index);"
      v-model="todo.isCheck"
      class="checkbox"
      hidden
    />
    <span class="todo-list_item">{{todo.item}}</span>
  </label>
  <input
    type="text"
    v-if="todo.isEditMode"
    class="input-todo-edit"
    :id="'editTextArea'+index"
  />
</div>

TODOリストの内容（テキスト部分）です。

ここはv-if=”!todo.isEditMode”という記述が肝になります。v-forで渡ったデータ、todoの中にはTODOの内容の他にisEditModeという値が格納されているのですが、これがfalseの場合は普通のテキスト。trueの場合は編集用のinputボックスが表示されるようになっています。

またテキストをクリックすることで@click=”saveCheckState(index);”が動作し、JS側でチェックを付けたり外したりします。チェックされているかどうかは同じくtodoの中のisCheckという値がtrueかfalseかによって判別しています。

オムそば

まてまて、todoの中には何種類のデータが入ってるんだよ！分けわからん！

todoの中身がだいぶややこしいのですが、格納されている値は全部で3種類です。

テキスト・編集状態かどうか・チェックされているかのみなので実際のデータ構造を見れば比較的見やすいかと思います。

todoの中身に関してはJSの説明の方で合わせて解説しています！

HTML：TODOリストの削除・編集ボタン

  <!-- TODO右側のボタン表示部分 -->
  <div class="todo-list_btn">
    <div class="btn-left">
      <button @click="deleteItem(index);" class="btn delete" v-if="!todo.isEditMode">削除</button>
      <button @click="editItem(index, 'cancel');" v-if="todo.isEditMode" class="btn cancel">中止</button>
    </div>
    <div class="btn-right">
      <button v-if="!todo.isEditMode" @click="editItem(index);" class="btn">編集</button>
      <button v-if="todo.isEditMode" @click="editItem(index);" class="btn">確定</button>
    </div>
  </button>
</div>

削除・編集ボタンを表示している部分です。

初期ではJS側でisEditableModeを全てfalseに初期化しているため、v-if=”!todo.isEditMode”の項目である「削除」と「編集」が表示されます。

ここで「編集」をタップすると、isEditModeがfalse→trueになるので、v-if=”todo.isEditMode”の項目である「中止」と「確定」が表示されます。

JS：画面表示時に動くcreated

data: {
  inputAdd: "", //追加するテキスト
  todos: [], //画面に表示されるTODOリストのデータ
},
//画面更新時
created: function() {
  var todosJsonObj = localStorage.getItem("todosKey"); //ローカルストレージに保存しているデータを持って来て、
  var todosData = JSON.parse(todosJsonObj); //展開
  //todosDataの中身を一個ずつ見ながら
  for (var i = 0; i < todosData.length; i++) {
    todosData[i].isEditMode = false; //編集モードだけはOFFに
  }
  this.todos = todosData; //画面に反映するためのtodosにデータを代入
},

画面の初期表示時もしくは更新時は、ローカルストレージから値を持ってきてそのデータをTODOリストとして表示します。ローカルストレージのデータは下記のような形で保存されます。

[
  {item: "メモメモ１", isCheck: false, isEditMode: false},
  {item: "メモメモ２", isCheck: false, isEditMode: false},
  {item: "メモメモ３（チェックあり）", isCheck: true, isEditMode: false},
  {item: "メモメモ４（編集中）", isCheck: false, isEditMode: true}
]

itemがメモの内容、isCheckがチェックされているかどうか、isEditModeが編集中かどうかを表すための値です。編集中に画面更新しても編集モードのままだとやや違和感があるので、isEditModeだけはfalseにしておきましょう。

JS：データ追加メソッド

//データを追加
addItem() {
  //テキストボックスが空なら
  if (this.inputAdd == "") {
    return true; //何もしないで抜ける
  }
  //追加する項目の初期状態
  var todo = {
    item: this.inputAdd, //テキストの内容
    isCheck: false, //チェックはOFF
    isEditMode: false, //編集モードもOFF
  };
  this.todos.push(todo); //TODOに追加する情報をtodosに
  this.inputLocalStrage(); //todosの内容をローカルストレージに保存
  this.inputAdd = ""; //テキストボックスは空に
},

inputAddがdata側に用意されていますが、これはHTMLのv-model=”inputAdd”と連動しています。HTMLて摘るとボックスに入っている値を引っ張ってきて、それぞれの初期状態を設定。新たな項目をthis.todosに入れることで画面に追加される仕組みですね。併せてローカルストレージに保存しておくことも忘れないようにしましょう。

JS：データを削除メソッド

//データを削除
deleteItem(index) {
  this.todos.splice(index, 1); //指定のTODOを削除
  this.inputLocalStrage(); //todosの内容をローカルストレージに保存
},

spliceでtodosの配列から特定のTODOを削除しています。

JS：データを編集メソッド

editItem(index, state) {
  //既に編集モードなら
  if (this.todos[index].isEditMode) {
    this.todos[index].isEditMode = false; //編集モードOFF
    //編集中止なら
    if (state == "cancel") {
      this.inputLocalStrage(); //todosの内容をローカルストレージに保存
      return true; //あとは何もせず抜ける
    }
    let afterText = document.getElementById("editTextArea" + index).value; //編集のテキストボックスの内容を取得
    //編集テキストがあれば
    if (afterText) {
      this.todos[index].item = afterText; //テキストが空でなければ元のtodosのテキストを上書き
    }
  } else {
    this.todos[index].isEditMode = true;
  }
  this.inputLocalStrage(); //todosの内容をローカルストレージに保存
},

該当のTODOの「編集」「中止」「確定」ボタンを押したときに動作するメソッドです。

「中止」を押したときには引数stateにcancelの値が渡ってくるので、編集はしないで終了します。

編集時にはテキストボックスにid=”editTextArea番号”のidが振られているので、その値を見て編集内容を上書きするようになっています。

JS：チェック状態の管理

//チェック状態の管理
saveCheckState(index) {
  //既にチェックされていれば
  if (this.todos[index].isCheck) {
    this.todos[index].isCheck = false; //チェックOFF
  } else {
    this.todos[index].isCheck = true; //チェックON
  }
  this.inputLocalStrage(); //todosの内容をローカルストレージに保存
},

テキストをタップすると横線を引く時の処理です。

ここは単純にタップされたテキストを見てチェックを切り替えているだけです。テキストをタップしたときに引数indexに該当のTODOが何番目かを判定するための番号が渡ってきます。

JS：データをローカルストレージに保存

//データをローカルストレージに保存
inputLocalStrage() {
  var obj = JSON.stringify(this.todos);
  localStorage.setItem("todosKey", obj); //todosの内容をローカルストレージに保存
},

このメソッドでデータをローカルストレージに格納しています。

追加・削除・編集など様々なタイミングでデータが更新され、ローカルストレージに保存する必要があるので、何度も使うメソッドはこのように一つに切り出しておくと便利です。

SCSS

今回はCSSではなくSCSSを使用しています。実際に組み込み場合にはSCSS → CSSに変換して組み込んでみてください！

SCSS→CSSに変換する方法

エディターにVisual Studio Codeを使用している場合は、「Live Sass Compiler」というプラグインががおすすめです。コード保存時に勝手にCSSに変換してくれます！

ブラウザで変換したい場合はSassMeisterを使用するのも良いかと思います！

まずVue.jsの基礎を学びたい方は

今回僕がこのTODOリストを作成するにあたって使った教材は以下の2つです！

Udemyフロントエンド講座

初学者の方はUdemyでVue.jsを学ぶのがおすすめです！

動画学習は実際に操作している画面を見ながら学ぶことが出来るので、感覚的に書籍よりも学習が捗ります。

僕が実際に購入したVue.jsの講座・その他おすすめ講座も下記にまとめているので宜しければ併せてご覧ください！

フロントエンドエンジニアのオムそばです。これからVue.jsの勉強を始めたいといった方はいませんでしょうか？普段は仕事でHTML・CSS・jQueryばかり触っていますが、少し慣れてくると背伸びしてモダンな知識にも触...

Vue.jsの書籍

書籍も1冊購入しました。通称ねこ本と呼ばれている「基礎から学ぶ Vue.js」です。

こちらは完全初心者には少し難しい内容になっているので、UdemyなどでVue.jsを学んだあとにさらに細かい部分を覚えたいという方におすすめです！

リンク