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

<h2 id="h00d9b48dc4">useEffect</h2> useEffectはクラスコンポーネントの以下のライフサイクルを使用できるイメージ <ul><li>componentDidMount</li><li>componentDidUpdate</li><li>componentWillUnmount</li></ul> <h3 id="hcfc9d1dd7e">conponentDidMount</h3> コンポーネントのdomが生成され、その後に一度呼び出されます。 ちなみに開発環境だとcomponentDidmountは2回呼ばれるようになっています。 年の為でNext.jsの仕様のようです。 本番環境では1回しか呼ばれないそうです。 ビルドしたらわかります。 <h3 id="h52b57466d1">componentDidUpdate </h3> stateの値の値が更新された時などにcomponentDidUpdateが発火します。 useEffectは第二引数に配列で関ししたい値を指定することができます。 Vueのwatchのようなもの。 <pre><code>useEffect(() =&gt; {
 console.log("カントが更新されました")
}, [count])
return (
 &lt;div className={styles.home}&gt;
 &lt;p&gt;トップページです&lt;/p&gt;
 &lt;p&gt;{count}&lt;/p&gt;
 &lt;button onClick={() =&gt; setCount((count) =&gt; count + 1)}&gt;カウントアップ&lt;/button&gt;
 &lt;/div&gt;
)</code></pre> この時useEffectは初回のmount時、カウントの値が更新された時の2パターンに発火します <h3 id="ha4447949c9">componentWillUnmount</h3> 最後にコンポーネントのアンマウント時に呼ばれます。 アンマウント ... コンポーネントが不要になり破棄される時 useEffectの中でreturn文を書くとアンマウントされます。 <pre><code>useEffect(() =&gt; {
 console.log('レンダーされました。');
 return () =&gt; {
 console.log('アンマウント');
 };
});</code></pre> この時まず最初に"レンダーされました"のmountが発火し、その後、アンマウントが発火されます。 そしてcomponent が破棄される時、つまりページの遷移をしたりcomponentが失われる時、アンマウントが発火します。 主に <ul><li>イベントリスナーの解除</li><li>タイマーの処理のキャンセル</li><li>DBアクセス後の接続解除</li></ul> 等に使われます。 <h2 id="hc720e09390">useEffectを使う際の注意点</h2> <h3 id="hf055fed846">マウント時にstateを更新して無限ループになる</h3> <pre><code>useEffect(() =&gt; {
 console.log("カントが更新されました")
 setCount((count) =&gt; count + 1)
}, [count])
return (
 &lt;div className={styles.home}&gt;
 &lt;p&gt;トップページです&lt;/p&gt;
 &lt;p&gt;{count}&lt;/p&gt;
 &lt;/div&gt;
)</code></pre> 例えばこんな例 mount時にsetCountはcountをプラス1します。 第二引数にcountを指定しているので、countが変化したタイミングでもう一度componentDidUpdateが呼び出されてcountが増え続ける無限ループが発生するのです。 <h3 id="h488f9b213e">アンマウント時にstateを更新しない</h3> これは基本的に行うタイミングがないかもしれないですが、 アンマウント時にstateを更新しても呼び出されることはありません。 componentが破棄される際に値を変更しても意味がありません。 落とし穴として開発環境ではマウントが2回発火されるので、2回目のマウントが発火される前にアンマウントも走ります。 なので開発環境で試しているとアンマウントが発火されると錯覚してしまいますが、ビルドすると発火されないことが確認できます・<h2 id="hcf83e1357e"> </h2> <h3 id="h05c8b67581">useEffectの中でdomを直接操作しない</h3> 基本的にReactの実装でdomを直接触ることはNGです。 domを操作したい場合はuseRefを使いましょう。 <h3 id="h97649f6460">useEffectに渡すコールバック関数をPromiseしてはいけない</h3> <pre><code>const [limit, setLimit] = useState(5);

useEffect(async () =&gt; {
 const response = await fetch(
 `https://jsonplaceholder.typicode.com/posts${limit}`
 );
 console.log(response);
}, [limit]);</code></pre> あまり使わないかもしれないですが、下記なら動きます <pre><code>useEffect(() =&gt; {
 async function fetchTest() {
 const response = await fetch(
 `https://jsonplaceholder.typicode.com/posts?${limit}`
 );
 console.log(response);
 }
 fetchTest()
}, [limit]);</code></pre> <h2 id="hd0cbad2855">コンポーネントのmemo化</h2> componentがサイレンダリングされる条件は3つあります。 <ul><li>stateが更新された時</li><li>propsが更新された時</li><li>親コンポーネントがサイレンダリングされた時</li></ul> stateとpropsが更新された際はサイレンダリングが起きるのは必要です。 ただ親コンポーネントが更新された時に子コンポーネントがサイレンダリングされるのは不要な場合が多いです。 これを解決するのがmemo化です。 <pre><code>// components/Count.tsx
import {FC} from "react";

