2023.03.15 2024.03.15

URLをコピーしました！

AIでプログラミング勉強?ChatGPTでの始め方～使い方まで

2024 3/15

こんにちは。ファンリピートの鳴海です。
今回は最近話題のChatGPTを活用してでの、プログラミング勉強方法やプロンプトの投げ方など説明していきます。

**「システムを短納期かつ低予算で作成したい」**
「**ローコード開発に興味がある**」

詳しく知りたい方はこちら！

ChatGPTとは？

ChatGPTとは、OpenAI社が開発したサービスとなります。

ChatGPT自体は2019年6月に登場していたのですが、不自然な会話内容が多く、それほど使えるものではありませんでした。

ですが、2022年11月に新しいモデル(ChatGPTで受け答えしてくれるAi)が登場してから、なんと公開6日で100万ユーザーを突破しています。

大体、TikTokが約1か月未満、Instagramが約2か月、YouTubeが約1年といった、皆さんが普段使っているサービスよりも異常に利用者が急増したとんでもないサービスです。

ChatGPTでできること

何でも屋さんですね。類似サービスとしてはYahoo知恵袋に近いと思います。

知恵袋では他人が答えてくれるようなサービスとなっていますが、ChatGPTでは受け取ったメッセージから解釈して、答えてくれます。

他にも下記の通りで色々なことをしてくれます。

外国語の勉強
簡単にWebサイトの制作
メール送信や議事録作成などなど…

外国語の勉強

英語や中国語など教材の作成や文章の添削、デートやビジネスシーンといったチャットでの会話、単語の学習などに使えます。

例)「TOEIC500点レベルの英文を作成してください」と投げてみた。

「問題1.A、問題2.B、問題3.Bですかね。」と回答してみた。

といった形で中々詳しく解説してくれます。(問題1を間違えた…。)

簡単にWebサイトの制作

Webサイトを作成したいけど、中々思いつかない。
テーマにそったWebサイトを生成してほしい。

などなどそういったことがあると思います。ChatGPTでもそういったことができちゃいます。

例)「簡単なWebサイトを作成してください。」

最初はできなさそうな回答を頂きましたが、ちゃっかりと回答してくれました。

返ってきたコードを使って、実際に作ってみます。

デスクトップでフォルダを作成する。

ChatGPTで生成されたコードを保存するために、デスクトップでフォルダを新規作成 — Desktop画面

メモ帳を開いて、HTMLコピペする。

index.htmlで作成したフォルダに保存する。

ChatGPTで生成されたコードをindex.htmlで保存する — index.htmlで保存

次にCSSをコピペして、style.cssで再度フォルダに保存する。

ChatGPTで生成されたコードをstyle.cssで保存する — style.cssで保存

index.htmlを開いてみる。

このようなWebサイトを作成してくれます。英語になっていますが投げる前に日本で作成してください。と質問したら文章が日本語のもので返ってきてくれます。

大体上級者で15分程度はかかってしまうものの、chatGPTをつかってしまうとほんとに1〜5分で終わってしまいますね。

ChatGPTの始め方

ここまで凄いサービスなのになんと無料で使えてしまいます！

有料版もあるのですがそちらは20$で、回答速度が早くなったり、早期アクセスが可能になっています。

ChatGPTのサイトにアクセスする。

下記のサイト、もしくはChatGPTと調べて頂いて、OpenAIというドメインのサイトを開いてください。
https://openai.com/blog/chatgpt

ChatGPTをはじめてみる。

Try ChatGPTという箇所をクリックすると、Log inかSign upを求められます。

Sign upで新規登録しよう

Sign upボタンを押すと、下記のような形でGoogleでのログインかメールでの新規登録ができます。

何回もメールアドレスでログインするのが面倒くさいという方はGoogleでの登録がおすすめです。

登録ができたら、早速チャットを投げてみよう。

登録ができてしまえば、もうChatGPTの世界に入れます。

例でこんにちはと投げてみると、下記のような感じで返ってきました。

ChatGPTに似たサービス

他にもAiと会話ができるサービスが様々あります。

