【chatGPT】AIに簡単なプログラミングさせてみたら凄かった

初めに

こんにちは。

今回はAIに指示だけで簡単なプログラミングをさせてみました。

最終的な完成品はコチラ

年月
::
日	月	火	水	木	金	土

これをほとんど*1指示だけで作ってくれました。

凄いですね！

カレンダーを作ってもらう

まず最初は今日の日時が赤色になるカレンダーを作ってもらいます。

指示

「htmlとjavaScriptとcssで今日の日時が赤色になるカレンダーのコードを省略せずに繋げて出力して」

AI

「Sure, here is an example of a calendar with the current date highlighted in red using HTML, CSS, and JavaScript:

<!-- HTML for the calendar structure -->
<table id="calendar">
  <thead>
    <tr>
      <th>Sun</th>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
    </tr>
  </thead>
  <tbody id="calendar-body"></tbody>
</table>

<!-- CSS for styling the calendar -->
<style>
  #calendar {
    border-collapse: collapse;
    width: 100%;
  }

  #calendar th,
  #calendar td {
    border: 1px solid #ddd;
    text-align: center;
    padding: 8px;
  }

  #calendar td.today {
    background-color: red;
  }
</style>

<!-- JavaScript for generating the calendar and highlighting the current date -->
<script>
  // Get the current date
  const today = new Date();

  // Get the current month and year
  const month = today.getMonth();
  const year = today.getFullYear();

  // Get the number of days in the current month
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  // Get the day of the week of the first day of the month
  const firstDayOfMonth = new Date(year, month, 1).getDay();

  // Get a reference to the calendar table body
  const calendarBody = document.getElementById("calendar-body");

  // Create a table row for each week of the month
  for (let i = 0; i < Math.ceil((daysInMonth + firstDayOfMonth) / 7); i++) {
    const row = document.createElement("tr");

    // Create a table cell for each day of the week
    for (let j = 0; j < 7; j++) {
      const cell = document.createElement("td");

      // Calculate the day of the month for the cell
      const dayOfMonth = 7 * i + j - firstDayOfMonth + 1;

      // If the day is within the current month, set the cell content to the day of the month
      // and add the "today" class if it is the current date
      if (dayOfMonth > 0 && dayOfMonth <= daysInMonth) {
        cell.textContent = dayOfMonth;
        if (dayOfMonth === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
          cell.classList.add("today");
        }
      }

      row.appendChild(cell);
    }

    calendarBody.appendChild(row);
  }

This code creates an HTML table element with a thead element containing the day of the week headers, and a tbody element for the calendar days. It uses CSS to style the table and highlight the current date with the today class. The JavaScript code generates the calendar by creating a table row for each week of the」

解説付きで出力してくれました。

解説を翻訳すると

「このコードは、曜日のヘッダーを含む thead 要素とカレンダーの日付を表す tbody 要素を持つ HTML テーブル要素を作成します。 CSS を使用して表のスタイルを設定し、today クラスで現在の日付を強調表示します。 JavaScript コードは、週ごとに表の行を作成してカレンダーを生成します。」

早速動かしてみると

上記の画像のようにカレンダーが表示されました！

指示だけで凄い！！！

デジタル時計付き

次は先程のコードにデジタル時計を追加してもらいます。

指示

「いいね！先程のコードにデジタル時計をカレンダー上部の真ん中に表示するhtmlとjavascriptを追加して」

AI

「Certainly! Here is an example of how you can display a digital clock in the center of the calendar header using HTML and JavaScript:

<!-- HTML for the calendar structure -->
<table id="calendar">
  <thead>
    <tr>
      <th colspan="7" id="clock">
        <span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span>
      </th>
    </tr>
    <tr>
      <th>Sun</th>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
    </tr>
  </thead>
  <tbody id="calendar-body"></tbody>
</table>

<!-- CSS for styling the calendar and clock -->
<style>
  #calendar {
    border-collapse: collapse;
    width: 100%;
  }

  #calendar th,
  #calendar td {
    border: 1px solid #ddd;
    text-align: center;
    padding: 8px;
  }

  #calendar td.today {
    background-color: red;
  }

  #clock {
    text-align: center;
    font-size: 24px;
  }
</style>

<!-- JavaScript for generating the calendar, updating the clock, and highlighting the current date -->
<script>
  // Get the current date and time
  const today = new Date();

  // Get the current month and year
  const month = today.getMonth();
  const year = today.getFullYear();

  // Get the number of days in the current month
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  // Get the day of the week of the first day of the month
  const firstDayOfMonth = new Date(year, month, 1).getDay();

  // Get references to the clock elements and the calendar table body
  const hoursElement = document.getElementById("hours");
  const minutesElement = document.getElementById("minutes");
  const secondsElement = document.getElementById("seconds");
  const calendarBody = document.getElementById("calendar-body");

  // Create a table row for each week of the month
  for (let i = 0; i < Math.ceil((daysInMonth + firstDayOfMonth) / 7); i++) {
    const row = document.createElement("tr");

    // Create a table cell for each day of the week
    for (let j = 0; j < 7; j++) {
      const cell = document.createElement("td");

      // Calculate the day of the month for the cell
      const dayOfMonth = 7 * i + j - firstDayOfMonth + 1;

      // If the day is within the current month, set the cell content to the day of the month
      // and add the "today" class if it is the current date
      if (dayOfMonth > 0 && dayOfMonth <= daysInMonth) {
        cell.textContent = dayOfMonth;
        if (dayOfMonth === today.getDate() && month ===

」

中途半端に出力されてしまいました。

続きを書いてもらいましょう。

指示「

続きを書いて」

AI

「Certainly! Here is the rest of the code:

today.getMonth() && year === today.getFullYear()) {
          cell.classList.add("today");
        }
      }

      row.appendChild(cell);
    }

    calendarBody.appendChild(row);
  }

  // Update the clock every second
  setInterval(() => {
    // Get the current time
    const now = new Date();

    // Update the clock elements with the current hours, minutes, and seconds
    hoursElement.textContent = now.getHours().toString().padStart(2, "0");
    minutesElement.textContent = now.getMinutes().toString().padStart(2, "0");
    secondsElement.textContent = now.getSeconds().toString().padStart(2, "0");
  }, 1000);
