<h2 id="h4fb78f17b3">renovateとは？</h2><p>Gitリポジトリ内のpackage.jsonや、Dockerfile等を監視し、パッケージの最新の更新版があった場合に、依存関係を更新するPRを自動で出してくれるツール。<br>PRをマージすると、対象のブランチは自動で削除してくれる。<br></p><h2 id="h046afd68e1">導入方法</h2><p>Githubの場合、Renovate appをinstallする。<br>その後、有効にするリポジトリを選択する。(全リポジトリを対象にすることも可能)<br>特定のディレクトリのみrenovateの監視を有効にすることも可能。(こちらは設定ファイルから)<br><br>詳細はこちらから。導入自体は非常にあっさりできました。<br><a href="https://docs.renovatebot.com/getting-started/installing-onboarding/" target="_blank" rel="noopener noreferrer">https://docs.renovatebot.com/getting-started/installing-onboarding/</a><br><br>install後、renovateを有効にするためのPRが1件発行されます。<br>このPRにはrenovate.json（renovateの設定ファイル）が含まれています。<br>最初のPRをマージすると、以降は古いパッケージの更新のPRがバンバン飛ぶようになります。<br></p><h2 id="hae6c3fe63b">導入した経緯</h2><p>今回は、renovateをReact個人学習用のリポジトリに導入してみました。<br>導入した背景としては、</p><ol><li>パッケージ更新に対する知見があまりなかった。</li><li>これまで、一度インストールしたパッケージをそのまま放置することが多かった。</li><li>学習用リポジトリということで、最新のライブラリによるキャッチアップを図りたかった。</li></ol><p>上記が主なモチベーションになりました。<br></p><h2 id="hd729b2d743">renovate導入後</h2><p>renovateを有効化すると、リポジトリのissueに<span style="background-color:#f6f8fa">Dependency Dashboardが追加されます。</span><br><img src="https://images.microcms-assets.io/assets/797f5c01c5ba4a20a0888ddda0fecbe1/e802f5ae6f8143469577ba182ef27e45/%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-04-09%2020.22.54.png" alt=""><br><img src="https://images.microcms-assets.io/assets/797f5c01c5ba4a20a0888ddda0fecbe1/d1177cf486f04a8889639683a83e5042/%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-04-10%208.27.28.png" alt=""><br>更新可能なパッケージが存在する場合、このダッシュボードにチェックボックスと対象パッケージが表示されます。<br><br><img src="https://images.microcms-assets.io/assets/797f5c01c5ba4a20a0888ddda0fecbe1/dc92f5a608a64221a9c3631ee9de3132/%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-04-10%208.27.07.png" alt=""><br>renovateから送られてくるPRですが、</p><ul><li>更新されるパッケージのrelease note</li><li>変更の概要</li><li>そのバージョンの導入率や信頼性...etc</li></ul><p>上記がPRのメッセージにまとめてあり、マージする上での判断材料が集約されていて、とてもわかりやすかったです。<br>また、導入を初めてまだ数日ですが、頻繁にPRが飛んでくるので、パッケージの更新に関する感度が上がりそうな気がしました。<br></p><h2 id="h28b62bc2c0">今後の課題</h2><ul><li>renovateの設定項目に対する理解。設定項目が柔軟。適宜いい感じに変更していきたい。<ul><li><a href="https://docs.renovatebot.com/configuration-options/" target="_blank" rel="noopener noreferrer">https://docs.renovatebot.com/configuration-options/</a></li><li><a href="https://github.com/cybozu/renovate-config/blob/master/renovate.json" target="_blank" rel="noopener noreferrer">https://github.com/cybozu/renovate-config/blob/master/renovate.json</a> </li><li><a href="https://github.com/hatena/renovate-config" target="_blank" rel="noopener noreferrer">https://github.com/hatena/renovate-config</a></li><li>（cybozu社、はてな社の設定が公開されていたので参考にしたい。）</li></ul></li><li>実サービス（弊ブログアプリでも）運用したい。</li><li>PRのたびに動作確認をしなければならなくなる。CI・テスト自動化である程度簡略化できないか。。？</li></ul><p><br>今後運用しつつ、しっかり知見をためていきたい。</p>

renovate導入してみた。

