【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、HTML、CSSのコードを示します。
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;
}
上記のコードをそれぞれ script.js、index.html、style.css というファイル名で保存し、同じディレクトリに置いてください。その後、index.html をブラウザで開くと、FizzBuzzの解答が画面に表示されます。
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 関数で返す文字列に応じて、CSSで適用するスタイルを変更することで、FizzBuzzの解答の表示色を変更することができます。
以下が修正後のコードです。
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();上記の修正により、FizzBuzzの解答に応じて li 要素に fizz、buzz、fizzbuzz というクラスが追加されます。
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;
}上記のCSSコードでは、 fizz クラスには赤色、 buzz クラスには青色、 fizzbuzz クラスには紫色の背景色を設定し、文字色を白色に変更しています。
以上の修正により、FizzBuzzの解答が赤色、青色、紫色で表示されるようになります。
2回目の結果確認
先程作成した「script.js」と「style.css」にChatGPTからの回答結果をすべて上書きます。書き換え後、index.htmlを確認します。
指定通り、Fizz→赤色、Buzz→青色、FizzBuzz→紫色となっていますね。
ChatGPTでは人と会話をするように、前回回答した内容を記憶しているので、「ここを○○に変更して」と質問すると指定の箇所を修正してくれます。
ChatGPTに質問した際に、想定した回答が来なかった場合は
できるだけ具体的に指示を出すと想定通りの回答が返ってくることが多いです。
おまけ：勉強カリキュラムやプログラムの練習問題を作ってもらう
ChatGPTはプログラムの作成補助も行ってくれますが、プログラミングの勉強をしたい時にも心強い味方となります。
例えば、Python言語の基礎を学ぶためにどこから手を付ければよいかわからない場合以下のように質問を投げかけます。
※C言語、JavaScript、VBなどその他の言語でも同じことができます。
おまけ①：勉強カリキュラム作成
質問内容：
「私はプログラミング初心者です。Python言語を3か月で習得したいです。学習カリキュラムを作成してください。使用する参考文献も教えてください」
上記の質問を投げかけると以下のように一週間ごとにカリキュラムを提案してくれます。
Pythonのプログラミング初心者向けの学習カリキュラムをご提供します。
第1週: 基本概念の理解
Pythonの基本概念の理解
・Pythonの基本的なデータ型 (数値、文字列、ブール値) の操作方法の学習
・Pythonの制御フロー (if文、forループ、whileループ) の学習
参考文献
Python 入門教材 | Python.jp
Python チュートリアル - Python 3.x 日本語リファレンス
第2週: 関数の作成とファイルの操作
関数の作成と使用方法の学習
ファイルの読み込みと書き込みの方法の学習
参考文献
Python で学ぶ関数型プログラミング入門
Python ファイル入出力入門 | Codecademy
（以下略）
おまけ②：練習問題作成
ある程度知識が入ったところで、実践をしたい場合は以下のように質問を投げかけ練習問題を作成してもらうことも可能です。
質問内容：
「PythonのIf文を使用した練習問題を作成してください」
以下にPythonのIf文を使用した練習問題をいくつか提供します。問題の難易度は易しめから難しめまで様々ですので、自分のレベルに合わせて取り組んでください。
問題1：数の比較
2つの数値を入力し、どちらが大きいかを比較するプログラムを書いてください。ただし、入力される数値は整数とします。
問題2：時給計算
時給と労働時間を入力し、その人が1週間で稼ぐことができる金額を計算するプログラムを書いてください。ただし、1日の労働時間が8時間を超えた場合には、残業代として時給の1.5倍を加算することとします。
問題3：平均点の計算
数学、英語、理科の3科目の点数を入力し、その平均点を計算して表示するプログラムを書いてください。ただし、平均点が60点以上の場合には「合格」と表示し、それ以外の場合には「不合格」と表示することとします。
問題4：曜日判定
曜日を表す文字列を入力し、平日であれば「平日です」と表示し、土日であれば「休日です」と表示するプログラムを書いてください。
問題5：年齢判定
年齢を入力し、年齢に応じたメッセージを表示するプログラムを書いてください。年齢が18歳未満の場合には「未成年です」と表示し、18歳以上65歳未満の場合には「成人です」と表示し、65歳以上の場合には「高齢者です」と表示することとします。
練習問題を解き終わった場合、ChatGPTにソースコードをそのまま添付して採点してもらえます。
質問内容：
問題1のソースコードです。
正解でしょうか
x = 5
y = 10
z = x + y
print("xとyの和は", z, "です")
提出されたソースコードは、問題1の条件を正しく実装しています。正解として採点します。
間違ったコードを提出した際は修正点を指摘してくれます。
質問内容：
問題1のソースコードです。 正解でしょうか
x = 5
y = 10
z = x + y print("xとyの和は", z, です")
提出されたソースコードには、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より、皆様のご応募お待ちしております。
この記事が気に入ったらサポートをしてみませんか？