<h2 id="hb6200cc538">react-quill とは何か？</h2><a href="https://quilljs.com/" target="_blank" rel="noopener noreferrer">Quill</a>とは、オープンソースのWYSIWYGエディタをWeb上で実現するためのjsプラグインです。 QuillをReact上で使えるようにしたパッケージがreact-quillです。 <h2 id="h8787c63b0c">react-quillの使い方</h2>react-quillのオプションは以下の通りです。<ul><li><code>id</code>: 指定するとDOM要素に当該IDが付与されます</li><li><code>className</code>: 指定するとDOM要素に当該ClassNameが付与されます </li><li><code>value</code>: エディタに表示する値。「HTMLを含む文字列、Quill Delta インスタンス、または Deltaを表すプレーン オブジェクト」を指定できるみたい。 </li><li><code>defaultValue</code>: エディタに表示する初期値</li><li><code>readOnly</code>: trueを設定すると編集できなくなります。</li><li><code>placeholder</code>: エディタが空の時に表示する文字列。動的に変更したい時はrefsとdata-attributesを使え、とのこと。</li><li><code>modules</code>: エディターのツールバーなどに適用するモジュール</li><li><code>formats</code>: 編集中に有効にするフォーマットを配列で指定する。デフォルトでは全て有効になっています。</li><li><code>style</code>: CSSに適用するスタイル。キャメルケースで指定すること。</li><li><code>theme</code>: 適用するテーマ名。デフォルトは「snow」</li><li><code>tabIndex</code>: エディタがフォーカスする順番</li><li><code>bounds</code>: ポップアップの位置を制限するために Quill によって使用されるセレクターまたは DOM 要素。デフォルトは document.body</li><li><code>children</code>: デフォルトの代わりに編集領域として使用される要素。textareaは指定できない</li><li><code>onChange</code>: 編集後に新しい内容で実行されるコールバック</li><li><code>onChangeSelection</code>: 新しい選択値で実行されるコールバック</li><li><code>onFocus</code>: フォーカスされた時に実行するコールバック</li><li><code>onBlur</code>: フォーカスを失った時に実行するコールバック</li><li><code>onKeyPress</code>: キーを押して離した時に実行するコールバック</li><li><code>onKeyDown</code>: キーを押して離す前に実行するコールバック</li><li><code>onKeyUp</code>: キーを話す時に実行するコールバック</li><li><code>preserveWhitespace</code>: true の場合、デフォルトの div タグの代わりに pre タグがエディター領域に使用されます</li></ul> <h2 id="h14c51a0d2a">react-quill でブログ管理システムを作ってみる</h2>さっそくブログ管理システムを作ってみたいと思います。 まず、プロジェクトの雛形を作成します。vite を使用してJavaScript,Reactを選択し、プロジェクト名は<code>react-quill-sample</code>とします。<pre><code>npm create vite@latest
Need to install the following packages:
&nbsp; create-vite@4.2.0
Ok to proceed? (y) y
✔ Project name: … react-quill-sample
✔ Select a framework: › React
✔ Select a variant: › JavaScript

Scaffolding project in /react-quill-sample...

Done. Now run:</code></pre> ディレクトリを移動して、インストール、ローカルホストを立ち上げます。<pre><code>cd react-quill-sample
npm install
npm run dev</code></pre> 必要なパッケージをインストールします。CSSは<code>Bootstrap</code>を、<code>react-quill</code>で作成したHTMLを直接埋め込むために<code>html-react-parser</code>を使用します。<pre><code>npm install --save react-quill html-react-parser bootstrap reactstrap</code></pre> 次にBootstrapと<code>react-quill</code>のCSSファイルのセットアップを行います。 不要なCSSファイルの読み込みを削除するのと以下の2行で<code>src/main.jsx</code>でCSSファイルの読み込みを行います。<pre><code>import "react-quill/dist/quill.snow.css";
import "bootstrap/dist/css/bootstrap.css";</code></pre><code>src/main.jsx</code>のファイル全体は以下のようになります。これでセットアップは完了です。 ./src/main.jsx<pre><code>import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "react-quill/dist/quill.snow.css";
import "bootstrap/dist/css/bootstrap.css";