Dialogflow
Watson Assistant
Cleverbot

Dialogflow

Dialogflowは、Googleが提供する自然言語処理ツールで、企業や開発者がチャットボットや音声アシスタントなどのインタラクティブなアプリケーションを開発するために使用されます。

また、簡単なインターフェースを備え、テキストまたは音声を認識して解釈ができます。また、Dialogflowは、複雑な対話を実現するためのAPIやツールを提供し、開発者がカスタマイズや拡張ができます。

Google Cloud

Dialogflow | Google Cloud Dialogflow は、自然言語理解と Google AI を活用して chatbot、音声 bot、仮想エージェントを開発するための包括的なプラットフォームです。

Watson Assistant

Watson Assistantは、IBMが提供する自然言語処理ツールで、企業や開発者がチャットボットや音声アシスタントなどのアプリケーションを作成するために使用されます。

また、高度な自然言語処理技術を活用して、ユーザーとの対話をより自然なものにできます。また、Watson Assistantは、簡単なインターフェースを備え、開発者がカスタマイズや拡張ができるようになっています。

Cleverbot

Cleverbotは、イギリスのRollo Carpenterが開発したチャットボットで、人工知能による会話ができ、過去に行われた会話を参照して、より自然な対話を実現ができます。

また、Cleverbotは、多言語対応も行っており、ユーザーが好きな言語で対話ができます。Cleverbotは、一般的な質問に答えるだけでなく、時には意外な返答することもあり、ユーザーにとって面白い体験を提供ができます。

プログラミングについて

プログラミング学習やエラーを解決したい時でも活用ができます。

例）JavaScriptでTodoを作成してください。

Me>JavascriptでTodoを作成してください。

ChatGPT>以下は、JavaScriptで作成したシンプルなTodoアプリケーションの例です。HTML/CSSの部分は省略しています。

javascript
Copy code
// Todoリストのデータ
let todos = [];

// Todoを追加する関数
function addTodo() {
const todoInput = document.getElementById("todo-input");
const todo = todoInput.value;
if (todo) {
todos.push(todo);
renderTodos();
todoInput.value = "";
}
}

// Todoを削除する関数
function deleteTodo(index) {
todos.splice(index, 1);
renderTodos();
}

// Todoリストをレンダリングする関数
function renderTodos() {
const todoList = document.getElementById("todo-list");
todoList.innerHTML = "";
todos.forEach((todo, index) => {
const listItem = document.createElement("li");
listItem.innerHTML = `${todo} <button onclick="deleteTodo(${index})">削除</button>`;
todoList.appendChild(listItem);
});
}

// ページが読み込まれたらTodoリストをレンダリングする
window.onload = renderTodos;
上記のコードでは、todosという配列にTodoのデータを格納し、addTodo()関数でTodoを追加し、deleteTodo()関数でTodoを削除します。renderTodos()関数は、TodoリストをHTMLに表示します。

HTML側では、Todoを入力する<input>要素、Todoリストを表示する<ul>要素、Todoを追加するボタンを配置します。

html
Copy code
<input type="text" id="todo-input">
<button onclick="addTodo()">追加</button>
<ul id="todo-list"></ul>
上記のコードを実行すると、ブラウザにシンプルなTodoアプリケーションが表示されます。Todoを入力して追加すると、Todoリストに表示され、削除ボタンを押すことで削除することができます。 — ChatGPT

このような感じでTodoアプリを作ってくれます。

実際にメモ帳にコピペして、todo.htmlで保存します。

ChatGPTで作成されたコードをメモ帳に貼り付けている画面 — todo.html

開いてみます。

このような感じで、簡単なTodoアプリを生成してくれます。

タスクを追加しても不具合も特にありません。

追加したい機能も教えてくれる。

先ほどのTodoアプリで、リストは追加されますが削除機能がありません。

こういった時でもChatGPTさんは対応してくれます。

例）Todoの削除機能も追加してください。

