配列操作/filter(プリミティブ)


    // =======================
    // テストコード
    // =======================
    const answer1 = 'const selectedFilter = ref(FILTER_ITEMS[0])';
    const answer2 = 'const filteredTodos = computed(';
    const answer3 = "if (selectedFilter.value === '全て表示')";
    const answer4 = 'return sortedTodos.value';
    const answer5 = 'else {';
    const answer6 = '(todo) => todo.status === selectedFilter.value';
    const questions = [
        {
            title: 'selectedFilterを定義しよう',
            tests: [
                {
                    title: '`selectedFilter`の値を`FILTER_ITEMS[0]`として、`ref`で定義しましょう。',
                    hint: '`const selectedFilter = ref(FILTER_ITEMS[0])`と記述してください。',
                    test: () => isContainTextInEditor(answer1)
                }
            ]
        },
        {
            title: 'フィルター処理を実装しよう',
            tests: [
                {
                    title: '`filteredTodos`を、`computed`で定義しましょう。',
                    hint: '`const filteredTodos = computed(() => {})`と記述してください。',
                    test: () => isContainTextInEditor(answer2)
                },
                {
                    title: "`selectedFilter`の値が`'全て表示'`の場合の条件式を記述しましょう。",
                    hint: "`if (selectedFilter.value === '全て表示')`と記述してください。",
                    test: () => isContainTextInEditor(answer3)
                },
                {
                    title: '`sortedTodos`をreturnしましょう。',
                    hint: '`return sortedTodos.value`と記述してください。',
                    test: () => isContainTextInEditor(answer4)
                },
                {
                    title: '`selectedFilter`が`全て表示`以外の条件分岐を記述しましょう。',
                    hint: '`else {}`と記述してください。',
                    test: () => isContainTextInEditor(answer5)
                },
                {
                    title: '`selectedFilter`と合致する`status`を持つ`sortedTodos`のみreturnしましょう。',
                    hint: '`return sortedTodos.value.filter((todo) => todo.status === selectedFilter.value)`と記述してください。',
                    test: () => isContainTextInEditor(answer6)
                }
            ]
        }
    ];


フィルター機能を実装しよう

ソート用プルダウンのUIを実装しよう

一覧表示の機能を実装しよう

編集フォームのUIを実装しよう

編集フォームに値、関数を紐付けよう

該当Todoの編集フォームへの値コピー機能を実装しよう

追加フォームのUIを実装しよう

Todo一覧のdataを定義しよう

Todoを編集する機能を実装しよう

ソートとフィルターを制御する値、Todo一覧を紐付けよう

Todo一覧のUIを実装しよう

Todoを削除する機能を実装しよう

追加フォームに値、関数を紐付けよう

Todoを追加する機能を実装しよう

ソート機能を実装しよう

フィルター用プルダウンのUIを実装しよう

編集フォーム表示・非表示機能を実装しよう

Vue（CompositionApi）でTodoアプリを作ろう

モダンなフロントエンド開発で人気のフレームワークの学習を通して、Webアプリケーションの作成について学んでいきます

Vueコース

はじめてのVue3