Next.js, Recoil, nookiesを使用して、カート機能を実装しよう！！

<h2 id="hf7163935dd">作成するもの</h2> <a href="https://side-menu-template.vercel.app/" target="_blank" rel="noopener noreferrer">https://side-menu-template.vercel.app/</a> Backlogのようなよくあるサイドメニュー <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/87ce986629034721a2458846d32c6b0e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-26%2019.44.51.png?w=860&amp;h=470" alt=""> <h2 id="ha31bd80de1">要件</h2> <ul><li>開いているページは色を変える</li><li>ハンバーガーメニューはhoverで矢印が出るアニメーションを入れる(Backlogのパクり)</li></ul>サイドバー<ul><li>はスクロール不可、コンテンツ部分はスクロールできるようにする</li><li>Next.js, TypeScriptを使用する</li></ul> <h2 id="hdf6724cf74">今回のソースコード</h2> ソースだけ見たい方は<a href="https://github.com/abeshi03/side-menu-template" target="_blank" rel="noopener noreferrer">こちら</a> <h2 id="h31d727ccda">準備</h2> まずは使用するアイコンを準備します。 // styles/HomeIcon.tsx<pre><code>/* --- ライブラリー --------------------------------------------------------------------------------------------------- */
import React, { memo, VFC } from "react";


type Props = {
 className: string;
}

/* eslint-disable-next-line react/display-name */
export const HomeIcon: VFC&lt;Props&gt; = memo((props) =&gt; {

 const { className } = props

 return (
 &lt;svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.9 512.1"&gt;
 &lt;path d="M498.2 222.7 289.3 13.8C280.4 4.9 268.6 0 256 0s-24.4 4.9-33.3 13.8L13.9 222.6l-.2.2c-18.3 18.4-18.2 48.2.1 66.6 8.4 8.4 19.4 13.2 31.3 13.7.5 0 1 .1 1.5.1h8.3v153.7c0 30.4 24.7 55.2 55.2 55.2h81.7c8.3 0 15-6.7 15-15V376.5c0-13.9 11.3-25.2 25.2-25.2h48.2c13.9 0 25.2 11.3 25.2 25.2V497c0 8.3 6.7 15 15 15H402c30.4 0 55.2-24.7 55.2-55.2V303.1h7.7c12.6 0 24.4-4.9 33.3-13.8 18.3-18.3 18.3-48.2 0-66.6z"/&gt;
 &lt;/svg&gt;
 );
});</code></pre> 上記を使用してください。 今回はアイコンを準備するのが面倒だったので、全て同じアイコンで進んでいきます。 次にLayout.tsxを作成しましょう！ とりあえず下記のような感じで作成しこの時components/Layout/Layout.module.scssも作成しましょう！ // src/components/Layout/Layout.tsx<pre><code>import { VFC, memo, ReactNode, useState } from "react";
import styles from "./Layout.module.scss";
import { HomeIcon } from "../../styles/Home";


type Props = {
 children: ReactNode;
}

type Navigation = {
 pageName: string;
 path: string;
 icon: JSX.Element;
}

const navigations: Navigation[] = [
 {
 pageName: "トップ",
 path: "/",
 icon: &lt;HomeIcon className={styles.icon}/&gt;
 },
 {
 pageName: "ページ2",
 path: "/page2",
 icon: &lt;HomeIcon className={styles.icon}/&gt;
 },
 {
 pageName: "ページ3",
 path: "/page3",
 icon: &lt;HomeIcon className={styles.icon}/&gt;
 },
 {
 pageName: "ページ4",
 path: "/page4",
 icon: &lt;HomeIcon className={styles.icon}/&gt;
 },

]

/* eslint-disable-next-line react/display-name */
export const Layout: VFC&lt;Props&gt; = memo((props) =&gt; {

 const { children } = props;


 return (
 null
 )
})</code></pre> 簡単に説明していきます。 <pre><code>type Props = {
 children: ReactNode;
}</code></pre> 今回Propsでchildrenを受け取っていきます。 画像のようにchildrenで受け取ったものをコンテンツ部分に表示させる想定です。 <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/9f4039dc5fcb47debdef45abf50e0928/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-26%2019.56.12.png?w=600&amp;h=818" alt=""> <pre><code>type Navigation = {
 pageName: string;
 path: string;
 icon: JSX.Element;
}</code></pre> 次にナビゲーションは配列で定義します。 "ナビゲーションに表示するページ名", "遷移先のpath", "先ほど作成したicon"といった感じです。 これで準備は完了です。 <h2 id="h84ddcb6020">メイン部分</h2> <pre><code>import { VFC, memo, ReactNode, useState } from "react";
import Link from "next/link";
import styles from "./Layout.module.scss";
import { HomeIcon } from "../../styles/Home";
import { useRouter } from "next/router";


