Vue.jsでとりあえずToDoアプリを作ってみよう！
ってことで、まずToDoアプリを作成して開発に慣れたいという方は多いのではないでしょうか。
アプリケーション開発は実践あるのみなので、ざっくり覚えたら軽く何か作ってしまった方が知識が身に付きやすいです。
という訳で今回はVue.jsでToDoアプリを作る際のサンプルコードを公開します！
この記事はコピペでもOKですが、下記のような事前知識があると内容が理解しやすいです！
- 基本的なHTML・CSS（SCSS）・JSの書き方
- Vue.jsのv-forやv-ifといったタグの使い方
- JSでローカルストレージに値を入れる・取ってくる方法
今回作るToDoリストの内容
この記事の内容を理解すると、下記のようなものを作成することが出来るようになります！
- ToDoの追加 / 削除 / 編集
- ToDoが完了したら横線を引いてチェック
- ブラウザを閉じても値を保持（ローカルストレージ）
全部完成したら、自分なりの機能を追加したり、別のアプリケーションに応用するのも面白そうですよね。
今回のアプリはそのままコピペで使えますが、各部分の説明も併せてするので是非最後まで読んで見てください！
【Vue.js】ToDoアプリサンプルコード簡易版
今回はToDoの追加、削除、実施済みチェック、データの保存まで解説しますが、正直内容が長くて難しい部分も多いです。
なので機能を少なくして初心者でも作りやすいToDoリストを先にご紹介します！
このToDoリストは追加・削除のみができる簡易版です。
HTML・CSS・JSタブからそれぞれのコードを見ることが出来ます。
Resultタブから実際の表示画面を確認することが出来ます。
実際にメモを追加して動きを確認してみて下さい！
See the Pen Untitled by sasa0330 (@sasa0330) on CodePen.
【Vue.js】ToDoアプリサンプルコード完全版
そしてこちらが今回作成した完全版のToDoアプリです。
ToDoの追加、削除、実施済みチェック、データの保存まで実装しています。
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リスト追加部分です。
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アプリを作るなら基礎を学ぼう
そもそもvue.jsの基礎を押さえておかなければToDoリストの作成は難しいです。
まずは基礎を習得しましょう。おすすめは「書籍で勉強」「動画で勉強」のいずれかです。
書籍で勉強：基礎から学ぶ Vue.js
書籍も1冊購入しました。通称ねこ本と呼ばれている「基礎から学ぶ Vue.js」です。
こちらは完全初心者には少し難しい内容になっているので、UdemyなどでVue.jsを学んだあとにさらに細かい部分を覚えたいという方におすすめです！
動画で勉強：Udemyフロントエンド講座
初学者の方はUdemyでVue.jsを学ぶのがおすすめです！
動画学習は実際に操作している画面を見ながら学ぶことが出来るので、感覚的に書籍よりも学習が捗ります。
僕が実際に購入したVue.jsの講座・その他おすすめ講座も下記にまとめているので宜しければ併せてご覧ください！
コメント