こんばんは、たかです。
仕事が少し忙しくなってきました。
立場が上に上がったことで、以前よりも考えることが増え、頭がパンクしそうになっている今日この頃です😢
わからないことが出てきたときは、せめて手は動かしたくないと思い、自分でググることはやめ、生成AIに調べてもらっています。そこから得た情報をヒントにさらに自分の考えを整理していく、といった感じです。
ソースコードも生成AI君に書かせることが多くなってきました。
細かいところまで追求するのは難しいですが、大体こんな感じというのは結構精度良くアウトプットしてくれます。なので、あとは自分でちょこちょこ修正して完成形に持っていくだけでよくなります。
仕事が終わってから、いろんな生成AIのコード生成に関して使い勝手がどう違うのかふと気になったので、比較してみました。
今回使ってみたのは、職場で使っているAzure Open AIとGitHub Copilot、自宅PCやスマホにも入れているChatGPTの3つです。
①Azure OpenAI
Microsoft Azureが提供するAIサービスの1つです。ビジネスユーザ向けで、自社のビジネスに最適な生成AIソリューションをMicrosoft Azureに閉じた環境で構築することができます。
自分の職場ではAzure OpenAIのo1モデル（かなり高性能）を使っています。
単なる調べごとだけでなく、ソフトウェア設計においてもどちらの案がいいか、一般的にはどうすることが多いのか、などメリデメ含め回答してくれるので助かっています。
そんなAzure君、コード生成も頑張ってくれるのですが、出力されるコードのインデントが微妙かなという感じです。
②GitHub Copilot
GitHub Copilotは、AIコーディング支援ツールです。ユーザが入力したコードやプロンプトをもとに、AIがコードを提案してくれます。GitHubが提供するサービスで、C、C++、Pythonや JavaScriptなど、さまざまなプログラミング言語に対応しています。
また、GitHub CopilotはVisual Studio Code（コードエディタ）の拡張機能として連携できます。アウトプットされるコードに対してもVSCode上で自分が設定している色付けを適用してくれますし、インデントも整えてくれるので、可読性がかなり良いです。
さらに、自分がコードを書いているときもこれが書きたいんでしょ？と予測してくれ、コードを書く作業も楽にしてくれる優れものです。
コーディング支援に特化したツールなので、やはり他と比べて使い勝手がかなり良かったです。
③ChatGPT
この子に関してはもう紹介しなおす必要がないと思います。
普段仕事ではGitHub Copilotを使っているので、ChatGPTでコード生成はやったことないなと思って試してみたくなった所存です。
というわけで、試しに簡易的なルーレットアプリを作ってみてもらいました。
ブラウザ上で動作するルーレットアプリを作成してください。
ルーレットの中身は1～10としてください。
了解です！それでは、HTML＋JavaScriptで動作する、ブラウザ用のルーレットアプリを作成します。
🎯 ブラウザ用ルーレット（1〜10）
以下のコードを .html ファイルとして保存して、ブラウザで開けば動きます！<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>ルーレットアプリ</title>
<style>
body {
font-family: 'Arial', sans-serif;
text-align: center;
background: #f0f0f0;
padding-top: 100px;
}
h1 {
font-size: 48px;
margin-bottom: 40px;
}
#number {
font-size: 80px;
margin: 40px 0;
color: #e91e63;
}
button {
font-size: 24px;
padding: 12px 24px;
border: none;
border-radius: 8px;
background-color: #2196f3;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #1976d2;
}
</style>
</head>
<body>
<h1>🎰 ルーレットアプリ</h1>
<div id="number">？</div>
<button onclick="spinRoulette()">回す！</button>
<script>
function spinRoulette() {
const numberDisplay = document.getElementById('number');
let count = 20;
const interval = setInterval(() => {
const randomNum = Math.floor(Math.random() * 10) + 1;
numberDisplay.textContent = randomNum;
count--;
if (count <= 0) {
clearInterval(interval);
const finalNum = Math.floor(Math.random() * 10) + 1;
numberDisplay.textContent = `🎯 ${finalNum}`;
}
}, 100);
}
</script>
</body>
</html>
HTMLとJavaScriptの知識があまりないのですが、それっぽいものは作ってくれました。
これをエディタに張り付けて保存。開いてみると。。
だいぶシンプルです(笑)
ボタンを押してみると、数字がコロコロ変わり始め、最終的に↓のようにピタッと止まりました。
指示内容があまりにもざっくりしていたので、まあこんなもんかという感じですね。
では、もう少し楽しそうな感じにしてもらいましょう。
シンプルすぎるので、もう少し使う人を楽しませてください
いいですね、その「楽しませたい」って気持ちが最高です！
じゃあ今回は、ちょっと演出やデザインを強化した、遊び心のあるルーレットを作りましょう。
🎉 アップグレード版ルーレット（アニメーション＆サウンド付き！）
✅ 演出のポイント：
-
数字がくるくる高速に変わるアニメーション
-
最後は「🎯〇番だ！」と盛り上がる
-
効果音も鳴らして、ゲーム感を演出
-
カラフルで楽しいビジュアル！
👇 以下のHTMLファイルを保存＆ブラウザで開いてください：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🎰 楽しいルーレット！</title>
<style>
body {
font-family: 'Arial', sans-serif;
background: radial-gradient(circle at center, #ffe082, #ffca28);
text-align: center;
padding-top: 80px;
color: #333;
}
h1 {
font-size: 48px;
margin-bottom: 40px;
color: #d32f2f;
text-shadow: 2px 2px white;
}
#number {
font-size: 100px;
margin: 30px 0;
color: #4caf50;
transition: transform 0.2s ease-in-out;
}
button {
font-size: 28px;
padding: 14px 28px;
border: none;
border-radius: 12px;
background-color: #8e24aa;
color: white;
cursor: pointer;
box-shadow: 2px 4px 8px rgba(0,0,0,0.2);
}
button:hover {
background-color: #6a1b9a;
}
#message {
font-size: 36px;
margin-top: 20px;
color: #e91e63;
}
</style>
</head>
<body>
<h1>🎰 ルーレットを回そう！</h1>
<div id="number">？</div>
<button onclick="spinRoulette()">スタート！</button>
<div id="message"></div>
<!-- サウンド -->
<audio id="spinSound" src="https://www.soundjay.com/button/sounds/button-16.mp3" preload="auto"></audio>
<audio id="resultSound" src="https://www.soundjay.com/button/sounds/button-09.mp3" preload="auto"></audio>
<script>
function spinRoulette() {
const numberDisplay = document.getElementById('number');
const message = document.getElementById('message');
const spinSound = document.getElementById('spinSound');
const resultSound = document.getElementById('resultSound');
message.textContent = "";
let count = 25;
let spinInterval;
spinSound.play();
spinInterval = setInterval(() => {
const randNum = Math.floor(Math.random() * 10) + 1;
numberDisplay.textContent = randNum;
numberDisplay.style.transform = `scale(${1 + Math.random() * 0.2})`;
count--;
if (count <= 0) {
clearInterval(spinInterval);
const finalNum = Math.floor(Math.random() * 10) + 1;
numberDisplay.textContent = finalNum;
numberDisplay.style.transform = "scale(1.5)";
resultSound.play();
message.textContent = `🎯 ${finalNum}番だ！やったね！`;
}
}, 80);
}
</script>
</body>
</html>
改良ポイント
（最近、ChatGPT君がフランクになりましたね。人間味が増した気がします。）
さて、改良版のルーレットアプリはどうなったかというと、
改良ポイントとして言ってくれている通り、見た目は派手になりました。
静止画で伝えられませんが、ボタンを押したときにも効果音が追加されています。
が、効果音として参照されている音声ファイルはURLが間違っており、最初は音が鳴らないという不具合入りでした。
ということで、ちょっとしたミスはありましたが、ほんの少し指示しただけで、作成経験のないブラウザアプリを実装することができました。
性能比較は難しいですが、インデントを整えたコードが出てきて、色付けもされているので、完全無料で利用できることを考えると、使い勝手は十分良いと思いました。
息抜きに試しただけなので、ルーレットアプリ開発はここまでにしておきます。
より細かい指示を与えていけば、さらに機能拡充することもできそうですし、そもそも違う言語で実装してもらうことも可能かと思います。
まとめ
今回は生成AIによるコード生成について、主にChatGPTをピックアップして使い勝手を試してみました。
無料で使える割にはなかなかの性能でしたが、仕事でもっと複雑なコードを書く際には、途中で紹介したコーディング支援に特化しているGitHub Copilotを利用することをお勧めします。
皆さんも、生成AIを積極的に活用して効率のよいプログラミングを目指していきましょう！
それでは、おやすみなさい👋