type Props = {
 count: number;
}

export const Count: FC&lt;Props&gt; = (props) =&gt; {

 const { count } = props;

 console.log("サイレンダリング")

 return (
 &lt;div&gt;
 &lt;p&gt;{count}&lt;/p&gt;
 &lt;/div&gt;
 )
}</code></pre> 新たにCountコンポーネントを作成します。 <pre><code>import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'
import {useState} from "react";
import {Count} from "../components/Count";

const Home: NextPage = () =&gt; {

 const [count, setCount] = useState(0);

 const countUp = () =&gt; {
 setCount((count) =&gt; count + 1)
 }

 return (
 &lt;div className={styles.home}&gt;
 &lt;p&gt;トップページです&lt;/p&gt;
 &lt;Count count={count}/&gt;
 &lt;button onClick={countUp}&gt;カウントアップ&lt;/button&gt;
 &lt;/div&gt;
 )
}

export default Home</code></pre> それを親コンポーネントから呼び出しましょうか。 ボタンをクリックすると、stateが更新されるのでCountコンポーネントがサイレンダリングされます。 これは通常の動作です。<img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/09482d6577ff40bbad2aa85823e18238/%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-07-28%208.27.23.png?w=1000&amp;h=625" alt=""> 次にinputFieldのイベントを親コンポーネントに書いてみましょう。 <pre><code>const Home: NextPage = () =&gt; {

 const [count, setCount] = useState(0);
 const countUp = () =&gt; {
 setCount((count) =&gt; count + 1)
 }

 const [text, setText] = useState(""); // 追加
 const onChangeText = (e: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
 setText(e.target.value);
 }　　// 追加

 return (
 &lt;div className={styles.home}&gt;
 &lt;p&gt;トップページです&lt;/p&gt;
 &lt;input onChange={(e) =&gt; onChangeText(e)}/&gt;
 &lt;Count count={count}/&gt;
 &lt;button onClick={countUp}&gt;カウントアップ&lt;/button&gt;
 &lt;/div&gt;
 )
}</code></pre> そうすると、inputを更新した際にCountコンポーネントがサイレンダリングしてしまうようになります。 <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/57fa7d5291124e35afb20af4feeeea54/%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-07-28%208.31.32.png?w=1000&amp;h=625" alt=""> これを予防するのがmemo化です。 <pre><code>import {FC, memo} from "react";

type Props = {
 count: number;
}

export const Count: FC&lt;Props&gt; = memo((props) =&gt; {

 const { count } = props;

 console.log("サイレンダリング")

 return (
 &lt;div&gt;
 &lt;p&gt;{count}&lt;/p&gt;
 &lt;/div&gt;
 )
})

Count.displayName = "Count"</code></pre> Countコンポーネントをmemoで囲むことで、親コンポーネントが更新された際にサイレンダリングを防ぎます。 Next.jsのデフォルトのESLintの設定だと、無名関数になっているエラーが出るので <pre><code>Count.displayName = "Count"</code></pre> をつければ一旦解決します。 設定をオフにしても良いかと思います。<h3 id="hcf83e1357e"> </h3> ただしこれで全ての問題が解決したわけではありません。 countUpの関数の処理をCountにpropsで渡してみましょう。 <pre><code>&lt;input onChange={(e) =&gt; onChangeText(e)}/&gt;
&lt;Count count={count} countUpFunc={countUp}/&gt;</code></pre> <pre><code>// components/Count.tsx
export const Count: FC&lt;Props&gt; = memo((props) =&gt; {

 const { count, countUpFunc } = props;

 console.log("サイレンダリング")

 return (
 &lt;div&gt;
 &lt;p&gt;{count}&lt;/p&gt;
 &lt;button onClick={countUpFunc}&gt;カウントアップ&lt;/button&gt;
 &lt;/div&gt;
 )
})</code></pre> <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/831bf94698f54c15b29e3ea2a23b40c7/%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-07-28%208.37.03.png?w=1000&amp;h=625" alt=""> memo化したのにもかかわらずまたCountがinoutフィールドのレンダリングに反応して更新されてしまいます。 <h2 id="h4886ea6007">useCallback</h2> この原因として関数がmemoかされていないことが挙げられます。 <pre><code>const countUp = () =&gt; {
 setCount((count) =&gt; count + 1)
}</code></pre> countUpの関数は今の状態では、inputがonChangeされた際に関数が再生成されます。 関数が再生成されたことをpropsが更新されたとCountコンポーネントが勘違いし、サイレンダリングされてしまうのです。 それを解決するのがuseCallbackです。 useCallbackは関数のmemo化です。 <pre><code>const countUp = useCallback(() =&gt; {
 setCount((count) =&gt; count + 1)
}, [count]);</code></pre> 第二引数には関しする値をつけます。 こうすることで, countUpに関数はcountの値が変わった時だけ、関数が再生成されるようになります。 これで不要なレンダリングが防げます。 つまりmemo化とuseCallbackはセットで使いましょう！！！ ということです。