<h2 id="h47d49b8226">パフォーマンス最適化</h2><p>React では不要なレンダリングを避けるために、React.memo, useMemo, useCallback が利用される。<br>本ページでは使用方法、タイミングを記載する。</p><h2 id="h4886ea6007">useCallback</h2><p>関数に対して使用。(処理をメモ化)<br>メモ化されたコールバック関数を返すフック。<br>第二引数に指定した依存配列に指定した値が変化した場合のみ、useCallbackの関数も変化する。<br>よって、不要に生成される関数インスタンスの作成を抑制し、再描画を減らすことにつながり、パフォーマンス向上が期待できる。<br>React.memo と併用することで、コンポーネントの不要な再レンダリングをスキップできる</p><pre><code>//[deps]は依存配列(コールバック関数が依存している要素が格納された配列)
useCallback(callbackFunction, [deps]);</code></pre><p>カスタムフック内の関数はuseCallbackをとにかく使え！的な意見もある。<br><a href="https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/" target="_blank" rel="noopener noreferrer">https://blog.uhy.ooo/entry/2021-02-23/usecallback-custom-hooks/</a></p><h2 id="h6ce25814b7">React.memo</h2><p>コンポーネントに対して使用。<br>コンポーネントが返した React 要素を記録し、再レンダーされそうになった時に<br>本当に再レンダーが必要かどうかをチェックして、必要な場合のみ再レンダーする。</p><ol><li>本当に再レンダーが必要かどうかをチェック</li><li>メモ化によりコンポーネントの再描画をスキップ</li><li>必要な場合のみ再レンダー</li></ol><pre><code>// メモ化したいコンポーネントをラップして使うことで、不要な再レンダリングを防ぐ。
const メモ化されたコンポーネント = React.memo(
  元のコンポーネント,
  (prevProps, nextProps) =&gt; {
    /* true or flase */
  }
);</code></pre><h2 id="h692f02ca4c">useMemo</h2><p>計算結果の値をメモ化</p><pre><code>// render時に毎回重い処理をするのを避けたいときとか。
// a, bの値の変更を検知して再計算する。
const memoizedValue = useMemo(() =&gt; computeExpensiveValue(a, b), [a, b]);</code></pre><p>サンプルコードはこちら<br><a href="https://github.com/w8f/react-training/blob/master/front/src/component/memorization/MemorizationSample.tsx" target="_blank" rel="noopener noreferrer">https://github.com/w8f/react-training/blob/master/front/src/component/memorization/MemorizationSample.tsx</a></p>

React Hooks早わかり(useMemo, useCallback, React.memo編)

<h2 id="h2174bc601f">useContext  概要</h2><p>何らかのデータが、ネストレベルの異なる多くのコンポーネントからアクセスできる必要がある時に使用される。<br>公式リファレンス<br><a href="https://ja.reactjs.org/docs/hooks-reference.html#usecontext" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/hooks-reference.html#usecontext</a><br>わかりやすかった記事<br><a href="https://reffect.co.jp/react/react-usecontext-understanding" target="_blank" rel="noopener noreferrer">https://reffect.co.jp/react/react-usecontext-understanding</a></p><h2 id="h04c5b004b1"><br>useContext を利用する利点</h2><ul><li>複数コンポーネントで同じステートを簡単に共有できる。</li><li>ステート、イベントハンドラを一元管理できる。</li><li>全てのコンポーネントを明示的に通すことなしに、コンポーネントツリーの深くまで値を渡せる。</li><li>アプリケーション内の多くのコンポーネントから必要とされる特定のタイプのプロパティ<ul><li>（例： ロケール設定、UI テーマなど）で使用するのがオススメ</li></ul></li></ul><p><br></p><pre><code>import { VFC, createContext, useContext, useState } from "react";

// Contextを作成する。
export const UserCountContext = createContext(
　　　　{} as {
　　　　　　　　count: number;
　　　　　　　　setCount: React.Dispatch&lt;React.SetStateAction&lt;number&gt;&gt;;
　　　　}
);