type Props = {
 children: ReactNode;
}

type Navigation = {
 pageName: string;
 path: string;
 icon: JSX.Element;
}

const navigations: Navigation[] = [
 {
 pageName: "トップ",
 path: "/",
 icon: &lt;HomeIcon className={styles.icon}/&gt;
 },
 {
 pageName: "ページ2",
 path: "/page2",
 icon: &lt;HomeIcon className={styles.icon}/&gt;
 },
 {
 pageName: "ページ3",
 path: "/page3",
 icon: &lt;HomeIcon className={styles.icon}/&gt;
 },
 {
 pageName: "ページ4",
 path: "/page4",
 icon: &lt;HomeIcon className={styles.icon}/&gt;
 },

]

/* eslint-disable-next-line react/display-name */
export const Layout: VFC&lt;Props&gt; = memo((props) =&gt; {

 const { children } = props;

 const [ menuOpen, setMenuOpen ] = useState(true);

 const router = useRouter();

 const isPageActive = (pagePath: string): boolean =&gt; {
 return pagePath === String(router.route)
 }


 return (
 &lt;div className={styles.root}&gt;

 &lt;aside className={styles.sidebar} style={{ width: menuOpen ? "200px" : "60px" }}&gt;
 &lt;div className={styles.hamburger} role="button" onClick={() =&gt; setMenuOpen(!menuOpen)}&gt;
 {[...Array(3)].map((_, index: number) =&gt; (
 &lt;span className={menuOpen ? styles.menuCloseArrow : styles.menuOpenArrow} key={index}&gt;&lt;/span&gt;
 ))}
 &lt;/div&gt;
 {navigations.map((navigation) =&gt; (
 &lt;Link href={navigation.path} key={navigation.pageName}&gt;
 &lt;a
 className={styles.flexContainer}
 style={{ background: isPageActive(navigation.path) ? "#1B555A" : "none" }}&gt;
 { navigation.icon }
 { menuOpen &amp;&amp; &lt;p className={styles.pageName}&gt;{ navigation.pageName }&lt;/p&gt; }
 &lt;/a&gt;
 &lt;/Link&gt;
 ))}
 &lt;/aside&gt;

 &lt;main className={styles.mainContent}&gt;
 {children}
 &lt;/main&gt;
 &lt;/div&gt;
 )
})</code></pre> ざっと説明するとまず下記の部分でmenuが開いているかどうかのbooleanをstateとして保持します。 <pre><code>const [ menuOpen, setMenuOpen ] = useState(true);</code></pre> <pre><code>const router = useRouter();

const isPageActive = (pagePath: string): boolean =&gt; {
 return pagePath === String(router.route)
}</code></pre> isPageActiveは画像のように色を変える必要があるのでそのbooleanです。 今回はあらかじめ配列で指定したpathと現在のpageのpathが揃っていればtrueという処理にしています。 router.routeで現在のpathが取得できます。 <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/4f96fde42428496891c71f9d17b60bef/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-26%2020.02.09.png?w=296&amp;h=900" alt=""> <pre><code>&lt;aside className={styles.sidebar} style={{ width: menuOpen ? "200px" : "60px" }}&gt;</code></pre> ここの部分ではメニューが開いている時と閉じている時で横幅を指定しています。 <pre><code>&lt;div className={styles.hamburger} role="button" onClick={() =&gt; setMenuOpen(!menuOpen)}&gt;</code></pre> ここではハンバーガーメニューの親クラスなのでクリックするたびに、menuOpenのstateを切り替えています。 role をしっかり指定するとアクセシビリティ的にも良いです。 <pre><code>{[...Array(3)].map((_, index: number) =&gt; (
 &lt;span className={menuOpen ? styles.menuCloseArrow : styles.menuOpenArrow} key={index}&gt;&lt;/span&gt;
))}</code></pre> この部分はハンバーガーメニューを作るためにからのspanタグを3つ生成しています。 menuOpenがtrueがfalseによって与えるスタイルを分けていますが、これは閉じる時と開くときの矢印のアニメーションが逆になるからです！ <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/af0111a8bfec40e8861303f203cc8a91/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-26%2020.09.12.png?w=278&amp;h=263" alt=""> <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/6e18da83a17b43b49f13cab74bcb5fdf/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-02-26%2020.08.41.png?w=362&amp;h=231" alt=""> <pre><code>&lt;main className={styles.mainContent}&gt;
 {children}
