こんにちは。Web系エンジニアのカズです。
今回はChatGptを使用して「タイピング練習アプリ」を作成してみました。
使用言語はHTML,CSS,Javascriptです。
ChatGptは大変便利ですが、稀に思ったように動作しないエラーを含んだプログラムを組んでしまうこともあります。
そのようなエラーをどう解決してアプリを作成したのか。
ChatGptを使用したアプリ作成の流れを記事にして、まとめました。
ChatGptでプログラミングをしたい方は参考にしてください。
ChatGPTの概要
ChatGPTは、OpenAIが開発した自然言語処理モデルです。
このモデルは、テキストベースの対話を通じてユーザーとコミュニケーションを取ることができます。
ChatGPTは、質問応答、テキスト生成、テキストの要約など、さまざまなタスクに使用できる強力なツールです。
ChatGPTでプログラミングができるメリット
ChatGPTをプログラミングに活用するメリットは次のとおりです。
1.スピードと効率性
ChatGPTを使用することで、コーディングの労力と時間を節約できます。
簡単なコードや特定のプログラミングタスクを迅速に実行できます。
2.プログラミングのサポート
ChatGPTはプログラミングの質問に答えたり、コードの例を提供したりすることができます。
初学者からエキスパートまで、幅広いプログラマーに役立ちます。
3.アイデアのブレスト
ChatGPTはアイデアの生成や設計にも役立ちます。
プロジェクトのアーキテクチャやアルゴリズムの提案を得るのに役立ちます。
ChatGPTでのプログラミングにエラーが発生する場合
ChatGPTを使用してプログラミングする際には、次のような状況でエラーが発生することがあります。
1.誤解
ChatGPTはユーザーの要求を誤解することがあります。文脈に関する情報が不足している場合、意図しないコードや不正確な情報を提供する可能性があります。
2.不完全なコード
ChatGPTは一度に提供できる情報に制限があるため、完全なコードの提供が難しい場合があります。コード断片やアドバイスを受け取った後、ユーザーはコードを自身で調整する必要があります。
3.セキュリティ上の懸念
ChatGPTはセキュリティに関する質問や、悪意あるコードのリクエストに応じてしまう可能性があるため、セキュリティ上の注意が必要です。
エラーの場合の対処法
ChatGPTでエラーが発生した場合、以下の手順を試すことができます。
1.明確な質問
質問や要求をできるだけ明確にし、具体的な情報を提供します。
2.コードの調整
ChatGPTから提供されたコードに調整を加え、問題を修正します。
3.セキュリティへの配慮
セキュリティ上の懸念がある場合、その旨を説明し、セキュアなコードを求めます。
ChatGptを使用して「タイピング練習アプリ」を作成
では作成した流れを、書いていきます。
まず、ChatGptに下記のメッセージをしてプログラミングを依頼しました。
以下の仕様でタイピング練習アプリを作成してください。
①html,css,javascriptで作成してください。
②問題は一回スタートするごとに10問です。
③10問正解すればクリアのアラートを表示してください。
④問題の用語は英語で20用語用意してください。その中から10用語ランダムに選んで問題を出題してください。
⑤10問の中で同じ用語が重複しないようにしてください。
ChatGpt解答内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイピング練習アプリ</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#question {
font-size: 24px;
margin: 20px;
}
#input {
font-size: 18px;
padding: 10px;
}
</style>
</head>
<body>
<h1>タイピング練習アプリ</h1>
<div id="question"></div>
<input type="text" id="input" autofocus>
<script>
const words = ["apple", "banana", "cherry", "dog", "elephant", "frog", "grape", "honey", "igloo", "jungle", "kiwi", "lemon", "monkey", "orange", "parrot", "quail", "rabbit", "strawberry", "tiger"];
let currentWordIndex = 0;
let correctCount = 0;
// ランダムに問題を選択する関数
function getRandomWords() {
const shuffledWords = [...words];
for (let i = shuffledWords.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffledWords[i], shuffledWords[j]] = [shuffledWords[j], shuffledWords[i]];
}
return shuffledWords.slice(0, 10); // ランダムに10用語選択
}
// 次の問題を表示する関数
function showNextQuestion() {
if (currentWordIndex === 10) {
alert("クリア!正解数: " + correctCount);
currentWordIndex = 0;
correctCount = 0;
}
const words = getRandomWords();
const currentWord = words[currentWordIndex];
document.getElementById("question").textContent = currentWord;
currentWordIndex++;
}
// 初期化
showNextQuestion();
// タイピングの正誤判定
document.getElementById("input").addEventListener("input", function (event) {
const currentWord = document.getElementById("question").textContent;
const userInput = event.target.value.trim();
if (userInput === currentWord) {
correctCount++;
event.target.value = ""; // 入力欄をクリア
showNextQuestion();
}
});
</script>
</body>
</html>
このコードは、指定された仕様に従ってタイピング練習アプリを作成します。
アプリはランダムに選択された10の英単語を表示し、ユーザーが正確にタイプすると次の問題に進みます。
全ての問題に正解すると、クリアのアラートが表示されます。
同じ用語が重複しないようになっています。
画面動作確認したところ不具合のエラー
実際にこのコードを画面で確認したところ、「重複しないでタイピング用語を出してほしい」という要求が意図したとおり動作していませんでした。
なので、シンプルにもう一度その件をchatgptに修正してもらうように要求しました。
ChatGptにメッセージ
完成画面
更に仕様を追加する(ストップフォッチ機能を加える)
これでも十分なのですが、更に仕様を加えてより良いアプリにしたいと思います。
このコードに対してストップフォッチ機能を加えます。
もう一度chatgptに依頼をします。
ChatGptにメッセージ
以下の仕様でタイピング練習アプリを作成してください。
①html,css,javascriptで作成してください。
②問題は一回スタートするごとに10問です。
③10問正解すればクリアのアラートを表示してください。
④問題の用語は英語で20用語用意してください。その中から10用語ランダムに選んで問題を出題してください。
⑤10問の中で同じ用語が重複しないようにしてください。
⑥ストップウォッチ機能をつけてください。
⑦スタートボタンを作成してください
⑧スタートボタンを押すと時間が表示されるようにしてください。
⑨10問正解してクリアするとストップフォッチを止めるようにしてください
ChatGpt解答内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイピング練習アプリ</title>
<style>
/* スタイリング */
body {
font-family: Arial, sans-serif;
text-align: center;
}
#word {
font-size: 2em;
margin: 20px 0;
}
#input {
font-size: 1.5em;
padding: 10px;
width: 300px;
}
#startButton {
font-size: 1.2em;
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>タイピング練習アプリ</h1>
<div id="word"></div>
<input type="text" id="input" placeholder="ここにタイプしてください">
<p id="result"></p>
<button id="startButton">スタート</button>
<p id="stopwatch"></p>
<script>
const words = ["apple", "banana", "cherry", "dog", "elephant", "flower", "grape", "horse", "ice cream", "jacket", "kangaroo", "lemon", "monkey", "noodle", "orange", "penguin", "quokka", "rabbit", "strawberry", "turtle"];
let currentIndex = 0;
let correctCount = 0;
let stopwatchInterval;
let stopwatchSeconds = 0;
const wordDisplay = document.getElementById('word');
const inputField = document.getElementById('input');
const resultDisplay = document.getElementById('result');
const startButton = document.getElementById('startButton');
const stopwatchDisplay = document.getElementById('stopwatch');
function getRandomWords() {
const selectedWords = [];
while (selectedWords.length < 10) {
const randomIndex = Math.floor(Math.random() * words.length);
const randomWord = words[randomIndex];
if (!selectedWords.includes(randomWord)) {
selectedWords.push(randomWord);
}
}
return selectedWords;
}
const selectedWords = getRandomWords();
function displayNextWord() {
if (currentIndex < selectedWords.length) {
wordDisplay.textContent = selectedWords[currentIndex];
inputField.value = '';
} else {
wordDisplay.textContent = '';
inputField.value = '';
resultDisplay.textContent = 'クリア!';
clearInterval(stopwatchInterval);
}
}
inputField.addEventListener('input', () => {
const typedWord = inputField.value.trim().toLowerCase();
if (typedWord === selectedWords[currentIndex]) {
currentIndex++;
correctCount++;
displayNextWord();
}
});
startButton.addEventListener('click', () => {
currentIndex = 0;
correctCount = 0;
selectedWords = getRandomWords();
displayNextWord();
resultDisplay.textContent = '';
clearInterval(stopwatchInterval);
stopwatchSeconds = 0;
updateStopwatchDisplay();
stopwatchInterval = setInterval(updateStopwatchDisplay, 1000);
});
function updateStopwatchDisplay() {
stopwatchDisplay.textContent = `タイム: ${stopwatchSeconds}秒`;
stopwatchSeconds++;
}
</script>
</body>
</html>
このコードでは、新たに「スタート」ボタンが追加され、ボタンをクリックするとストップウォッチがスタートします。
10問全て正解するとストップウォッチが停止し、クリアメッセージが表示されます。
画面動作確認するとスタート押下時にエラー
画面を確認してスタートを押すとエラーがでたので修正してもらいます。
ChatGptに再度メッセージ
スタートボタンを押すと下記のエラーが出るので修正してください。
Uncaught TypeError: Assignment to constant variable.
at HTMLButtonElement.<anonymous>
ChatGpt最終返答結果
selectedWords
を再代入する必要があるため、let
で宣言して修正する必要があります。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>タイピング練習アプリ</title>
<style>
/* スタイリング */
body {
font-family: Arial, sans-serif;
text-align: center;
}
#word {
font-size: 2em;
margin: 20px 0;
}
#input {
font-size: 1.5em;
padding: 10px;
width: 300px;
}
#startButton {
font-size: 1.2em;
padding: 10px 20px;
margin-top: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>タイピング練習アプリ</h1>
<div id="word"></div>
<input type="text" id="input" placeholder="ここにタイプしてください">
<p id="result"></p>
<button id="startButton">スタート</button>
<p id="stopwatch"></p>
<script>
const words = ["apple", "banana", "cherry", "dog", "elephant", "flower", "grape", "horse", "ice cream", "jacket", "kangaroo", "lemon", "monkey", "noodle", "orange", "penguin", "quokka", "rabbit", "strawberry", "turtle"];
let currentIndex = 0;
let correctCount = 0;
let stopwatchInterval;
let stopwatchSeconds = 0;
const wordDisplay = document.getElementById('word');
const inputField = document.getElementById('input');
const resultDisplay = document.getElementById('result');
const startButton = document.getElementById('startButton');
const stopwatchDisplay = document.getElementById('stopwatch');
function getRandomWords() {
const selectedWords = [];
while (selectedWords.length < 10) {
const randomIndex = Math.floor(Math.random() * words.length);
const randomWord = words[randomIndex];
if (!selectedWords.includes(randomWord)) {
selectedWords.push(randomWord);
}
}
return selectedWords;
}
const selectedWords = getRandomWords();
function displayNextWord() {
if (currentIndex < selectedWords.length) {
wordDisplay.textContent = selectedWords[currentIndex];
inputField.value = '';
} else {
wordDisplay.textContent = '';
inputField.value = '';
resultDisplay.textContent = 'クリア!';
clearInterval(stopwatchInterval);
}
}
inputField.addEventListener('input', () => {
const typedWord = inputField.value.trim().toLowerCase();
if (typedWord === selectedWords[currentIndex]) {
currentIndex++;
correctCount++;
displayNextWord();
}
});
startButton.addEventListener('click', () => {
currentIndex = 0;
correctCount = 0;
selectedWords = getRandomWords();
displayNextWord();
resultDisplay.textContent = '';
clearInterval(stopwatchInterval);
stopwatchSeconds = 0;
updateStopwatchDisplay();
stopwatchInterval = setInterval(updateStopwatchDisplay, 1000);
});
function updateStopwatchDisplay() {
stopwatchDisplay.textContent = `タイム: ${stopwatchSeconds}秒`;
stopwatchSeconds++;
}
</script>
</body>
</html>
コメント