// UseContextSampleのStateを子のコンポーネントに渡す
export const UseContextSample: VFC = () =&gt; {
　　　　const [count, setCount] = useState(100);
　　　　const value = {
　　　　　　　　count,
　　　　　　　　setCount,
　　　　};

　　　　 return (
　　　　　　　　&lt;div style={{ textAlign: "center" }}&gt;
　　　　　　　　　　　　&lt;h1&gt;useContext sample&lt;/h1&gt;
　　　　　　　　　　　　{/* 値を渡したいコンポーネントをcontext.Providerで囲む */}
　　　　　　　　　　　　&lt;UserCountContext.Provider value={value}&gt;
　　　　　　　　　　　　　　　　&lt;ComponentA /&gt;
　　　　　　　　　　　　&lt;/UserCountContext.Provider&gt;
　　　　　　　　　　　　&lt;hr /&gt;
　　　　　　　　&lt;/div&gt;
　　　　　　　　);
};
	

const ComponentA: VFC = () =&gt; {
　　　　return (
　　　　　　　　&lt;&gt;
　　　　　　　　　　　　&lt;p&gt;Component A&lt;/p&gt;
　　　　　　　　　　　　&lt;ComponentB /&gt;
　　　　　　　　&lt;/&gt;
　　　　);
};
	

const ComponentB: VFC = () =&gt; {
　　　　return (
　　　　　　　　&lt;&gt;
　　　　　　　　　　　　&lt;p&gt;Component B&lt;/p&gt;
　　　　　　　　　　　　&lt;ComponentC /&gt;
　　　　　　　　&lt;/&gt;
　　　　);
};
	

const ComponentC: VFC = () =&gt; {
　　　　// useContextで値を受け取り、使用することができる。
　　　　const { count, setCount } = useContext(UserCountContext);
　　　　return (
　　　　　　　　&lt;&gt;
　　　　　　　　　　　　&lt;p&gt;Component C&lt;/p&gt;
　　　　　　　　　　　　&lt;p&gt;{count}&lt;/p&gt;
　　　　　　　　　　　　&lt;button onClick={() =&gt; setCount((prev) =&gt; prev + 1)}&gt;+&lt;/button&gt;
　　　　　　　　&lt;/&gt;
　　　　);
};
export default UseContextSample;</code></pre>

React Hooks早わかり(useContext編)

<h2 id="hc7aa0a755c">useReducer 概要</h2><h3 id="h288d55bc15">useReducer 用例</h3><ol><li>useState の代替品。</li><li>(state, action) =&gt; newState という型のリデューサ (reducer) を受け取り、現在の state を dispatch メソッドとペアにして返す。</li><li>複数の値にまたがる複雑な state ロジックがある場合や、前の state に基づいて次の state を決める必要がある場合に有用。</li><li>複数階層にまたがって更新を発生させるようなコンポーネントではパフォーマンスの最適化にもなる。</li></ol><p>ボタンクリックでcountステートをインクリメント、デクリメントするサンプルコード。<br><a href="https://github.com/w8f/react-training/blob/153eab2661d30bbeec13f0fb1d065d5aa4c26c0c/front/src/component/useReducer/UseReducerSample.tsx" target="_blank" rel="noopener noreferrer">https://github.com/w8f/react-training/blob/153eab2661d30bbeec13f0fb1d065d5aa4c26c0c/front/src/component/useReducer/UseReducerSample.tsx</a></p><pre><code>import { VFC, useReducer } from "react";
	

type State = {
　　count: number;
};
	

type ActionType = {
　　type: "increment" | "decrement";
};
	

const UseReducerSample: VFC = () =&gt; {
    const initialState = { count: 0 };

    // reducer関数を定義する。
    // actionごとにstateに対する処理を記載
    const reducer = (state: State, action: ActionType) =&gt; {
        switch (action.type) {
            case "increment":
                return { count: state.count + 1 };
            case "decrement":
                return { count: state.count - 1 };
            default:
                throw new Error();
        }
    };
	

    // useReducerを呼び出す。
    // 第一引数にreducer関数、第二引数に初期値のステートを指定する。
    const [state, dispatch] = useReducer(reducer, initialState);
    return (
        &lt;div style={{ textAlign: "center" }}&gt;
            &lt;p&gt;count: {state.count}&lt;/p&gt;
            &lt;button
                style={{ margin: 3 }}
                onClick={() =&gt; {
                    dispatch({ type: "increment" });
                }}
            &gt;
            +
            &lt;/button&gt;
            &lt;button
                style={{ margin: 3 }}
                onClick={() =&gt; {
                    dispatch({ type: "decrement" });
                }}
            &gt;
            -
            &lt;/button&gt;
        &lt;/div&gt;
    );
};
	
