ChatGPTと一緒にReactを勉強した

Last updated at 2024-12-01Posted at 2024-12-01

はじめに

Reactの勉強をしたいなと思い、少しだけ触っては、何をしたらいいのか分からなくなり、1時間弱くらいでやめるといったことを繰り返していた、React初心者です。

勉強したいと思ってはいますが、あまり続かないので、ChatGPTに課題を出してもらい、それをこなす勉強を試してみました。

前々から、そういったChatGPTの使い方は、色々なところで見聞きしましたが、実際に自分でやってみたことはなかったので、今回のReactの勉強をきっかけに、使ってみようと思いました。

課題1

早速、まずは簡単な課題を出してもらいます。

だとのことなので、早速countプロジェクトを作成し、作ってみました。

途中、reactのことを覚えてなさ過ぎて、propsの使い方や、子から親への値の渡し方など、調べたりしました。
今回は自分で調べましたが、こういった分からないところも、その場でChatGPTに聞いたりしていいかもしれません。

そして、できたのが以下のコード。

App.js

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

function App() {
  const [ count, setCount ] = useState(0);
  const handleCount = (number) => {
    setCount(number);
  };
  return (
    <div className='App'>
      <View count={ count }/>
      <CountButton count={ count } handleCount={ handleCount }/>
    </div>
  );
}

function View(props) {
  return (
    <div className='view'>
      {props.count}
    </div>
  );
}


function CountButton(props) {
  // カウント処理
  const onCount = (e) => {
    if(e.target.className === 'countUp'){
      props.handleCount(props.count + 1);
    }else if(e.target.className === 'countDown'){
      props.handleCount(props.count - 1);
    }
  };

  return (
    <div className='buttonArea'>
      <button className='countUp' onClick={onCount}>
        +1
      </button>
      <button className='countDown' onClick={onCount}>
        -1
      </button>
    </div>
  );
}

export default App;

雑なコードですが、とりあえずできたものをchatGPTに見てもらいました。

そして、3つの改善点を出してくれました。

・改善点1

これはいい改善点だと自分も思いました。
わざわざCountButtonコンポーネントに、countを渡す必要はなかったですね。

・改善点2

確かにその通り、というより、今考えたらなぜわざわざクラスで分けたのか？
その場の思いつきで適当にやるのは良くないですね。

・改善点3

なるほど、propsの中身が一つなら、この方が分かりやすいかもしれないですね。
全部propsで統一するのもありな気はしますが。

そして、改善後のコードも貼ってくれました。

App.js

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

function App() {
  const [count, setCount] = useState(0);

  const handleCount = (delta) => {
    setCount((prevCount) => prevCount + delta);
  };

  return (
    <div className='App'>
      <View count={count} />
      <CountButton handleCount={handleCount} />
    </div>
  );
}

function View({ count }) {
  return <div className='view'>{count}</div>;
}

function CountButton({ handleCount }) {
  return (
    <div className='buttonArea'>
      <button onClick={() => handleCount(1)}>+1</button>
      <button onClick={() => handleCount(-1)}>-1</button>
    </div>
  );
}

export default App;

後は改善理由も。

こういった勉強は、自分一人の勉強だと、どこがダメだったとか分からなかったりするので、良くなかったところをはっきりできるのは良いですね。

課題2

という訳で、さらに次の課題も出してもらいました。

↓ 今回は、実装例のイメージまで、出してくれていています。

という訳で、早速作りはじめ、できたのがこちら。
・動作画面

・コード

App.js

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

function App() {
  const [tasks, setTasks] = useState([]);

  // タスクを追加する関数
  const addTask = (task) => {
    setTasks([...tasks, { id: Date.now(), text: task }]);
  };

  // タスクを削除する関数
  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  return (
    <div>
      <TaskInput addTask={addTask} />
      <TaskList tasks={tasks} deleteTask={deleteTask} />
    </div>
  );
}

function TaskInput(props) {
  const input = useRef(null);

  // 追加ボタン押下時
  const onAdd = (taskName) => {
    props.addTask(taskName);
    input.current.value = '';
  }

  return (
    <>
      <input ref={ input } type='text' />
      <button onClick={ () => onAdd(input.current.value) }>
        追加
      </button>
    </>
  );
}

function TaskList(props) {
  const rows = props.tasks.map(task => {
    return (
      <tr>
        <TaskItem task={task} deleteTask={ props.deleteTask } />
      </tr>
    );
  });
  return (
    <table border='1'>
      <tr>
        <th>
          ID
        </th>
        <th>
          タスク名
        </th>
        <th>
          削除ボタン
        </th>
      </tr>
      { rows }
    </table>
  );
}

function TaskItem(props) {
  // 削除ボタン押下時
  const onDeleteTask = (id) => {
    props.deleteTask(id);
  }

  return (
    <>
    <td>
      { props.task.id }
    </td>
    <td>
      { props.task.text }
    </td>
    <td>
      <button onClick={ () => onDeleteTask(props.task.id) }>
        削除
      </button>
    </td>
    </>
  );
}

export default App;