useEffect, useCallback, memo化について改めて

最近、決済実装をする機会があり、計算の処理をたくさんおこなった。 そこでMath.なんとかを多用する機会があったのでまとめてみます！ <h2 id="h222275a263">Math.floor</h2> 切り捨てするときに使います。 <pre><code>Math.floor(1.3)
=&gt; 1

Math.floor(1.9)
1</code></pre> ()ないの数字は切り捨てされます。 <h2 id="hcad2902f28">Math.cell</h2> 今度は切り上げします。 <pre><code>Math.ceil(1.1)
=&gt; 2

Math.ceil(1.9)
=&gt; 2</code></pre> <h2 id="hdbb319c430">Math.round</h2> 今度は四捨五入 <pre><code>Math.round(1.4)
=&gt; 1
Math.round(1.5)
=&gt; 2</code></pre> <h2 id="h8e2d016eed">Math.max</h2> こちらは最大の数を返します。 決済実装する際、単価 * ID数みたいな感じの計算だったのですが、5ID以下は5IDとして決済するという要件があり、こちらを使用しました。 <pre><code>Math.max(5, 100)
=&gt; 100
Math.max(5, 3)
=&gt; 5</code></pre> <h2 id="h2d79649e9e">Math.min</h2> 最小を返す <pre><code>Math.min(1,199)
=&gt; 1</code></pre> <h2 id="h665e22f525">Math.ramdom</h2> X - 1を返す <pre><code>Math.random()
=&gt; 0.04069651010177333</code></pre> よく使うのはこの辺かと😇

Math.なんとかについてまとめてみる

<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風のサイドメニューを作ってみよう！

prismaをinstallしている程で話を進めていきます。 <h2 id="h6ca526473b">seedファイルの作成</h2> prisma/seeds/seed.ts<pre><code>import { Prisma, PrismaClient } from "@prisma/client";
import moment from "moment";


const prisma = new PrismaClient();


const usersData: Prisma.UserCreateInput[] = [
 {
 email: "example1@test.com",
 name: "ユーザー1",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example2@test.com",
 name: "ユーザー2",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example3@test.com",
 name: "ユーザー3",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example4@test.com",
 name: "ユーザー4",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example5@test.com",
 name: "ユーザー5",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example6@test.com",
 name: "ユーザー6",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example7@test.com",
 name: "ユーザー7",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example8@test.com",
 name: "ユーザー8",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example9@test.com",
 name: "ユーザー9",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example10@test.com",
 name: "ユーザー10",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example11@test.com",
 name: "ユーザー11",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example12@test.com",
 name: "ユーザー12",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example13@test.com",
 name: "ユーザー13",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example14@test.com",
 name: "ユーザー14",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example15@test.com",
 name: "ユーザー15",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example16@test.com",
 name: "ユーザー16",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example17@test.com",
 name: "ユーザー17",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example18@test.com",
 name: "ユーザー18",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example19@test.com",
 name: "ユーザー19",
 description: "宜しくお願いします",
 createdAt: moment().format()
 },
 {
 email: "example20@test.com",
 name: "ユーザー20",
 description: "宜しくお願いします",
 createdAt: moment().format()
 }
];


async function createSeedData() {
 for (const user of usersData) {
 await prisma.user.create({ data: user });
 }
}

createSeedData()
 .catch((error) =&gt; {
 console.error(error);
 process.exit(1);
 })
 .finally(async () =&gt; {
 await prisma.$disconnect()
 });</code></pre> <h2 id="hf1f33f39cc">packge.jsonにコマンドを追加</h2> packge.json<pre><code>"prisma": {
 "seed": "npx ts-node prisma/seeds/seed.ts"
},</code></pre> <pre><code>npx prisma db seed</code></pre> これでseedデータが流し込めます。 下記でもmigrateがresetされ自動的にseedデータが流し込まれます。(ただしリセットされるので注意) <pre><code>npx prisma db migrate reset</code></pre>

prismaでseedファイルでサンプルデータを作成する