ReactDOM.createRoot(document.getElementById("root")).render(
 &lt;React.StrictMode&gt;
 &lt;App /&gt;
 &lt;/React.StrictMode&gt;
);</code></pre> 次にContextAPIでブログを管理するためにContextProviderを定義します。ブログの内容は<code>id</code>, <code>title</code>, <code>content</code>, <code>createdAt</code>となります。 ./src/BlogInfoProvider.jsx<pre><code>import { createContext, useState } from "react";

export const BlogInfoContext = createContext();

export const BlogInfoProvider = ({ children }) =&gt; {
 const [blogs, setBlogs] = useState([]);
 const [id, setId] = useState();
 const [title, setTitle] = useState("");
 const [content, setContent] = useState("");
 const [registerModal, setRegisterModal] = useState(false);
 const toggleRegisterModal = () =&gt; setRegisterModal(!registerModal);
 const [editModal, setEditModal] = useState(false);
 const toggleEditModal = () =&gt; setEditModal(!editModal);

 const addBlog = () =&gt; {
 const lastBlog = blogs[blogs.length - 1];
 const id = lastBlog ? lastBlog.id + 1 : 1;
 const newBlog = {
 id,
 content,
 title,
 createdAt: new Date(),
 };
 setBlogs([...blogs, newBlog]);
 toggleRegisterModal();
 setId();
 setTitle("");
 setContent("");
 };

 const updateBlog = () =&gt; {
 const newBlog = {
 id,
 content,
 title,
 };
 const newBlogs = blogs.map((blog) =&gt; {
 if (blog.id === id) {
 return { ...blog, ...newBlog };
 } else {
 return blog;
 }
 });
 setBlogs(newBlogs);
 toggleEditModal();
 setTitle("");
 setContent("");
 };

 const deleteBlog = (i) =&gt; {
 if (confirm("本当に削除しますか？")) {
 const newBlogs = [...blogs];
 newBlogs.splice(i, 1);
 setBlogs(newBlogs);
 }
 };
 return (
 &lt;BlogInfoContext.Provider
 value={{
 blogs,
 setBlogs,
 title,
 setTitle,
 content,
 setContent,
 registerModal,
 setRegisterModal,
 toggleRegisterModal,
 editModal,
 setEditModal,
 addBlog,
 deleteBlog,
 updateBlog,
 setId,
 }}
 &gt;
 {children}
 &lt;/BlogInfoContext.Provider&gt;
 );
};</code></pre> 次にmain.jsxで先ほど作成した<code>BlogInfoProvider</code>で<code>App</code>コンポーネントを囲います。 ./src/main.jsx<pre><code>import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "react-quill/dist/quill.snow.css";
import "bootstrap/dist/css/bootstrap.css";
import { BlogInfoProvider } from "./BlogInfoProvider";

ReactDOM.createRoot(document.getElementById("root")).render(
 &lt;React.StrictMode&gt;
 &lt;BlogInfoProvider&gt;
 &lt;App /&gt;
 &lt;/BlogInfoProvider&gt;
 &lt;/React.StrictMode&gt;
);

</code></pre> 次にブログの一覧を表示するためのコンポーネントを作成します。 一覧画面にはID、タイトル、内容、作成日時を表示します。対象の記事を削除、更新するためのボタンも設置します。 ./src/BlogList.jsx<pre><code>import React, { useContext } from "react";
import { Button, Table } from "reactstrap";
import parse from "html-react-parser";
import Modal from "./Modal";
import { BlogInfoContext } from "./BlogInfoProvider";

