🤖

【VSCode】GitHub Copilot FreeでGame of Lifeをhtmlで作成しファイル分割する

2025/01/12に公開

【概要】
GitHub Copilot Freeに慣れるため色々ブログを見ていた所、参考記事のGame of LifeでのDemo記事が面白かったのでそちらを一部試してみたという記事になります。
ブログに書いてある内容を一通りやってみたかったのですが、内容が長くなってしまうので
コード生成とファイル分割の検証までしてみました。

※IntelliJ IDEAでやりたかったのですが、VSCodeほどGitHub Copilotの機能が記事執筆時点では充実している訳ではなかったので今回は断念しました…
【全体的な流れ】
空のhtmlファイルを作成し、VS Codeで開きます。
Copilotでhtmlファイルに自動生成したコードを適用させ、ファイル分割もCopilotでしてもらいます

空のhtmlファイルをVSCodeで開きます

GitHub Copilotに指示を出してコードを生成し適用

下記のような指示を出しました

静的サイトでGame of Life を生成して下さい

ファイル分割をするように指示を出し適用

下記のような指示を出しました
そうするとhtmlファイルに記載されたファイルが意図通りにファイル分割されているのを確認できました

cssファイルとjavascriptでファイル分割してください


振り返り

慣れてしまえば数秒でGame of Lifeが出来てしまうのは凄い新鮮でした。
しかもコードは一切自分で書いていないので、使いこなせれば開発速度は爆上がりだなといった感じです。

ですが指示だしの文言が曖昧だったり、たまに生成されるコードが不適切で意図した動きにならない等がありこの記事を作るまでに実は数時間程時間がかかりました😓
※この記事の最終的な指示だしも曖昧ですが…

今回はコードレビューなど全くしなかったのですが、実際の業務ではしなくてはいけないので注意が必要だなとも感じました。

【参考記事】
https://github.blog/news-insights/product-news/github-copilot-in-vscode-free/

Discussion