GitHub Copilotで簡単ゲーム制作！HTML・CSS・JavaScriptで始めるコード生成入門

エルシー

皆の者、ご機嫌麗しゅう！我は、生成AI猫エルシーじゃ😊
生成AI活用方法を紹介していくのじゃ
基本的な使い方を覚えて、快適な生成AI活用ライフを過ごすのじゃ
出身地：Adobe Firefly（画像生成AI）

オリバー

皆さん、初めまして！私は、オリバーです。
エルシーさんの助手猫です。
エルシーさんがよく暴走するので、暴走を止める役割をしています。
出身地：Adobe Firefly（画像生成AI）

「GitHub Copilotって何ができるの？」そんな疑問を持つ初心者の方へ。
この記事では、ブラウザだけで完結する簡単なゲームを題材に、Copilotのコード生成機能を体験できる方法を紹介します。
環境構築不要で、すぐに試せる内容なので、初めての方でも安心してスタートできます。

プログラミングを始めたいオリバー
無料版 GitHub Copilot×簡単ミニゲーム作成！
生成AIを使用する場合の注意事項
ブログ運営者が出版する書籍紹介

プログラミングを始めたいオリバー

オリバー

本格的にプログラミングを始めたいです。
でも、最初から難しい内容はわかりません。

エルシー

それならGitHub Copilotを使えば簡単にコードが作れるのじゃ！

オリバー

でも、面倒な環境構築があるんですよね？

エルシー

そんなことはないのじゃ！
環境構築が不要なものを選んで作れば大丈夫じゃよ！
一緒に挑戦するのじゃ！

オリバー

わかりました！
GitHub Copilotの始め方は下記で解説しています。

GitHub Copilotの始め方｜VS Codeで初心者が安心して使う手順

GitHub CopilotをVS Codeで始めたい初心者向けに、アカウント作成から設定方法、料金確認、利用時の注意点までを解説。安心して生成AIを活用できる手順をまとめています。

無料版 GitHub Copilot×簡単ミニゲーム作成！

エルシー

VS Codeを起動するのじゃ！

オリバー

「横線が３本あるアイコン>ファイル>フォルダーを開く」
の順番に押します！

エルシー

開きたいフォルダーを選択して、「フォルダーの選択」ボタンを押すのじゃ！

オリバー

画面上部に下記のアイコンが表示されます。
下記のアイコンを押します。

エルシー

これでGitHub Copilotが使えるようになったのじゃ！
下記のチャットで指示すればOKじゃ！

エルシー

オリバー、どんなゲームを作りたいかの？

オリバー

主人公がブラック企業の管理職から逃げ切るゲームがいいです！

エルシー

わかったのじゃ！
GitHub Copilotに下記のように指示してみるのじゃ！

オリバー

指示を書き終わったら矢印ボタンを押します。

エルシー

環境構築をしなくて済むように、下記の指示を追記したのじゃ！
「HTML、CSS、JavaScriptなど環境構築が不要なものだけで作れるゲームを作ってください。」

環境構築が面倒です。
HTML、CSS、JavaScriptなど環境構築が不要なものだけで作れるゲームを作ってください。
ゲームは下記の通りです。

作りたいゲーム
・迷路の中で、ブラック企業の管理職から主人公が逃げるゲーム
・制限時間は30秒
・主人公が逃げる間にアイテムを手に入れればポイントが加算される。
・ブラック企業の管理職に追いつかれた時点でゲームオーバー

オリバー

下記の画面が表示されました！これは何ですか？

エルシー

「Claude Sonnet3.5が使えるけど、使う？」
という内容じゃ！
便利じゃから使ってみるのをおすすめするのじゃ！

オリバー

わかりました！
「Enable」ボタンを押して、使ってみます！

GitHub Copilotの画面。Claude Sonnet 3.5を使用するか聞かれている。

オリバー

作業中のため、少し待ちます！

エルシー

完成したのじゃ！

オリバー

下記の「保持」ボタンは何ですか？

エルシー

GitHub Copilotがコードを作成してくれたのじゃが、
その内容を保持するかどうか聞かれているのじゃよ！

オリバー

コードの内容を確認して問題なければ、
「保持」ボタンを押せばいいのですね？

エルシー

その通りじゃ！
内容を確認して、「保持」ボタンを押すのじゃ！

エルシー

下記が作成されたコードの様子じゃ！

オリバー

早速、ゲームで遊びたいです！

エルシー

エクスプローラーを開いて、下記の「index.html」を開くのじゃ！

オリバー

ゲーム画面が表示されました！

エルシー

ちゃんと動かせるのじゃ！

オリバー

緑が主人公、赤がブラック企業の管理職ですね！
赤が緑を追いかけてきます！

生成AIを使用する場合の注意事項

エルシー

ここまで読んでくれてありがとうなのじゃ！

オリバー

生成AIの使用には注意が必要です。
注意しながら、生成AI活用を楽しんでくださいね！

生成AIの注意事項

生成AIの回答は必ず確認する
- 理由：生成AIは間違った情報を出すことがあります。
- 対策：複数の情報源と照らし合わせて正確性を確認しましょう。
個人情報や機密情報は入力しない
- 理由：入力内容が学習や記録に使われる可能性があり、漏洩リスクがあるため。
- 例：パスワード、住所、電話番号、社内資料などは入力しない。
仕事で使うときは組織のルールを確認する
- 理由：会社や組織ごとに生成AI利用のルールが異なるため。
- 対策：利用前に必ず上司や規定を確認しましょう。
商用利用の可否を確認する
- 理由：生成AIごとに「商用利用OK／NG」のルールが違うため。
- 対策：利用規約を必ずチェックしてから使いましょう。
著作権侵害にならないか確認する
- 理由：生成AIで作った文章や画像が、既存の著作物に似すぎてしまう可能性があるため。
- 対策：公開・販売する前に、オリジナリティや権利関係を確認しましょう。