function BlogList() {
 const {
 setTitle,
 setContent,
 blogs,
 deleteBlog,
 editModal,
 toggleEditModal,
 updateBlog,
 setEditModal,
 setId,
 } = useContext(BlogInfoContext);
 const handleEditModal = (i) =&gt; {
 setTitle(blogs[i].title);
 setContent(blogs[i].content);
 setId(i + 1)
 setEditModal(!editModal);
 };
 return (
 &lt;Table&gt;
 &lt;thead&gt;
 &lt;tr&gt;
 &lt;th&gt;#&lt;/th&gt;
 &lt;th&gt;タイトル&lt;/th&gt;
 &lt;th&gt;内容&lt;/th&gt;
 &lt;th&gt;作成日時&lt;/th&gt;
 &lt;th&gt;更新&lt;/th&gt;
 &lt;th&gt;削除&lt;/th&gt;
 &lt;/tr&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
 {blogs.map((blog, i) =&gt; (
 &lt;tr key={i}&gt;
 &lt;th scope="row"&gt;{blog.id}&lt;/th&gt;
 &lt;td&gt;{blog.title}&lt;/td&gt;
 &lt;td&gt;{parse(blog.content)}&lt;/td&gt;
 &lt;td&gt;{blog.createdAt.toLocaleString()}&lt;/td&gt;
 &lt;td&gt;
 &lt;Button color="primary" onClick={() =&gt; handleEditModal(i)}&gt;
 更新
 &lt;/Button&gt;
 &lt;Modal
 modal={editModal}
 toggle={toggleEditModal}
 onClick={() =&gt; updateBlog()}
 /&gt;
 &lt;/td&gt;
 &lt;td&gt;
 &lt;Button color="danger" onClick={() =&gt; deleteBlog(i)}&gt;
 削除
 &lt;/Button&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 ))}
 &lt;/tbody&gt;
 &lt;/Table&gt;
 );
}

export default BlogList;</code></pre> 次は記事を作成するためのフォームのモーダル実装です。ここでreact-quillを使用します。使用箇所は以下の部分です。<pre><code>&lt;ReactQuill
 id="content"
 theme="snow"
 value={content}
 onChange={setContent}
/&gt;</code></pre> <code>Modal</code>コンポーネントは記事の新規作成時と、既存記事の更新時に呼ばれるコンポーネントです。 ./src/Modal.jsx<pre><code>import React, { useContext } from "react";
import {
 Button,
 Modal as BootstrapModal,
 ModalHeader,
 ModalBody,
 ModalFooter,
 Label,
 Input,
 Form,
 FormGroup,
} from "reactstrap";
import ReactQuill from "react-quill";
import { BlogInfoContext } from "./BlogInfoProvider";

function Modal({ modal, toggle, onClick }) {
 const { title, setTitle, content, setContent } = useContext(BlogInfoContext);
 return (
 &lt;BootstrapModal isOpen={modal} toggle={toggle}&gt;
 &lt;ModalHeader toggle={toggle}&gt;
 ブログ記事を追加する
 &lt;/ModalHeader&gt;
 &lt;ModalBody&gt;
 &lt;Form&gt;
 &lt;FormGroup&gt;
 &lt;Label for="title"&gt;タイトル&lt;/Label&gt;
 &lt;Input
 id="title"
 name="title"
 placeholder="タイトルを入力"
 type="text"
 value={title}
 onChange={(e) =&gt; setTitle(e.target.value)}
 /&gt;
 &lt;/FormGroup&gt;
 &lt;FormGroup&gt;
 &lt;Label for="content"&gt;内容&lt;/Label&gt;
 &lt;ReactQuill
 id="content"
 theme="snow"
 value={content}
 onChange={setContent}
 /&gt;
 &lt;/FormGroup&gt;
 &lt;/Form&gt;
 &lt;/ModalBody&gt;
 &lt;ModalFooter&gt;
 &lt;Button color="secondary" onClick={toggle}&gt;
 キャンセル
 &lt;/Button&gt;
 &lt;Button color="primary" onClick={onClick}&gt;
 保存
 &lt;/Button&gt;
 &lt;/ModalFooter&gt;
 &lt;/BootstrapModal&gt;
 );
}

export default Modal;</code></pre> 最後にApp.jsxを実装します。 ./src/App.jsx<pre><code>import { Button } from "reactstrap";
import Modal from "./Modal";
import BlogList from "./BlogList";
import { BlogInfoContext } from "./BlogInfoProvider";
import { useContext } from "react";

function App() {
 const { toggleRegisterModal, addBlog, registerModal } =
 useContext(BlogInfoContext);
 return (
 &lt;&gt;
 &lt;h2&gt;ブログ管理システム&lt;/h2&gt;
 &lt;Button color="primary" onClick={toggleRegisterModal}&gt;
 ブログ記事を書く
 &lt;/Button&gt;
 &lt;Modal
 modal={registerModal}
 toggle={toggleRegisterModal}
 onClick={addBlog}
 /&gt;
 &lt;BlogList /&gt;
 &lt;/&gt;
 );
}

