※初回制作したアプリに一部修正を加えています。

今回は、Javascript のフレームワークの Vue.js を学習していく過程で TODO リストを作成したので、制作過程を書き記していこうと思います。同様に Vue.js を学習している方の参考になれば幸いです。

完成したもの

Vue

完成したアプリの URL はこちらです。

機能

タスクの追加
タスクの削除
タスク完了の切り替え
完了したタスクの一括削除
追加したタスクの編集
タスクの検索機能
ドラッグ&ドロップで並び替え
ローカルストレージに現状のタスクを保存
その他の FW・ライブラリで作成した TODO アプリへのリンクを表示

コンポーネント設計

どの様に分けるか悩みましたが、できるだけ細かく分けて練習してみようと思い以下のようなコンポーネント設計にしました。

App.vue
|- /common
   |- IconLogo.vue
   |- Logo.vue
   |- Modal.vue     # モーダルを表示する
|- CreateTask.vue   # 新しいタスクを作成
|- DeleteBtn.vue    # 完了済みのタスクを一括削除
|- OtherTodo.vue    # モーダルを表示する
|- SearchTask.vue   # タスクを検索する
|- TaskList.vue     # TaskItemの親コンポーネント
   └ TaskItem.vue   # 各タスクを表示する

苦戦した箇所

webpack での環境構築

初っ端の環境構築で苦戦しました（笑

公式ドキュメントや他の方の記事を参考にましたが、使用するローダーにも読み込み順序があったり、そもそもこのローダーは何をするものなんだ？と度々混乱することがありました。エラーメッセージと戦いながら何とか作成することが出来ましたが、webpack に関して学んだことは別の記事で書いていこうと思います。

こちらの Udemy の教材も視聴しましたが、webpack のカスタマイズ方法など非常にわかりやすく解説されているのでおすすめです。

props で子コンポーネントへのデータの受け渡し

これは苦戦したことと言うよりは、よく忘れてしまったことなのですが、props をキャメルケースで記述した場合は DOM（HTML）のテンプレート内ではケバブケースを使用しなければならないことです。

・キャメルケース：アルファベットで複合語やフレーズを表記する際、各単語や要素語の先頭の文字を大文字で表記する手法

例）sampleTitle

・ケバブケース：単語をハイフンで区切った形式

例）sample-title

ちなみに、単語をアンダースコアで区切ったスネークケースというものもあるみたいです

例）sample_title

フレームワークのお作法に慣れていくにはアウトプットと、公式ドキュメントの往復をしまくるしかないですね。。。

この値を渡す際のルールはよく忘れて余計な時間を掛けてしまいました。。。

タスクの検索機能

チュートリアルやググって出てきた記事を参考にしながら進めました。その中で indexOf メソッドを使用したやり方が多かったのですが、文字列が完全に一一致してないと絞り込めなかったりしたので前方致で検索機能を実装しようとしました。

結論としては、filter メソッド、match メソッド、 RegExp オブジェクトを使用して、computed プロパティと連携することで実装することが出来たのですが、JavaScript をネィティブな形式で書く力が無いなと言うことを実感しました。。。

// コード抜粋
computed: {
 getTask() {
    if (this.searchWord !== "") { // 検索ワードが空でなければ以下の処理を実行
      return this.todos.filter((item) => {
        let serchItem = new RegExp("^" + this.searchWord, "i");
        // matchメソッドは、正規表現に対する文字列のマッチングの結果を受け取る
        return item.value.match(serchItem);
       });
    } else {
      return this.todos; // 検索ワードが空だったら、todosをそのまま表示
    }
  },
},