prismaの環境構築に関しては下記をご覧ください。 <a href="https://abeshi-blog.com/blog/8m8tb45wbg" target="_blank" rel="noopener noreferrer">https://abeshi-blog.com/blog/8m8tb45wbg</a> <h2 id="h8a175a9b0e">前提</h2> postgresqlを使用している 公式ドキュメントにそってデータモデルを定義する際の情報をどんどん書いていきます。 <pre><code>datasource db {
 provider = "postgresql"
 url = env("DATABASE_URL")
}


generator client {
 provider = "prisma-client-js"
}


model User {
 id Int @id @default(autoincrement())
 email String @unique
 name String?
 role Role @default(USER)
 posts Post[]
 profile Profile?
}


model Profile {
 id Int @id @default(autoincrement())
 bio String
 user User @relation(fields: [userId], references: [id])
 userId Int
}


model Post {
 id Int @id @default(autoincrement())
 createdAt DateTime @default(now())
 title String
 published Boolean @default(false)
 author User @relation(fields: [authorId], references: [id])
 authorId Int
 categories Category[] @relation(references: [id])
}


model Category {
 id Int @id @default(autoincrement())
 name String
 posts Post[] @relation(references: [id])
}


enum Role {
 USER
 ADMIN
}</code></pre><h3 id="hcf83e1357e"> </h3> <h3 id="h1962b47c7f">@id ... idを表します</h3> <h3 id="h03ba4c71d0">@default ... デフォルト値を表し引数を取れます。 autoincrement()</h3> 自動で一意のシーケンス番号を生成します 例<pre><code>id Int @id @default(autoincrement())</code></pre> <h3 id="hff82b8d2c6">cuid()</h3> cuidを生成します 例: <pre><code>id String @id @default(cuid())</code></pre> <h3 id="h8372e9bf81">uuid()</h3> uuidを生成します 例<pre><code>id String @id @default(uuid())</code></pre> <h3 id="h64139dc282">@unique </h3> 重複を予防します 例<pre><code>email String @unique</code></pre> <h3 id="h30be6fa274">@default()</h3> 引数をとりデフォルト値を設定します。 例<pre><code>published Boolean @default(false)</code></pre> デフォルト値は静的な値または下記の関数のどれかです。 <ul><li>autoincrement()</li><li>dbgenerated()</li><li>cuid()</li><li>uuid()</li><li>now()</li></ul> <h3 id="hd848aec444">@@unique</h3> 複数の重複を防ぎたい場合使います。 また指定したプロパティは必須である必要があります。 例<pre><code>model User {
 firstname Int
 lastname Int
 id Int

 @@unique([firstname, lastname, id])
}</code></pre> <h3 id="h1eb6c913e0">@relation</h3> リレーション関係を定義します 例<pre><code>user User @relation(fields: [userId], references: [id])</code></pre> userIdがとUserのidでリレーション関係があることを意味します。 <h3 id="hac67736add">@db.VarChar(n)</h3> nに最大文字数が入る 例<pre><code>name String @db.VarChar(30)</code></pre> 多分これくらいわかっていればなんとか開発できます。

prismaデータ・モデル基本でよく使うチートシート

今回はprismaをはじめて導入して、エラー等も途中出たのでメモ <h2 id="h6dff5c3074">Prismaとは</h2> TypeScript制のORMです。 Rubyでいうactive recordみたいな感じです。 今回は公式ドキュメントに沿って進めていきます。 <h2 id="h8a175a9b0e">前提</h2> データベースはpostgreSqlを使用 expressでプロジェクトを立ち上げている程で進めていきます <h2 id="h1674949319">Install</h2> <pre><code>npm install prisma typescript ts-node @types/node --save-dev</code></pre> まずは必要パッケージをinstallします。 // tsconfig.json<pre><code>{
 "compilerOptions": {
 "sourceMap": true,
 "outDir": "dist",
 "strict": true,
 "lib": ["esnext"],
 "esModuleInterop": true
 }
}</code></pre> tsconfig.jsonを作成し上記をコピペします。(今回はprismaに焦点を当てているのでtsconfig.jsonに関しては割愛します) <pre><code>npx prisma
npx prisma init</code></pre> 上記のコマンドを打つとschema.prismaと .envファイルが作成されます。 schema.prisma ... データベースとの接続、モデルの定義などをしていくファイル .env ... 環境変数用のファイル <h2 id="h200c01430c">データベースと接続する</h2> 今回は簡単にローカルでdbを立てて、そこと接続していきます。 ローカルのdbの作成方法に関しては下記の記事に書いてあるのでご参考までに。 <a href="https://abeshi-blog.com/blog/7logsp08hm3" target="_blank" rel="noopener noreferrer">https://abeshi-blog.com/blog/7logsp08hm3</a> // schema.prisma<pre><code>generator client {
 provider = "prisma-client-js"
}