export default UseReducerSample;</code></pre>

React Hooks早わかり(useReducer編)

<h2 id="hcfa24b6357">useRef 概要</h2><p>useRefが使用されるのは主に2パターン</p><ol><li>DOM やコンポーネントにアクセスする手段として使うとき</li><li>インスタンス変数代わりに使う(⇔useState との違いは値を更新しても画面が再描画されない。)</li></ol><p>内部に保持している値だけを更新したい、かつコンポーネントの再レンダリングを行いたくない場合に使うと良さそう<br>2 の使用例）コンポーネントのマウント状態、特定の処理が何度呼び出されたか、送信前のログデータを保持しておく<br><br>サンプルコード抜粋</p><pre><code>&nbsp;// nullを指定することで、readonlyになる（=currentは書き換えられない）
&nbsp;const inputRef = useRef&lt;HTMLInputElement&gt;(null);
&nbsp;const numRef = useRef(0);
&nbsp;&nbsp;// 1. DOM やコンポーネントにアクセスする手段として使うとき
&nbsp;&nbsp;&lt;input ref={inputRef} type="text" /&gt;
&nbsp;&nbsp;&lt;button onClick={() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;// useRef とは、書き換え可能な値を
&nbsp;&nbsp;&nbsp;&nbsp;// .current プロパティ内に保持することができる「箱」のようなもの
&nbsp;&nbsp;&nbsp;&nbsp;inputRef.current &amp;&amp; inputRef.current.focus();
&nbsp;&nbsp;}}&gt;
&nbsp;&nbsp;&nbsp;&nbsp;Focus on Input
&nbsp;&nbsp;&lt;/button&gt;

&nbsp;&nbsp;// 2. インスタンス変数代わりに使う
&nbsp;&nbsp;&lt;button onClick={() =&gt; {
&nbsp;&nbsp;&nbsp;&nbsp;numRef.current++;
&nbsp;&nbsp;&nbsp;&nbsp;console.log(numRef.current);
&nbsp;&nbsp;}}&gt;
&nbsp;&nbsp;&nbsp;&nbsp;click
&nbsp;&nbsp;&lt;/button&gt;</code></pre><p>全体のサンプルコードはこちら<br><a href="https://github.com/w8f/react-training/commit/aea73e55c0c7eda4bfce78971158d30b5fe8e6a1" target="_blank" rel="noopener noreferrer">https://github.com/w8f/react-training/commit/aea73e55c0c7eda4bfce78971158d30b5fe8e6a1</a><br></p><h2 id="h7ab9ceed78">useRef の返り値の型</h2><p>useRef の初期値によって、useRef の返り値の型が変わる <br><strong>RefObject</strong>と<strong>MutableRefObject</strong>のどちらか<br><a href="https://zenn.dev/berlysia/articles/624bc1aaffda58" target="_blank" rel="noopener noreferrer">https://zenn.dev/berlysia/articles/624bc1aaffda58</a></p>

React Hooks早わかり(useRef編)

<h2 id="h8968883ae4">useEffectとは</h2><p>公式リファレンス<br><a href="https://ja.reactjs.org/docs/hooks-reference.html#useeffect" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/hooks-reference.html#useeffect</a><br>useEffect に渡された関数はレンダーの結果が画面に反映された後に動作します。</p><pre><code>import { VFC, useState, useEffect } from "react";

export type Photo = {
  albumId: number;
  id: number;
  title: string;
  url: string;
  thumbnailUrl: string;
};

export const fetchPhoto = async () =&gt; {
  const res = await fetch("https://jsonplaceholder.typicode.com/Photos");
  const photos = (await res.json()) as Photo[];
  return photos;
};

