Vue.js初学者の方で、まずTODOアプリを作成して開発に慣れたいという方は多いのではないでしょうか。
今回はVue.jsでTODOアプリを作る際のサンプルコードを公開します！
この記事はコピペでもOKですが、下記のような事前知識があると内容が理解しやすいです！
- 基本的なHTML・CSS（SCSS）・JSの書き方
- Vue.jsのv-forやv-ifといったタグの使い方
- JSでローカルストレージに値を入れる・取ってくる方法
このTODOアプリの内容を理解すると、下記のようなものを作成することが出来るようになります。
- TODOの追加 / 削除 / 編集
- TODOが完了したら横線を引いてチェック
- ブラウザを閉じても値を保持（ローカルストレージ）
そのままコピペで使えますが、各部分の説明も併せてするので是非最後まで読んで見てください！
【Vue.js】TODOアプリサンプルコード
CODEPEN
HTML・CSS・JSからそれぞれのコードを見ることが出来ます。
Resultから実際の表示画面を確認することが出来ます。
See the Pen
TODO_MadeWithVue by sasa0330 (@sasa0330)
on CodePen.
【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リスト追加部分です。
v-modelでJS側に用意しているinputAddという変数を連動させて、値を取得出来るようにしています。また追加ボタンを押すとTODOリストに内容を追加することが出来ます。（JSのaddItemメソッドで処理）
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リストの塊が配列で渡ってくるので、それを展開して1つづつ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>
ここはv-if=”!todo.isEditMode”という記述が肝になります。ローカルストレージの中にTODOリストのテキストと一緒にisEditModeという値が格納されているのですが、これがfalseの場合は普通のテキスト。trueの場合は編集用のinputボックスが表示されるようになっています。
またテキストをクリックすることで@click=”saveCheckState(index);”が動作し、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>
初期では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の書籍
書籍も1冊購入しました。通称ねこ本と呼ばれている「基礎から学ぶ Vue.js」です。
こちらは完全初心者には少し難しい内容になっているので、UdemyなどでVue.jsを学んだあとにさらに細かい部分を覚えたいという方におすすめです！
コメント