datasource db {
 provider = "postgresql"
 url = env("DATABASE_URL")
}</code></pre> schema.prismaにこのようなコードが元々書かれているかと思います。<pre><code>env("DATABASE_URL")</code></pre> こちらで環境変数を読み込んでいるので.envファイルにDATABASE_URLを定義していきます。 <pre><code>DATABASE_URL="postgresql://USER:PASSWORD@localhost:5432/DATABASE_NAME?schema=public"

</code></pre> USER ... ユーザー名 PASSWORD ... パスワード DATABASE_NAME ... データベース名を入れます。 DBのURLに関しては使うORMなどによっても違うのでご注意を。 localhostの場合何もいじっていなければポートは5432です。 <h2 id="h1278698d62">モデルを定義する</h2> 今回は公式ドキュメントに沿ってユーザー、投稿、プロフィールのmodelを定義していきます。 // schema.prisma<pre><code>model Post {
 id Int @id @default(autoincrement())
 createdAt DateTime @default(now())
 updatedAt DateTime @updatedAt
 title String @db.VarChar(255)
 content String?
 published Boolean @default(false)
 author User @relation(fields: [authorId], references: [id])
 authorId Int
}

model Profile {
 id Int @id @default(autoincrement())
 bio String?
 user User @relation(fields: [userId], references: [id])
 userId Int @unique
}

model User {
 id Int @id @default(autoincrement())
 email String @unique
 name String?
 posts Post[]
 profile Profile?
}</code></pre> モデルを定義したら下記のコマンドを実行します。 <pre><code>npx prisma migrate dev --name init</code></pre> 上記のコマンドでsqlをデータベースに向けて実行できるようにしてくれます。 ※はじめこちらのコマンドを実行した際、下記のエラーが出ました <pre><code>Error: P3014

Prisma Migrate could not create the shadow database. Please make sure the database user has permission to create databases. Read more about the shadow database&nbsp;</code></pre> 原因としては権限まわりだそうです。 postgresqlの権限を確認するためにはデータベースを起動して\duコマンドを使います。 こちらで権限周りを確認することができます。 手っ取り早いのは該当のユーザーをSuperuserにすることです。 <pre><code>ALTER ROLE 名前 CREATEROLE;</code></pre> 上記のコマンドでuserのroleを変更することができます。 <pre><code>npx prisma migrate dev --name init</code></pre> でマイグレートを実行するとmigration.sqlとmigration_lock.tomの二つのファイルが作成されます。 そしてこれによりmodelに定義した3つのテーブルを作成することができるようになります！！！ <h2 id="hdcd8818ada">データベースのクエリを作成していく</h2> ここからはprisma clientを使っていくのでまずこちらをinstallします。 <pre><code>npm install --save @prisma/client</code></pre> これでindex.tsを書き換えていきます // index.ts<pre><code>import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient();

async function main() {

 await prisma.user.create({
 data: {
 name: "Alice",
 email: "alice@prisma.io",
 posts: {
 create: { title: "HELLO WORLD" }
 },
 profile: {
 create: { bio: "I like apple" }
 },
 },
 })

 const allUsers = await prisma.user.findMany({
 include: {
 posts: true,
 profile: true
 }
 })
 console.log(allUsers)
}

main()
 .catch((e) =&gt; {
 throw e
 })
 .finally(async () =&gt; {
 await prisma.$disconnect()
 })