&lt;/main&gt;</code></pre> あとはコンテンツ部分はchildren部分を表示するだけです。 <h2 id="h46cc5f1dce">cssを追加する</h2> ではcssを追加していきましょう <pre><code>.root {

 $paddings: 15px;
 @mixin borderStyle() {

 display: block;

 height: 1px;
 width: 30px;
 background: white;

 margin-bottom: 10px;


 &amp;:last-child {

 margin-bottom: 0;
 }
 }


 display: flex;
 width: 100%;

 .sidebar {

 position: -webkit-sticky; /* Safari対応 */
 position: sticky;
 top: 0;
 height: 100vh;
 background-color: #4CAF93;

 padding-left: $paddings;
 padding-right: $paddings;
 }


 .hamburger {

 cursor: pointer;
 width: 40px;

 margin-top: 15px;


 /* メニューを閉じるアニメーション ==================================================================================== */
 .menuCloseArrow {
 @include borderStyle
 }


 &amp;:hover &gt; .menuCloseArrow {

 transition: 0.2s;

 &amp;:nth-child(1) {

 width: 15px;
 height: 2px;
 transform: translateY(7px) translateX(-1px) rotate(140deg);
 }


 &amp;:nth-child(2) {

 height: 2px;
 }

 &amp;:nth-child(3) {
 width: 15px;
 height: 2px;
 transform: translateY(-7px) translateX(-1px) rotate(-140deg);

 margin-bottom: -3px; /* アニメーションの際の調整 */
 }
 }


 /* メニューを開くアニメーション ====================================================================================== */
 .menuOpenArrow {
 @include borderStyle
 }


 &amp;:hover &gt; .menuOpenArrow {

 transition: 0.2s;

 &amp;:nth-child(1) {

 width: 15px;
 height: 2px;
 transform: translateY(7px) translateX(16px) rotate(-140deg);
 }


 &amp;:nth-child(2) {

 height: 2px;
 }

 &amp;:nth-child(3) {
 width: 15px;
 height: 2px;
 transform: translateY(-7px) translateX(16px) rotate(140deg);

 margin-bottom: -3px; /* アニメーションの際の調整 */
 }
 }
 }


 .flexContainer {

 display: flex;
 align-items: center;
 column-gap: 10px;

 margin-top: 10px;

 margin-right: -$paddings;
 margin-left: -$paddings;

 padding-right: $paddings;
 padding-left: $paddings;

 &amp;:hover {

 background-color: #1B555A;
 }
 }


 .icon {

 display: block;
 flex-shrink: 0;
 fill: white;
 width: 25px;

 margin-top: 12px; // 微調整
 margin-bottom: 12px; // 微調整
 }


 .pageName {
 font-size: 14px;
 color: white;
 }


 .mainContent {

 background: #F6F8FA;
 width: 100%;
 }
}</code></pre> まず重要なのは下記の部分です <pre><code>/* メニューを閉じるアニメーション ==================================================================================== */
.menuCloseArrow {
 @include borderStyle
}


&amp;:hover &gt; .menuCloseArrow {

 transition: 0.2s;

 &amp;:nth-child(1) {

 width: 15px;
 height: 2px;
 transform: translateY(7px) translateX(-1px) rotate(140deg);
 }


 &amp;:nth-child(2) {

 height: 2px;
 }

 &amp;:nth-child(3) {
 width: 15px;
 height: 2px;
 transform: translateY(-7px) translateX(-1px) rotate(-140deg);

 margin-bottom: -3px; /* アニメーションの際の調整 */
 }
}</code></pre> ハンバーガーメニューをhoverした際にtransformのrotateで矢印の形を作っています。 transitionをつけるとそれっぽくなります♪ そして下記の部分も重要です <pre><code>.sidebar {

 position: -webkit-sticky; /* Safari対応 */
 position: sticky;
 top: 0;
 height: 100vh;
 background-color: #4CAF93;

 padding-left: $paddings;
 padding-right: $paddings;
}</code></pre> sidebarにpostion: stickyを指定することにより、コンテンツだけがスクロールされる状態になります。 こちらを付けないとコンテンツがスクロールされた際に、サイドバーもスクロールされ、UIが悪い印象になってしまします。 <h2 id="h35a70d3364">ページを追加する</h2> あとはページを追加するだけです。 src/pages/index.tsx src/pages/page1.tsx src/pages/page2.tsx src/pages/page3.tsx を作成しましょう。 中身はこんな感じで今回は適当です。 <pre><code>import type { NextPage } from 'next'

const Page2: NextPage = () =&gt; {
 return (
 &lt;div&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;p&gt;ページ2&lt;/p&gt;
 &lt;/div&gt;
 )
}

export default Page2;</code></pre> <h2 id="h615cca35fe">Layoutコンポーネントを使用する</h2> 最後にLayoutコンポーネントを呼び出しましょう // pages/_app.tsx<pre><code>import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { Layout } from "../components/layouts/Layout";

function MyApp({ Component, pageProps }: AppProps) {
 return (
 &lt;Layout&gt;
 &lt;Component {...pageProps} /&gt;
 &lt;/Layout&gt;
 )
}

