<h2 id="h1897a1eff6">開発環境について</h2><p>以下の環境、ソフトウェアで開発を行いました。<br>Ant Desing はUIライブラリのため必須ではありませんが、<br>TODOアプリに最低限必要なコンポーネントがすべて用意されているため、<br>開発期間の短縮を目的に使用させていただきました。</p><pre><code>React 17.0.2
Redux 7.2.4
Ant Desing 4.16.6</code></pre><p><br></p><h2 id="h5ef7d69a3b">成果物</h2><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fhskwg&display_name=CodeSandbox&url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fhskwg&image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fhskwg%2Fscreenshot.png&key=d640a20a3b02484e94b4b0a08440f627&type=text%2Fhtml&schema=codesandbox" width="1000" height="500" scrolling="no" title="CodeSandbox embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="h00558bbc38">Reduxについて</h2><p>歴史のあるライブラリのため、<a href="https://redux.js.org/tutorials/fundamentals/part-1-overview" target="_blank" rel="noopener noreferrer">公式ドキュメント</a>も充実していますし、<br>わかりやすく紹介されているブログもたくさんあるため、ここでは簡単な説明のみを行います。<br></p><h3 id="ha86a6bfbe6">Reduxとは</h3><p><strong>Action</strong> と呼ばれるイベントを使用してアプリケーションの状態の管理や更新を行うライブラリです。<br><br><strong>Store</strong> と呼ばれる大きな箱が1つだけ用意されており、そこで <strong>State</strong> の管理を行います。<br>どのコンポーネントからでも取得と更新が可能であるため、<br>個々のコンポーネントの状態管理としては使用せず、<br><strong>アプリケーション全体の状態管理</strong>として使用するのに適しています。<br><br><strong>Store </strong>の更新には大きくわけて3つの手続きを踏む必要があり、<br><strong>必ず左から順番に実行される</strong>という特徴を持ちます。</p><pre><code>Action &gt; Reducer &gt; Store</code></pre><p>そのため、データの流れが追いやすくなるというメリットがあります。<br>ただ、複数回の手続きが必要になるためどうしてもコード量が増えてしまいます。<br>小規模なアプリに採用しても時間がかかるだけなので、<strong>中規模以降のアプリに採用すべき</strong>です。<br></p><h3 id="h2fe7453683">3つの原則</h3><p>Redux には3つの原則があります。<br>これらのルールを守ることでバグの発生を防ぐことができます。</p><pre><code>Single source of truth
State is read-only
Changes are made with pure functions</code></pre><p><a href="https://redux.js.org/understanding/thinking-in-redux/three-principles" target="_blank" rel="noopener noreferrer">Three Principles</a><br></p><h3 id="hf744e42219">Redux Toolkitについて</h3><p>今回は <strong>Redux</strong> と<strong> React-Redux</strong> だけを使用しているため、コードの総量がかなり多くなっていますが、<br><strong>Redux Toolkit </strong>というパッケージを併用すれば、もっと簡単に書くことが可能です。<br><br><strong>公式ドキュメントでも使用が推奨</strong>されているため、<br>新しいプロジェクトを立ち上げる場合は併用することをオススメします。<br><a href="https://redux-toolkit.js.org/introduction/getting-started" target="_blank" rel="noopener noreferrer">Getting Started with Redux Toolkit</a><br></p><h2 id="hbbc6673007">Actionを定義する</h2><p>まずは Action を定義しましょう。<br><br>最終的に、以下のようなオブジェクトを用意する必要があり、<br>これを <strong>Actionオブジェクト</strong> と呼びます。</p><pre><code> return {
    type: "起こしたいアクション名",
    payload: "ユーザーが行った操作"
};</code></pre><p><br></p><h3 id="ha81c98c056">Action Typesを定義する</h3><p>起こしたい Action の名前を決めます。<br>ユニークな値でなければならないため、定数として定義いたします。</p><pre><code>const CREATE_TASK = "CREATE_TASK";
const DELETE_TASK = "DELETE_TASK";</code></pre><p><br></p><h3 id="h12ad2397da">Action Creatorsを定義する</h3><p>行いたい Action とユーザーが操作した値が返却される関数を作成します。</p><pre><code>export const createTask = (task) =&gt; {
  return {
    type: CREATE_TASK,
    payload: task
  };
};
export const deleteTask = (id) =&gt; {
  return {
    type: DELETE_TASK,
    payload: id
  };
};</code></pre><p><br></p><h2 id="he419f5e19b">Reducersを定義する</h2><p>次に Reducers を定義します。</p><h3 id="h3d4d996670">Reducer関数を定義する</h3><p>現在の状態 <code>todo</code> と、先程定義した Action の2つを引数として受け取ります。<br>Reduxは初回起動時には状態を持っていません。<code>initialState</code> を代入して状態を作成します。</p><pre><code>const initialState = [];