export default App;</code></pre>

【react-quill】簡単にリッチテキストエディタを実装する

<h2 id="h47ab4c152e">react-tabsとは？</h2>簡単にタブ実装を行うためのnpmパッケージです。 リポジトリは<a href="https://github.com/reactjs/react-tabs" target="_blank" rel="noopener noreferrer">こちら</a>です <h2 id="hd001437cff">react-tabsでタブ実装してみた</h2>実装してみました。 実装内容としてはマイページによくある「プロフィール情報」、「メールアドレス」、「パスワード」、「アイコン画像」の４タブからなるアカウント情報更新画面のようなものです。タブを切り替えても値が保持されるようにしました。 実装した感想としては本当に使いやすく、必要な時はすぐに導入したいなと感じました。 src/App.js<pre><code>import "./App.css";
import EmailContextProvider from "./EmailContextProvider";
import IconContextProvider from "./IconContextProvider";
import PasswordContextProvider from "./PasswordContextProvider";
import ProfileContextProvider from "./ProfileContextProvider";
import SampleTab from "./SampleTab";

function App() {
 return (
 &lt;div className="App"&gt;
 &lt;ProfileContextProvider&gt;
 &lt;EmailContextProvider&gt;
 &lt;PasswordContextProvider&gt;
 &lt;IconContextProvider&gt;
 &lt;SampleTab /&gt;
 &lt;/IconContextProvider&gt;
 &lt;/PasswordContextProvider&gt;
 &lt;/EmailContextProvider&gt;
 &lt;/ProfileContextProvider&gt;
 &lt;/div&gt;
 );
}

export default App;</code></pre> src/ProfileContextProvider.js<pre><code>import React, { createContext, useState } from "react";

export const ProfileContext = createContext();

function ProfileContextProvider({ children }) {
 const [userName, setUserName] = useState("");
 const [nickName, setNickName] = useState("");
 const [message, setMessage] = useState("");
 const [notifyEmail, setNotifyEmail] = useState(false);

 return (
 &lt;ProfileContext.Provider
 value={{
 userName,
 setUserName,
 nickName,
 setNickName,
 message,
 setMessage,
 notifyEmail,
 setNotifyEmail,
 }}
 &gt;
 {children}
 &lt;/ProfileContext.Provider&gt;
 );
}

export default ProfileContextProvider;</code></pre> src/EmailContextProvider.js<pre><code>import React, { createContext, useState } from "react";

export const EmailContext = createContext();

function EmailContextProvider({ children }) {
 const [email, setEmail] = useState("");

 return (
 &lt;EmailContext.Provider
 value={{
 email,
 setEmail,
 }}
 &gt;
 {children}
 &lt;/EmailContext.Provider&gt;
 );
}

export default EmailContextProvider;</code></pre> src/PasswordContextProvider.js<pre><code>import React, { createContext, useState } from "react";

export const PasswordContext = createContext();

function PasswordContextProvider({ children }) {
 const [password, setPassword] = useState("");

 return (
 &lt;PasswordContext.Provider
 value={{
 password,
 setPassword,
 }}
 &gt;
 {children}
 &lt;/PasswordContext.Provider&gt;
 );
}

export default PasswordContextProvider;</code></pre> src/IconContextProvider.js<pre><code>import React, { createContext, useState } from "react";

export const IconContext = createContext();

function IconContextProvider({ children }) {
 const [icon, setIcon] = useState(null);
 const [iconImage, setIconImage] = useState("");
 const onChangeIcon = (e) =&gt; {
 const files = e.target.files;
 if (files &amp;&amp; files[0]) {
 setIcon(files[0]);
 setIconImage(window.URL.createObjectURL(files[0]));
 }
 };

 return (
 &lt;IconContext.Provider
 value={{
 onChangeIcon,
 iconImage,
 }}
 &gt;
 {children}
 &lt;/IconContext.Provider&gt;
 );
}

export default IconContextProvider;</code></pre> src/SampleTabs.js<pre><code>import React, { useState } from "react";
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
import "react-tabs/style/react-tabs.css";
import ProfileForm from "./ProfileForm";
import EmailForm from "./EmailForm";
import PasswordForm from "./PasswordForm";
import { IconContext } from "./IconContextProvider";
import IconForm from "./IconForm";