export default MyApp</code></pre> LayoutでComponet部分をつつんであげることによりPageComponentがコンテンツ部分になります。 お疲れさまでした！！！

Next.jsでBacklog風のサイドメニューを作ってみよう！

配列の使い方としてメモ <h2 id="ha31bd80de1">要件</h2> 全てのカテゴリーを返すAPIがあったとします。 例: エンドポイント: /categories レスポンス <pre><code>[
 {
 "id": 1,
 "name": "サンプルカテゴリー"
 }
]</code></pre> そして新規でカテゴリーidの配列で特定のカテゴリーだけをgetしたいとする。 下記がイメージ <pre><code>async function getAllCategories(): Promise&lt;Category[]&gt; // 元からあるAPI

async function getCategories(targetCategoryIds): Promise&lt;Category[]&gt; // 新規に欲しいAPI</code></pre> 普通であれば元のカテゴリーのAPIにカテゴリーIDでのフィルタリングを入れれば終了です。 ただ今回は工数の都合上バックエンドに新規のAPIを拒否された場合を想定します笑(実際にあった) <h2 id="h9a3099b506">対処法</h2> まーこーなってしまった以上フロントエンド側で対処するしかないです、、、 結論filterしてincludesで絞り込む <pre><code>// 1 既存APIでカテゴリー一覧をgetする
// 2 getしたカテゴリーをdataに代入する

data.filter((category: Category) =&gt; targetCategoriesIDs.includes(category.ID));</code></pre> これで完了。 targetCategoriesIDsは引数からとってくることを仮定しています。

filterとincludeを使用して配列を正しく扱う

Next.jsとcssModules(Sass) + Storybookの環境構築で中々ハマったので、記事に残しておきます。 これはmodule.cssでは起きない現象で、module.scssの時のみ起きるみたいです😇 <h2 id="h8de6a2a24f">前提知識</h2> Next.js, TypeScriptの基礎 Next.jsをセットアップしている段階の話から進めていきます。 <h2 id="h94142d6374">本ブログ記事であつかうライブラリーのバージョン</h2> <pre><code>"sass": "^1.42.1",
"sass-loader": "^10.2.1",
"style-loader": "^1.3.0"
"css-loader": "^3.6.0",
"@storybook/addon-actions": "^6.4.10",
"@storybook/addon-links": "^6.4.10",
"@storybook/addons": "^5.3.22",
"@storybook/react": "^6.4.10"</code></pre> <h2 id="heaf63c57ee">Sassをinstall</h2> <pre><code>npm i --save sass</code></pre> <h2 id="h362762d26f">必要なパッケージを追加する</h2> <pre><code>npm i --save style-loader</code></pre> ここのバージョンが重要なようで最新の11系をinstallするとバグるようなので必ず10系をinstallしましょう<pre><code>npm i --save sass-loader@^10.2.1"</code></pre> <h2 id="hfd27f386ab">Storybookをinstall</h2> <pre><code>npx sb init</code></pre> これでまるっとStorybookのセットアップを完了させてくれます。 <h2 id="hb9d3259058">Storybookのmain.jsを修正する</h2> セットアップしたままの状態ではsassのcssModulesをStorybookで使うことができません。 main.jsを少し書き換えてあげる必要があります。 <pre><code>// .storybook/main.js
module.exports = {
 stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'], // 読み込みたいファイル
 addons: ['@storybook/addon-actions', '@storybook/addon-links'],
 webpackFinal: async(config) =&gt; {
 config.module.rules.push({
 test: /\.scss$/, // sassを読み込む
 use: [
 "style-loader",
 {
 loader: "css-loader",
 options: {
 importLoaders: 1,
 modules: {
 localIdentName: "[local]___[hash:base64:2]",
 },
 },
 },
 "sass-loader",
 ],
 });
 return config;
 }
};</code></pre> <h2 id="h5697d7df11">preview.jsを書き換える</h2> <pre><code>// - グローバルで使用しているsassファイルをimportしてあげる
import "../src/assets/styles/global/global.scss"
import "../src/assets/styles/global/mixins/mixins.scss"
import "../src/assets/styles/global/valiables/valiables.scss"
import "../src/assets/styles/global/reset.scss"

export const parameters = {
 actions: { argTypesRegex: '^on[A-Z].*' },
}</code></pre> <h2 id="h9945e07638">storiesファイルを作成する</h2> main.jsで読み込んだstories ファイルを作成することにより、storybookに反映することができます。 例 src/components/atoms/AlertBox/AlertBox.stories.tsx <pre><code>// - ライブラリー ================================
import React from "react";
import { ComponentStory, ComponentMeta } from '@storybook/react';

// - コンポーネント ==============================
import { AlertBox } from "./AlertBox";

