ファンリピート社のブログFR note

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

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

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

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

ChatGPTとは?

ChatGPTのホーム画面
ChatGPT

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

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

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

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

ChatGPTでできること

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

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

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

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


外国語の勉強

Image by AI素材.com
Image by AI素材.com

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

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

ChatGPTにTOEICの問題について作成してもらう
ChatGPT

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

ChatGPTにTOEICの問題について、回答する
ChatGPT

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

簡単にWebサイトの制作

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

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

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

ChatGPTに簡易的なWebサイトを作成してほしいと聞く
ChatGPT

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

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

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

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

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

ChatGPTで生成されたHTMLをメモ帳で開く
メモ帳

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

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

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

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

index.htmlを開いてみる。

ChatGPTで作成されたWebサイト
ChatGPTで作成されたWebサイト

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

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

ChatGPTの始め方

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

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

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

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

ChatGPTのホーム画面
ChatGPT

ChatGPTをはじめてみる。

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

ChatGPTの登録画面
ChatGPT

Sign upで新規登録しよう

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

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

ChatGPTの新規登録画面
ChatGPTの新規登録画面

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

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

ChatGPTの新規チャット画面
ChatGPTのチャット画面

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

ChatGPTにこんにちはと聞く
ChatGPT

ChatGPTに似たサービス

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

  • Dialogflow
  • Watson Assistant
  • Cleverbot

Dialogflow

Dialogflowのホーム画面
Dialogflow

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

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

Google Cloud
Dialogflow | Google Cloud Easily add likelife conversational AI to your websites, applications, messaging platforms, and contact center with intuitive, advanced virtual agents.

Watson Assistant

Watson Assistantのホーム画面
Watson Assistant

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

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

あわせて読みたい
IBM watsonx Assistant バーチャル・アシスタント IBM watsonx Assistantは、あらゆるアプリケーション、デバイス、チャネルにわたって、顧客に迅速で一貫性のある的確な回答を提供します。

Cleverbot

clever botのホーム画面
Cleverbot

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

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

Cleverbot
Cleverbot Cleverbot - Chat with a bot about anything and everything - AI learns from people, in context, and imitates

プログラミングについて

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

例)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

開いてみます。

ChatGPTで作成されたTodo Listの画面
Todo List

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

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

ChatGPTで作成されたTodo Listの画面
Todo List

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

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

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

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

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

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

ChatGPTで作成されたTodo Listの画面
Todo List

Deleteボタンを押してみる。

ChatGPTで作成されたTodo Listの画面
Todo List

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

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

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

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

例えば先ほど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との対話を自分の好みに合わせて調整ができます。

プロンプトで投げてみた。


例でたこ焼きについて、大阪弁で教えてくださいと聞いてみました。

Me>##命令
あなたは大阪人です。下記の質問に大阪弁で答えてください。
##質問
たこ焼きについて教えてください。

ChatGPT>たこ焼きについて教えてください。
おおきに!たこ焼きって、大阪発祥の屋台食品やねん。小麦粉の生地にタコやネギ、天かすなんかを混ぜ
て、特殊なたこ焼き器で焼いてんねん。一般的に、たこ焼きはソースやマヨネーズ、青のりなんかをかけて食べ
るのが一般的で、醤油やお好みソース、塩なんかの味付けもあるで。たこ焼きは、海外でも人気があって、
日本の文化として知られてるねん。そして、たこ焼きは大阪のグルメの一つで、大阪にはたこ焼き専門店が
たくさんあるねん。
ChatGPT

大阪弁で返答してくれます。この下記のようなやり方では、どのような要件かどのような質問かというのが明確になりやすくなります。

##命令

あなたは大阪人です。下記の質問に大阪弁で答えてください。

##質問

たこ焼きについて教えてください。

プログラミングのエラーで、プロンプトを投げてみた。

他の例としては、プログラミングでエラー解決をしたい時にも使えます。

##エラー文

該当のコード


##やってほしいこと。
・エラーを解決してほしい。

・どのように解決したか教えてほしい。

Me>##エラー文

該当のコード

##やってほしいこと。
・エラーを解決してほしい。

・どのように解決したか教えてほしい。

ChatGPT>このコードには、JavaScriptのエラーがあります。以下は、エラーが含まれる行です。
javascript
//新しいタスクを追加したら、テキストボックスをクリアする
スクを削除する
これは、コメントの途中で突然文が切れてしまっているため、文法エラーが発生しています。コメントが終わっ
た後の行の文は、コメントとして解釈されないため、単純に誤ったJavaScriptコードとして処理されます。
エラーを解決するには、コメントの途中で文を切り離さずに、コメントを完全に削除するか、コメントの文法を
修正して、JavaScriptコードとして正しい形式にする必要があります。
正しいコード:
python
//新しいタスクを追加したら、テキストボックスをクリアする
input .value
ここでは、コメントを削除し、テキストボックスの値をクリアするためにiput.valueを空の文字列に設定
するように変更しました。
コメントを残したい場合は、以下のようにコメントを正しい形式に修正することができます。
修正後のコード:
javascript
//新しいスりを追加しにら、ヶキストボッ人をリrする
//スクを削除する
input .value :
ここでは、コメントの文法を修正し、コメントを維持しつつ、JavaScriptコードとして正しい形式に変更しまし
た。
ChatGPT

このような形で詳しく教えてくれるようになりました。

まとめ

今回はChatGPTで、アカウント作成~プロンプトについて説明いたしました。

まだリリースしたばかりのサービスとなるため、今後も新機能や大手Google、Microsoftなどのサービスと提携して、より様々なアプリがChatGPTによって、活用されそうですね。

メンバーを募集中!

当社ではお客様に向き合い、お客様の事業成功にコミットをできる仲間を募集しています。

正社員、インターンから副業まで、幅広く採用活動を進めております。プロジェクトマネージャーやシステムエンジニアとして当社のシステム開発業務に携わってみませんか?

当社と共に、業界トップを目指して挑戦したい方は未経験者から経験者まで広く募集しているので、ぜひエントリーをお待ちしています。

「システムを短納期かつ低予算で作成したい」
ローコード開発に興味がある
「煩雑なExcel管理から脱したい」
慣れ親しんだシステムを使って効率化したい
「大規模なシステム開発を行うためにPoCを行いたい」
「社内のDXを進めていきたい」
  • URLをコピーしました!

この記事を書いた人

株式会社ファンリピートのアバター

株式会社ファンリピート

FRnoteは株式会社ファンリピートのメンバーによって運営されている社内ブログです。ノーコード・ローコードの技術ブログを始めとして、最新のIT技術、業務で役立つノウハウなど様々なトピックをまとめています。


目次
閉じる