勉強する気のない子供をどれだけ本気で勉強させるか！TODO webアプリ自作しました

#npmを利用して勉強管理webアプリを自作
完成品は
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/91cc2fd8-b2f8-ec09-c964-88c596956538.png)
日々の勉強ルーティンを２つのTODOリストで管理します。
やる事　⇒　完了
へ移動するだけの単純構造です。
1日が終わったら完了　⇒　やる事へ戻し、優先度の高い教科から順番に並べておく。

これを簡単に実装する為に、npmのパッケージを利用しました！

#npmサイトで調べたdraggableパッケージを利用

[npmサイト](https://www.npmjs.com/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/897c79c2-6905-043b-b034-2e8d8fd2f5ea.png)

実装するまで少し躓いたので、npmまとめサイトの使い方を記事に書きました
[npmパッケージ検索サイトからの使い方を初心者が解説してみた！](https://qiita.com/misa_m/items/a1d07efe8b7bbe2fdfe2)

#カスタマイズ
今回使いたいのは、リスト間の移動が出来る【two-list】
[https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/two-lists.vue](https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/two-lists.vue)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/81fda271-aa5d-b817-4813-9e02663de70a.png)


#gitからコードをcloneします
View codeをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/0f0ae6d1-8703-e940-18b5-1bfccf576021.png)


コードのページへ飛んでしまうので、階層を移動します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/46e55987-478b-1156-1de7-8a4414d93605.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/1fea0dea-035e-2fe6-89e9-6fc672989db9.png)

```
git clone https://github.com/SortableJS/Vue.Draggable.git
```
Vue.Draggableフォルダが追加されていました！
この後の手順はgithubにコマンドの解説等なかったので、
[npmパッケージ検索サイトからの使い方を初心者が解説してみた！](https://qiita.com/misa_m/items/a1d07efe8b7bbe2fdfe2)
でサンプルを動かした時の手順に沿って進んでみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/d23df4d5-9274-8440-d16b-11937e5c4da3.png)

Vue.Draggableフォルダへ階層を移動します。

```
cd Vue.Draggable
```

必要なnpmの他のパッケージをインストール

```
npm install
```

node_moduleフォルダに必要パッケージが全てインストールされました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/27f3b107-53d5-1be6-227c-c414bc019d82.png)

ブラウザで実装出来るように次のコマンドをタイプします

```
npm run serve
```

デモサイト、そのまま立ち上がりました。
必要な個所だけ抜き出していこうと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/d6825b76-111f-3abd-c5a4-dbdbff75c399.png)

#リスト間でタスクの移動が可能
example > components の中に入っている
[two-list.vue](https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/two-lists.vue)

```vuejs
<template>
  <div class="row">
    <div class="col-3">
      <h3>Draggable 1</h3>
      <draggable class="list-group" :list="list1" group="people" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in list1"
          :key="element.name"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>

    <div class="col-3">
      <h3>Draggable 2</h3>
      <draggable class="list-group" :list="list2" group="people" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in list2"
          :key="element.name"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>

    <rawDisplayer class="col-3" :value="list1" title="List 1" />

    <rawDisplayer class="col-3" :value="list2" title="List 2" />
  </div>
</template>
<script>
import draggable from "@/vuedraggable";

export default {
  name: "two-lists",
  display: "Two Lists",
  order: 1,
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        { name: "John", id: 1 },
        { name: "Joao", id: 2 },
        { name: "Jean", id: 3 },
        { name: "Gerard", id: 4 }
      ],
      list2: [
        { name: "Juan", id: 5 },
        { name: "Edgard", id: 6 },
        { name: "Johnson", id: 7 }
      ]
    };
  },
  methods: {
    add: function() {
      this.list.push({ name: "Juan" });
    },
    replace: function() {
      this.list = [{ name: "Edgard" }];
    },
    clone: function(el) {
      return {
        name: el.name + " cloned"
      };
    },
    log: function(evt) {
      window.console.log(evt);
    }
  }
};
</script>
```

#カスタマイズ
two-list.vueは以下のように

```vuejs
<template>
<div class="container">
  <div class="row">
    <div class="col-6">
      <h3 align="center">やること</h3>
      <draggable class="list-group" :list="list1" group="people" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in list1"
          :key="element.name"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>

    <div class="col-6">
      <h3 alig="center">完了</h3>
      <draggable class="list-group" :list="list2" group="people" @change="log">
        <div
          class="list-group-item"
          v-for="(element, index) in list2"
          :key="element.name"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>
</div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
  name: "two-lists",
  display: "タスクシート",
  order: 1,
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        { name: "算数", id: 1 },
        { name: "国語", id: 2 },
        { name: "おやつ", id: 3 },
        { name: "理科", id: 4 },
        { name: "社会", id: 5 },
        { name: "休憩", id: 6 },
      ],
      list2: [
        { name: "終わったものを移動してね", id: 7 },
      ]
    };
  },
  methods: {
    add: function() {
      this.list.push({ name: "Juan" });
    },
    replace: function() {
      this.list = [{ name: "Edgard" }];
    },
    clone: function(el) {
      return {
        name: el.name + " cloned"
      };
    },
    log: function(evt) {
      window.console.log(evt);
    }
  }
};
</script>
```
ベースとなるvueファイルもカスタマイズしました。
App.vue

```vuejs
<template>
  <div id="app">
    <div class="jumbotron logo">
      <img src="./assets/favicon.png">
    </div>
    <hello></hello>
  </div>
</template>

<script>
import Hello from "./components/Hello";

export default {
  name: "app",
  components: {
    Hello
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

#app .logo {
  text-align: center;
  background: #fff;
}
#app .logo img{
  height: 100px;
}
#app .main-container {
  padding-top: 40px;
}

.container{
  margin: 0 auto;
  width: 100%;
  max-width: 980px;
  background: #eee;
}
</style>

```

publid > index.html
こちらのファイルにhead部分が入っていました。

#タスク管理webアプリ完成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/91cc2fd8-b2f8-ec09-c964-88c596956538.png)

#buildします

【ctrl + C】でサーバーを終了します。次にbuild

```
npm run build
```

docsフォルダの中に全て入っているので、この中の全ファイルをサーバーにアップして完成です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/820683/f8303ca3-f48e-b0bc-5084-49e81974107a.png)

私の場合、以下のURLへアップしました。
[完成品見てみる？](https://web-design.biz/vue/todo/)

#まとめ
ここまで完成したら、せっかくなのでLINEにつなげてみようと思ったのですが
LIFFで表示　⇒　プロフィールを自動出力で躓いてしまいました。。。
残念。

npm　なかなか奥が深い！