function SampleTab() {
 return (
 &lt;Tabs defaultIndex={0}&gt;
 &lt;TabList&gt;
 &lt;Tab&gt;プロフィール情報&lt;/Tab&gt;
 &lt;Tab&gt;メールアドレス&lt;/Tab&gt;
 &lt;Tab&gt;パスワード&lt;/Tab&gt;
 &lt;Tab&gt;アイコン画像&lt;/Tab&gt;
 &lt;/TabList&gt;

 &lt;TabPanel&gt;
 &lt;ProfileForm /&gt;
 &lt;/TabPanel&gt;

 &lt;TabPanel&gt;
 &lt;EmailForm /&gt;
 &lt;/TabPanel&gt;
 
 &lt;TabPanel&gt;
 &lt;PasswordForm /&gt;
 &lt;/TabPanel&gt;

 &lt;TabPanel&gt;
 &lt;IconForm /&gt;
 &lt;/TabPanel&gt;
 &lt;/Tabs&gt;
 );
}

export default SampleTab;</code></pre> src/ProfileForm.js<pre><code>import React, { useContext } from "react";
import { ProfileContext } from "./ProfileContextProvider";

function ProfileForm() {
 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 // do somthing... such as api call etc
 };
 const {
 userName,
 setUserName,
 nickName,
 setNickName,
 message,
 setMessage,
 notifyEmail,
 setNotifyEmail,
 } = useContext(ProfileContext);

 return (
 &lt;fonm
 style={{
 display: "flex",
 "flex-direction": "column",
 padding: "0 50px 0 50px",
 }}
 onSubmit={(e) =&gt; handleSubmit(e)}
 &gt;
 &lt;div&gt;
 &lt;label htmlFor="userName"&gt;ユーザー名&lt;/label&gt;
 &lt;input
 id="userName"
 type="text"
 value={userName}
 onChange={(e) =&gt; setUserName(e.target.value)}
 /&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label htmlFor="nickName"&gt;ニックネーム&lt;/label&gt;
 &lt;input
 id="nickName"
 type="text"
 value={nickName}
 onChange={(e) =&gt; setNickName(e.target.value)}
 /&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label htmlFor="message"&gt;メッセージ&lt;/label&gt;
 &lt;input
 id="message"
 type="textarea"
 value={message}
 onChange={(e) =&gt; setMessage(e.target.value)}
 /&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label htmlFor="notifyEmail"&gt;お知らせメールを受け取るか&lt;/label&gt;
 &lt;input
 id="notifyEmail"
 type="checkbox"
 checked={notifyEmail}
 onChange={() =&gt; setNotifyEmail(!notifyEmail)}
 /&gt;
 &lt;/div&gt;
 &lt;input
 type="submit"
 style={{ margin: "10px 300px 0 300px" }}
 value="更新する"
 /&gt;
 &lt;/fonm&gt;
 );
}

export default ProfileForm;</code></pre> src/EmailForm.js<pre><code>import React, { useContext } from "react";
import { EmailContext } from "./EmailContextProvider";

function EmailForm() {
 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 // do somthing... such as api call etc
 };
 const { email, setEmail } = useContext(EmailContext);

 return (
 &lt;fonm
 style={{
 display: "flex",
 "flex-direction": "column",
 padding: "0 50px 0 50px",
 }}
 onSubmit={(e) =&gt; handleSubmit(e)}
 &gt;
 &lt;div&gt;
 &lt;label htmlFor="email"&gt;Eメール&lt;/label&gt;
 &lt;input
 id="email"
 type="text"
 value={email}
 onChange={(e) =&gt; setEmail(e.target.value)}
 /&gt;
 &lt;/div&gt;
 &lt;input
 type="submit"
 style={{ margin: "10px 300px 0 300px" }}
 value="更新する"
 /&gt;
 &lt;/fonm&gt;
 );
}

export default EmailForm;</code></pre> src/PasswordForm.js<pre><code>import React, { useContext } from "react";
import { PasswordContext } from "./PasswordContextProvider";

