<label>

<select>

v-for（配列とオブジェクト）

v-for / key, index


    // =======================
    // テストコード
    // =======================
    const questions = [
        {
            title: 'ソートラベルを表示しよう',
            tests: [
                {
                    title: 'labelタグを記述し、for属性にsortを定義しましょう',
                    hint: '`<label for="sort"></label>`と記述してください。',
                    test: () => isContainTextInEditor('<label for="sort">')
                },
                {
                    title: '`<label>`内に文字列「ID:」を表示しましょう',
                    hint: '`<label for="sort">ID:</label>`と記述してください。',
                    test: () => isContainTextInEditor('<label for="sort">ID:</label>')
                }
            ]
        },
        {
            title: 'ソート用プルダウンを表示しよう',
            tests: [
                {
                    title: 'selectタグを記述し、id属性にsortを定義しましょう',
                    hint: '`<select id="sort"></select>`と記述してください。',
                    test: () => isContainTextInEditor('<select id="sort">')
                },
                {
                    title: '`<option>`内に変数名を`sortItem`としてv-forを定義しましょう',
                    hint: '`<option v-for="sortItem in SORT_ITEMS"></option>`と記述してください。',
                    test: () => isContainTextInEditor('v-for="sortItem in SORT_ITEMS"')
                },
                {
                    title: '`<option>`内に`value`を定義しましょう',
                    hint: '`<option v-for="sortItem in SORT_ITEMS" :value="sortItem"></option>`と記述してください。',
                    test: () => isContainTextInEditor(':value="sortItem"')
                },
                {
                    title: '`<option>`内に`key`を定義しましょう',
                    hint: '`<option v-for="sortItem in SORT_ITEMS" :value="sortItem" :key="sortItem"></option>`と記述してください。',
                    test: () => isContainTextInEditor(':key="sortItem"')
                },
                {
                    title: 'ソート用プルダウンに項目を表示しましょう',
                    hint: '`<option v-for="sortItem in SORT_ITEMS" :value="sortItem" :key="sortItem">{{ sortItem }}</option>`と記述してください。',
                    test: () => isContainTextInEditor('{{ sortItem }}')
                }
            ]
        }
    ];


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

<ul>

<ol>

<li>

<button>

Todo一覧のUIを実装しよう

<input type="text">

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

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

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

ref / value

reactive

配列[]

const numbers = ['1', '2', '3', '4', '5']
console.log($(1))

オブジェクト{}

Todo一覧のdataを定義しよう

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

シャローコピー

ディープコピー

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

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

配列操作/findIndex

配列操作/splice

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

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

Object.assign

配列操作/find

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

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

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

配列操作/sort

computed()

```javascript
const count = ref(2)
const countDouble =$(1)(() => $(2) * 2)
```

ソート機能を実装しよう

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

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

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

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

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

Vueコース

はじめてのVue3

「Vue（CompositionApi）でTodoアプリを作ろう」レッスンの総復習クイズです。

```javascript
const stella = {
  age: 56,
  nationality: 'US',
  height: '6ft',
  bornIn: 1955
}


console.log(stella.$(1)) // 56
console.log(stella[$(2)]) // '6ft'
```

Vue（CompositionApi）でTodoアプリを作ろうの総復習クイズ