</code></pre> まずはPrismaClientをimportしprismaの変数に宣言します。 main以下をコピペして下記のコマンドを実行しましょう！！ <pre><code>npx ts-node index.ts</code></pre> するとconsole.log(allUsers)をしているので 下記がコンソールに出るかと思います。 <pre><code>[
&nbsp; {
&nbsp; &nbsp; id: 3,
&nbsp; &nbsp; email: 'alice@prisma.io',
&nbsp; &nbsp; name: 'Alice',
&nbsp; &nbsp; posts: [ [Object] ],
&nbsp; &nbsp; profile: { id: 2, bio: 'I like apple', userId: 3 }
&nbsp; }
]</code></pre> つまりUser, Profile, Postsテーブルにレコードが追加されたことがわかります。 prisma.テーブル名.createで追加のコマンドに prisma.テーブル名.findManyで一覧を取得しています。 includeオプションではposts, profileを含むかを表しています。 こちら表示しないとレスポンスはid, email, nameのみになります。 次にpostsの更新をしてみます。 main関数の中身を下記に変更します <pre><code>async function main() {

 // await prisma.user.create({
 // data: {
 // name: "Alice",
 // email: "alice@prisma.io",
 // posts: {
 // create: { title: "HELLO WORLD" }
 // },
 // profile: {
 // create: { bio: "I like apple" }
 // },
 // },
 // })

 // const allUsers = await prisma.user.findMany({
 // include: {
 // posts: true,
 // profile: true
 // }
 // })

 const post = await prisma.post.update({
 where: { id: 1 },
 data: { published: true }
 })
 console.log(post)
}</code></pre> <pre><code>ts-node index.ts</code></pre> <pre><code>{
&nbsp; id: 1,
&nbsp; createdAt: 2022-01-28T01:26:37.747Z,
&nbsp; updatedAt: 2022-01-28T01:53:17.425Z,
&nbsp; title: 'HELLO WORLD',
&nbsp; content: null,
&nbsp; published: true,
&nbsp; authorId: 1
}</code></pre> 上記が返ってくることが確認できると思います。 publishedがdefaultのfalseからtrueに更新されているのがわかると思います。 prismaの触りは掴めたと思います。 あとは公式ドキュメントをガチャガチャいじっていきましょう！ お疲れさまでした！！！ <a href="https://www.prisma.io/" target="_blank" rel="noopener noreferrer">https://www.prisma.io/</a>

prismaの環境構築ハンズオン！

<h2 id="hb3d266b1d3">PostgreSQLとは？？</h2> データベースの一種 MySQLとかについでよく使われているイメージがあります。 自分の現場で使われているので今回はpostgreを選択しました！ 今回はローカルでDBを立てる方法を解説していきます。 <h2 id="h38917243e5">PostgreSQLをinstallする</h2> mac前提で進めていきます。 homebrewが入っていない方は事前にinstallをしましょう。 <pre><code>brew install postgresql</code></pre> <pre><code>postgres --version</code></pre> でバージョンが表示されればinstallが正常に行われています。 installすると <pre><code>cd /usr/local/var
ls</code></pre> とするとpostgresがあるかと思います。 <pre><code>postgres -D /usr/local/var/postgres</code></pre> 上記のコマンドでデータベースを実行することができます。(control + cで終了) <pre><code>export PGDATA=/usr/local/var/postgres
pg_ctl start</code></pre> 上記のコマンドでバックグラウンドでDBを起動することができます。 止める場合は <pre><code>pg_ctl stop</code></pre> <h2 id="hba669a03b1">DBの設定をする</h2> installができたので、あとはDBを作成していきます！ ににのユーザー名の部分にユーザー名を入力します。 <pre><code>createuser -P 任意のユーザー名</code></pre> パスワードを2回入れましょう！！！ では準備ができたのでDBを作成していきます。 <pre><code>createdb DBの名前 -O ユーザー名</code></pre> createdbコマンドでdbが新規に作成できます。 例 <pre><code>createdb sample-db -O sample-name</code></pre> これでDBが作成できます！！ <h2 id="he916771537">DBにアクセスする</h2> <pre><code>psql -U sample-name sample-db</code></pre> こちらでアクセスができます。 <h2 id="h84eb38d709">テーブルを作る</h2> <pre><code>sample-db → \d</code></pre> \dと入力することでデータを一括で確認することができます。 まだデータがない為、こちらはerrorが出ると思います。 テーブルを作成してみましょう。 <pre><code>create table user (id integer, name text, age integer);</code></pre> CREATE TABELdと出たら成功。 データもいれてみましょう。 <pre><code> INSERT INTO user values (1, 'sample-user', 18);</code></pre> これでデータが入ったので、 <pre><code>select * from user</code></pre> で追加されているのがわかると思います。 <h2 id="h19d3657ee6">TablePlusで作成したDBを確認する</h2> TablePlusとは様々なRDBに対応したデータベースをGUIで操作できるツールです。 下記よりinstallします。 <a href="https://tableplus.com/" target="_blank" rel="noopener noreferrer">https://tableplus.com/</a> installしたら立ち上げて <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/ebdbbaab7a974711be96c4155ce455b2/%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-01-27%200.41.44.png?w=400&amp;h=264" alt=""> 垢枠部分を選択 データベースの選択がでてくるのでpstgresを選択します。 <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/26327f1161a74c2999bad302337c275a/%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-01-27%200.44.06.png?w=400&amp;h=313" alt=""> 項目を入力したらConnectでDBの中身が確認できると思います！！！ お疲れ様でした！！！

PostgreSQLデータベースの環境をつくろう！

配列の使い方としてメモ <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の環境構築

