このカリキュラムではJavaScriptを使ってタスク管理アプリの実装を行います。
トップレベルのコメントの活用
基礎カリキュラムのコード補完機能でコメントを使ってコードの提案をしてもらう方法を学びました。今回は、この方法を用いてJavaScriptのコードを提案してもらいます。
トップレベルのコメントを記述しよう
まず、最初に作成したscript.jsファイルの内容を一度消去し、必要な仕様を具体的にコメントとして記述しましょう。
以下のコードをscript.jsファイルに記述してください。
トップレベルのコメント | script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| // タスク管理アプリケーションのためのJavaScriptコード
// 1. DOM要素の取得
// - タスク入力フィールド、追加ボタン、タスクリストのDOM要素を取得する。
// 2. タスクの追加機能
// - 新しいタスクを入力フィールドから取得し、タスクリストに追加する。
// - フォーム送信時にページがリロードされないようにする。
// - 空のタスクを追加できないようにバリデーションを行う。
// 3. タスクの完了/未完了の切り替え機能
// - 各タスクに完了チェックボックスを追加する。
// - チェックボックスの状態に応じて、タスクのスタイルを変更する。
// 4. タスクの削除機能
// - 各タスクに削除ボタンを追加し、クリックするとそのタスクをリストから削除する。
// 5. タスクのフィルタリング機能
// - 全てのタスク、完了済みのタスク、未完了のタスクをフィルタリングして表示するボタンを実装する。
|
このようにトップレベル、つまりファイルの一番最初にコメントを記述することで、自分が望むコードを提案してもらいやすくなります。
それでは、このコメントを元にJavaScriptのコードを作成してもらいます。
JavaScriptのコードを生成に必要なファイルを添付しよう
トップレベルのコメントはscript.jsファイルに記述しているので、これを参照してもらうためにこのファイルを添付してからプロンプトを入力します。また、index.htmlのコードも提案に必要な情報なので、この2つのファイルを添付してから行います。
トップレベルのコメントを元にして、JavaScriptのコードを生成しよう
2つのファイルが添付されていることが確認できたら、以下のプロンプトを送信し、コードを生成しましょう。
プロンプト：
コメントを元にJavaScriptのコードを作成してください。
JavaScriptのコードが作成されたら、コメントを消去し、コードを反映させましょう。
うまくいかない方はコード例をコピペして使用してください。
- コード例をみる
-
コード例 | 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);
taskList.appendChild(taskItem);
taskInput.value = ''; // 入力フィールドをクリア
});
// 5. タスクのフィルタリング機能
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;
}
}
}
|
JavaScriptファイルのリンクを作成しよう
※index.htmlにJavaScriptへのリンクが追加されている方は「index.html」にコードを反映し、この作業はスキップしてください
今回はindex.htmlにJavaScriptファイルのリンクが作成されなかったので、作成してもらいます。
以下の画像のようにscript.jsとindex.htmlファイルを添付している状態で、プロンプトを入力しましょう。
プロンプト：
作成したscript.jsファイルをindex.htmlで使えるようにしてください。
作成してもらうことができましたらindex.htmlを開き、ファイルに反映させましょう。
うまくいかない方はコード例をコピペして使用してください。
- 完成コードの確認
-
コード例 | index.html
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>シンプルなHTMLページ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これはシンプルなHTMLページの例です。</p>
<form action="/submit-task" method="post">
<label for="task">タスク:</label>
<input type="text" id="task" name="task" required>
<button type="submit">追加</button>
</form>
<div>
<button onclick="filterTasks('all')">すべてのタスク</button>
<button onclick="filterTasks('completed')">完了タスク</button>
<button onclick="filterTasks('incomplete')">未完了タスク</button>
</div>
<ul id="task-list">
<!-- タスクがここに表示されます -->
</ul>
<script src="script.js"></script>
</body>
</html>
|
@workspaceの使い方
これでJavaScriptのコードが生成され、アプリが完成しました。最後に、コードに問題がないか確認してみます。
コードの確認には、アプリ全体のコードを把握する必要があります。今回であれば、index.htmlとstyles.css、script.jsの3つのファイルです。ファイル添付機能を使用してこれらのファイルを参照することも可能ですが、大規模なアプリでは、すべてのファイルを添付するのは大変です。
このようにアプリ全体のコードを参照した上で、Copilotに質問をするときには@workspaceを使うと便利です。プロンプトの前に@workspaceをつけて質問をすることで、このアプリの場合、copilot_curriculumディレクトリ内にあるすべてのファイルの解析し、提案に必要なファイルを自動で参照し、回答をしてくれます。
@workspaceを使い、コードの確認をしよう
それではプロンプトの前に@workspaceをつけ、コードの最終確認をしましょう。
プロンプト：
@workspace これで問題なく仕様通り動きますか？
するとファイルを添付していませんでしたが、以下の画像のように提案に必要なファイルを解析し、自動で添付してから回答をしているのが確認できます。
コードの確認ができたので動作の最終確認をしてみます。
無事、仕様通りアプリが動いているのが確認できました。
これでアプリの完成です。
問題が見つかった場合は、提案された内容に従ってコードを修正し、動作確認をしましょう。問題がなければ、仕様通りにアプリが動作するか最終確認を行いましょう。
アプリがうまく動かない場合は、以下の完成コードに差し替え、正常に動作することを確認した後、次のカリキュラムへ進みましょう。
- 完成コードの確認
-
完成コード例 | index.html
1
2
3
4
5
6
7
8
9
10
| <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>シンプルなHTMLページ</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これはシンプルなHTMLページの例です。</p>
<form action="/submit-task" method="post">
<label for="task">タスク:</label>
<input type="text" id="task" name="task" required>
<button type="submit">追加</button>
</form>
<div>
<button onclick="filterTasks('all')">すべてのタスク</button>
<button onclick="filterTasks('completed')">完了タスク</button>
<button onclick="filterTasks('incomplete')">未完了タスク</button>
</div>
<ul id="task-list">
<!-- タスクがここに表示されます -->
</ul>
<script src="script.js"></script>
</body>
</html>
|
完成コード例 | styles.css
1
2
3
4
5
6
7
8
9
10
| /* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
form {
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input[type="text"] {
padding: 10px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 15px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
div {
margin-bottom: 20px;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
background-color: white;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
ul li.completed {
text-decoration: line-through;
color: #888;
}
|
完成コード例 | 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);
taskList.appendChild(taskItem);
taskInput.value = ''; // 入力フィールドをクリア
});
// 5. タスクのフィルタリング機能
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;
}
}
}
|
- トップレベルのコメントを記述することで、提案されるコードの精度が上がります。
- @workspaceをつけるとアプリ全体のコードを解析し、提案を受けることができます。