HTMLを作成しよう
このカリキュラムではGitHub Copilot Chat機能を使い、見た目となるHTMLファイルを作成します。
index.htmlファイルを作成しよう
まずは先ほど作成したcopilot_curriculumフォルダ内に、index.htmlというファイルを作成しましょう。
基礎となるHTMLを作成しよう
それではCopilotに基本的なHTMLのコードを提案してもらいましょう。以下の画像に書いてある指示内容を入力し、Copilotにコードを提案してもらいます。
指示内容を入力すると、チャットによってHTMLを書く際に必要な基本的な雛形部分のコードが、以下の画像のように作成されました。
これをコピーしてファイルに貼り付けても良いのですが、提案されたコードをホバーすると表示される3つのアイコンの真ん中の「AIカーソルを挿入します」をクリックすると簡単にファイルに反映させることができます。
反映させたいファイルが開いているか確認してから行います。
このように反映されました。ChatGPTのような生成AIだと回答をコピペしてファイルに反映させる必要がありますが、このようにアイコンをクリックするだけで反映させることができるのもGitHub Copilotの便利な点の一つです。
チャット機能を使い、HTMLを作成しよう
チャット機能を使い、作成したhtmlファイルにコードを生成しましょう。
※ AIが作成するコードは毎回異なります。そのため、必ずしもカリキュラム通りのコードと同じである必要はありません。
プロンプト：
シンプルな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>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これはシンプルなHTMLページの例です。</p>
</body>
</html>
|
入力フォームを作成しよう
続いてタスクを追加するためのフォームを作成していきます。
同様にチャットを使い作成します。
このように新たにコードを追加してくれました。先ほどのアイコンでファイルに反映させてしまうと、カーソルがある箇所から全てのコードが反映されてしまいます。
今回のように新たに追加されたコードのみをファイルに反映させるには3つのアイコンの一番左の「エディターで適用します」のアイコンをクリックします。
すると以下の動画のように新たに追加されたコードがハイライトされた状態になります。「変更を受け入れる」をクリックすると、このコードがファイルに反映されます。「破棄」を選択するとキャンセルできます。
このように、追加されたコードを簡単に反映できるため、とても便利です。ただし、ファイル内のコードが長くなりすぎると正しく反映されないことがあります。その場合は、既存のコードを一度消去し、「AIカーソルを挿入」機能を使って再度反映させることをお勧めします。
チャット機能を使い、HTMLを作成しよう
チャット機能を使い、作成したhtmlファイルにコードを生成しましょう。
プロンプト：
タスクを追加するためのフォームを作成してください。入力欄と送信ボタンが必要です。
- コード例をみる
-
コード例 | index.html
1
2
3
| <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>シンプルなHTMLページ</title>
</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>
</body>
</html>
|
フィルタリングボタンを作成しよう
次に、完了タスクと未完了タスクをフィルタリングするためのボタンを作成していきます。
ステータスをフィルタリングするためのボタンを作成するために、以下の画像に書いてある指示内容を入力し、Copilotにコードを提案してもらいます。
同じようにしてファイルに反映させます。
チャット機能を使い、HTMLを作成しよう
チャット機能を使い、作成したhtmlファイルにコードを生成しましょう。
プロンプト：
完了タスクと未完了タスクをフィルタリングするためのボタンを作成してください。
- コード例をみる
-
コード例 | index.html
1
2
3
| <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>シンプルなHTMLページ</title>
</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>
<script>
function filterTasks(filter) {
// フィルタリングロジックをここに追加
console.log(`フィルタ: ${filter}`);
}
</script>
</body>
</html>
|
追加されたタスクを表示させよう
最後に追加されたタスクを表示するリストを作成します。
以下の動画に書かれているように「追加されたタスクを表示するためのリストを作成してください。」とCopilotに指示し、提案されたコードを反映させると完成です。
チャット機能を使い、HTMLを作成しよう
チャット機能を使い、作成したhtmlファイルにコードを生成しましょう。
プロンプト：
追加されたタスクを表示するためのリストを作成してください。
- コード例をみる
-
コード例 | index.html
1
2
3
| <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>シンプルなHTMLページ</title>
</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>
function filterTasks(filter) {
// フィルタリングロジックをここに追加
console.log(`フィルタ: ${filter}`);
}
</script>
</body>
</html>
|
作成したHTMLをブラウザで確認しよう
これで一通りHTMLが完成しました。
ブラウザで確認をしよう
それでは作成したHTMLファイルをブラウザで開き、デザインを確認してみましょう。
この時ですが、index.htmlのタブを右クリックし、「パスのコピー」をクリックした後、ブラウザのURLにペーストすると簡単に表示できます。
このような風に表示されているか確認をしてください。
※ AIが作成するコードは毎回異なります。そのため、必ずしもカリキュラムと同じ表示である必要はありません。
問題がなければ次のカリキュラムに進みましょう。