【React】学習ロードマップ take4 ~TODOリスト~

概要
準備
構成
実装
まとめ
1. 関連

概要

Reactを学習するにおいて、実際に手を動かすのが吉ということで、アプリケーションを作成します。

今回はTODOリストを実際に作成します。

元記事

準備

実際にローカルで動くプロジェクトを作成します。

任意のディレクトリでこちらのコマンドを順番に叩いてください。

// React の開発に必要な基本的な設定を含むプロジェクト構造を作成
$ npx create-react-app hoghogeApp

// 作成したプロジェクトに移動する
$ cd hoghogeApp

// 開発サーバーを起動し、ブラウザで React アプリケーションを開く
$ npm start

または、下記リンクからSandboxを開いて簡易的に動作環境を準備します。

https://codesandbox.io/p/sandbox/react-new

構成

今回作成するプロジェクトは、このような構成になります。

├── package-lock.json
├── package.json
├── public
│   └── index.html
└── src
    ├── Todo.jsx
    ├── compornents
    │   ├── CompleteTodolist.jsx
    │   ├── IncompleteTodolist.jsx
    │   └── InputTodolist.jsx
    ├── index.jsx
    └── styles.css

実装

ソースコード

GitHub - yoshi8100/react_todolist

Contribute to yoshi8100/react_todolist development by creating an account on GitHub.

作成物

このようなTODOリストを作成します。

やったこと

タスク一覧を表示

未実施のタスクと完了済みタスクを1画面に出力します。

基本的な記述は以下になります。

  //　未完了のTODO一覧
  const [incompleteTodos, setIncompleteTodos] = useState([]);
  //　完了のTODO一覧
  const [completeTodos, setCompleteTodos] = useState([]);

実際に値を初期値として入れておく場合には、このような記載になります。

  //　未完了のTODO一覧
  const [incompleteTodos, setIncompleteTodos] = useState(["TODO1", "TODO2"]);
  //　完了のTODO一覧
  const [completeTodos, setCompleteTodos] = useState(["元TODO1", "元TODO2"]);

ボタンの実装

TODOリストを作成するにあたり、4種類のボタンを実装します。

タスクを新規追加するボタン
タスクを完了する(完了ゾーンに移動する)ボタン
タスクを削除するボタン
タスクを未実施ゾーンに戻すボタン

下記タスク追加をするときのボタンですが、ほぼ同様の構造で他のボタンを複製できます。

// タスク追加ボタン  
const onClickAdd = () => {
    if (todoText === "") return;
    const newTodos = [...incompleteTodos, todoText];
    setIncompleteTodos(newTodos);
    setTodoText("");
  };

styleをjsxの中に記載

style.cssで管理しても良いのですが、限定された場所でしか使用されないcssならjsxに直接書いてしまった方が管理しやすいケースもあります。

その際は、cssと同様の記述はできず、jsxに合わせた書き方をする必要があります。主に3点に気をつけてください。

「-」は使えないのでキャピタルケースに変更する。
文字列は「””」で囲む必要がある
文末は「;」ではなく「,」

実例としては以下です。

css
----------------------------------
.styleTitle {
    text-align: center;
    margin-top: 0,
    font-weight: bold;
  };

↓記述を変更します

jsx
----------------------------------
const styleTitle = {
    textAlign: "center",
    marginTop: 0,
    fontWeight: "bold",
  };

TODOリストではこのように使用しています。

CompleteTodolist.jsx
----------------------------------

const styleTitle = {
    textAlign: "center",
    marginTop: 0,
    fontWeight: "bold",
  };

  export const CompleteTodolist = (props) => {
    const { todos, onClickBack } = props;
    return (
      <div style={styleCompleteArea}>
        <p style={styleTitle}>完了のTODO</p>  //ここで使用
        <ul>
          {todos.map((todo, index) => (
            <li key={todo}>
              <div style={styleListRow}>
                <p style={styleTodoItem}>{todo}</p>
                <button onClick={() => onClickBack(index)}>戻す</button>
              </div>
            </li>
          ))}
        </ul>
      </div>
    );
  };

TODOリストの上限を設定

TODOリストを無限に作れ、溜め込める状況は好ましくありません。

ので、仕様として上限を5つとします。その際に実装としてこのようになります。

Todo.jsx
----------------------------------

const isMaxLimitedIncompleteTodos = incompleteTodos.length >= 5;

return (
    <>
      <InputTodolist
        todoText={todoText}
        onChange={onChangeTodoText}
        onClick={onClickAdd}
        disabled={isMaxLimitedIncompleteTodos}
      />
      {isMaxLimitedIncompleteTodos && (
        <p style={{ color: "red" }}>
          登録できるTODOは5個まで！！！消化して！！！
        </p>
      )}

まとめ

実際に手を動かして実装することで、イメージを少し掴めてきました。

リストを表示するだけでなく、どのようにリソースを管理していくか等考えてみると様々な用法を調べることになり、勉強になりました。

以上、TODOリストを作成してみました！参考になりましたら幸いです！