GhatGPTすごい

もうどこもかしこもChatGPT一色ですね。悩み相談から書面の推敲、歌詞の作成、そしてコーディング…。
とりわけコーディングに関してかなりの力を発揮してくれます。
というわけで表題の通り、ブラウザですぐ動かせるものをいろいろ作らせてみました。
※GPT3.5で作らせました。

ログイン画面

依頼文

htmlとcssとjavascriptで、一般的なログイン画面を作って（ソースを書いて。cssとjsはhtmlに埋め込みでお願い）

生成ソース

展開する

login.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <style>
      body {
        background-color: #f5f5f5;
      }
      
      form {
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
        width: 400px;
        margin: 0 auto;
        padding: 20px;
      }
      
      label {
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
      }
      
      input[type="text"], input[type="password"] {
        border: 1px solid #cccccc;
        border-radius: 3px;
        display: block;
        font-size: 16px;
        padding: 10px;
        width: 100%;
        margin-bottom: 20px;
      }
      
      button[type="submit"] {
        background-color: #007bff;
        border: none;
        border-radius: 3px;
        color: #ffffff;
        cursor: pointer;
        font-size: 16px;
        padding: 10px;
        width: 100%;
        transition: background-color 0.2s;
      }
      
      button[type="submit"]:hover {
        background-color: #0069d9;
      }
    </style>
  </head>
  <body>
    <h1>Login Form</h1>
    <form>
      <label for="username">Username:</label>
      <input type="text" id="username" name="username" required>
      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
      <button type="submit">Login</button>
    </form>
  </body>
</html>

ブラウザ表示

す、すごい…！フォーム右側の余白がないのが若干気になりますが、ほぼ使えるレベルではないでしょうか。見た目だけではなく、入力フォームにはrequiredもついていて、パスワードはちゃんとtype="password"になっています。

ペイント機能

依頼文

htmlとcssとjavascriptで、簡単なお絵描き機能を作って（ソースを書いて。cssとjsはhtmlに埋め込みでお願い）

生成ソース

展開する

paint.html

<!DOCTYPE html>
<html>
    <head>
    	<title>お絵かき</title>
    	<style>
    		#canvas {
    			border: 1px solid #000;
    			cursor: crosshair;
    		}
    	</style>
    </head>
    <body>
    	<canvas id="canvas" width="500" height="500"></canvas>
    
    	<script>
    		var canvas = document.getElementById('canvas');
    		var ctx = canvas.getContext('2d');
    		var isDrawing = false;
    		var lastX = 0;
    		var lastY = 0;
    
    		canvas.addEventListener('mousedown', function(e) {
    			isDrawing = true;
    			lastX = e.offsetX;
    			lastY = e.offsetY;
    		});
    
    		canvas.addEventListener('mousemove', function(e) {
    			if (!isDrawing) return;
    			ctx.beginPath();
    			ctx.moveTo(lastX, lastY);
    			ctx.lineTo(e.offsetX, e.offsetY);
    			ctx.stroke();
    			lastX = e.offsetX;
    			lastY = e.offsetY;
    		});
    
    		canvas.addEventListener('mouseup', function() {
    			isDrawing = false;
    		});
    
    		canvas.addEventListener('mouseout', function() {
    			isDrawing = false;
    		});
    	</script>
    </body>
</html>

ブラウザ表示

ドラッグで線を引ける、シンプルなペイント機能が作れました！ちなみに画像は保存できます。
※この目つきの悪いモルカーは私が描いたものです。

ピクセルアート作成

依頼文

htmlとcssとjavascriptで、簡単なピクセルアート作成機能を作って（ソースを書いて。cssとjsはhtmlに埋め込みでお願い）
色は黒、白、青、赤、緑、黄色、オレンジ、紫、ピンクを指定できるようにして。

生成ソース

展開する

pixel_art.html