function PasswordForm() {
 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 // do somthing... such as api call etc
 };
 const { password, setPassword } = useContext(PasswordContext);

 return (
 &lt;fonm
 style={{
 display: "flex",
 "flex-direction": "column",
 padding: "0 50px 0 50px",
 }}
 onSubmit={(e) =&gt; handleSubmit(e)}
 &gt;
 &lt;div&gt;
 &lt;label htmlFor="password"&gt;パスワード&lt;/label&gt;
 &lt;input
 id="password"
 type="password"
 value={password}
 onChange={(e) =&gt; setPassword(e.target.value)}
 /&gt;
 &lt;/div&gt;
 &lt;input
 type="submit"
 style={{ margin: "10px 300px 0 300px" }}
 value="更新する"
 /&gt;
 &lt;/fonm&gt;
 );
}

export default PasswordForm;</code></pre> src/IconForm.js<pre><code>import React, { useContext } from "react";
import { IconContext } from "./IconContextProvider";

function IconForm() {
 const handleSubmit = (e) =&gt; {
 e.preventDefault();
 // do somthing... such as api call etc
 };
 const { onChangeIcon, iconImage } = useContext(IconContext);

 return (
 &lt;fonm
 style={{
 display: "flex",
 "flex-direction": "column",
 padding: "0 50px 0 50px",
 }}
 onSubmit={(e) =&gt; handleSubmit(e)}
 &gt;
 &lt;div&gt;
 &lt;label htmlFor="icon"&gt;アイコン画像&lt;/label&gt;
 &lt;input id="icon" type="file" onChange={(e) =&gt; onChangeIcon(e)} /&gt;
 &lt;div&gt;
 &lt;img src={iconImage} width="400px" height="400px" /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 &lt;input
 type="submit"
 style={{ margin: "10px 300px 0 300px" }}
 value="更新する"
 /&gt;
 &lt;/fonm&gt;
 );
}

export default IconForm;</code></pre>

【react-tabs】簡単にタブ実装を行うReactプラグイン

<h2 id="h19089daed0">useRef とは何か？</h2>useRef とはレンダリングする必要のない値を参照するためのReactHooksです。 第一引数に初期値を設定し、返却値としてRefオブジェクトが返ります。 Refオブジェクトには元々currentプロパティが備わっています。 current プロパティは変更することができます。 また、Refオブジェクトは変更してもコンポーネントの再描画が起こらないので、JSX内の表示部分などには使用するべきではないです。<pre><code>const somethingRef = useRef(0)
somethingRef.current // -&gt; 0</code></pre> <h2 id="h00fa278590">useRef を使った実装</h2>以下はインプットフィールドの参照を定義し、フォーカスボタン押下時にその参照へ<code>focus</code>する例です。<pre><code>import { useRef } from "react";

function InputRef() {
 const inputRef = useRef(null);
 function handleClick() {
 inputRef.current.focus();
 }
 return (
 &lt;div&gt;
 &lt;input ref={inputRef} /&gt;
 &lt;button onClick={handleClick}&gt;
 インプットフィールドをフォーカスする
 &lt;/button&gt;
 &lt;/div&gt;
 );
}
export default InputRef;</code></pre>

useRefについて知る

<h2 id="h7a616d398c">useReducer とは何か？</h2>useState と同じで状態を管理するためのReactHooksです。 useReducer の第一引数には reducer 、第二引数には初期値を設定します。 返却値は現在の状態と状態を更新するための dispatch 関数の配列となります。 <pre><code>const [現在の状態, dispatch関数] = useReducer(reducer関数, 初期値);</code></pre> reducer 関数は第一引数は以前の状態、第二引数にオブジェクトが設定されます。 返却値としては新しい状態を返却します。 <pre><code>const reducer = (元の状態, action) =&gt; {
 switch (action.type) {
 case "increment":
 return {
 //新しい状態
 }
 case "decrement":
 return {
 //新しい状態
 }
 }
}</code></pre> reducerとは状態を更新するための処理のことをいいます。 また、dispatchとはユーザーの操作とReducerのアクションを紐づけるための関数のことをいいます。 <h2 id="h97e96cf711">useState との違い</h2>基本的に useState で実装できるものは useReducer でも実装できます。 useReducer の特徴としては、状態を更新するための複雑なロジックを実装しやすい点です。 なので、String や Number 型などPrimitiveな情報を管理するときは useState、Objectなど複雑な情報を管理する場合は useReducer を使用したほうが良いと思います。 <h2 id="h7b4dd41252">useReducer を使った実装</h2>useReducer を使ってMovie情報を表示、更新する処理を実装してみました。 <pre><code>import { useReducer } from "react";