function taskReducer(todo = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case CREATE_TASK:
      return [...todo, payload];
    case DELETE_TASK:
      return todo.filter((t) =&gt; t.id !== payload);
    default:
      return todo;
  }
}</code></pre><p><br></p><h3 id="h297ca690ea">複数のReducersを1つにまとめる</h3><p><code>combineReducers</code> という関数を使用すれば複数の Reducers を1つにまとめることが可能です。<br>今回は Reducers が1つしかないため使用する必要はありませんが、<br>特に動作への影響はなく、後で Reducers が追加された際に書き直しが不要となるため使用しています。</p><pre><code>import { combineReducers } from "redux";

export const rootReducer = combineReducers({
  task: taskReducer
});</code></pre><p><br></p><h2 id="hfa545cbd3b">Storeを作成</h2><p>次に状態管理を行う <strong>Store</strong> を定義します。</p><h3 id="h8caaef373d">ストアインスタンスを作成する</h3><p><code>createStore</code> を実行し、<span style="color:#1c1e21">ストア</span>インスタンスを作成します。<br>第1引数に定義したReducers の <code>rootReducer</code>、第2引数に初期状態を示す変数 &nbsp;<code>initialState</code> を指定して実行します。</p><pre><code>import { createStore } from "redux";

const initialState = {};
const store = createStore(rootReducer, initialState);

export default store;</code></pre><p><br></p><h3 id="he366b8384e">ReactにStoreを提供</h3><p><code>&lt;App /&gt;</code> に <code>&lt;Provider&gt;</code> をラップします。<br>ここまでの繋ぎこみが完了すれば、以降は Action が実行されるたびに状態の更新が行われます。</p><pre><code>import ReactDOM from "react-dom";
import App from "./App";

import { Provider } from "react-redux";
import store from "./store";
import "antd/dist/antd.css";

const rootElement = document.getElementById("root");
ReactDOM.render(
  &lt;StrictMode&gt;
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;
  &lt;/StrictMode&gt;,
rootElement
);</code></pre><p><br></p><h2 id="hfc9a4a9a8f">状態管理を行う</h2><p>コンポーネント内で <strong>Store</strong> の取得と更新を行います。どちらも専用の関数を使用します。</p><h3 id="h0dacf234c4">タスクの仕様</h3><p>先にタスクがどのような形式で保存されるのか解説致します。<br>タスクの内容と、固有のIDを持ったオブジェクト形式で保存を行います。<br>IDは <code>generateId</code> という関数を使って作成しています。</p><pre><code>{
  task: "タスクの内容"
  id: 12345678
}</code></pre><h3 id="ha6edad7201"><br>状態の取得を行う</h3><p>Store の状態を取得するには <code>useSelector</code> という関数を使用します。</p><pre><code>import { useSelector } from "react-redux";
const App = () =&gt; {
  const tasks = useSelector((state) =&gt; state.task);
}</code></pre><p><br></p><h3 id="h45e7e66525">状態の更新を行う</h3><p>Store の状態を更新するには <code>useDispatch</code> という関数を使用します。</p><pre><code>import { useDispatch } from "react-redux";
const App = () =&gt; {
&nbsp; &nbsp; const dispatch = useDispatch();
&nbsp; &nbsp; let normalize = {
&nbsp; &nbsp; &nbsp; &nbsp; task: task,
&nbsp; &nbsp; &nbsp; &nbsp; id: generateId()
&nbsp; &nbsp; };
&nbsp; &nbsp; dispatch(createTask(normalize));
}

