ChatGPT Plus（有料版）を利用した効率的な開発方法

ねこねこ

2023年3月30日 17:22

2023/03 時点で、ChatGPT には、無料版（GPT-3.5 モデル）と有料版（応答速度が向上した GPT-3.5 モデルと、精度が向上した GPT-4 の２種類が利用可能）が提供されています。

ChatGPT の GPT-3.5 モデルと、精度が向上した GPT-4 を適切に使い分けることで、開発効率を段違いに向上させることができます。

※この記事は、有料版の ChatGPT Plus を利用している前提となります。

この記事では、GPT-4 のレスポンス回数の制約（2023/03/30 現在、3時間ごとに25レスポンスという制約があります）も考慮して、効率的な開発を進める方法を提供します。

GPT-3.5 と GPT-4 の違い

別記事で書いていますが、一言で言うと精度が段違いです。
GPT-4 は学習データも 2021年までのものが利用されているため、情報も比較的正確になっており、さらに自然なレスポンスが得られます。

GPT-3.5 でもそれなりのコードは書ける

例えば、何かの開発を始める時に適当に投げかけてもコードが返ってきます。以下は GPT-3.5 で試しています。

出勤時の打刻管理をするシステムを作りたいです。まずは html と javascript で書いてみて欲しいです。

質問文

はい、承知しました。以下に、出勤時の打刻管理をするための簡単なHTMLとJavaScriptのコード例を提供いたします。

まずはHTMLファイルを作成します。

回答（コードは別途記載）

<!DOCTYPE html>
<html>
  <head>
    <title>出勤打刻システム</title>
  </head>
  <body>
    <h1>出勤打刻システム</h1>
    <p>現在時刻： <span id="currentTime"></span></p>
    <button onclick="clockIn()">出勤</button>
    <button onclick="clockOut()">退勤</button>
    <script src="script.js"></script>
  </body>
</html>

次に、JavaScriptファイルを作成します。ここでは、ユーザーが出勤ボタンまたは退勤ボタンを押すと、現在時刻を取得して、その時刻を表示するだけのシンプルなコード例を示します。

回答（コードは別途記載）

function clockIn() {
  var now = new Date();
  var currentTime = now.toLocaleString();
  document.getElementById("currentTime").innerHTML = currentTime;
}

function clockOut() {
  var now = new Date();
  var currentTime = now.toLocaleString();
  document.getElementById("currentTime").innerHTML = currentTime;
}

以上が簡単な出勤打刻システムのコード例です。実際のシステムには、もっと多くの機能が必要かもしれませんが、これは初めて作る場合の参考になるかもしれません。

回答

このコード、動きます。
GPT-3.5 でも、小さくはじめて要件を積み上げていくだけでも十分活用できそうです。

GPT-3.5 と GPT-4 のコードの精度の差

では、GPT-4 で同じ要件で作ってもらいましょう。

以下は、HTMLとJavaScriptを使って出勤時の打刻管理システムの基本的な機能を実装したコード例です。このコードは、従業員が出勤時刻を記録し、記録された出勤時刻を表示する機能が含まれています。

まず、index.htmlというファイルを作成して、以下のコードを貼り付けてください。

回答（コードは別途記載）

<!DOCTYPE html>
<html lang="ja">

<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;
      max-width: 600px;
      margin: 0 auto;
      padding: 1rem;
    }

    h1 {
      text-align: center;
    }

    button {
      font-size: 1rem;
      padding: 0.5rem 1rem;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <h1>出勤時刻管理システム</h1>
  <div id="app">
    <p>
      <label for="employee-name">従業員名：</label>
      <input type="text" id="employee-name" />
    </p>
    <button id="record-attendance">出勤時刻を記録する</button>
    <h2>記録された出勤時刻</h2>
    <ul id="attendance-list"></ul>
  </div>
  <script src="attendance.js"></script>
</body>

</html>

次に、attendance.jsというファイルを作成して、以下のコードを貼り付けてください。

回答（コードは別途記載）

document.getElementById('record-attendance').addEventListener('click', function() {
  const employeeName = document.getElementById('employee-name').value;
  const timestamp = new Date().toLocaleString();

  if (!employeeName) {
    alert('従業員名を入力してください。');
    return;
  }

  const attendanceList = document.getElementById('attendance-list');
  const listItem = document.createElement('li');
  listItem.textContent = `出勤時刻: ${timestamp} | 従業員名: ${employeeName}`;
  attendanceList.appendChild(listItem);

  document.getElementById('employee-name').value = '';
});

なんと、複数人が利用する前提のシステムを作ってくれました。正直かなりビビってます。

ChatGPTを用いて開発する際のポイント

ここから先は

947字 / 3画像

¥ 300

ログイン

この記事が気に入ったらサポートをしてみませんか？