function App() {
 const reducer = (prev, action) =&gt; {
 switch (action.type) {
 case "UPDATE_TEXT":
 return { ...prev, [action.field]: action.payload };
 case "UPDATE_CHECKBOX":
 const newIsPublished = !prev.isPublished;
 return { ...prev, [action.field]: newIsPublished };
 default:
 throw new Error("unknown type");
 }
 };
 const initialMovieInfo = {
 id: 1,
 title: "test movie title",
 isPublished: false,
 };
 const [movie, dispatch] = useReducer(reducer, initialMovieInfo);

 return (
 &lt;div&gt;
 &lt;h3&gt;id: {movie.id}&lt;/h3&gt;
 &lt;h3&gt;title: {movie.title}&lt;/h3&gt;
 &lt;h3&gt;isPublished: {movie.isPublished ? "公開" : "非公開"}&lt;/h3&gt;
 &lt;div&gt;
 &lt;label htmlFor="title"&gt;タイトル&lt;/label&gt;
 &lt;input
 id="title"
 type="text"
 value={movie.title}
 onChange={(e) =&gt;
 dispatch({
 type: "UPDATE_TEXT",
 field: "title",
 payload: e.target.value,
 })
 }
 /&gt;
 &lt;/div&gt;
 &lt;div&gt;
 &lt;label htmlFor="isPublished"&gt;公開状態:&lt;/label&gt;
 &lt;input
 id="isPublished"
 type="checkbox"
 checked={movie.isPublished}
 onChange={() =&gt;
 dispatch({
 type: "UPDATE_CHECKBOX",
 field: "isPublished",
 })
 }
 /&gt;
 &lt;/div&gt;
 &lt;/div&gt;
 );
}

export default App;</code></pre>

useReducerを知る

<h2 id="h6f445f5dfa">useMemo とは何か？</h2>useMemoは値をキャッシュするためのReactHooksです。 第一引数にキャッシュしたい値を計算する関数、第二引数に依存配列を指定します。 返却値としては、第一引数で指定した関数が返すキャッシュしたい値が返ります。 <pre><code>const キャッシュしたい値 = useMemo(キャッシュしたい値を計算する関数, 依存配列)</code></pre> 注意点としては第一引数の「キャッシュしたい値を計算する関数」は引数があってはなりません。 なので、引数ありの関数をキャッシュしたい場合は以下のようにアロー関数でラップするのも一つの手です。 <pre><code>const cachedTax = useMemo(() =&gt; {
 CaluculateTax(price)
}, [price])</code></pre>上記の場合、初回描画時に<code>CaluculateTax</code>関数が実行され、税額を計算します。 次回以降は初回に計算された<code>CaluculateTax</code>関数の結果の値を返し続けます。そして、<code>price</code>の値が変更されたときに再度<code>CaluculateTax</code>関数が実行され、その値がキャッシュされます。 <h2 id="ha33d471f29">useMemo の効果を実感する</h2>以下のようなコードを書きました。 トップページに現在のテーマとストーリーの情報を表示しました。 そして、テーマとストーリーのジャンルを変更するためのボタンも設置しました。 今回は人為的にストーリー情報のフィルター処理を遅くするために遅延処理を入れています。 src/TopPage.js<pre><code>import React, { useState } from "react";
import StoryList from "./StoryList";
import { fetchStoryList, filterStoryList } from "./fetchStoryList";