export default {
 title: "AlertBox",
 component: AlertBox
} as ComponentMeta&lt;typeof AlertBox&gt;;

export const Error: ComponentStory&lt;typeof AlertBox&gt; = () =&gt; &lt;AlertBox title="エラー" description="エラーの説明" alertType="ERROR"/&gt;;

export const Info: ComponentStory&lt;typeof AlertBox&gt; = () =&gt; &lt;AlertBox title="お知らせ" description="お知らせの説明" alertType="INFO"/&gt;;

export const Success: ComponentStory&lt;typeof AlertBox&gt; = () =&gt; &lt;AlertBox title="成功" description="成功の説明" alertType="SUCCESS"/&gt;;

export const Warning: ComponentStory&lt;typeof AlertBox&gt; = () =&gt; &lt;AlertBox title="警告" description="警告の説明" alertType="WARNING"/&gt;;</code></pre> <pre><code>npm run storybook</code></pre> これで立ち上がるはずです。 お疲れさまでした！

Next.js + cssModules(Sass) + Storybookの環境構築

配列の削除で少しつまづいたのでメモ程度に <h2 id="h54d6c91c57">配列へ要素の追加</h2> まずおさらいで配列の追加 stringの配列を想定する。 <pre><code>const [ array, setArray ] = useState&lt;string[]&gt;([]);</code></pre> <pre><code>const addFunction = (): void =&gt; {
 setArray([ ...array, "追加する要素"] );
}</code></pre> useStateではスプレット構文で配列をコピーして追加するのが一般的。 <h2 id="hccbf72ca45">配列の削除</h2> 今回は配列のindexを指定して、該当の要素を削除するものとする。 <h3 id="hb30903ca4e">ダメな例</h3> <pre><code>const deleteFunction = (index: number): void =&gt; {
 setArray(array.splice(index, 1));
}</code></pre> <h3 id="hee0dba97af">成功例</h3> <pre><code>const deleteFunction = (index: number): void =&gt; {
 // - 配列をコピー
 let newArray: string[] = [ ...array ];
 // - 該当のindexを取り除く
 newArray.splice(index, 1);
 // setStateで更新
 setArray(newArray);
}</code></pre> <h3 id="h0004636abd">もっと簡潔に書く</h3> setStateは関数型の更新ができる <a href="https://ja.reactjs.org/docs/hooks-reference.html#functional-updates" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/hooks-reference.html#functional-updates</a> 例: prevCountにstateが入りstateが更新された値を返す <pre><code>&lt;button onClick={() =&gt; setCount(prevCount =&gt; prevCount - 1)}&gt;-&lt;/button&gt;</code></pre> これを応用してprevArrayに元のstate配列が入り更新された配列を返す <pre><code>const deleteFunction = (index: number): void =&gt; {
 setArray(prevArray =&gt; prevArray.splice(index, 1));
}</code></pre>

useStateでの配列の扱い

react hook formを使ってInputFieldのコンポーネントを作成しよう！

保守性の高いシステムを構築するには、変化に強いプログラムを組んでいくことが大切です。 今回はNext.jsを使って解説していきます。 <h2 id="h4ac312068f">なぜルーディングはハードコーディングしてはいけないのか？</h2> ダメな例です <pre><code>&lt;Link href="/users"&gt;
 &lt;a&gt;ユーザー一覧ページに遷移して！&lt;/a&gt;
&lt;/Link&gt;</code></pre> 上記はNext.jsのリンクコンポーネントを使い、ユーザー一覧ページへ遷移するコードですが、これは最悪です、、、、、 例えばURLが急な要望で/user_listに変更になったとします。 <pre><code>&lt;Link href="/user_list"&gt;
 &lt;a&gt;ユーザー一覧ページに遷移して！&lt;/a&gt;
&lt;/Link&gt;</code></pre> 上記のように書き換えが発生します。 一見簡単に思えるかもしれないですが、これが大規模システムだった時を想像してみましょう。 極端ですが、/usersのリンクコンポーネントの記述が100個あったとします。 つまりこれを100個分修正しなければいけないのです、、、 一括で修正したとしても、万が一漏れがあったとすると最悪の場合ユーザーを404ページに案内してしまう事態が起きるのです。。。 <h2 id="h58d5e63098">ハードコーディングしない為の対処法</h2> 純粋な対処法としてはルーティングをしっかりと定数のような形でまとめてあげればいいのです。 そしてページ遷移する際は全て定数からルーディングを呼び出します。 例 <pre><code>const usersListPagePath = "/users"</code></pre> <pre><code>&lt;Link href="usersListPagePath"&gt;
 &lt;a&gt;ユーザー一覧ページに遷移して！&lt;/a&gt;