const UseEffectSample: VFC = () =&gt; {
  /** state */
  const [Photos, setPhotos] = useState&lt;Photo[]&gt;([]);

  /** effect */
  useEffect(() =&gt; {
    fetchPhoto().then((photos) =&gt; setPhotos(photos));
  }, []);

  return (
    // return jsx
  );</code></pre><p>useEffect の第 2 引数</p><ul><li>空の配列[] → Mount 時のみ第一引数の関数が実行される。（Vueで言うところのmounted）</li><li>[特定の値] → 特定の値の変化を検知した際に実行される。（Vueで言うところのwatch）</li></ul><p><br></p>

React Hooks早わかり(useEffect編)

<h2 id="hac2cddf5cf">useState概要</h2><p>ステートを管理するhooks<br>公式リファレンス<br><a href="https://ja.reactjs.org/docs/hooks-reference.html#usestate" target="_blank" rel="noopener noreferrer">https://ja.reactjs.org/docs/hooks-reference.html#usestate</a></p><h2 id="hf05cfa305a">基本形</h2><pre><code>import { VFC, useState } from "react";

type Todo = {
  text: string;
};

const UseStateSample: VFC = () =&gt; {
    // number
    const [count, setCount] = useState(0);
    // string
    const [text, setText] = useState("");
    // object[]
    const [todos, setTodos] = useState&lt;Todo[]&gt;([{ text: "Learn hooks" }]);	
}</code></pre><h2 id="hd3af19ac8f">Stateの更新</h2><pre><code>// number
&lt;button onClick={() =&gt; setCount((prevCount) =&gt; prevCount + 1)}&gt;click&lt;/button&gt;
// object[]
&lt;button onClick={() =&gt; { setTodos([...todos, { text: todo }])}}&gt;add Todo&lt;/button&gt;</code></pre><h2 id="h066189bb11">Stateの更新(オブジェクトのリスト)</h2><p>useStateの更新判定は値の同一性（<a href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/is" target="_blank" rel="noopener noreferrer">Object.is()</a>）で比較される。<br>そのため、オブジェクトのプロパティの値をただ更新するだけでは変更は検知できない。<br>⇔オブジェクトをコピーした上で、変更をマージする必要がある。<br><br>※サンプルコード</p><pre><code>import { VFC, useState } from "react";

type Member = {
  　　id: number;
  　　name: string;
  　　age: number;
　　　　checked: boolean;
};

const UseStateSample: VFC&lt;Member[]&gt; = () =&gt; {
　　　　const [members, setMembers] = useState&lt;Member[]&gt;([]);
　　　　const update = (id: number) =&gt; {
      　　setMembers([
        　　　　...members.map((member) =&gt; (member.id === id ? update(member) : member)),
　　      ])
    }

  　　return (
　　　　　　　　// return jsx
　　　　)
};</code></pre><p><br>全体のサンプルコードは下記リンクを参照ください。<br><a href="https://github.com/w8f/react-training/commit/74bf3d5d904ece40d3a63fb8318005def94f36c9" target="_blank" rel="noopener noreferrer">https://github.com/w8f/react-training/commit/74bf3d5d904ece40d3a63fb8318005def94f36c9</a></p>

React Hooks早わかり(useState編)

<h2 id="hd2c91c24e4">経緯</h2><p>Next.jsのプロジェクトにStorybookを入れ、コンポーネントのストーリーを作成すると、デフォルトの状態ではStorybookの画面にてNext/ImageのImageタグに設定した画像が表示されません。（ビルドされるサーバが異なることに起因する・・？）<br><br>これを解消するために、.storybook/preview.jsに設定を追加してあげる必要があります。<br>ここでの処理の概要としては、next/imageタグをimgタグに付け替えて表示をさせるイメージです。</p><h2 id="hdf3c22ff4d">.storybook/preview.jsに設定を追加する。</h2><pre><code>// 下記を追加。
import * as nextImage from "next/image";

Object.defineProperty(nextImage, "default", {
&nbsp;configurable: true,
&nbsp;value: (props) =&gt; &lt;img {...props} /&gt;,
});</code></pre><p><br>設定追加後、再度Storybookを立ち上げて、コンポーネントの画面を確認すると、見れなかった画像（下記ではNext.jsのロゴ）が見れるようになるはずです！<br><img src="https://images.microcms-assets.io/assets/797f5c01c5ba4a20a0888ddda0fecbe1/c2318c89c92a4c4ba3575a217535b3ad/%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-19%2021.19.44.png" alt=""><br></p>

Tech