モダンJavaScriptでよく出てくる分割代入についておさらいしていきます。 <a href="https://abeshi-blog.com/blog/pc3ipjyn6" target="_blank" rel="noopener noreferrer">スプレット構文</a>もよく使う文法なので合わせて確認しておきましょう！！ <h2 id="hff9199d9a1">分割代入とは</h2> 分割代入とは、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することができるJavaScriptの式です。 基本動作は下記です。 mdnより引用<pre><code>let a, b, rest;
[a, b] = [10, 20];


console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]</code></pre> こんなこともできます。 <pre><code>const a: number[] = [1,2,3,4,5];

const [ b, c ] = a; // 分割代入

console.log(b); // 1
console.log(c); // 2</code></pre> <h2 id="h29827405bb">オブジェクトの分割代入</h2> mdnより引用 <pre><code>const user = {
 id: 42,
 isVerified: true
};

const {id, isVerified} = user; // 分割代入

console.log(id); // 42
console.log(isVerified); // true</code></pre> これはReactのPropsを渡す際などにもよく使われます。 <pre><code>// Button.tsx
type Props = {
 color: "SKY_BLUE" | "WHITE";
 size: "SMALL" | "BIG";
 path: string | UrlObject;
 children: ReactNode;
 onClick?: () =&gt; void;
}

export const Button: VFC&lt;Props&gt; = memo((props) =&gt; {
 const { color, path, children, size, style, onClick } = props; // 分割代入

 return (
 null;
 );
});</code></pre> お疲れさまでした！

分割代入を理解する

スプレット構文は現代のモダンフロントエンドの現場にて非常によく使われまます。 これを使いこなすことが、モダンJSに入る第一歩です！！ <h2 id="hd4905f8f48">スプレット構文とは？？</h2> ...hogehogeの形で記述され、配列やオブジェクトの要素を展開する構文です。 このようにスプレット構文は<a style="color:#333333" href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax" target="_blank" rel="noopener noreferrer">mdn</a>の説明でも最初に聞くと何がなんだかよく分かりません、、、 例を使って覚えていきましょう！ <h2 id="h286d37ef4b">配列を展開する</h2> <pre><code>const numbers: number[] = [1,2,3]

console.log(...numbers) // 1, 2, 3
console.log([...numbers]) // [1, 2, 3] </code></pre> 一例です。 このようにnumbersで配列を定義した場合、...numbersで配列の添字を展開しているわけです。 添字 ... 配列の中の要素を指す [...numbers]とすることで、配列の中に新たに[1, 2, 3]と定義することができます。 つまり配列のコピーのようなイメージです。 <pre><code>const numbers: number[] = [1,2,3]
const numbers2: number[] = [ ...numbers ];

console.log(numbers); // [1,2,3]
console.log(numbers2); // [1,2,3] </code></pre> なのでこうすると配列をコピーできます。 mdnには下記のような一例が記載されています。 <pre><code>function sum(x, y, z) {
 return x + y + z;
}

const numbers = [1,2,3]
console.log(sum(...numbers)) // 6</code></pre> これは想像しやすいかと思います！ <h2 id="hda269dcd6b">配列に要素を追加する</h2> スプレット構文は配列をコピーすることができるので、簡単に配列に要素を追加することができます。 <pre><code>const numbers: number[] = [1,2,3]; // 元の配列
const newNumber: number = 4;　　// 配列に追加したい要素

const newArray: number[] = [ ...numbers, newNumber ]; // 新しく生成する配列
console.log(newArray); // [1,2,3,4]</code></pre> [ ...numbers ]で[1,2,3]になります。 [ ... numbers, 4]ということは[ 1,2,3,4 ]にとなります。 <h2 id="h4690c52dc5">2つの配列を展開する</h2> <pre><code>const numbers1: number[] = [1,2,3];
const numbers2: number[] = [4,5,6];

const newArray: number[] = [ ...numbers1, ...numbers2 ];
console.log(newArray) // [1, 2, 3, 4, 5, 6] </code></pre> <h2 id="h171f907e5c">オブジェクトを展開する</h2> これを応用するとオブジェクトにも適用できます。 <pre><code>const object = {
 a: "A",
 b: "B",
 c: "C"
}

console.log(object);
// {
// "a": "A",
// "b": "B",
// "c": "C"
// } 



const newObject = {
 ...object,
 d: "d"
}


console.log(newObject);

// {
// "a": "A",
// "b": "B",
// "c": "C",
// "d": "d"
// } </code></pre> もちろん展開している状態なので、要素を書き換えることもできます。 <pre><code>const object = {
 a: "A",
 b: "B",
 c: "C"
}


const newObject = {
 ...object,
 c: "新しいvalue"
}

