配列操作/findIndex

配列操作/splice


    // =======================
    // テストコード
    // =======================
    const answer1 = 'const deleteTodo = (deletedTodoId) => {';
    const answer2 = 'const index';
    const answer3 = 'todos.value.findIndex(';
    const answer4 = 'todos.value.splice(index, 1)';
    const answer5 = '@click="deleteTodo(todo.id)"';
    const questions = [
        {
            title: 'deleteTodoを定義しよう',
            tests: [
                {
                    title: '`deleteTodo`という関数を宣言しましょう。',
                    hint: '`const deleteTodo = (deletedTodoId) => {}`と記述してください。',
                    test: () => isContainTextInEditor(answer1)
                },
                {
                    title: '`const index`を定義しましょう。',
                    hint: '`const index`と記述してください。',
                    test: () => isContainTextInEditor(answer2)
                },
                {
                    title: '`findIndex`を使用して`todos`から`deletedTodoId`と合致する`todo`のインデックス番号を`const index`に代入しましょう。',
                    hint: '`todos.value.findIndex(todo => todo.id === deletedTodoId)`と記述してください。',
                    test: () => isContainTextInEditor(answer3)
                },
                {
                    title: '`splice`を使用して`todos`から`index`番目の`todo`を削除しましょう。',
                    hint: '`todos.value.splice(index, 1)`と記述してください。',
                    test: () => isContainTextInEditor(answer4)
                }
            ]
        },
        {
            title: '削除ボタンクリック時にdeleteTodoを実行させよう',
            tests: [
                {
                    title: '削除ボタンクリック時にdeleteTodoを実行させましょう。',
                    hint: '`@click="deleteTodo(todo.id)"`と記述してください。',
                    test: () => isContainTextInEditor(answer5)
                }
            ]
        }
    ];


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

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

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

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

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

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

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

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

Todo一覧のdataを定義しよう

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

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

Todo一覧のUIを実装しよう

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

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

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

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

ソート機能を実装しよう

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

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

Vueコース

はじめてのVue3