&lt;/Link&gt;</code></pre> 定数として定義することで URLが変わった際は、usersListPagePathの値を変更するだけで100ページ分を一気に安全に修正することができます！！！ イメージがついてきたでしょうか でも上記は完全に良いとは言い切れません。 では自分が考える最適な対処法を3つほど紹介していくのでみていきましょう！ <h2 id="h316b0b0f6a">オブジェクト形式で記述していく</h2> 下記が参考コードです！ <pre><code>// routing.ts

export const Routing = {
 	 // - トップ ======================================
 	 Top: {
 	 path: "/",
 	 pageName: "トップ"
 	 },
 	
 
 	 // - ブログ =====================================
 	 Blog: {
 	 List: {
 	 path: "/blog",
 	 pageName: "ブログ記事一覧"
 	 },
 	 Details: {
 	 path: "/blog/[id]",
 	 pageName: "ブログ記事詳細"
 	 }
 	 }
 }</code></pre> 呼び出す際はRoutingをimportして <pre><code>&lt;Link href="Routing.Top.path"&gt;
 &lt;a&gt;トップページに遷移して！&lt;/a&gt;
&lt;/Link&gt;</code></pre> きれいにまとまりましたね。 では動的な場合はどうすればいいのか？？ <pre><code>&lt;Link href="Routing.Blog.Details.replace("[id]", 5)&gt;
 &lt;a&gt;ブログidが5のページに遷移して&lt;/a&gt;
&lt;/Link&gt;</code></pre> これでいけます。 5の部分を動的にしたい場合は、blog.idのような形で書いてあげるといいと思います。 <h2 id="hf69499cf69">namespaceで記述していく</h2> 2つ目がnamespaceで記述していく方法です。 <pre><code>// routing.ts

export namespace Blog {

 export namespace List {
 export const URI_Path: string = "/blog";
 export const localizedPageName: string = "ブログ一覧";
 }

 export namespace Details {

 export enum PathParameters {
 blogID = "id"
 }
 export const URI_PathTemplate: string = `/blog/:${PathParameters.blogID}`;

 export function buildURI_Path({ targetBlogID }: { targetBlogID: string; }): string {
 return URI_PathTemplate.replace(`:${PathParameters.blogID}`, targetBlogID);
 }

 export const localizedPageName: string = "ブログ詳細";
 }
}

export default Routing;</code></pre> こちらでも対応可能です。 <pre><code>&lt;Link href="Routing.Blog.Details.buildURI_Path({ targetBlogID: blog.id})&gt;
 &lt;a&gt;ブログidが5のページに遷移して&lt;/a&gt;
&lt;/Link&gt;</code></pre> namespaceは非推奨のプロジェクトも多いですが、関数や変数等も記述しやすい為、こういった場合は使ってもいいと思います。 <h2 id="h368f89b7da">最強ライブラリー pathpida</h2> 一番おすすめはこちらです！ <a href="https://github.com/aspida/pathpida" target="_blank" rel="noopener noreferrer">pathpida</a>は最近活用しているライブラリなのですが、Next.jsではpages内のコンポーネントを自動で読み取って、ルーティングを作成してくれます。 まずはライブラリーをinstallします <pre><code>npm install pathpida npm-run-all --save-dev</code></pre> packge.jsonのscript部分を変更します。 <pre><code>// packge.json

"scripts": {
	 "dev": "run-p dev:*",
	 "dev:next": "next dev",
	 "dev:path": "pathpida --watch",
	 "build": "pathpida &amp;&amp; next build",
}</code></pre> これで準備は完了です。 <pre><code>npm run dev</code></pre> プロジェクトを立ち上げるとpagesディレクト裏を読み取って <code>utils</code>&nbsp;または&nbsp;<code>lib</code>&nbsp;ディレクトリどちらかに&nbsp;<code>$path.ts</code>&nbsp;ファイルが自動生成されます。 両方存在しない場合はlibディレクトリを自動作成してくれます！ 下記のようなファイルが自動生成されます。 <pre><code>/* eslint-disable */
	// prettier-ignore
	export const pagesPath = {
	 blog: {
	 _id: (id: string | number) =&gt; ({
	 $url: (url?: { hash?: string }) =&gt; ({ pathname: '/blog/[id]' as const, query: { id }, hash: url?.hash })
	 }),
	 page: {
	 _id: (id: string | number) =&gt; ({
	 $url: (url?: { hash?: string }) =&gt; ({ pathname: '/blog/page/[id]' as const, query: { id }, hash: url?.hash })
	 })
	 }
	 },
	 $url: (url?: { hash?: string }) =&gt; ({ pathname: '/' as const, hash: url?.hash })
	}
	
	// prettier-ignore
	export type PagesPath = typeof pagesPath</code></pre> 呼び出す際は <pre><code>&lt;Link href="pagesPath.blog._id(targetBlog.id).$url()")&gt;
 &lt;a&gt;指定したのページに遷移して&lt;/a&gt;
