はじめに
OJTの中で、オリジナルWEBサイトを作成をおこない、スライドショーを入れ込んだWEBページを作成しました。
今回、GitHubCopilotを試用するにあたって、
Copilotでスライドショーを作成する過程をまとめ、手作業でのコーディングとの比較をしたいと思います。
Copilotを使用したスライドショー
1. WEBサイトの土台の作成
質問①
GitHub Copilotに以下のように指示しました：
カフェのホームページを作成してください。
・セクションは「ホーム」「メニュー」「アクセス」「お問い合わせ」を作成します。
・ナビゲーションメニューを使って、各セクション間を遷移できるようにします。
・ホームページは以下の要素で構成してください：
1. 最上部には定期的に画像が切り替わるスライドショーを設置。
2. コンセプトとメッセージを表示。
・
・
・
返答①
以下のようにCopilotからの返答とサンプルコードが返ってきました。
Copilotは、実装内容の説明と、具体的なサンプルコードの案を提案してくれました。
実装①
サンプルコードを実装します。
画像が一定期間で入れ替わるのみの、シンプルなスライドショーが作成されました。
2. スライドショーの要素の追加
スライドショーとしては機能していますが、WEBサイトとしては少し質素に感じます。
そこで、自動切換えに加え、
ユーザーの操作による画像の切り替えを追加していきます。
質問②
GitHub Copilotに以下のように質問しました：
スライドショーに以下の機能を実装したいです
・クリックして画像を進んだり戻ったりできる
・タイマーで自動的に進む
返答②
以下のようにCopilotからの返答とサンプルコードが返ってきました。
let slideIndex = 0;
const slides = document.querySelectorAll('#slideshow img');
function showSlide(n) {
if (n >= slides.length) {
slideIndex = 0;
} else if (n < 0) {
slideIndex = slides.length - 1;
} else {
slideIndex = n;
}
slides.forEach((slide, index) => {
slide.style.display = index === slideIndex ? 'block' : 'none';
});
}
function nextSlide() {
showSlide(slideIndex + 1);
}
function prevSlide() {
showSlide(slideIndex - 1);
}
// クリックで画像を進める
slides.forEach(slide => {
slide.addEventListener('click', nextSlide);
});
// タイマーで自動的に進む
setInterval(nextSlide, 3000); // 3秒ごとに次のスライドへ
// 初期表示
showSlide(slideIndex);
提供されたサンプルコードでは、画像をクリックによる画像の切り替え機能を実装していますが、「画像を戻る」という機能については追加の質問が必要です。
質問③
GitHub Copilotに以下のように質問しました：
スライドショーの画像をクリックして進めるだけでなく、戻す方法も実装したいです。どうすればいいですか？
返答③
以下のようにCopilotからの返答とサンプルコードが返ってきました。
// スライドをクリックした位置に応じて前後に進める
slides.forEach(slide => {
slide.addEventListener('click', (event) => {
// クリックした位置を取得
const clickPosition = event.clientX;
// 画面の中央位置を取得
const screenMiddle = window.innerWidth / 2;
// クリックした位置が画面の中央より左なら前のスライドに、右なら次のスライドに進む
if (clickPosition < screenMiddle) {
previousSlide();
} else {
nextSlide();
}
});
});
Copilotから、画像をクリックした位置に応じて前後に進める機能の実装方法とサンプルコードが返ってきました。これにより、画像の右半分をクリックすると次の画像へ、左半分をクリックすると前の画像へ戻るということが可能になりました。
※イメージ図
手作業との比較
| 特徴 | 自作のコード | Copilotのコード |
|---|---|---|
| 学習 | 自分で考えて手を動かすので、 アウトプットできる | コードの説明をしてくれるので、知らないコードのインプットができる |
| 時間効率 | 時間がかかる場合がある | 短時間で実装案を提供してくれる |
| カスタマイズ性 | 自分の思い通りにできる | Copilotの提案にをもとに、必要に応じて調整する |
| エラー処置 | エラーが起きた際の対処に時間がかかる場合がある | エラーの原因や解決策を提案してくれる |
まとめ
オリジナルサイトの手作業による開発と、GitHub Copilotを介した開発を比較することで、
それぞれのアプローチのメリット・デメリットを感じました。
手作業では、コーディングの基本から応用までの理解を深めることができましたが、
時間と労力がかかります。
Copilotを利用することで、即座にコードを生成し、新たな解決策を探せましたが、
提案されるコードの理解と調整が必要です。
ただし、Copilotを使うことは、開発作業を効率的にし、学びを深める大きなチャンスです。
これを最大限に活用するためには、自分のスキルや目的に合わせてうまく調整し、
自分で判断しながら使うことが重要だと感じます。