サンプルコードを提供してみよう

アプリケーションは完成しましたが、これからは作成したアプリケーションに新機能を追加していく中で、便利なCopilotの使い方を学んでいきます。

サンプルコードを提供してみよう

リンクをコピーしました

これからサンプルコードをCopilotに提供し、新たな機能を実装していきます。
サンプルコードというのは文字通り、コードを提案してもらう際に参考にしてほしいコードのことを指します。

今回は参考にして欲しいコードをハイライトすることで、サンプルコードとして参照させてみます。
それでは新たに登録したタスクを編集するための機能を追加してみます。サンプルコードとしてタスクを追加するコードを参考に、コードの提案を行ってもらいます。

ハイライトをすることで、プロンプト入力欄の添付ファイルも、ハイライトした部分のみが参照されているのが確認できます。この状態で編集機能を作成してもらいます。

すると以下のようにハイライトしたサンプルコードのみを参照し、提案をしてくれました。

提案されたコードを反映させます。

それでは実際に新機能が追加されているか確認してみます。

このようにしっかりと編集機能が追加されました。

タスクを追加するコードをハイライトした状態でコードの提案をしてもらいましょう。

プロンプト：

うまくいかない方はコード例をコピペして使用してください。

コード例をみる

コード例 | script.js

1
2
3
4
5
6
7
8
9
10
// タスク管理アプリケーションのためのJavaScriptコード

// 1. DOM要素の取得
const taskInput = document.getElementById('task');
const taskForm = document.querySelector('form');
const taskList = document.getElementById('task-list');

// 2. タスクの追加機能
taskForm.addEventListener('submit', function(event) {
    event.preventDefault(); // フォーム送信時にページがリロードされないようにする

    const taskText = taskInput.value.trim();
    if (taskText === '') {
        alert('タスクを入力してください。');
        return;
    }

    const taskItem = document.createElement('li');
    taskItem.textContent = taskText;

    // 3. タスクの完了/未完了の切り替え機能
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.addEventListener('change', function() {
        if (checkbox.checked) {
            taskItem.classList.add('completed');
        } else {
            taskItem.classList.remove('completed');
        }
    });
    taskItem.prepend(checkbox);

    // 4. タスクの削除機能
    const deleteButton = document.createElement('button');
    deleteButton.textContent = '削除';
    deleteButton.addEventListener('click', function() {
        taskList.removeChild(taskItem);
    });
    taskItem.appendChild(deleteButton);

    // 5. タスクの編集機能
    const editButton = document.createElement('button');
    editButton.textContent = '編集';
    editButton.addEventListener('click', function() {
        const newTaskText = prompt('タスクを編集してください:', taskText);
        if (newTaskText !== null && newTaskText.trim() !== '') {
            taskItem.childNodes[1].textContent = newTaskText.trim();
        }
    });
    taskItem.appendChild(editButton);

    taskList.appendChild(taskItem);
    taskInput.value = ''; // 入力フィールドをクリア
});

// 6. タスクのフィルタリング機能
function filterTasks(filter) {
    const tasks = taskList.getElementsByTagName('li');
    for (let task of tasks) {
        switch (filter) {
            case 'all':
                task.style.display = '';
                break;
            case 'completed':
                task.style.display = task.classList.contains('completed') ? '' : 'none';
                break;
            case 'incomplete':
                task.style.display = task.classList.contains('completed') ? 'none' : '';
                break;
        }
    }
}