&lt;/Link&gt;</code></pre> で簡単に呼び出すことができます！ こちらのライブラリーを導入することでpagesディレクトリ下にファイルが増えるたびに自動でroutingを生成してくれるので、もはや定数化して変更があるたびに、定数を変更することすら やらなくて済むのです、、、、 詳しい使い方は<a href="https://github.com/aspida/pathpida" target="_blank" rel="noopener noreferrer">こちら</a>からご覧ください！

ルーティングはハードコーディングするな！

<h2 id="he3c2ffbbec">今回作成する表示/非表示を切り替えるコンポーネント</h2> 今回はこのようなよくある表示/と非表示を切り替えるボタンを作成していきます。 <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/1ec02876d3d44777b3a6235f1182c297/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-06%2023.34.13.png" alt=""> <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/c8ce915bdb35478c8b5d9fe2cdff4cc7/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-06%2023.33.16.png?w=417&amp;h=78" alt=""> よく使うものはコンポーネントにしてどんな状況でも使いまわせることが大事です。 では早速やっていきましょう！！ <h3 id="h48162eced8">使用技術</h3> React, TypeScript, css modules, react hooks <h3 id="hc33aa31841">ファイルの作成</h3> 今回はDisplaySwitchingButtonというコンポーネント名で作成していきます。 下記二つのファイルを使用していきます。 DisplaySwitchingButton.tsx displaySwitchingButton.module.scss 今回はスタイルはcss modulesを使用しています。 アイコンも必要なので追加します。 こちらはコピペして使用してください！ <pre><code>// src/assets/icons/PlusIcon.tsx

// - フレームワーク =======================================================================================================
import React, { memo, VFC } from "react";

/* eslint-disable-next-line react/display-name */
export const PlusIcon: VFC = memo(() =&gt; {
 return (
 &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" xmlSpace="preserve"&gt;
 &lt;g transform="translate(-.3)"&gt;
 &lt;circle cx="10.3" cy="10" r="10"/&gt;
 &lt;path d="m11.12 14.2-.07-3.46h3.4c.42 0 .84-.42.84-.84a.91.91 0 0 0-.85-.85h-3.4v-3.4a.91.91 0 0 0-.84-.85.91.91 0 0 0-.85.85v3.4h-3.4a.91.91 0 0 0-.84.85c0 .42.42.84.85.84h3.4v3.4c0 .42.42.85.84.85.5.07.85-.29.92-.78z" fill="#fff"/&gt;
 &lt;/g&gt;
 &lt;/svg&gt;
 );
});

</code></pre> <pre><code>// src/assets/icons/MinusIcon.tsx

// - フレームワーク =======================================================================================================
import React, { memo, VFC } from "react";

/* eslint-disable-next-line react/display-name */
export const MinusIcon: VFC = memo(() =&gt; {
 return (
 &lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"&gt;
 &lt;g transform="translate(-1201 -399)"&gt;
 &lt;circle cx="1213.5" cy="411.5" r="12.5"/&gt;
 &lt;path fill="#fff" d="M1208.8 411h10.2v1h-10.2z"/&gt;
 &lt;/g&gt;
 &lt;/svg&gt;
 );
});</code></pre> これで準備は完了です。 <h3 id="hc4c8f43b2b">コンポーネントをどう実装するか？</h3> 今回のやりたいこととしては下記画像のようになります。 <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/f46eb27d150449ca8846f4edf7d9a735/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-06%2023.47.32.png" alt=""> クリックイベントによって表示非表示を切り替える必要があるのでstateにbooleanの値を保持する必要がありそうです。 また、どの要素が来ても文言を変えられるよう"XXXXを表示"のXの部分は動的にした方がよさそうです。→こちらはpropsで渡していきます。 そして表示/非表示にする要素に関してはchildrenとしてコンポーネントの中に包むようにします。(こちらは意味が分からなくても実装時説明します。) <h3 id="h0391b9f8af">コンポーネントのコード</h3> <pre><code>// src/components/atoms/DisplaySwitchingButton/DisplaySwitchingButton.tsx

// - フレームワーク =======================================================================================================
import React, { memo, ReactNode, useState, VFC } from "react";

// - アセット ============================================================================================================
import styles from "./displaySwitchingButton.module.scss";
import { PlusIcon } from "../../../assets/icons/PlusIcon";
import { MinusIcon } from "../../../assets/icons/MinusIcon";


type Props = {
 label: string;
 children: ReactNode;
 style?: React.CSSProperties;
}

