【初心者向け】ドットインストール教材でVue.jsによるメモアプリを作成してみた感想

スポンサーリンク
JavaScript

参考にした教材

ドットインストールのこちらの教材を使用しました。このために課金も始めました。

Vue.js入門
https://dotinstall.com/lessons/basic_vuejs_v2

完成品

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Memo App</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="app" class='container'>
        <h2>Todo List
            <button @click="purge">完了タスク削除</button>
            <span class="info">残:{{ remaining.length }}/ 合計:{{ todos.length }}</span>
        </h2>
        <ul v-if="todos.length">
            <li v-for="(todo,index) in todos">
                <input type="checkbox" v-model="todo.isDone">
                <span v-bind:class="{done: todo.isDone}">{{ todo.title }}</span>
                <span v-on:click="deleteItem(todo,index)" class="command">[x]</span>
            </li>
        </ul>
        <ul v-else class='noTodo'>
            <li >Todoはありません</li>
        </ul>
        <form v-on:submit.prevent="addItem">
            <input type="text" v-model='newItem'>
            <input type="submit" value="追加">
        </form>
    </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="js/main.js"></script>
</body>
</html>
(function() {
    'use strict';

    // two way data binding (to UI)

    var vm = new Vue({
        el: '#app',
        data: {
            newItem:'',
            todos: []  
            },
        watch: {
                todos: {
                  handler: function() {
                    localStorage.setItem('todos', JSON.stringify(this.todos));
                  },
                  deep: true
                }
        },
        mounted: function() {
            this.todos = JSON.parse(localStorage.getItem('todos')) || [];
          },
        methods: {
            addItem: function() {
                var item = {
                    title: this.newItem,
                    isDone: false
                  };
              this.todos.push(item);
              this.newItem = '';
            },
            deleteItem: function(todo,index) {
                if(confirm(`こちらのメモを削除しますか? : ${todo.title}`)){
                this.todos.splice(index, 1);
                }
            },
            purge: function() {
                if (!confirm('完了したタスクを全て削除しますか?')) {
                  return;
                }
            this.todos = this.remaining;
            }
          },
          computed: {
            remaining: function() {
              return this.todos.filter(function(todo) {
                return !todo.isDone;
              });
            }
          }
    });
  })();
body {
    font-size: 16px;
    font-family: Verdana, sans-serif;
  }
  
  .container {
    width: 300px;
    margin: auto;
  }
  
  #app h2 {
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    padding: 16px 0;
  }
  
  #app li {
    line-height: 1.5;
  }
  
  #app input[type="text"] {
    padding: 2px;
  }

  .command {
    font-size: 12px;
    cursor: pointer;
    color: #08c;
  }

  #app ul {
    padding: 0;
    list-style: none;
  }

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

  .noTodo{
      font-size: 10px;
      color: red;
  }

  .info {
    color: #bbb;
    font-size: 12px;
    font-weight: normal;
    margin-left: 15px;
  }

  #app h2 > button {
    float: right;
    font-size: 10px;
  }

階層はこんな感じ。

Memo App
├── css
│   └── styles.css
├── idnex.html
└── js
    └── main.js

画面操作

完成品の画面操作はこんな感じ。

  • 画面遷移時にTodo一覧が表示される
  • 追加ボタン押下でテキストフォームに入力した内容がTodo一覧に追加される
  • 各Todoの右側×リンク押下で対象のTodoを削除する
  • チェックボックス押下でTodo内容のスタイルが変更される
  • タイトル右側にTodoの残と合計数がリアルタイムに表示される
  • 完了タスク削除ボタンでチェックが付いている項目全てを削除する

学べたこと

①Vueの代表的な特徴が学べる
具体的には、双方向データバインディングディレクティブが学べる

②以下ディレクティブ(リアクティブディレクティブ)の具体的な実装方法が学べる

v-on
v-for
v-bind
v-if(v-else)
v-show

③算出プロパティ(computed)の使い方を学べる

④データ監視(watch)の使い方を学べる

⑤ライフサイクルフック(mountedのみ)の使い方を学べる

終わりに

初心者の自分にとっては代表的な特徴や具体的なディレクティブの使い方がある程度学べたのでとても良い教材だと思いました!
ここからまず手を動かして学んで、理解できていない特徴や実装方法はググって深く調べていく流れが良さそう。

双方向データバインディングに関してはかなりわからなかったので、以下のサイトもみてみました。

React と Vue から単方向・双方向データバインディングの違いを知る
https://qiita.com/tamago3keran/items/590d99288dcccf388798

読んでいただきありがとうございました!



JavaScript
スポンサーリンク
app crafts

コメント

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