const stories = fetchStoryList();
const TopPage = () =&gt; {
 const [genre, setGenre] = useState("all");
 const [theme, setTheme] = useState("dark");
 return (
 &lt;div style={{ backgroundColor: theme === "dark" ? "#7d7d7d" : "#ffffff" }}&gt;
 &lt;p&gt;current theme is {theme}&lt;/p&gt;
 &lt;button onClick={() =&gt; setTheme("light")}&gt;light&lt;/button&gt;
 &lt;button onClick={() =&gt; setTheme("dark")}&gt;dark&lt;/button&gt;
 &lt;br /&gt;
 &lt;p&gt;current genre is {genre}&lt;/p&gt;
 &lt;button onClick={() =&gt; setGenre("all")}&gt;ALL&lt;/button&gt;
 &lt;button onClick={() =&gt; setGenre("adventure")}&gt;冒険&lt;/button&gt;
 &lt;button onClick={() =&gt; setGenre("suiri")}&gt;推理&lt;/button&gt;
 &lt;br /&gt;
 &lt;p&gt;StoryList&lt;/p&gt;
 &lt;StoryList
 stories={stories}
 filterStoryList={filterStoryList}
 genre={genre}
 /&gt;
 &lt;/div&gt;
 );
};

export default TopPage;</code></pre> src/StoryList.js<pre><code>import React from "react";

function StoryList({ stories, filterStoryList, genre }) {
 const filteredStories = filterStoryList(stories, genre);
 return (
 &lt;&gt;
 {filteredStories.map((story, i) =&gt; (
 &lt;div key={i} style={{ display: "flex" }}&gt;
 &lt;p style={{ marginRight: "10px" }}&gt;{story.id}&lt;/p&gt;
 &lt;p style={{ marginRight: "10px" }}&gt;{story.title}&lt;/p&gt;
 &lt;p&gt;{story.genre}&lt;/p&gt;
 &lt;/div&gt;
 ))}
 &lt;/&gt;
 );
}

export default StoryList;</code></pre> src/fetchStoryList.js<pre><code>export function fetchStoryList() {
 const storiyACount = 1080;
 const storiesA = [...Array(storiyACount)].map((_, number) =&gt; {
 return {
 id: number + 1,
 title: `ワンピース第${number + 1}話`,
 genre: "adventure",
 };
 });
 const storiesB = [...Array(102)].map((_, number) =&gt; {
 return {
 id: storiyACount + number + 1,
 title: `名探偵コナン第${number + 1}話`,
 genre: "suiri",
 };
 });
 return [...storiesA, ...storiesB];
}

export function filterStoryList(stories, genre) {
 sleep(2000);
 return stories.filter((story) =&gt; {
 if (genre === "all") {
 return true;
 } else if (genre === "adventure") {
 return story.genre === "adventure";
 } else if (genre === "suiri") {
 return story.genre === "suiri";
 }
 });
}

function sleep(waitMsec) {
 var startMsec = new Date();
 while (new Date() - startMsec &lt; waitMsec);
}</code></pre> ジャンル情報を変更したときには、ストーリー情報が反映されるまで数秒時間がかかります。 しかし、テーマ情報を更新した際にも同じように反映されるまで数秒時間がかかってしまっています。これはテーマ情報を更新する際にストーリー情報のフィルター処理まで再度計算されているためです。<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FSJwfjvL4AMw%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DSJwfjvL4AMw&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FSJwfjvL4AMw%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="854" height="480" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> これを改善するためにはストーリー情報のフィルター結果をメモ化する必要があります。 src/StoryList.js<pre><code> const filteredStories = useMemo(
 () =&gt; filterStoryList(stories, genre),
 [stories, filterStoryList, genre]
 );</code></pre> このように修正することで、テーマ情報更新がすぐに反映されるようになりました。<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FmlPSpWLIF9k%3Ffeature%3Doembed&display_name=YouTube&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DmlPSpWLIF9k&image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FmlPSpWLIF9k%2Fhqdefault.jpg&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=youtube" width="854" height="480" scrolling="no" title="YouTube embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe> <h2 id="he68bc386d9">useCallback でも書けないのか？</h2>もちろんuseCallbackでも書けます。 useMemoは関数の計算結果をキャッシュするのに対して、useCallbackは関数が再評価することを抑止する、ということです。 なので上記コードの場合は<code>filterStoryList</code>関数を評価する<code>TopPage</code>コンポーネントにおいて、useCallbackで関数をラップする必要があります。 src/StoryList.js<pre><code>export default React.memo(StoryList);</code></pre>src/TopPage.js<pre><code> const cachedfilterStoryList = useCallback(
 (stories, genre) =&gt; filterStoryList(stories, genre),
 [stories, filterStoryList, genre]
 );</code></pre>

技術的なことや趣味、読んだ本についての感想などを投稿してきます。

React の記事

カテゴリー