</code></pre><h3 id="h930f2d92d4"><br>タスクの削除</h3><p>タスク削除用関数の引数に <code>id</code> を指定した状態で実行します。<br>この関数は保存済みタスクの <code>id</code> と引数の <code>id</code> を比較、一致しないタスクのみを返却します。</p><pre><code>dispatch(deleteTask(item.id))</code></pre><p><br></p><h2 id="hf8a9587c26">全体のコード</h2><p>全体のコードは以下のようになります。コピペいただければそのまま動作します。</p><pre><code>import React, { useState, useEffect } from "react";
import { Button, Input, Row, Col, Typography, List } from "antd";
import { useDispatch, useSelector } from "react-redux";
import { createTask, deleteTask } from "./redux";
import "./styles.css";

const App = () =&gt; {
&nbsp; const [task, setTask] = useState("");
&nbsp; const [inputEmptyError, setInputEmptyError] = useState(false);

&nbsp; const dispatch = useDispatch();
&nbsp; const tasks = useSelector((state) =&gt; state.task);

&nbsp; useEffect(() =&gt; {}, [dispatch]);

&nbsp; const generateId = () =&gt; {
&nbsp; &nbsp; const strong = 1000;
&nbsp; &nbsp; return (
&nbsp; &nbsp; &nbsp; new Date().getTime().toString(16) +
&nbsp; &nbsp; &nbsp; Math.floor(strong * Math.random()).toString(16)
&nbsp; &nbsp; );
&nbsp; };

&nbsp; const handleInput = (e) =&gt; {
&nbsp; &nbsp; const value = e.target.value;
&nbsp; &nbsp; setTask(value);
&nbsp; };

&nbsp; const handleSubmit = () =&gt; {
&nbsp; &nbsp; if (!task) {
&nbsp; &nbsp; &nbsp; setInputEmptyError(true);
&nbsp; &nbsp; &nbsp; return;
&nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; setInputEmptyError(false);
&nbsp; &nbsp; }
&nbsp; &nbsp; let normalize = {
&nbsp; &nbsp; &nbsp; task: task,
&nbsp; &nbsp; &nbsp; id: generateId()
&nbsp; &nbsp; };
&nbsp; &nbsp; dispatch(createTask(normalize));
&nbsp; &nbsp; initialForm();
&nbsp; };

&nbsp; const initialForm = () =&gt; {
&nbsp; &nbsp; setTask("");
&nbsp; };

&nbsp; return (
&nbsp; &nbsp; &lt;div className="App"&gt;
&nbsp; &nbsp; &nbsp; &lt;div className="container"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;section&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;List
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="taskList"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; itemLayout="horizontal"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataSource={tasks}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; renderItem={(item) =&gt; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;List.Item
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; actions={[
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button onClick={() =&gt; dispatch(deleteTask(item.id))}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 削除
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {item.task}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/List.Item&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/section&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;section&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Row&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Col span={20}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Input
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="task"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={handleInput}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={task}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="タスク内容を入力"
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {inputEmptyError &amp;&amp; (
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Typography.Text type="danger"&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; タスク内容は入力必須です。
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Typography.Text&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Col&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Col span={4}&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;Button type="primary" onClick={handleSubmit} block&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 追加
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Button&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Col&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/Row&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &lt;/section&gt;
&nbsp; &nbsp; &nbsp; &lt;/div&gt;
&nbsp; &nbsp; &lt;/div&gt;
&nbsp; );
};

export default App;</code></pre><p><br></p><h2 id="h3bcda3e6b0">最後に</h2><p>より詳しい情報が知りたくなったときは公式ドキュメントを参照してください。<br>以上で解説は終了です。お疲れ様でした。</p>

<ul><li><a href="https://redux.js.org/" target="_blank" rel="noopener noreferrer">Redux - A predictable state container for JavaScript apps. | Redux</a></li><li><a href="https://www.wakuwakubank.com/posts/703-react-redux/" target="_blank" rel="noopener noreferrer">Redux(Actions, Reducers, Store)による状態管理</a></li></ul>

React と Redex でTODOアプリを作ってみる

<p>React.js で簡単なパンくずリストを作ってみます。<br>Googleで検索しても良い感じのコンポーネントが見つからなかったため、<br>練習も兼ねて自作致しました。<br></p><h2 id="hd154c350ab">完成イメージ</h2><p><img src="https://images.microcms-assets.io/protected/ap-northeast-1:53c80905-842b-4ee9-a157-ed176bb46df7/service/tyai-a-develop/media/reactjs-tailwindcss-breadcrumb.png" alt=""></p><h2 id="h9bbb0bca62"><br>開発環境</h2><p>以下の環境で動作を確認しました。</p><pre><code>React.js 17.0.1
Next.js 10.0.5
Tailwind CSS 2.0.2</code></pre><p><br></p><h2 id="h72cb700925">実装を行う</h2><h3 id="hf40fa70619">アイコンモジュールをインストール（省略可能）</h3><p>矢印には <a href="https://react-icons.github.io/react-icons/" target="_blank" rel="noopener noreferrer">React icons</a> のアイコンを使用していますので、<br>モジュールをインストールします。</p><pre><code>yarn add react-icons</code></pre><p><br></p><h3 id="hf623e49089">コンポーネントを作る</h3><p>Next.js を使用しているため、<code>components/</code>に<code>breadcrumbs.js</code>という名前で配置しました。</p><pre><code>import { FaChevronRight } from "react-icons/fa";

export default function BreadCrumbs({ lists }) {
  if(!lists){ 
    return('')
  }
  
  return (
    &lt;ol className="flex font-bold overflow-x-auto whitespace-nowrap" aria-label="breadcrumb"&gt;
      {lists.map(({ string, path }, index) =&gt; (
          &lt;li className="flex items-center" key={index}&gt;
            {lists.length - 1 !== index 
              ?
              &lt;&gt;
                &lt;a className="text-gray-900 text-sm md:text-base underline" href={path}&gt;{string}&lt;/a&gt;
                &lt;FaChevronRight aria-hidden="true" className="text-xs mx-2"/&gt;
              &lt;/&gt;
              : &lt;span className="text-sm md:text-base" aria-current="page"&gt;{string}&lt;/span&gt;
            }
          &lt;/li&gt;
      ))}
    &lt;/ol&gt;
  );
}</code></pre><p><br></p><h3 id="h1f1e6b8bf5">コンポーネントを呼び出す</h3><p><code>props</code>の<code>lists</code>に連想配列を指定します。<br><code>string</code>にはテキスト、<code>path</code>にはパスを指定します。</p><pre><code>import BreadCrumbs from "../components/breadcrumbs";

&lt;BreadCrumbs 
  lists={[
    {
      string: "トップページ",
      path: "/",
    },
    {
      string: post.title,
    }
  ]}
/&gt;</code></pre><p><br>以上で実装は完了です。<br>ページが大量にある場合は React Router などのルーターと連携するコンポーネントを使用された方が<br>良いかと思われますが、小規模のアプリであればこれでも十分かと思われます。<br>よろしければご活用ください。</p>

カテゴリーが「React.js/Next.js」の記事

カテゴリ