/* eslint-disable-next-line react/display-name */
export const DisplaySwitchingButton: VFC&lt;Props&gt; = memo((props) =&gt; {

 const { label, children, style } = props;

 const [ displayChildren, setDisplayChildren ] = useState&lt;boolean&gt;(true);

 const onClickDisplayChildren = (): void =&gt; {
 setDisplayChildren(!displayChildren);
 }

 return (
 &lt;div className={styles.displaySwitchingButton} onClick={onClickDisplayChildren}　style={style}&gt;

 { displayChildren ? (
 &lt;div className={styles.flexContainer}&gt;
 &lt;div className={styles.label}&gt;{ `${label}を非表示` }&lt;/div&gt;
 &lt;div className={styles.icon}&gt;
 &lt;MinusIcon/&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 ) : (

 &lt;div className={styles.flexContainer}&gt;
 &lt;div className={styles.label}&gt;{ `${label}を表示` }&lt;/div&gt;
 &lt;div className={styles.icon}&gt;
 &lt;PlusIcon/&gt;
 &lt;/div&gt;
 &lt;/div&gt;

 )}

 { displayChildren &amp;&amp; &lt;div&gt;{ children }&lt;/div&gt; }
 &lt;/div&gt;
 );
});</code></pre> 説明していきます。 <pre><code>type Props = {
 label: string;
 children: ReactNode;
 style?: React.CSSProperties;
}</code></pre> まずはPropsの型定義をしています。 labelは動的の文言の部分です。 childrenの型定義はReactNodeです。(これはお決まりまので覚えておきましょう。) <h3 id="h52aa7f01a9">childrenとは</h3> コンポーネントの中に入る子要素は事前には知らないものがあります。 例えば今回で言えば表示/非表示にする要素は事前に知ってはいけません。 <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/4f577d8bb9eb49f98f626853f5eba62f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-11-07%200.00.33.png" alt=""> 今回はプロフィールを入れる例で最初に説明しましたが、これはもしかしたらカテゴリーが入る可能性もあれば、ブログ記事が入る可能性もあるのです。 そういった不確定な要素を定義するのがchildrenです。 コンポーネントの子要素に挟むとchildrenになります。 <pre><code>&lt;DisplaySwitchingButton &gt;
 &lt;ProfileCard targetProfile={myProfile} /&gt; ← DisplaySwitchingButtonで挟むとchildren になる
&lt;/DisplaySwitchingButton&gt;</code></pre> 詳しくはこちらで確認しましょう。 <a href="https://ja.reactjs.org/docs/composition-vs-inheritance.html" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/composition-vs-inheritance.html</a> そして表示/非表示のstateをuseStateで定義しておきます。<pre><code> const [ displayChildren, setDisplayChildren ] = useState&lt;boolean&gt;(true);</code></pre> あとはこちらをクリックイベントに合わせて切り替えます。 下記の部分です。 <pre><code> const onClickDisplayChildren = (): void =&gt; {
 setDisplayChildren(!displayChildren);
 }
 &lt;div className={styles.displaySwitchingButton} onClick={onClickDisplayChildren}&gt;</code></pre> あとは簡単です。 ロジックで言うと displayChildrenがtrueであれば表示, falseであれば非表示です。 こちらを三項演算子で切り替えています。 <pre><code>{ displayChildren ? (trueの場合の処理) : (falseの場合の処理)</code></pre> そして最後にdisplayChildrenがtrueの場合はchildrenを表示しています。 <pre><code>{ displayChildren &amp;&amp; &lt;div&gt;{ children }&lt;/div&gt; }</code></pre> &amp;&amp;は 左辺がtrueであれば &amp;&amp; 右辺を返す です！ <h3 id="h4702e77dbd">スタイルの調整</h3> 最後にスタイルを調整しましょう。 <pre><code>.displaySwitchingButton {

 .flexContainer {

 display: flex;
 align-items: center;
 column-gap: 10px;

 cursor: pointer;


 &amp;:hover {

 text-decoration: underline;
 }


 &amp;:active {

 opacity: 0.7;
 }


 &amp;:focus {

 text-decoration: underline;
 }
 }



 .icon {

 width: 20px;
 height: 20px;

 fill: #423A57;
 }
}</code></pre> これで完成です！ <h3 id="hd82f6c9ef0">コンポーネントの呼び出し</h3> 呼び出す際は切り替えたい要素をchildrenに入れます。 例 <pre><code>&lt;DisplaySwitchingButton label={"プロフィール"}&gt;
 &lt;ProfileCard targetProfile={myProfile} /&gt;
&lt;/DisplaySwitchingButton&gt;</code></pre> お疲れ様でした！！！ <h3 id="hdf6724cf74">今回のソースコード</h3> <a href="https://github.com/abeshi03/tech-blog/blob/main/src/components/atoms/DisplaySwitchingButton/DisplaySwitchingButton.tsx" target="_blank" rel="noopener noreferrer">github</a>

"フロントエンド"の記事一覧