4章チェックテスト

この研修では、JavaScriptフォルダの中の4-1というフォルダの中に課題を作成してください。

ToDoアプリに追加機能を実装してみよう


6.ToDoアプリの作成 で作成したToDoアプリを元に進めてください。(ソースコードは下にあるものを使用してください)
実際の開発現場で次のようなタスクが振られたという場合を想定して 解いてみてください。
このテストでは、実装方法は様々なパターンがあると思うので、エラーが無くて要件を満たす動きができていればOKです。

<JS>

var app = new Vue({
    el: '#app',
    data: {
        list: [],
        addText: '',
    },
    //watchでlistの変更を監視
    watch: {
        list: {
            handler: function() {
                //localStorageにデータを保存
                localStorage.setItem("list", JSON.stringify(this.list));
            },
            deep: true
        }
    },
    //マウントされた時にlocalStorageからデータを取得
    mounted: function() {
        this.list = JSON.parse(localStorage.getItem("list")) || [];
    },
    methods: {
        addToDo: function() {
            if (this.addText !== '') {
                this.list.push({
                    text: this.addText, 
                    isChecked: false,
                });
            }
            this.addText = '';
        },
        deleteBtn: function() {
            this.list = this.list.filter(function(todo) {
                return !todo.isChecked;
            });
        }
    }
});

<HTML>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="app">
        <input type="text" v-model="addText" placeholder="ToDoを入力して">
        <button v-on:click="addToDo()">追加</button>
        <button v-on:click="deleteBtn()">削除</button><hr>
        <ul v-for="todo in list">
            <li>
                <span v-bind:class="{ done: todo.isChecked }">
                    <input type="checkbox" v-model="todo.isChecked">{{ todo.text }}
                </span>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

【要件1】:タスクが1件も無い時は「現在タスクはありません」というメッセージが出るようにしてください。

【要件2】:画面の上部に、現在のタスクの総数と、残タスク数を表示させてください。チェックが付いたタスクは完了したタスクとしてください。
 フォーマット → 「残タスク数 / 総数」

【要件3】:タスク名の「部分一致」で、タスクをリアルタイム検索できる機能を追加してください。

【ヒント】

<要件1>
・条件によって表示を切り替える問題です。
必要な主な知識 → v-if もしくは v-show を使用します。

<要件2>
・残タスクは算出プロパティを使用します。
・総数はリストの数なので、 list.lengthを使用します。
必要な主な知識 → 算出プロパティ

<用件3>

・処理の中身はindexOfを使って、検索キーワードに使用された文字列を調べます。
v-if を使用して検索キーワードが入力されていた時と、入力されていない時で条件分岐する。
・検索キーワードに入力あり → 算出プロパティからタスクを取り出す。
・検索キーワードに入力なし → 追加した配列からタスクを取り出す。
必要な主な知識 → 算出プロパティ、v-if と v-for の組み合わせ、双方向データバインディング(v-model)

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami