【ChatGPT】誰でも簡単にプログラミングする方法(JavaScript)
みなさんこんにちは!
最近注目を集めているChatGPTを使って誰でも簡単にプログラミングを行う方法をご紹介します。
今回は「FizzBuzz問題」というプログラミング初心者の例題でよく使用されるものをChatGPTに質問して作成してみます。
※本記事ではユーザ登録方法、ChatGPTの基本操作方法は習得前提となります。
ChatGPTとは
ChatGPTとはOpenAI社が2022年11月に公開したチャットボットです。
ChatGPTでは対話システム、文章生成、翻訳、要約、表計算ソフトの関数やプログラミング言語の記述などをチャット形式で回答してくれます。
ChatGPTを利用するには事前に簡単なユーザ登録を行う必要があります。
未登録の方は以下リンクよりユーザ登録を行ってください。
ChatGPTでの注意点
ChatGPTを利用する際は以下の点に注意してください。
機密情報の送信
ChatGPTに送信した情報は学習データとして利用される可能性があるため、機密情報の漏洩につながります。
個人情報や外部に公開されると困るものはChatGPTに記載しないことをおすすめします。
情報を過信しすぎない
Webブラウザで検索する際にも言えることですが、ChatGPTの回答は100%正確というものではありません。
しっかりと事実確認、ソースコードの動作検証を行うことを推奨します。
プログラムの作り方を聞いてみる
それでは実際にChatGPTにFizzBuzz問題のプログラムを聞いてみます。
FizzBuzz問題とは1~100の数字で3の倍数は「Fizz」、5の倍数は「Buzz」、3と5の倍数が重なった場合は「FizzBuzz」と表示させるものです。
今回はJavaScriptを使用し、サイトで結果が確認できるように作成指示を出します。
※同じ質問を投げかけても全く同じ回答は返ってきません。
1回目の質問
まずは以下の内容をチャットに投げかけます。
質問内容:
「FizzBuzz問題をJavaScriptで作成して画面を表示するHtmlとCSSも作成してください」
質問を投げかけると以下のようにChatGPTから返答が返ってきます。
1回目のChatGPTからの返答
ChatGPTからは以下の内容が回答されました。
JavaScript
// FizzBuzz問題の解答を返す関数
function fizzBuzz(num) {
if (num % 3 === 0 && num % 5 === 0) {
return "FizzBuzz";
} else if (num % 3 === 0) {
return "Fizz";
} else if (num % 5 === 0) {
return "Buzz";
} else {
return num.toString();
}
}
// 1から100までのFizzBuzzの解答を作成し、画面に表示する関数
function displayFizzBuzz() {
for (let i = 1; i <= 100; i++) {
const result = fizzBuzz(i);
const li = document.createElement("li");
li.textContent = result;
document.getElementById("list").appendChild(li);
}
}
// ページが読み込まれた際に実行する関数
function init() {
displayFizzBuzz();
}
init();
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FizzBuzz</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>FizzBuzz</h1>
<ul id="list"></ul>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
margin: 0;
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 10px;
padding: 10px;
background-color: #eee;
border-radius: 5px;
font-size: 20px;
text-align: center;
}
1回目の結果確認
回答通り、3つのファイルを作成し、それぞれのファイルに内容を貼り付けていきます。
JavaScript → ファイル名:script.js
HTML → ファイル名:index.html
CSS → ファイル名:style.css
作成したindex.htmlを開いて画面を確認してみます。
3の倍数は「Fizz」、5の倍数は「Buzz」、3と5の倍数が重なった場合は「FizzBuzz」表示されていますね。
2回目の質問
ではプログラムを少し改良してみます。
今度はFizz→赤色、Buzz→青色、FizzBuzz→紫色となるように指定します。
質問内容:
Fizz→赤色、Buzz→青色、FizzBuzz→紫色となるように修正してください。
2回目のChatGPTからの返答
ChatGPTからは以下の内容が回答されました。
JavaScript
// FizzBuzz問題の解答を返す関数
function fizzBuzz(num) {
if (num % 3 === 0 && num % 5 === 0) {
return "FizzBuzz";
} else if (num % 3 === 0) {
return "Fizz";
} else if (num % 5 === 0) {
return "Buzz";
} else {
return num.toString();
}
}
// 1から100までのFizzBuzzの解答を作成し、画面に表示する関数
function displayFizzBuzz() {
for (let i = 1; i <= 100; i++) {
const result = fizzBuzz(i);
const li = document.createElement("li");
li.textContent = result;
li.classList.add(result.toLowerCase()); // 結果に応じてクラスを追加
document.getElementById("list").appendChild(li);
}
}
// ページが読み込まれた際に実行する関数
function init() {
displayFizzBuzz();
}
init();
CSS
body {
font-family: Arial, sans-serif;
margin: 0;
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 10px;
padding: 10px;
border-radius: 5px;
font-size: 20px;
text-align: center;
}
.fizz {
background-color: red;
color: white;
}
.buzz {
background-color: blue;
color: white;
}
.fizzbuzz {
background-color: purple;
color: white;
}
2回目の結果確認
先程作成した「script.js」と「style.css」にChatGPTからの回答結果をすべて上書きます。書き換え後、index.htmlを確認します。
指定通り、Fizz→赤色、Buzz→青色、FizzBuzz→紫色となっていますね。
ChatGPTでは人と会話をするように、前回回答した内容を記憶しているので、「ここを○○に変更して」と質問すると指定の箇所を修正してくれます。
ChatGPTに質問した際に、想定した回答が来なかった場合は
できるだけ具体的に指示を出すと想定通りの回答が返ってくることが多いです。
おまけ:勉強カリキュラムやプログラムの練習問題を作ってもらう
ChatGPTはプログラムの作成補助も行ってくれますが、プログラミングの勉強をしたい時にも心強い味方となります。
例えば、Python言語の基礎を学ぶためにどこから手を付ければよいかわからない場合以下のように質問を投げかけます。
※C言語、JavaScript、VBなどその他の言語でも同じことができます。
おまけ①:勉強カリキュラム作成
質問内容:
「私はプログラミング初心者です。Python言語を3か月で習得したいです。学習カリキュラムを作成してください。使用する参考文献も教えてください」
上記の質問を投げかけると以下のように一週間ごとにカリキュラムを提案してくれます。
おまけ②:練習問題作成
ある程度知識が入ったところで、実践をしたい場合は以下のように質問を投げかけ練習問題を作成してもらうことも可能です。
質問内容:
「PythonのIf文を使用した練習問題を作成してください」
練習問題を解き終わった場合、ChatGPTにソースコードをそのまま添付して採点してもらえます。
質問内容:
問題1のソースコードです。
正解でしょうか
x = 5
y = 10
z = x + y
print("xとyの和は", z, "です")
間違ったコードを提出した際は修正点を指摘してくれます。
質問内容:
問題1のソースコードです。 正解でしょうか
x = 5
y = 10
z = x + y print("xとyの和は", z, です")
pythonCopy codex = 5
y = 10
z = x + y
print("xとyの和は", z, "です")
正解を表示されたくない場合は以下のように質問します。
質問内容:
問題1のソースコードです。 正解か不正解かだけ教えてください x = 5
y = 10
z = x + y print("xとyの和は", z, です")
終わりに
今回はChatGPTを使ったプログラミング作成方法をご紹介しました。
プログラム作成も便利ですが、他にも表計算ソフトの関数の使い方等もサンプル付きで教えてくれます。
投稿日現在は有料版、無料版がありますが、いつまで無料で使用できるかは公言されていません。
かなり便利なAIですので是非活用してみてください。
最近はGoogleの「Bard」やEdgeの「Bing」など便利で賢いAIが登場してきました。こちらの動向も今後注目していこうと思います。
我々、株式会社エアリーは、
千葉で働きたい・頑張りたい人材を募集しております!
新卒採用・中途採用どちらも募集しております!
以下HPより、皆様のご応募お待ちしております。
この記事が気に入ったらサポートをしてみませんか?