<!DOCTYPE html>
<html>
  <head>
    <title>Pixel Art Creator</title>
    <style>
      /* CSS for the pixel grid */
      #pixel-grid {
        display: grid;
        grid-template-columns: repeat(20, 20px);
        grid-template-rows: repeat(20, 20px);
        gap: 1px;
        margin-bottom: 10px;
      }

      .pixel {
        background-color: white;
        border: 1px solid black;
      }
      
      /* CSS for the color buttons */
      .color-btn {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        border-radius: 50%;
        cursor: pointer;
      }

      .black {
        background-color: black;
      }

      .white {
        background-color: white;
      }

      .blue {
        background-color: blue;
      }

      .red {
        background-color: red;
      }

      .green {
        background-color: green;
      }

      .yellow {
        background-color: yellow;
      }

      .orange {
        background-color: orange;
      }

      .purple {
        background-color: purple;
      }

      .pink {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div id="pixel-grid"></div>
    <div>
      <button class="color-btn black"></button>
      <button class="color-btn white"></button>
      <button class="color-btn blue"></button>
      <button class="color-btn red"></button>
      <button class="color-btn green"></button>
      <button class="color-btn yellow"></button>
      <button class="color-btn orange"></button>
      <button class="color-btn purple"></button>
      <button class="color-btn pink"></button>
    </div>
    <script>
      // JavaScript for the pixel grid and color buttons
      const pixelGrid = document.getElementById("pixel-grid");
      const colorBtns = document.querySelectorAll(".color-btn");
      let currentColor = "white";

      // Create the pixels in the grid
      for (let i = 0; i < 400; i++) {
        const pixel = document.createElement("div");
        pixel.classList.add("pixel");
        pixelGrid.appendChild(pixel);
      }

      // Add event listeners to the pixels and color buttons
      pixelGrid.addEventListener("mousedown", function (event) {
        if (event.target.classList.contains("pixel")) {
          event.target.style.backgroundColor = currentColor;
        }
      });

      colorBtns.forEach(function (btn) {
        btn.addEventListener("click", function () {
          currentColor = btn.classList[1];
        });
      });
    </script>
  </body>
</html>

ブラウザ表示

ピクセルアート機能ができました！ちゃんと指定した色も用意してくれていますね。
※モルカーです。

タイマー

依頼文

htmlとcssとjavascriptで、簡単なタイマー機能を作って（ソースを書いて。cssとjsはhtmlに埋め込みでお願い）

生成ソース

展開する

timer.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Timer</title>
    <style>
      body {
        background-color: #f5f5f5;
        font-family: Arial, sans-serif;
        text-align: center;
      }
      
      #timer {
        font-size: 50px;
        font-weight: bold;
        margin-top: 50px;
      }
      
      button {
        background-color: #007bff;
        border: none;
        border-radius: 3px;
        color: #ffffff;
        cursor: pointer;
        font-size: 16px;
        margin-top: 20px;
        padding: 10px 20px;
        transition: background-color 0.2s;
      }
      
      button:hover {
        background-color: #0069d9;
      }
    </style>
  </head>
  <body>
    <h1>Timer</h1>
    <div id="timer">00:00:00</div>
    <button id="startButton">Start</button>
    <button id="stopButton">Stop</button>
    <button id="resetButton">Reset</button>
    <script>
      let timerInterval;
      let seconds = 0;
      let minutes = 0;
      let hours = 0;
      
      function pad(n) {
        return (n < 10) ? "0" + n : n;
      }
      
      function updateTimer() {
        seconds++;
        if (seconds == 60) {
          seconds = 0;
          minutes++;
        }
        if (minutes == 60) {
          minutes = 0;
          hours++;
        }
        const timerDisplay = document.getElementById("timer");
        timerDisplay.textContent = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
      }
      
      function startTimer() {
        timerInterval = setInterval(updateTimer, 1000);
      }
      
      function stopTimer() {
        clearInterval(timerInterval);
      }
      
      function resetTimer() {
        clearInterval(timerInterval);
        seconds = 0;
        minutes = 0;
        hours = 0;
        const timerDisplay = document.getElementById("timer");
        timerDisplay.textContent = "00:00:00";
      }
      
      const startButton = document.getElementById("startButton");
      startButton.addEventListener("click", startTimer);
      
      const stopButton = document.getElementById("stopButton");
      stopButton.addEventListener("click", stopTimer);
      
      const resetButton = document.getElementById("resetButton");
      resetButton.addEventListener("click", resetTimer);
    </script>
  </body>
</html>

ブラウザ表示

シンプルな~~タイマー~~機能ができました。「Start」で秒刻みでタイマー開始、「Stop」でタイマーストップします。リセット機能も付いています。普通に使えるのではないでしょうか？ミリ秒まであれば完璧ですね。

（2023/03/28 11:40追記）
こちら、成果物は「タイマー」というよりは「ストップウォッチ」でした（@dd43fesut6様よりご指摘いただきました）。

メモ帳

依頼文

htmlとcssとjavascriptで、簡単なメモ帳を作って（ソースを書いて。cssとjsはhtmlに埋め込みでお願い）

生成ソース

展開する

memo.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>メモ帳</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			background-color: #f2f2f2;
		}
		header {
			background-color: #333;
			color: #fff;
			padding: 10px;
			text-align: center;
		}
		.container {
			max-width: 800px;
			margin: 0 auto;
			padding: 20px;
		}
		textarea {
			width: 100%;
			height: 400px;
			font-size: 16px;
			padding: 10px;
			border: none;
			border-radius: 5px;
			background-color: #fff;
			box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
		}
		button {
			background-color: #4CAF50;
			color: #fff;
			border: none;
			padding: 10px;
			border-radius: 5px;
			font-size: 16px;
			cursor: pointer;
			margin-top: 10px;
		}
		button:hover {
			background-color: #3e8e41;
		}
	</style>
</head>
<body>
	<header>
		<h1>メモ帳</h1>
	</header>
	<div class="container">
		<textarea id="memo"></textarea>
		<button onclick="saveMemo()">保存する</button>
	</div>
	<script>
		function saveMemo() {
			var memoText = document.getElementById("memo").value;
			localStorage.setItem("memo", memoText);
			alert("メモが保存されました");
		}
		document.getElementById("memo").value = localStorage.getItem("memo");
	</script>
</body>
</html>

ブラウザ表示

良い感じのメモ機能ができました！頼んでもないのにローカルストレージへの保存機能もつけてくれていました。実用性がありそうです。

最後に

いかがでしたでしょうか？簡単な依頼をするだけでここまでのクオリティのものが数十秒で生成されます。いやはや恐ろしいChatGPT。
完璧な出来栄えではなくても、ベースを作ってくれるという点でなかなか実用性があるのではないでしょうか。
また、ソースを見てわかるのがその可読性の高さ。手動での改良もしやすく、コーディングの勉強にもなります。

また、逆にソースを投げて「改善案を出してください」と言うと、「こちらは○○を△△するプログラムですね。ここの変数名は〜〜の方が良いです、ここの処理は〜〜〜〜」と、コードの意図を瞬時に理解した上で、改善案を出してくれたりします。レビューも完璧にこなしやがる。。

今後も成長していくことが予想されるので目が離せないですね。AIをうまく活用していきたいものです。

告知

最後にお知らせとなりますが、イーディーエーでは一緒に働くエンジニアを募集しております。
詳しくは採用情報ページをご確認ください。
https://eda-inc.jp/recruit/
みなさまからのご応募をお待ちしております。