Me>Todoの削除機能も追加してください。 ChatGPT>以下は、削除ボタンを追加してTodoの削除機能を実装したものです。 html Copy code Todo List Todo List Add 削除ボタンが表示されるようになり、クリックするとそのタスクが削除されるようになっています。 — ChatGPT

返ってきたコードを置き換えて、再度開いてみる。

Deleteボタンを押してみる。

こういった形で削除機能も実装してくれます。

エラーの解決方法も教えてくれる。

エラー文がでてしまい、理由がわからないままエラー解決してくれるような記事を探したり、それでコードを貼り付けるといったことが度々あると思います。

エラー文がでている箇所を投げてみると、解決方法を教えてくれたり、修正した後のコードを教えてくれます。

例えば先ほどTodoアプリのコードの変数などをぐちゃぐちゃにしたり、一部削除してみます。

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>Todo List</title>

</head>

<body>

  <h1>Todo List</h1>

  <input type="text" id="new-task" placeholder="Add new task">

  <button id="add-task">Add</button>

  <ul id="task-list"></ul>

<script>

// ページが読み込まれたときに実行される

document.addEventListener("DOMContentLoaded", function() {

  // 追加ボタンを取得

  var addButton = document.getElementById("add-task");

  // 新しいタスクを入力するためのテキストボックスを取得

  var input = document.getElementById("new-task");

  // タスクリストを取得

  var taskList = document.getElementById("task-list");

  // 追加ボタンがクリックされたときの処理

  addButton.addEventListener("click", function() {

    // 新しいタスクを作成

    vaクに追加

    var delet

  }););

</script>

</body>

</html>

これで、聞いてみます。

Me><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="new-task" placeholder="Add new task">
<button id="add-task">Add</button>
<ul id="task-list"></ul>

<script>
// ページが読み込まれたときに実行される
document.addEventListener("DOMContentLoaded", function() {
// 追加ボタンを取得
var addButton = document.getElementById("add-task");
// 新しいタスクを入力するためのテキストボックスを取得
var input = document.getElementById("new-task");
// タスクリストを取得
var taskList = document.getElementById("task-list");

// 追加ボタンがクリックされたときの処理
addButton.addEventListener("click", function() {
// 新しいタスクを作成
vaクに追加
var delet
}););

</script>
</body>
</html>

エラーがでます。解決してください。

ChatGPT>エラーの原因は、JavaScriptのコードに文法エラーがあるためです。以下は、修正したコードです。

html
Copy code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="new-task" placeholder="Add new task">
<button id="add-task">Add</button>
<ul id="task-list"></ul>

<script>
// ページが読み込まれたときに実行される
document.addEventListener("DOMContentLoaded", function() {
// 追加ボタンを取得
var addButton = document.getElementById("add-task");
// 新しいタスクを入力するためのテキストボックスを取得
var input = document.getElementById("new-task");
// タスクリストを取得
var taskList = document.getElementById("task-list");

// 追加ボタンがクリックされたときの処理
addButton.addEventListener("click", function() {
// 新しいタスクを作成
var task = document.createElement("li");
// 新しいタスクにテキストを追加
task.innerText = input.value;
// タスクリストに新しいタスクを追加
taskList.appendChild(task);
// 新しいタスクを追加したら、テキストボックスをクリアする
input.value = "";
// 削除ボタンを作成して新しいタスクに追加
var deleteButton = document.createElement("button");
deleteButton.innerText = "Delete";
task.appendChild(deleteButton);
// 削除ボタンがクリックされたときの処理
deleteButton.addEventListener("click", function() {
// クリックされた削除ボタンの親要素であるタスクを削除する
taskList.removeChild(task);
});
});
});

</script>
</body>
</html>
エラーを解決し、Todoアプリが正常に動作するようになりました。 — ChatGPT

上記のような形で修正した箇所や修正後のコードを教えてくれます。

コードのデバッグやステップバイステップができる。

実際にコードを書いてみて、検証ツールでデバッグしたり、ステップバイステップでどのような動作かを確認することがあります。

ですが初心者としては処理がどのように行われているかわからない時があります。

そういった時でもChatGPTに投げてみると、教えてくれます。

例）下記のコードのAddを押した際にデバッグしてください。

Me>下記のコードのAddを押した際にデバッグしてください。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="new-task" placeholder="Add new task">
<button id="add-task">Add</button>
<ul id="task-list"></ul>

<script>
// ページが読み込まれたときに実行される
document.addEventListener("DOMContentLoaded", function() {
// 追加ボタンを取得
var addButton = document.getElementById("add-task");
// 新しいタスクを入力するためのテキストボックスを取得
var input = document.getElementById("new-task");
// タスクリストを取得
var taskList = document.getElementById("task-list");

// 追加ボタンがクリックされたときの処理
addButton.addEventListener("click", function() {
// 新しいタスクを作成
var task = document.createElement("li");
// 新しいタスクにテキストを追加
task.innerText = input.value;
// タスクリストに新しいタスクを追加
taskList.appendChild(task);
// 新しいタスクを追加したら、テキストボックスをクリアする
input.value = "";
// 削除ボタンを作成して新しいタスクに追加
var deleteButton = document.createElement("button");
deleteButton.innerText = "Delete";
task.appendChild(deleteButton);
// 削除ボタンがクリックされたときの処理
deleteButton.addEventListener("click", function() {
// クリックされた削除ボタンの親要素であるタスクを削除する
taskList.removeChild(task);
});
});
});

</script>
</body>
</html>

ChatGPT>このコードは、ToDoリストを作成するためのHTMLページであり、新しいタスクを追加して削除することができ
ます。
以下は、このコードの動作の説明です。
1.ページが読み込まれたときに、以下の3つの要素を取得します。
追加ボタン
新しいタスクを入力するためのテキストボックス
タスクリスト
2.追加ボタンがクリックされたときに、以下の処理を実行します。
新しいタスクを作成する
新しいタスクにテキストを追加する
タスクリストに新しいタスクを追加する
テキストボックスをクリアする
削除ボタンを作成して新しいタスクに追加する
削除ボタンがクリックされたときに、クリックされた削除ボタンの親要素であるタスクを削除する
以下は、このコードのデバックのためのチェックリストです。
1. HTMLタグが正しく閉じられているか確認します。
2.ページが読み込まれたときに、以下の3つの要素が正しく取得されているか確認します。
追加ボタン
新しいタスクを入力するためのテキストボックス
タスクリスト
3.追加ボタンがクリックされたときに、以下の処理が正しく実行されているか確認します。
新しいタスクが正しく作成されているか確認します。
新しいタスクに正しいテキストが追加されているか確認します。
タスクリストに新しいタスクが正しく追加されているか確認します。
テキストボックスが正しくクリアされているか確認します。
削除ボタンが正しく作成されて新しいタスクに追加されているか確認します。
削除ボタンがクリックされたときに、正しいタスクが削除されているか確認します。
以上のチェックリストを使って、コードをデバックすることができます。 — ChatGPT

上記のような形でデバッグしてくれます。
使い方としては、Codepenや参考にしたコードがあった際にそれぞれどのような処理が行われているかを聞けます。

ほしい回答が得られない場合

稀にChatGPTに聞いてみても、中々欲しい回答が得られない場合があります。

そういった時は下記の点で対応してみてください。

プロンプトを使ってみる。
聞き方を変えてみる。
一度他のサイトで調べてみる。

それぞれ対応してみることで、ChatGPT側でどのような回答してほしいかというのが明確になりやすく、望んでいる回答を得ることが可能です。

プロンプトを使ってみる。

プロンプトとはそもそも何か。

ユーザーがChatGPTとの対話を開始するときに最初に提示されるテキストのことです。

プロンプトは、ユーザーがChatGPTに尋ねる質問や会話のトピックを指定し、そのトピックに関する回答や情報を提供するための出発点となります。

またプロンプトに応じて、適切な応答を生成するために学習された大規模な言語モデルを使用します。ユーザーは、プロンプトをカスタマイズしたり、異なるプロンプトを使用することで、ChatGPTとの対話を自分の好みに合わせて調整ができます。