</script>

2つに分かれてですがしっかり出力してくれました。

解説を翻訳すると

「このコードは、setInterval 関数を使用して、1 秒ごとに現在の時間、分、および秒でクロック要素を更新します。 また、padStart メソッドを使用して、時、分、秒が常に 2 桁で表示されるようにします (例: "9" ではなく "09")。

これが役立つことを願っています！ ご不明な点がある場合や、さらにサポートが必要な場合はお知らせください。」

動かしてみると

ちゃんと時計が表示されています。

凄い！！！

デジタル時計＆年月付き

先程のコードに年月を表示してもらいます。

指示

「最高！先程のコードにデジタル時計とカレンダーの間に独立した今現在の年と月を「〇〇年〇〇月」のように表示するhtmlとjavascriptを追加して」

<!-- HTML for the calendar structure -->
<table id="calendar">
  <thead>
    <tr>
      <th colspan="7" id="current-month">
        <span id="year"></span>年<span id="month"></span>月
      </th>
    </tr>
    <tr>
      <th colspan="7" id="clock">
        <span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span>
      </th>
    </tr>
    <tr>
      <th>Sun</th>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
    </tr>
  </thead>
  <tbody id="calendar-body"></tbody>
</table>

<!-- CSS for styling the calendar and clock -->
<style>
  #calendar {
    border-collapse: collapse;
    width: 100%;
  }

  #calendar th,
  #calendar td {
    border: 1px solid #ddd;
    text-align: center;
    padding: 8px;
  }

  #calendar td.today {
    background-color: red;
  }

  #current-month {
    text-align: center;
    font-size: 24px;
  }

  #clock {
    text-align: center;
    font-size: 24px;
  }
</style>

<!-- JavaScript for generating the calendar, updating the clock and current month, and highlighting the current date -->
<script>
  // Get the current date and time
  const today = new Date();

  // Get the current month and year
  const month = today.getMonth();
  const year = today.getFullYear();

  // Get the number of days in the current month
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  // Get the day of the week of the first day of the month
  const firstDayOfMonth = new Date(year, month, 1).getDay();

  // Get references to the current month elements, clock elements, and the calendar table body
  const yearElement = document.getElementById("year");
  const monthElement = document.getElementById("month");
  const hoursElement = document.getElementById("hours");
  const minutesElement = document.getElementById("minutes");
  const secondsElement = document.getElementById("seconds");
  const calendarBody = document.getElementById("calendar-body");

  // Set the current year and month elements to the current year and month
  yearElement.textContent = year;
  monthElement.textContent = month + 1;

  // Create a table row for each week of the month
  for (let i = 0; i < Math.ceil((daysInMonth + firstDayOfMonth) / 7); i++) {
    const row = document.createElement("tr");

    //

」

途中で終わってしまいました。

指示

「続きを書いて」

AI

「Certainly! Here is the rest of the code:

// Create a table cell for each day of the week
    for (let j = 0; j < 7; j++) {
      const cell = document.createElement("td");

      // Calculate the day of the month for the cell
      const dayOfMonth = 7 * i + j - firstDayOfMonth + 1;

      // If the day is within the current month, set the cell content to the day of the month
      // and add the "today" class if it is the current date
      if (dayOfMonth > 0 && dayOfMonth <= daysInMonth) {
        cell.textContent = dayOfMonth;
        if (dayOfMonth === today.getDate() && month === today.getMonth() && year === today.getFullYear()) {
          cell.classList.add("today");
        }
      }

      row.appendChild(cell);
    }

    calendarBody.appendChild(row);
  }

  // Update the clock every second
  setInterval(() => {
    // Get the current time
    const now = new Date();

    // Update the clock elements with the current hours, minutes, and seconds
    hoursElement.textContent = now.getHours().toString().padStart(2, "0");
    minutesElement.textContent = now.getMinutes().toString().padStart(2, "0");
    secondsElement.textContent = now.getSeconds().toString().padStart(2, "0");
  }, 1000);
</script>

This code updates the year and month elements with the current year and month, and updates the clock elements with the current hours, minutes, and seconds every second using the setInterval function. It also uses the padStart method to ensure that the hours, minutes, and seconds are always displayed with two digits (e.g. "09" instead of "9").

I hope this helps! Let me know if you have any questions or need further assistance.」

出力してくれました。

説明を翻訳すると

「このコードは、setInterval 関数を使用して、年と月の要素を現在の年と月で更新し、時計の要素を現在の時、分、および秒で毎秒更新します。 また、padStart メソッドを使用して、時、分、秒が常に 2 桁で表示されるようにします (例: "9" ではなく "09")。

これが役立つことを願っています！ ご不明な点がある場合や、さらにサポートが必要な場合はお知らせください。」

動かしてみると

指示通りに表示されました！

最後に

指示だけで思い通りにコードを生成してくれて驚きました。

AIがプログラミングをする時代が来るかもしれませんね。

*1:曜日を日本語に変更