👑
このクエストはプレミアム限定です
プレミアムプランにアップグレードすると、すべてのクエストが
解放されます！
プレミアムにアップグレード
← クエスト一覧へ戻る
← クエスト一覧
クエスト10：Todo アプリを作ろう！
スライド
1
/
2
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
💚 Vue.js基礎
/
Quest 10
/ 10
クエスト10：Todo アプリを作ろう！
発展
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
テキスト入力で todo を追加し、「追加」ボタンでリストに表示されるようにしよう！
📖 解説を見る
🏆 Vue.js 総合問題
ここまでで学んだ
ref・v-model・v-for・@click
を組み合わせて
シンプルな Todo アプリを完成させよう！
ヒントを見る
if (newTodo.value.trim()) { todos.value.push(newTodo.value); newTodo.value = ""; }
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Vue.js</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <h2>Todo リスト</h2> <input type="text" v-model="newTodo" placeholder="やること"> <button @click="addTodo">追加</button> <ul> <li v-for="todo in todos" :key="todo">{{ todo }}</li> </ul> </div> <script>const { createApp, ref } = Vue createApp({ setup() { const newTodo = ref("") const todos = ref([]) function addTodo() { // ここに追加処理を書こう } return { newTodo, todos, addTodo } } }).mount("#app")</script> </body> </html>
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 0 正解
レッスンに戻る
全問正解でクエストクリア！
🏆
Vue.js基礎コース 完全制覇！
全クエストをクリアしました！すごい！
🗺️ クエスト一覧へ
Xでシェア
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