console.log(newObject);
// {
// "a": "A",
// "b": "B",
// "c": "新しいvalue"
// } </code></pre> <h2 id="hb26e21c1fa">文字列分割もできる</h2> あまり使ったことはないですが、こんなこともできます。 <pre><code>const str: string = "hoge"

const array = [...str]
console.log(array) // ["h", "o", "g", "e"] </code></pre>

スプレット構文の挙動を理解する

<h2 id="h8d027c8ed3">はじめに</h2> 最近TypeScriptのenum型が読みづらく、どうにかならないかと思うことが多々ありました、、 実際TypeScriptプログラマーは最近enum型よりUnion型を好む傾向にあるそうです。 <h2 id="h3112d492e4">enum型とは</h2> <pre><code>enum Genders {
 male = "MALE",
 female = "FEMALE",
 notSpecified = "NOT_SPECIFIED"
}</code></pre> <pre><code>const gender: Genders = Genders.male; // "MALE"</code></pre> <h2 id="h682b6ccc12">Union型だとどうなるか</h2> <pre><code>type Genders = "MALE" | "FEMALE" | "NOT_SPECIFIED"
const gender: Genders = "MALE" // MALE</code></pre> 純粋にこちらの方が読みやすい。 しかも型補完もしっかりと出てくれます！ ただこれだけではenum型を使わない理由になりません。 <h2 id="ha70e89d679">なぜenum型はつかはない方がよいのか？</h2> <h3 id="h1e53db2a16">数値のenumの場合は型安全にならない</h3> <pre><code>enum Genders {
 male, // 0
 female, // 1
 notSpecified // 2
}

const gender: Genders = Genders.male; // OK
const gender2: Genders = 0; // OK???????</code></pre> このように予期せぬ値が入る可能性があります。 その他にもenumはTypeScriptの”a typed superset of JavaScript”に反するといったこともあるそうです。 下記の記事に非常に詳しく書かれておりました！ <a href="https://www.kabuku.co.jp/developers/good-bye-typescript-enum" target="_blank" rel="noopener noreferrer">https://www.kabuku.co.jp/developers/good-bye-typescript-enum</a> まーようするに冗長な書き方になる可能性があるのと、型安全でなくなる可能性がある為、Union型を使っておいた方が無難ということになります。 <h2 id="h05061146cf">const assertionを使うとenumを使わずにUnion型で代用できる</h2> <pre><code>export const genders = {
 male: "MALE",
 female: "FEMALE",
 notSpecified: "NOT_SPECIFIED"
} as const</code></pre> const でgendersを普通に定義します。 <pre><code>console.log(genders.male) // "MALE"</code></pre> as const をつけることで <img src="https://images.microcms-assets.io/assets/9708ca868db340b3b8edc8215891c3d9/e56851f181764697ba42be1355f3ee39/%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-01-10%2015.24.16.png?w=600&amp;h=106" alt=""> readonlyがつき、型安全になっていることがわかると思います。 つまり定数になっているってことですね。 ここからUnion型を生成できます。 <pre><code>export type Genders = typeof genders[keyof typeof genders]; // "MALE" | "FEMALE" | "NOT_SPECIFIED"</code></pre> これでkeyとvalueを定義しつつ、安全にUnion型を生成することができます。 上記がどういった挙動になっているかというと、 <pre><code>const Options = {
 a: "AA",
 b: "BB",
 c: "CC",
} as const;


// 以下の2つは同じ意味。型は"AA"として解決される。
type A1 = typeof Options.a;
type A2 = typeof Options["a"];


// 添字にはUNION型が使える。型は"AA"|"BB"として解決される。
type B = typeof Options["a" | "b"];


// オブジェクトのフィールド名をUNION型として取得する。型は"a"|"b"|"c"として解決される。
type C = keyof typeof Options;


// BとCの方法を組み合わせたもの。型は"AA"|"BB"|"CC"として解決される。
type D = typeof Options[keyof typeof Options];</code></pre> このようにkeyofとtypeofが使われております。 labelなどで性別を表示したい場合はenum同様switch分を使って表現することができます。 <pre><code>// - 型定義
import { genders, Genders } from "../types/User";

export const formatterStrings = {
 gender: function (gender: Genders) {
 switch (gender) {
 case genders.male: return "男";
 case genders.female: return "女";
 case genders.notSpecified: return "指定しない";
 }
 }
};</code></pre> <pre><code>return Object.values(genders).map((value: Genders) =&gt; ({
 label: formatterStrings.gender(value),
 value
}))</code></pre> お疲れさまでした！

enum型よりunion型を

配列の削除で少しつまづいたのでメモ程度に <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>

記事一覧