LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@pesysyon

【ChatGPT・初心者】体験レポ Vol.3

Posted at

こんにちは。東です。
ChatGPTに触れる機会があったのでそちらのレポを複数回に渡って投稿したいと思います。
基本、遊ぶように使うので「真面目な記事が欲しいよ！」
という方には何か違うかもしれません。ご了承ください！

Vol.1
Vol.2
はこちら！
良ければご覧ください

コードのサポートについて

ChatGPTで便利なものとしてはコード記述の修正・生成ができる様です。
先ずはChatGPTにhtml形式で自己紹介ページを作ってもらいました。

html形式でChatGPT自身の自己紹介ページのコードを生成してください。
日本語で記述し個人の蓄積されたデータは使わずChatGPT自身の情報だけにしてください。

そうすると以下のようにコードを生成してくれます。

自己紹介のサンプルコード 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPTについて</title>
    <style>
        body {
            font-family: "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }
        header {
            background: #007bff;
            color: #fff;
            padding: 1rem 0;
            text-align: center;
        }
        section {
            max-width: 800px;
            margin: 2rem auto;
            padding: 1rem;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1, h2 {
            color: #333;
        }
        footer {
            text-align: center;
            margin-top: 2rem;
            color: #666;
        }
    </style>
</head>
<body>
    <header>
        <h1>ChatGPTのページへようこそ</h1>
    </header>
    <section>
        <h2>ChatGPTについて</h2>
        <p>こんにちは！私はChatGPT、OpenAIが開発したAI言語モデルです。自然言語の理解と生成を得意とし、皆さんの質問やタスク、アイデアのサポートを行います。</p>
        <h2>できること</h2>
        <ul>
            <li>さまざまなトピックについての質問に答えたり、説明を提供したりします。</li>
            <li>ストーリーや詩のような創作活動をサポートします。</li>
            <li>プログラミングのコード作成やデバッグ、ソフトウェア開発の支援を行います。</li>
            <li>アイデアの生成や課題解決のブレインストーミングを手伝います。</li>
        </ul>
        <h2>制約事項</h2>
        <ul>
            <li>私が学習したデータに基づいて応答するため、最新情報や特定分野の専門知識が不足している場合があります。</li>
            <li>個人データやプライバシーに関する情報にはアクセスできません。</li>
            <li>正確な情報提供を心がけていますが、誤った回答をする場合があります。</li>
        </ul>
        <h2>お問い合わせ</h2>
        <p>ChatGPTに関するフィードバックやご質問がある場合は、OpenAIの公式ウェブサイトをご確認ください： <a href="https://openai.com" target="_blank">https://openai.com</a></p>
    </section>
    <footer>
        <p>&copy; 2025 OpenAI. All Rights Reserved.</p>
    </footer>
</body>
</html>

htmlファイルに転記して、ブラウザ上で見れるようにすると、
こんなシンプルな画面を生成してくれます。
Vol.1で聞いたような内容をまとめてくれますね。

image.png

今度は少し動きがあるようにJavaScriptで動作する 「電卓」 を作ってもらいました。
せっかくなので具体的に指定をしてみました。

以下の条件を満たした電卓機能が備わったコードを生成してください。
・JavaScript、htmlで記述されていること。
・入力された数字の加算、減算、乗算、除算ができること
・入力結果、計算が表示されること
・0から9の数字がクリニックで入力できること

するとこんなコードを生成してくれます。

計算機サンプルコード 

<!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;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f4f4f4;
    }
    .calculator {
      width: 300px;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .display {
      width: 100%;
      height: 50px;
      background: #f9f9f9;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 10px;
      font-size: 1.5rem;
      text-align: right;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .button {
      padding: 15px;
      font-size: 1.2rem;
      text-align: center;
      background: #e0e0e0;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }
    .button:hover {
      background: #d1d1d1;
    }
    .button.operation {
      background: #f39c12;
      color: white;
    }
    .button.operation:hover {
      background: #e67e22;
    }
    .button.equal {
      background: #27ae60;
      color: white;
      grid-column: span 4;
    }
    .button.equal:hover {
      background: #2ecc71;
    }
  </style>
</head>
<body>

<div class="calculator">
  <div id="display" class="display">0</div>
  <div class="buttons">
    <button class="button" onclick="appendNumber('7')">7</button>
    <button class="button" onclick="appendNumber('8')">8</button>
    <button class="button" onclick="appendNumber('9')">9</button>
    <button class="button operation" onclick="setOperation('/')">÷</button>
    <button class="button" onclick="appendNumber('4')">4</button>
    <button class="button" onclick="appendNumber('5')">5</button>
    <button class="button" onclick="appendNumber('6')">6</button>
    <button class="button operation" onclick="setOperation('*')">×</button>
    <button class="button" onclick="appendNumber('1')">1</button>
    <button class="button" onclick="appendNumber('2')">2</button>
    <button class="button" onclick="appendNumber('3')">3</button>
    <button class="button operation" onclick="setOperation('-')">−</button>
    <button class="button" onclick="appendNumber('0')">0</button>
    <button class="button" onclick="clearDisplay()">C</button>
    <button class="button operation" onclick="setOperation('+')">+</button>
    <button class="button equal" onclick="calculate()">=</button>
  </div>
</div>

<script>
  let currentInput = '';
  let previousInput = '';
  let operation = null;

  const display = document.getElementById('display');

  function appendNumber(number) {
    if (currentInput.length >= 10) return;
    if (currentInput === '0') {
      currentInput = number;
    } else {
      currentInput += number;
    }
    updateDisplay();
  }

  function setOperation(op) {
    if (currentInput === '') return;
    if (previousInput !== '') calculate();
    operation = op;
    previousInput = currentInput;
    currentInput = '';
  }

  function calculate() {
    let result;
    const prev = parseFloat(previousInput);
    const curr = parseFloat(currentInput);
    if (isNaN(prev) || isNaN(curr)) return;
    switch (operation) {
      case '+':
        result = prev + curr;
        break;
      case '-':
        result = prev - curr;
        break;
      case '*':
        result = prev * curr;
        break;
      case '/':
        result = prev / curr;
        break;
      default:
        return;
    }
    currentInput = result.toString();
    operation = null;
    previousInput = '';
    updateDisplay();
  }

  function clearDisplay() {
    currentInput = '';
    previousInput = '';
    operation = null;
    updateDisplay();
  }

  function updateDisplay() {
    display.textContent = currentInput || '0';
  }
</script>

</body>
</html>

これをまたしてもhtmlファイルに転記するだけで
ブラウザ上で動作する計算機を作ってくれました。
（ドシンプル）
image.png

もちろん見た目だけでなく動いてくれます。
1＋
image.png
9を入力し＝を押すと...
image.png
10と計算してくれる！
image.png

など！
とても便利ですね。

さらにChatGPTはサポートしてくれるものなので、
コードを思い通りに編集もしてくれます。

ChatGPTには申し訳ないですが上の計算機のコードを自分で作ったものとして、メッセージ欄に貼り付け、以下のように編集するようにお願いしてみました。

～～計算機サンプルコード～～を記載
上記は電卓のコードです。
このコードを以下のように動作するように編集してください。
・数字をローマ数字に変更してください。
・「+」「-」「÷」「×」の選択状態が分かるように、電卓上部に「+」「-」「÷」「×」を表示するようにしてください。

するとこんなコードを生成してくれます。

計算機サンプルコードVer2 

<!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;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f4f4f4;
    }
    .calculator {
      width: 300px;
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    .display {
      width: 100%;
      height: 50px;
      background: #f9f9f9;
      border: 1px solid #ccc;
      border-radius: 5px;
      margin-bottom: 10px;
      font-size: 1.5rem;
      text-align: right;
      padding-right: 10px;
      box-sizing: border-box;
    }
    .operation-indicator {
      text-align: center;
      font-size: 1.2rem;
      color: #333;
      margin-bottom: 10px;
    }
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .button {
      padding: 15px;
      font-size: 1.2rem;
      text-align: center;
      background: #e0e0e0;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }
    .button:hover {
      background: #d1d1d1;
    }
    .button.operation {
      background: #f39c12;
      color: white;
    }
    .button.operation:hover {
      background: #e67e22;
    }
    .button.equal {
      background: #27ae60;
      color: white;
      grid-column: span 4;
    }
    .button.equal:hover {
      background: #2ecc71;
    }
  </style>
</head>
<body>

<div class="calculator">
  <div class="operation-indicator" id="operation-indicator">選択中: なし</div>
  <div id="display" class="display">0</div>
  <div class="buttons">
    <button class="button" onclick="appendNumber('I')">I</button>
    <button class="button" onclick="appendNumber('II')">II</button>
    <button class="button" onclick="appendNumber('III')">III</button>
    <button class="button operation" onclick="setOperation('/')">÷</button>
    <button class="button" onclick="appendNumber('IV')">IV</button>
    <button class="button" onclick="appendNumber('V')">V</button>
    <button class="button" onclick="appendNumber('VI')">VI</button>
    <button class="button operation" onclick="setOperation('*')">×</button>
    <button class="button" onclick="appendNumber('VII')">VII</button>
    <button class="button" onclick="appendNumber('VIII')">VIII</button>
    <button class="button" onclick="appendNumber('IX')">IX</button>
    <button class="button operation" onclick="setOperation('-')">−</button>
    <button class="button" onclick="appendNumber('X')">X</button>
    <button class="button" onclick="clearDisplay()">C</button>
    <button class="button operation" onclick="setOperation('+')">+</button>
    <button class="button equal" onclick="calculate()">=</button>
  </div>
</div>

<script>
  let currentInput = '';
  let previousInput = '';
  let operation = null;

  const display = document.getElementById('display');
  const operationIndicator = document.getElementById('operation-indicator');

  const romanToDecimal = {
    I: 1, II: 2, III: 3, IV: 4, V: 5,
    VI: 6, VII: 7, VIII: 8, IX: 9, X: 10
  };

  const decimalToRoman = (num) => {
    const romanNumerals = [
      ['X', 10], ['IX', 9], ['V', 5],
      ['IV', 4], ['I', 1]
    ];
    let result = '';
    for (const [roman, value] of romanNumerals) {
      while (num >= value) {
        result += roman;
        num -= value;
      }
    }
    return result;
  };

  function appendNumber(number) {
    if (currentInput.length >= 10) return;
    currentInput += number;
    updateDisplay();
  }

  function setOperation(op) {
    if (currentInput === '') return;
    if (previousInput !== '') calculate();
    operation = op;
    operationIndicator.textContent = `選択中: ${op}`;
    previousInput = currentInput;
    currentInput = '';
  }

  function calculate() {
    const prev = romanToDecimal[previousInput];
    const curr = romanToDecimal[currentInput];
    if (isNaN(prev) || isNaN(curr)) return;
    let result;
    switch (operation) {
      case '+':
        result = prev + curr;
        break;
      case '-':
        result = prev - curr;
        break;
      case '*':
        result = prev * curr;
        break;
      case '/':
        result = Math.floor(prev / curr); // 整数計算
        break;
      default:
        return;
    }
    currentInput = decimalToRoman(result) || '0';
    operation = null;
    previousInput = '';
    operationIndicator.textContent = '選択中: なし';
    updateDisplay();
  }

  function clearDisplay() {
    currentInput = '';
    previousInput = '';
    operation = null;
    operationIndicator.textContent = '選択中: なし';
    updateDisplay();
  }

  function updateDisplay() {
    display.textContent = currentInput || '0';
  }
</script>

</body>
</html>

するとちゃんと条件を満たした内容に書き換えてくれます！
（選択ない場合”なし”と表示してくれる親切設計）
image.png

＋を選択されている状態が表示されてて分かりやすい！
image.png

などChatGPTはコードに困った際もとても助けてくれそうですね！

まとめ

流石ChatGPT。
作りたいものを伝えればコードを一瞬で作ってくれましたね。
これをたたき台にカスタムしていくもよし、即興で必要な場面で必要なものを作ってもらうもよし、活用方法は様々ありそうですね。
次回をラストに一番気になっていた「画像」や「動画」の生成を見てみようかと思います。
ありがとうございました！

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?