ReactでToDoアプリ作ってみた

概要

普段クラウドのインフラをメインで勉強していますが、フロント側を学んでみたいと思いました。
今回は、Reactを簡単に勉強してToDoアプリを作成してみました。

成果物

• コード
  https://github.com/kohei-fujii/react-todo-app

• デモ動画
  

学んだこと

JSX記法

Reactでは、JSX記法が使えます。
JSX記法とは、Javascriptを拡張した言語でHTMLのタグを書けるようになっています。

• Javascriptの中に、HTMLを記述することが可能
• HTML内に{}を使用することで、Javascriptの変数を渡すことが可能

Inputarea.jsx

import '../App.css';

function Inputarea(props) {
  const { taskname, onChangeInputArea, onChangeAddtaskButton} = props;
  return (
    //HTMLを書くことができる & {}を使用することでJavascriptの変数を渡すことができる
    <div className='input-area'>
        <input placeholder='タスク名を入力' value={taskname} onChange={onChangeInputArea}/>
        <button onClick={taskname && onChangeAddtaskButton}>追加</button>
    </div>
  );
}

export default Inputarea;

State

Reactでは、Stateが使えます。
Stateとは、ユーザの操作によって変化する状態を管理するために使用されます。

今回の例だと、ToDoリストの中身はユーザの操作によって変化します。

• タスク追加ボタンを押した時、ToDoリストの中身は増える
• ToDoリストの完了ボタンを押した時、ToDoリストの中身は減る
• Doneリストの戻るボタンを押した時、ToDOリストの中身は増える

上記のような際に、Webページの画面を再度レンダリングする必要があります。
再レンダリングをするには、タスクの名前が必要となりこれをStateで配列として管理をします。
Stateの中身が変更されると、再レンダリングが行われます。これでHTMLの中身を変更することができます。

↓コードの一部を抜粋

App.jsx

import { useState } from 'react';

function App() {
  // 分割代入を使用
  // 左側の変数がStateの値を管理している配列を格納する変数名
  // 右側がStateの値を変更する際の関数名
  const [taskname, settaskname] = useState('');
  const [todotasklist, settodotasklist] = useState('');

  // テキストボックスの値が変化したときに、tasknameの値をStateにセットする
  const onChangeInputArea = (event) => settaskname(event.target.value);

  // 「追加」ボタンが押されたときに実行される関数
  const onChangeAddtaskButton = () => {
  // スプレッド構文を使用して、既存のtaskの名前を管理している配列 + 追加されたtaskの名前をnewtodotasklistに入れる
    const newtodotasklist = [...todotasklist, taskname];
  // Stateを変更する
    settodotasklist(newtodotasklist);
  // ToDoリストへの追加が完了したので、消す
    settaskname('');
  }

  return (
    <>
      <p>タスク追加</p>
      <Inputarea taskname={taskname} onChangeInputArea={onChangeInputArea} onChangeAddtaskButton={onChangeAddtaskButton} />
      <p>ToDOリスト</p>
      <Todolist todotasklist={todotasklist} onChangeCompleteTaskButton={onChangeCompleteTaskButton} />
    </>
  );
}

export default App;

Todolist.jsx

import '../App.css';

function Todolist(props) {
  const { todotasklist, onChangeCompleteTaskButton} = props;
  return (
    <div className='todo-list'>
    {/* todotasklistの値が空でないかつ変更が加わった際に画面の再レンダリングが行われる */}
        {todotasklist && todotasklist.map((todotask, index) => {
          return (
            <div key={index} className='task-layout'>
              <p>{todotask}</p>
              <button onClick={() => onChangeCompleteTaskButton(index)}>完了</button>
            </div>
          );
        })}
      </div>
  );
}

export default Todolist;

コンポーネント化

Reactでは、HTMLをコンポーネントとして分けて開発をすることができます。
そのため、コードのメンテナンスがしやすい等のメリットがあります。
今回は、4つのコンポーネントに分割しました。

• Header.jsx
• Inputarea.jsx
• Todolist.jsx
• Donelist.jsx

最後に

いつもとは違う学びがあり、面白かったです！
また、フロント部分の技術にも挑戦していきたいと思います!