Programming in ChatGPT

9月 21, 2024 admin44 No Comments

ChatGPTをつかってToDoアプリを作ってみました。

MIDI CSV Data

こちらでもコード作成に利用しましたが、最近はこのようなことをよくやるようになりました。
今回は、対話画面ものせてみます

環境）WSL2 / Windows 11 (npm, node インストール済)

これだけでできてしまいました。
cssはなくても動作しますが、一応生成コードをすべてのせておきます。

src/App.js

import React, { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleAddTodo = () => {
    if (newTodo.trim() !== '') {
      setTodos([...todos, newTodo]);
      setNewTodo('');
    }
  };

  const handleDeleteTodo = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div className="App">
      <h1>ToDo List</h1>
      <div>
        <input
          type="text"
          value={newTodo}
          onChange={(e) => setNewTodo(e.target.value)}
          placeholder="New ToDo"
        />
        <button onClick={handleAddTodo}>Add</button>
      </div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

import React, { useState } from 'react';

import './App.css';

function App() {

const [todos, setTodos] = useState([]);

const [newTodo, setNewTodo] = useState('');

const handleAddTodo = () => {

if (newTodo.trim() !== '') {

setTodos([...todos, newTodo]);

setNewTodo('');

}

};

const handleDeleteTodo = (index) => {

const newTodos = [...todos];

newTodos.splice(index, 1);

setTodos(newTodos);

};

return (

<div>

<input

type="text"

value={newTodo}

onChange={(e) => setNewTodo(e.target.value)}

placeholder="New ToDo"

</div>

<ul>

{todos.map((todo, index) => (

{todo}

<button onClick={() => handleDeleteTodo(index)}>Delete</button>

</li>

))}

</ul>

</div>

);

}

export default App;

src/App.cs

.App {
  text-align: center;
  margin-top: 50px;
}

input {
  padding: 10px;
  font-size: 16px;
  margin-right: 10px;
}

button {
  padding: 10px 15px;
  font-size: 16px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
  font-size: 18px;
}

button {
  margin-left: 10px;
  color: white;
  background-color: red;
  border: none;
  cursor: pointer;
}

.App {

text-align: center;

margin-top: 50px;

}

input {

padding: 10px;

font-size: 16px;

margin-right: 10px;

}

button {

padding: 10px 15px;

font-size: 16px;

}

ul {

list-style-type: none;

padding: 0;

}

li {

margin: 10px 0;

font-size: 18px;

}

button {

margin-left: 10px;

color: white;

background-color: red;

border: none;

cursor: pointer;

}

実行画面

何も指定せずに生成しましたが、違うライブリにする場合はそのように指示すれば作りかえてくれます。Reactデフォルトで生成してくるということは、それだけ主流ということでしょう。
修正せずに動作しますが、プログラミングの知識が不要とは思いません。
AIは、あくまで生産性を上げる手段として、とても重宝する存在と思っています。
逆に、このような部品程度は積極的にAIに作らせておいて、設計や機能と組み合わせたりする部分に時間を使うほうが、人間の役割としていいでしょう。

Category: 未分類

Tags: ChatGPT