vuejsのtodoリストで作成される関数をすべてアロー関数にしたいです。

前提・実現したいこと

function()をすべて()=>に変更したいです。
localStorageを使用する関数にだけアロー関数にできていません。
--※コメントで 1,2,3と横に書いている箇所です。
アロー関数で記述する方法を教えて下さい。

発生している問題・エラーメッセージ

アロー関数にして、thisをvmに変えると下記のエラーが出ます。

log
1[Vue warn]: Error in mounted hook: "ReferenceError: Cannot access 'vm' before initialization"

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>まずはデータを表示</title>
7</head>
8<body>
9
10<div id="app">
11  <p>{{ counter }}</p>
12  <button v-on:click="add">追加（関数）</button>
13  <button v-on:click="counter++">追加（JavaScriptの文）</button>
14
15  <p>toDo</p>
16  <ul>
17    <li v-for="itm in todoItms">
18      <label v-bind:class="{ done: itm.isChecked }">
19        <input type="checkbox" v-model="itm.isChecked"> {{ itm.title }}
20      </label>
21    </li>
22  </ul>
23  <p>
24    <input type="text"
25      placeholder="TODOを入力しましょう！"
26      v-model="newItmTitle"
27      v-on:keyup.enter="addTodo">
28      <span v-html="danger_massage"></span>
29  </p>
30  <p>あと {{ 20 - newItmTitle.length }} 文字入力できます</p>
31  <button v-on:click="deleteTodo()">チェック済みの項目を削除する</button>
32
33  </div>
34
35  <style>
36    .done { text-decoration: line-through; }
37    .red { color: #f00; }
38  </style>
39
40<script src="https://unpkg.com/vue/dist/vue.js"></script>
41<script src="./app.js"></script>
42
43</body>
44</html>

js
1const vm = new Vue({
2  el: '#app',
3  data: {
4    counter: 0,
5    todoItms: [
6      { title: '領収書を準備する', isChecked: true },
7      { title: 'Vue.jsハンズオンの資料を作る', isChecked: true },
8      { title: '参加者の人数を確認する', isChecked: false },
9      { title: 'ピザを注文する', isChecked: false },
10      { title: '参加費のお釣りを準備する', isChecked: false },
11      { title: '会場設営をする', isChecked: false },
12    ],
13    newItmTitle: '', //追加
14    danger_massage: ''
15  },
16  methods: {
17    add: () => {
18      vm.counter++
19      vm.saveCnt();
20    },
21    saveCnt: () => {
22      localStorage.setItem('counter', JSON.stringify(vm.counter));
23    },
24    loadCnt: function() { // 1
25      if(!localStorage.getItem('counter')) {
26        this.counter = 0;
27      } else {
28        this.counter = JSON.parse( localStorage.getItem('counter') );
29      }
30    },
31
32    addTodo: (newItmTitle) => {
33      vm.danger_massage = '';
34      if (vm.newItmTitle.length <= 20) {
35
36        vm.todoItms.push({
37          title: vm.newItmTitle,
38          isChecked: false
39        });
40        vm.newItmTitle = '';
41        vm.saveTodo(); //ブラウザに保存
42      } else {
43        vm.danger_massage = '<span class="red">多いよー' + vm.newItmTitle.length + '文字！　20文字以下でおねがい！</span>'
44      }
45    },
46    deleteTodo: () => {
47      vm.todoItms = vm.todoItms.filter( (todoItms) => {
48        return todoItms.isChecked === false;
49      });
50      vm.saveTodo();
51    },
52    saveTodo: () => {
53      localStorage.setItem('todoItms', JSON.stringify(vm.todoItms));
54    },
55    loadTodo: function() { // 2
56      if (!localStorage.getItem('todoItms')) {
57        this.todoItms = vm.todoItms;
58      } else {
59        this.todoItms = JSON.parse( localStorage.getItem('todoItms') );
60        if( !this.todoItms ){
61          this.todoItms = [];
62        }
63      }
64    },
65
66  },
67  mounted: function() { // 3
68    this.loadTodo();
69    this.loadCnt();
70  },
71})

試したこと

function(){}を()=>{}にして
thisをvmに変えてみたりして試してみたのですが

log
1[Vue warn]: Error in mounted hook: "ReferenceError: Cannot access 'vm' before initialization"

が発生してしまいます。
LocalStorageには保存できているようです。

変更1/20 17:37

js
1const vm = new Vue({
2  el: '#app',
3  data: {
4    counter: 0,
5    todoItms: [
6      { title: '領収書を準備する', isChecked: true },
7      { title: 'Vue.jsハンズオンの資料を作る', isChecked: true },
8      { title: '参加者の人数を確認する', isChecked: false },
9      { title: 'ピザを注文する', isChecked: false },
10      { title: '参加費のお釣りを準備する', isChecked: false },
11      { title: '会場設営をする', isChecked: false },
12    ],
13    newItmTitle: '', //追加
14    danger_massage: ''
15  },
16  methods: {
17    add() {
18      this.counter++
19      this.saveCnt();
20    },
21    saveCnt() {
22      localStorage.setItem('counter', JSON.stringify(this.counter));
23    },
24    loadCnt() {
25      if(!localStorage.getItem('counter')) {
26        this.counter = 0;
27      } else {
28        this.counter = JSON.parse( localStorage.getItem('counter') );
29      }
30    },
31
32    addTodo(newItmTitle) {
33      this.danger_massage = '';
34      if (this.newItmTitle.length <= 20) {
35
36        this.todoItms.push({
37          title: this.newItmTitle,
38          isChecked: false
39        });
40        this.newItmTitle = '';
41        this.saveTodo(); //ブラウザに保存
42      } else {
43        this.danger_massage = '<span class="red">多いよー' + this.newItmTitle.length + '文字！　20文字以下でおねがい！</span>'
44      }
45    },
46    deleteTodo() {
47      this.todoItms = this.todoItms.filter( (todoItms) => {
48        return todoItms.isChecked === false;
49      });
50      this.saveTodo();
51    },
52    saveTodo() {
53      localStorage.setItem('todoItms', JSON.stringify(this.todoItms));
54    },
55    loadTodo() {
56      if (!localStorage.getItem('todoItms')) {
57        this.todoItms = vm.todoItms;
58      } else {
59        this.todoItms = JSON.parse( localStorage.getItem('todoItms') );
60        if( !this.todoItms ){
61          this.todoItms = [];
62        }
63      }
64    },
65
66  },
67  mounted() {
68    this.loadTodo();
69    this.loadCnt();
70  },
71})

メソッド記法について、変更しました。

maisumakun

2020/01/20 04:46

なぜArrow Functionにしたいのでしょうか。

makoto-n

2020/01/20 05:00

ES6の記法をよく使うと聞きました。なので積極的に記述しようと考えています。

行動規範の内容に同意します

回答1件

ベストアンサー

ES6の記法をよく使うと聞きました。

ES6には、メソッド専用の記法があります。

javascript
1{
2  methods: {
3    mounted() {
4      this.loadTodo();
5      this.loadCnt();
6    }
7  }
8}

thisを必要とするメソッドについては、Arrow Functionは不適当です。メソッド記法を使いましょう。

投稿2020/01/20 05:18

maisumakun

総合スコア145184

makoto-n

2020/01/20 08:41

ありがとうございます。 ES6のメソッド記法、もっと学習します。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！