<h2>はじめに</h2>
<p>こんにちは、<a href="https://twitter.com/zsp2088dev">@zsp2088dev</a>です。<br>
<a href="https://tech.excite.co.jp/archive/author/excite-kazuki">現職の技術ブログ</a> で書ききれなかったことや、2022年にやってきたことについてまとめます。</p>
<h2>3行まとめ✍</h2>
<ul>
<li>PHP / BEAR.Saturday → Java / SpringBoot の移行をした</li>
<li>Azure VM → Azure Container Apps の移行をした</li>
<li>Javaのトラブルの対処や勉強会の運営などに取り組んだ</li>
</ul>
<h2>アプリケーションのリビルド</h2>
<p>昨年から引き続き、PHP / BEAR.Saturday → Java / SpringBoot の移行を進めていました。<br>
既存のアプリケーションすべてをJavaに置き換えるのではなく、データの扱いに関わるバックエンドに注力してリビルドを行っています。<br>
単に既存のコードをJavaで書き換えるだけではなく、テストコードを書くようにしたり、複雑すぎるコードをシンプルにしたり、不要なコードを削除したりしていました。<br>
既存のコードは連想配列が多用されており、オブジェクトに何の値が入っているのかがわかりづらく、実際に実行しないとわからないのが非常につらかったです。<br>
静的型付け言語でコードを書くと安心できるなと実感でき、非常に良い移行作業でした。</p>
<h2>アプリケーションのコンテナ化</h2>
<p>Javaで書き換えたアプリケーションを、Azure Container Appsで稼働させることに取り組みました。<br>
同時に、既存のVM環境で動作しているアプリケーションを、Azure Container Appsで稼働させることにも取り組みました。<br>
Azure Container Appsは、2022年6月頃に一般利用可能になり、9月には本番稼働させていたので、短期間で検証から稼働までを進めていました。<br>
特にAzure Container Appsについては、毎日のように公式のドキュメントを読み込んだこともあって、かなり詳しくなったと感じています。</p>
<p>Azure VM → Azure Container Appの詳細は、以下の記事をご参照ください。</p>
<ul>
<li><a href="https://tech.excite.co.jp/entry/2022/09/07/145637">Azure VMからAzure Container Appsに移行しました</a></li>
<li><a href="https://tech.excite.co.jp/entry/2022/12/14/124316">Azure VMからAzure Container Appsに移行して3ヶ月が経過した</a></li>
</ul>
<h2>Javaトラブルの対処</h2>
<p>一部のアプリケーションを、PHP / BEAR.Saturday → Java / SpringBootに移行したときに、CPU使用率がスパイクしてしまう問題に悩まされていました。<br>
当初は原因がわからなかったものの、毎日1回再起動すれば問題なさそうなことがわかっていたため、GitHub Actionsの<code>schedule</code>イベントで再起動するようにしていました。<br>
あるとき、少しだけまとまった時間が取れたので本格的な調査をしようと思い、色々と調べていたところ、「スレッドダンプを見ることで原因を特定できる」ことを知りました。<br>
そこで、実際にスレッドダンプの取得から原因箇所の特定をして、該当箇所を修正することで安定稼働させることができるようになりました。</p>
<ul>
<li><a href="https://tech.excite.co.jp/entry/2022/12/25/080000">SpringBootでCPUがスパイクする問題を解決した</a></li>
</ul>
<h2>勉強会チームの運営</h2>
<p>外部に公開する勉強会の運営や社内勉強会など、コードを書くこと以外の取り組みも行いました。<br>
勉強会チームの運営や、勉強会の準備などにも力を入れており、今後も継続的な活動をしていきたいと考えています。<br>
外部勉強会を開催するにあたっての詳細は、以下の記事をご参照ください。</p>
<ul>
<li><a href="https://tech.excite.co.jp/entry/2022/07/12/120000">【外部勉強会】オンラインで開催するためにやったこと</a></li>
</ul>
<h2>おわりに</h2>
<p>アプリケーションのコードを書いたり、コンテナサービスの運用したりと、これまで経験していなかったことを多く経験できた1年でした。<br>
2023年はリビルドの終盤に差し掛かるので、より難易度の高い箇所に取り組みます。<br>
頑張るぞ！💪</p>


2022年の振り返り

<h2>はじめに</h2>
<p>こんにちは、<a href="https://twitter.com/zsp2088dev">@zsp2088dev</a>です。<br>
最近、useEffectを使用したページのテストが、うまくできずにハマってしまったことがありました。<br>
解決方法を忘れないために、記事にまとめておきます。</p>
<h2>動作環境</h2>
<p>本記事で使用したコードの動作環境です。<br>
簡単に環境を作りたかったので、nextを使用しています。</p>
<ul>
<li>next 12.2.3</li>
<li>react 18.2.0</li>
<li>@testing-library/jest-dom 5.16.4</li>
<li>@testing-library/react 13.3.0</li>
<li>jest 28.1.3</li>
<li>jest-environment-jsdom 28.1.3</li>
<li>jest-fetch-mock 3.0.3</li>
</ul>
<h2>使用したコード</h2>
<p>今回使用したコードは次のとおりです。<br>
サンプルデータとして、<a href="https://jsonplaceholder.typicode.com/">JSONPlaceholder</a>からTODOを取得して、それのタイトルを表示します。</p>
<pre><code class="language-javascript">// sample1.jsx

import { useEffect, useState } from &quot;react&quot;;

export default function Sample1() {
  const [title, setTitle] = useState(&quot;initial value&quot;);

  useEffect(() =&gt; {
    fetch(&quot;https://jsonplaceholder.typicode.com/todos/1&quot;)
      .then((response) =&gt; response.json())
      .then((json) =&gt; setTitle(json.title));
  });

  return (
    &lt;&gt;
      &lt;p&gt;{title}&lt;/p&gt;
    &lt;/&gt;
  );
}
</code></pre>
<h2>jest-fech-mockを導入する</h2>
<p>fetch関数のモック化に、<a href="https://github.com/jefflau/jest-fetch-mock">json-fetch-mock</a> を使用しました。<br>
本記事と同じ環境で<code>jest-fetch-mock</code>を使用するときは、テストコードの先頭に下記を記述する必要があるようです。</p>
<pre><code class="language-javascript">import { enableFetchMocks } from &quot;jest-fetch-mock&quot;;
enableFetchMocks();
</code></pre>
<h2>fetch関数をモック化する</h2>
<p>下記のようにテストコードに記述して、fetch関数をモック化します。</p>
<pre><code class="language-javascript">fetchMock.mockResponse(
  JSON.stringify({
    userId: 1,
    id: 1,
    title: &quot;delectus aut autem&quot;,
    completed: false,
  })
);
</code></pre>
<h2>useEffectにある関数をモック化する</h2>
<p>useEffectにある関数の実行を待つために、<code>act()</code>を使用します。<br>
<code>act()</code>を使用しないとうまく動作しないため、注意する必要があります。</p>
<p>詳細については、<a href="https://ja.reactjs.org/docs/testing-recipes.html#act">こちら</a>を参照してください。</p>
<pre><code class="language-javascript">await act(async () =&gt; {
  render(&lt;Sample1 /&gt;);
});
</code></pre>
<h2>使用したテストコード</h2>
<p>以上を踏まえた上で、今回使用したテストコードは次のとおりです。<br>
これを実行すると、テストに成功します。</p>
<pre><code class="language-javascript">// sample1.test.jsx

import { enableFetchMocks } from &quot;jest-fetch-mock&quot;;
enableFetchMocks();

import fetchMock from &quot;jest-fetch-mock&quot;;
import { render, screen, waitFor } from &quot;@testing-library/react&quot;;
import Sample1 from &quot;../pages/sample1&quot;;
import { act } from &quot;react-dom/test-utils&quot;;
import &quot;@testing-library/jest-dom&quot;;

describe(&quot;sample test&quot;, () =&gt; {
  test(&quot;test&quot;, async () =&gt; {
    fetchMock.mockResponse(
      JSON.stringify({
        userId: 1,
        id: 1,
        title: &quot;delectus aut autem&quot;,
        completed: false,
      })
    );

    await act(async () =&gt; {
      render(&lt;Sample1 /&gt;);
    });

    expect(screen.getByText(&quot;delectus aut autem&quot;)).toBeInTheDocument();
  });
});
</code></pre>
<h2>おわりに</h2>
<p>本記事では、useEffectを使用したページのテスト方法についてまとめました。<br>
フロントエンドのテストは、「大変だなー」と思うことが多いです。<br>
これからも解決できたことがあれば記事にしていこうと思います。</p>
<h2>追記</h2>
<p><code>act()</code>を使用せずに<code>findByText()</code>を使用すると、本記事のテストコードを下記のように置き換えることができます。<br>
<a href="https://testing-library.com/docs/dom-testing-library/api-async/#findby-queries">ドキュメント</a>によると、findByはDOMの変更がすぐに行われないときに有効であると書かれているため、今回のようなケースに適していると言えます。</p>
<pre><code class="language-javascript">render(&lt;Sample1 /&gt;);
expect(await screen.findByText(&quot;delectus aut autem&quot;)).toBeInTheDocument();
</code></pre>
<p>ただし、これを実行したときに、「状態を変更するときはactでラップしたほうがよい」と警告されました。<br>
警告が気になるようであれば、本文でまとめた書き方にするとよさそうです。</p>
<pre><code class="language-javascript">Warning: An update to Sample1 inside a test was not wrapped in act(...).
When testing, code that causes React state updates should be wrapped into act(...):

act(() =&gt; {
  /* fire events that update state */
});
/* assert on the output */

This ensures that you're testing the behavior the user would see in the browser. Learn more at https://reactjs.org/link/wrap-tests-with-act
</code></pre>


useEffectを使用したページのテストでハマりました😕

useEffectを使用したページのテストについて

<h2>はじめに</h2>
<p>こんにちは、<a href="https://twitter.com/zsp2088dev">@zsp2088dev</a>です。<br>
MUIのDataGridを使用して、テーブルの行を変更する方法について紹介します。</p>
<h2>動作環境</h2>
<ul>
<li>next 12.2.3</li>
<li>@mui/material 5.9.3</li>
<li>@mui/x-data-grid 5.15.0</li>
</ul>
<h2>コード全体</h2>
<p>今回使用したコードは下記のとおりです。</p>
<pre><code class="language-javascript">import { DataGrid } from &quot;@mui/x-data-grid&quot;;
import Head from &quot;next/head&quot;;
import Image from &quot;next/image&quot;;
import styles from &quot;../styles/Home.module.css&quot;;

const rows = [
  { id: 1, name: &quot;orange&quot;, price: 100 },
  { id: 2, name: &quot;apple&quot;, price: 200 },
  { id: 3, name: &quot;banana&quot;, price: 300 },
];

const columns = [
  { field: &quot;name&quot;, headerName: &quot;Name&quot;, width: 200, editable: true },
  { field: &quot;price&quot;, headerName: &quot;Price&quot;, width: 200, editable: true },
];

export default function Home() {
  const handleProcessRowUpdate = (newRow, oldRow) =&gt; {
    console.log(newRow);
    console.log(oldRow);

    return newRow;
  };

  return (
    &lt;div style={{ height: 260, width: &quot;100%&quot; }}&gt;
      &lt;DataGrid
        rows={rows}
        columns={columns}
        processRowUpdate={handleProcessRowUpdate}
        onProcessRowUpdateError={(error) =&gt; console.log(error)}
        experimentalFeatures={{ newEditingApi: true }}
      /&gt;
    &lt;/div&gt;
  );
}
</code></pre>
<h2>やること</h2>
<p>上記のコードを実行して、DataGridのテーブルを表示した後、テーブルの行を変更します。<br>
今回は、bananaのpriceを、「300」から「900」に変更しました。</p>
<p><img src="https://storage.googleapis.com/p_624d40be30231c0018cbd931/84c005bf-e2cf-4fce-920c-51baeda38442%2F2022-08-04-datagrid-editing.png" alt="2022-08-04-datagrid-editing.png"></p>
<h2>テーブルの行の変更を検知する</h2>
<p>テーブルの行が変更されると、<code>processRowUpdate</code>が呼び出されます。<br>
変更後の行（newRow）、変更前の行（oldRow）を取得でき、返り値でテーブルの行に値をセットすることができます。</p>
<pre><code class="language-javascript">processRowUpdate?: (newRow: R, oldRow: R) =&gt; Promise&lt;R&gt; | R;
</code></pre>
<p>これを使用することで、テーブルの行を変更したときに、「API呼び出しをしてデータを保存してnewRowを返却する。失敗時にはoldRowを返却する。」といった実装ができそうです。</p>
<h2>動作確認</h2>
<p>検証 &gt; console より、変更後の行と変更前の行を確認します。<br>
priceの値が変更されています。</p>
<p><img src="https://storage.googleapis.com/p_624d40be30231c0018cbd931/04e4640a-2d5c-4130-a687-aaacce0d9f52%2F2022-08-04-console.png" alt="2022-08-04-console.png"></p>
<h2>注意点</h2>
<p>processRowUpdateを使用するときは、<code>experimentalFeatures={{ newEditingApi: true }}</code>とする必要があります。</p>
<h2>おわりに</h2>
<p>MUIのDataGridを使用して、テーブルの行を変更する方法について紹介しました。<br>
DataGridには非常に多くの機能があるため、やりたいことを実装するのも大変です。<br>
DataGridのことについて、また新たに知ることがあれば、メモとして残していきたいです。</p>
<h2>参考</h2>
<ul>
<li><a href="https://stackoverflow.com/questions/69843397/how-to-get-values-of-row-after-edit-for-mui-data-grid">datagrid - How to get values of row after edit for MUI data grid? - Stack Overflow</a></li>
<li><a href="https://mui.com/x/react-data-grid/editing/">React Data Grid component - MUI X</a></li>
</ul>


DataGridでテーブルの要素を変更する方法について紹介します！⭐️

DataGridでテーブルの行を変更する方法

<h2>はじめに</h2>
<p>こんにちは、<a href="https://twitter.com/zsp2088dev">@zsp2088dev</a>です。<br>
本技術ブログのコードブロックには、<a href="https://prismjs.com/">Prism.js</a>を使用しています。<br>
ただPrism.jsのデフォルトのテーマには自分好みのテーマががなかったので、<a href="https://github.com/PrismJS/prism-themes">prism-themes</a>を使用してNordテーマを適用しています。</p>
<p>本記事では、prism-themesの適用方法について紹介します。</p>
<h2>インストール</h2>
<pre><code class="language-bash">$ yarn add prism-themes
</code></pre>
<h2>prism-themesを適用する</h2>
<p>Prism,jsを使用している箇所で、prismjs-themes配下のcssをimportします。これでデフォルト以外のテーマを指定できるようになります。</p>
<pre><code class="language-javascript">import { useEffect } from 'react'
import Prism from 'prismjs'

// prism-themesを追加
import 'prism-themes/themes/prism-nord.min.css'

type Props = {
  article: Article
}

export default function ArticleBody({ article }: Props) {
  useEffect(() =&gt; {
    Prism.highlightAll()
  })

  return &lt;div dangerouslySetInnerHTML={{ __html: article.body }} /&gt;
}
</code></pre>
<h2>おわりに</h2>
<p>本記事ではNext.jsでprism-themesを適用する方法について紹介しました。<br>
「Next.js + Prismjs」のように検索をすると、.babelrc.jsにデフォルトテーマを指定する方法が多く見つかり、解決するのに時間がかかってしまいました。</p>
<p>この記事が誰かのためになれば嬉しいです！</p>


Next.jsにprisms-themesを組み込みました！ 🎨

Next.jsでprism-themesを適用する

<h2>はじめに</h2>
<p>こんにちは、 <a href="https://twitter.com/zsp2088dev">@zsp2088dev</a> です。<br>
MUIでテーブルを実装するときに、DataGridを使用することが多いと思います。<br>
その際、テーブルの要素に対する操作を実装するかもしれません。</p>
<p>本記事では、DataGridを使用したテーブルの要素に対する操作の実装方法について紹介します。</p>
<h2>今回作るもの</h2>
<p>下記のテーブルをサンプルとして用意しました。<br>
テーブルのカラムに名称、色、操作（編集・削除・保存）をもつ果物をまとめたテーブルです🍊</p>
<p><img src="https://storage.googleapis.com/p_624d40be30231c0018cbd931/b9b26f59-8cc2-46b4-995a-3d46aecbf941/1000x1000/2022-05-16-table.png" alt="2022-05-16-table.png"></p>
<h3>テーブルの要素</h3>
<p>果物を表すtypeとそのリストです。<br>
DataGridではidを要素に持たなくてはなりません。</p>
<pre><code class="language-js">type Fruit = {
  id: number;
  name: string;
  color: string;
};

const fruits: Fruit[] = [
  { id: 1, name: &quot;リンゴ&quot;, color: &quot;赤&quot; },
  { id: 2, name: &quot;バナナ&quot;, color: &quot;黄&quot; },
  { id: 3, name: &quot;ブドウ&quot;, color: &quot;紫&quot; },
  { id: 4, name: &quot;キウイ&quot;, color: &quot;緑&quot; },
];
</code></pre>
<h3>状態管理と要素の削除</h3>
<p>テーブルの状態管理にReact Hooksを使用しました。<br>
今回はサンプルとしてテーブルの要素の削除を実装しました。<br>
実際のプロダクトであれば外部APIを使用したデータの削除が想定されると思います。</p>
<pre><code class="language-js">const [rows, setRows] = useState&lt;Fruit[]&gt;(fruits);

const deleteFruit = (id: number) =&gt; {
  setRows(rows.filter((row: Fruit) =&gt; row.id != id));
};
</code></pre>
<h3>カラムの設定</h3>
<p>続いてテーブルのカラムの設定についてです。<br>
テーブルの要素に対する操作の実装方法は次にまとめます。</p>
<pre><code class="language-js">const columns: GridColumns&lt;Fruit&gt; = [
  {
    field: &quot;name&quot;,
    headerName: &quot;名称&quot;,
    width: 150,
  },
  {
    field: &quot;color&quot;,
    headerName: &quot;色&quot;,
    width: 150,
  },
  {
    field: &quot;actions&quot;,
    type: &quot;actions&quot;,
    headerName: &quot;操作&quot;,
    width: 150,
    headerAlign: &quot;center&quot;,
    align: &quot;center&quot;,
    getActions: (params: GridRowParams) =&gt; [
      &lt;GridActionsCellItem
        key={params.id}
        label=&quot;edit&quot;
        showInMenu={false}
        icon={&lt;EditIcon /&gt;}
      /&gt;,
      &lt;GridActionsCellItem
        key={params.id}
        label=&quot;delete&quot;
        showInMenu={false}
        icon={&lt;DeleteIcon /&gt;}
        onClick={() =&gt; deleteFruit(params.id as number)}
      /&gt;,
      &lt;GridActionsCellItem
        key={params.id}
        label=&quot;save&quot;
        showInMenu={false}
        icon={&lt;SaveAltIcon /&gt;}
        onClick={() =&gt; console.log(params.id)}
      /&gt;,
    ],
  },
];
</code></pre>
<h2>テーブルの要素に対する操作を実装する</h2>
<p>上記のソースコードにあるgetActionsに、GridActionsCellItemのリストを渡すことでテーブルの要素に対する操作を実装することができます。<br>
今回は、サンプルとして3つの操作（編集・削除・保存）ボタンを実装してみました。<br>
iconにはMaterial Iconsのコンポーネントを指定、onClickにはアイコンクリック時の操作を指定しています。</p>
<p>次に、@mui/x-data-gridのソースコードを見てみます。<br>
テーブルの要素に対する操作を実装するためには、typeにactionsを、getActionsにGridActionsCellItemを指定しなくてはならないことがわかります。</p>
<pre><code class="language-js">export interface GridActionsColDef extends GridColDef {
    type: 'actions';
    getActions: (params: GridRowParams) =&gt; React.ReactElement&lt;GridActionsCellItemProps&gt;[];
}
</code></pre>
<h2>全体のコード</h2>
<p>最後に、今回実装したテーブルのコードがこちらです。</p>
<pre><code class="language-js">import {
  DataGrid,
  GridActionsCellItem,
  GridColumns,
  GridRowParams,
} from &quot;@mui/x-data-grid&quot;;
import DeleteIcon from &quot;@mui/icons-material/Delete&quot;;
import SaveAltIcon from &quot;@mui/icons-material/SaveAlt&quot;;
import EditIcon from &quot;@mui/icons-material/Edit&quot;;
import { useState } from &quot;react&quot;;

type Fruit = {
  id: number;
  name: string;
  color: string;
};

const fruits: Fruit[] = [
  { id: 1, name: &quot;リンゴ&quot;, color: &quot;赤&quot; },
  { id: 2, name: &quot;バナナ&quot;, color: &quot;黄&quot; },
  { id: 3, name: &quot;ブドウ&quot;, color: &quot;紫&quot; },
  { id: 4, name: &quot;キウイ&quot;, color: &quot;緑&quot; },
];

const Table = () =&gt; {
  const [rows, setRows] = useState&lt;Fruit[]&gt;(fruits);

  const deleteFruit = (id: number) =&gt; {
    setRows(rows.filter((row: Fruit) =&gt; row.id != id));
  };

  const columns: GridColumns&lt;Fruit&gt; = [
    {
      field: &quot;name&quot;,
      headerName: &quot;名称&quot;,
      width: 150,
    },
    {
      field: &quot;color&quot;,
      headerName: &quot;色&quot;,
      width: 150,
    },
    {
      field: &quot;actions&quot;,
      type: &quot;actions&quot;,
      headerName: &quot;操作&quot;,
      width: 150,
      headerAlign: &quot;center&quot;,
      align: &quot;center&quot;,
      getActions: (params: GridRowParams) =&gt; [
        &lt;GridActionsCellItem
          key={params.id}
          label=&quot;edit&quot;
          showInMenu={false}
          icon={&lt;EditIcon /&gt;}
        /&gt;,
        &lt;GridActionsCellItem
          key={params.id}
          label=&quot;delete&quot;
          showInMenu={false}
          icon={&lt;DeleteIcon /&gt;}
          onClick={() =&gt; deleteFruit(params.id as number)}
        /&gt;,
        &lt;GridActionsCellItem
          key={params.id}
          label=&quot;save&quot;
          showInMenu={false}
          icon={&lt;SaveAltIcon /&gt;}
          onClick={() =&gt; console.log(params.id)}
        /&gt;,
      ],
    },
  ];

  return &lt;DataGrid columns={columns} rows={rows} /&gt;;
};

export default Table;
</code></pre>
<h2>おわり</h2>
<p>DataGridを使用したテーブルの要素に対する操作の実装方法について紹介しました。<br>
typeとgetActionsを指定することでサクッと実装できますが、たどり着くまでに時間がかかってしまったので、同じように悩んでいる人に本記事が届くと嬉しいです！🤗</p>
<h2>参考</h2>
<ul>
<li><a href="https://mui.com/x/react-data-grid/columns/">Data Grid - Columns - MUI X</a></li>
<li><a href="https://zenn.dev/longbridge/articles/aecb753ab27d2c">MUI v5 DataGridの使い方　その2 ～クリックできるアイコンセルを表示する～</a></li>
</ul>


DataGridを使用したテーブルの要素の操作についてまとめました！ ✍️

DataGridでテーブルの要素を操作する

<h2>はじめに</h2>
<p>こんにちは、 <a href="https://twitter.com/zsp2088dev">@zsp2088dev</a> です。<br>
最近、MUIのTextFieldとReact Hook Formを使用してバリデーションを実装しました。<br>
実装方法を調べてみるといくつか方法があり、戸惑ってしまいました。<br>
本記事では、MUIのTextFieldとReact Hook Formを使用したバリデーションの実装方法について紹介します。</p>
<h2>フォームの用意</h2>
<p>MUIのTextFieldとButtonを縦に並べたものをサンプルとして用意しました。</p>
<p><img src="https://storage.googleapis.com/p_624d40be30231c0018cbd931/d4f88e39-5666-4b69-8840-22c591404893/1000x1000/2022-05-11-form.png" alt="2022-05-11-form.png"></p>
<p>フォームの入力内容に誤りがある場合は、エラーメッセージを表示が表示されることを期待します。<br>
今回は、ユーザー名とメールアドレスを必須項目としてサンプルを作成しました。</p>
<p>React Hook Formの<a href="https://react-hook-form.com/jp/api#register">ドキュメント</a>必須項目以外のルールについて記述があるので、詳細はこちらを参考にしてください。</p>
<p><img src="https://storage.googleapis.com/p_624d40be30231c0018cbd931/53bdf0d4-392d-438a-9e13-ab8aa2329408/1000x1000/2022-05-11-form-error.png" alt="2022-05-11-form-error.png"></p>
<h2>バリデーションの実装方法</h2>
<p>以下に記載するのは共通で使用する箇所のコードです。<br>
ユーザー名とメールアドレスを記入するフォームを想定しています。</p>
<pre><code class="language-js">type SampleForm = {
  name: string;
  email: string;
}

const SampleFormPage = () =&gt; {
  const {
    control,
    handleSubmit,
    register,
    formState: { errors },
  } = useForm&lt;SampleForm&gt;({
    defaultValues: {
      name: &quot;&quot;,
      email: &quot;&quot;,
    },
  });
}
 
 return (...)
}
</code></pre>
<h3>1. formStateで実装</h3>
<p>まずは、チュートリアルでも説明されているformStateによるバリデーションの実装方法です。<br>
フォームに入力した値を扱うためのregisterは、RegisterOptionsを引数に受け取ることができます。<br>
このRegisterOptionsにはルールとそれに違反したときのメッセージを指定することで、エラー時に指定したエラーメッセージを表示することができるようになります。<br>
このとき、errorにはエラー条件を、helpetTextにはエラーメッセージを指定します。<br>
formStateのerrorsからフォーム入力のエラーを受け取ることができるため、errorとhelperTextには、errorsの値を使用しています。</p>
<pre><code class="language-js">&lt;TextField
  label=&quot;ユーザー名&quot;
  type=&quot;text&quot;
  {...register(&quot;name&quot;, { required: &quot;ユーザー名の入力は必須です&quot; })}
  error={!!errors.name}
  helperText={errors.name?.message}
/&gt;
</code></pre>
<h3>2. Controller + formStateで実装</h3>
<p>ControllerとformStateを使用してバリデーションを行います。<br>
Controllerのrulesにバリデーションのルールを指定し、renderにTextFieldを指定します。<br>
errorとhelperTextについては1と同じです。</p>
<pre><code class="language-js">&lt;Controller
  name=&quot;name&quot;
  control={control}
  rules={{ required: &quot;ユーザー名の入力は必須です&quot; }}
  render={({ field }) =&gt; (
    &lt;TextField
      {...field}
      label=&quot;ユーザー名&quot;
      type=&quot;text&quot;
      {...register(&quot;name&quot;)}
      error={!!errors.name}
      helperText={errors.name?.message}
    /&gt;
  )}
/&gt;
</code></pre>
<h3>3. Controller + fieldStateで実装</h3>
<p>2と同様にControllerを使用します。<br>
ここでは、fieldStateのerrorを使用してエラー条件とエラーメッセージの表示を行います。</p>
<pre><code class="language-js">&lt;Controller
  name=&quot;name&quot;
  control={control}
  rules={{ required: &quot;ユーザー名の入力は必須です&quot; }}
  render={({ field, fieldState: { error } }) =&gt; (
    &lt;TextField
      {...field}
      label=&quot;ユーザー名&quot;
      type=&quot;text&quot;
      {...register(&quot;name&quot;)}
      error={!!error}
      helperText={error?.message}
    /&gt;
  )}
/&gt;
</code></pre>
<p>また、<code>fieldState.invalid</code>については、非推奨となっているため、<code>fieldState.error</code>に置き換えたほうがよさそうです。</p>
<h3>4. Textfieldのみの簡易バリデーション</h3>
<p>Textfieldそのものに<code>required</code>を指定することで、簡易的なバリデーションを行うことができます。<br>
ただし、この方法ではエラーメッセージを指定することができないことや、凝ったエラー条件を指定することができないことに注意しなくてはなりません。</p>
<pre><code class="language-js">&lt;TextField
  required
  label=&quot;ユーザー名&quot;
  type=&quot;text&quot;
  {...register(&quot;name&quot;)}
/&gt;
</code></pre>
<p>また上記3つと比較をすると、エラーメッセージの見た目も異なります。<br>
<img src="https://storage.googleapis.com/p_624d40be30231c0018cbd931/325d3cd5-bb9d-49ae-a90d-4b64ef46bf88/2022-05-11-textfield-required.png" alt="2022-05-11-textfield-required.png"></p>
<h2>おわりに</h2>
<p>本記事では、MUIのTextFieldとReact Hook Formを使用したバリデーションの実装方法について紹介しました。<br>
色々な書き方があったため、どれがいいのかなと悩むところです。<br>
また、Yupのような外部のパッケージを使用してバリデーションを行うこともできるので、ますます悩んでしまいます。<br>
最後まで読んでいただき、ありがとうございました！</p>
<h2>参考</h2>
<ul>
<li><a href="https://zenn.dev/longbridge/articles/640710005e11b1">MUI v5 + React Hook Form v7 で、よく使うコンポーネント達を連携してみる</a></li>
<li><a href="https://dev.classmethod.jp/articles/mui-v5-rhf-v7/">MUI v5とReact Hook Form v7でサクッとフォームバリデーションを作る</a></li>
<li><a href="https://dev.classmethod.jp/articles/react-beginners-tried-to-create-a-modern-web-form-with-material-ui-and-yup/">React 初心者が Material-UI で今どきの Web フォームを作ってみた（yup編）</a></li>
</ul>


3つのバリデーションの実装方法についてまとめました！ 📝

MUIのTextFieldとReact Hook Formでバリデーションを実装する

<h2>はじめに</h2>
<p>はじめまして、<a href="https://twitter.com/zsp2088dev">@zsp2088dev</a> です。<br>
以前に「Nuxt.js + Contentful + Netlify」で技術ブログを作成しましたが、あまり使うこともなく2年ほど経過してしまいました。</p>
<p>最近では、<a href="https://tech.excite.co.jp/archive/author/excite-kazuki">業務で記事を書く習慣</a>がつき、これなら個人の技術ブログも続きそうだと思ったことから技術ブログをリニューアルすることに決めました。実際に作成してみて、まだまだ未完成ではありますが、少しずつ改修を加えてよりよいものに仕上げていきたいと思っています。</p>
<p>本記事では、本技術ブログで使用している技術や今後導入したい機能などについて紹介します。</p>
<h2>使用技術</h2>
<p>本技術ブログで使用している技術について紹介します。</p>
<h3>Next.js</h3>
<p>技術ブログは以前作成したものと同じようにヘッドレスCMS + SGに対応したフレームワームで構築することに決めていました。<br>
フロントエンドにNext.jsを採用した理由としては、Nuxt.jsの経験があるため別のフレームワークを使ってみたかったからです。</p>
<p>（正直なところ、あまり調査はしていないです 🤫）</p>
<h3>Chakra UI</h3>
<p><img src="https://storage.googleapis.com/p_624d40be30231c0018cbd931/626662e8-9b60-4c07-876b-550d158351df/1000x1000/2022-04-20-chakra.png" alt="2022-04-20-chakra.png"></p>
<p>UIフレームワークは<a href="https://chakra-ui.com/">Chakra UI</a>を採用しました。<br>
少しだけ試してみたところ、素のCSSを書かないでよいところが魅力的であり、ドキュメントも読みやすかったのが好印象でした。</p>
<h3>Newt</h3>
<p><img src="https://storage.googleapis.com/p_624d40be30231c0018cbd931/9d93b5c0-2f3b-404d-aa84-2aa18afb8e24/1000x1000/2022-04-20-newt.jpg" alt="2022-04-20-newt.jpg"></p>
<p>Newtは最近リリースされたヘッドレスCMSです。</p>
<p>Newt上でコンテンツを作成、APIリクエストを送ることでコンテンツ取得をすることができるため、自分でサーバーを管理しなくてよいのが特徴です。現状では、無料枠でも十分に活用することができ、モデルの作成数にも制限がないのが非常に嬉しいです。</p>
<ul>
<li><a href="https://www.newt.so/">新しいコンテンツ管理の体験ヘッドレスCMS「Newt」</a></li>
<li><a href="https://prtimes.jp/main/html/rd/p/000000002.000095676.html">国産ヘッドレスCMS「Newt（ニュート）」3月8日より無料プランの提供開始</a></li>
</ul>
<h3>Vercel</h3>
<p><img src="https://storage.googleapis.com/p_624d40be30231c0018cbd931/e23cc14b-2b7c-4afd-a7f1-9bda3a2156b5/1000x1000/2022-04-20-vercel.png" alt="2022-04-20-vercel.png"></p>
<p>個人でNext.jsのホスティング先を探すならVercelでよさそう〜といったふんわりとした理由でVercelにしました。<br>
Next.jsの開発元はVercelであるため、非常に相性がよいです。</p>
<h2>今後の流れ</h2>
<p>Webサイトを自分自身で制作することのメリットの1つに自分好みに仕上げることができることが挙げられます。<br>
本技術ブログもまだまだ製作途中であり、今後こういう機能が欲しいなというものもいくつか考えているところです。</p>
<p>現状では、今後実装したい機能や修正したい箇所などをGitHubのissueにまとめています。</p>
<p>(ひとりで開発するのにgood first issueとは...? 🫠)</p>
<p><img src="https://storage.googleapis.com/p_624d40be30231c0018cbd931/aa4495e9-8b52-47e6-9f50-a5f092ae16d9/1000x1000/2022-04-20-issues.png" alt="2022-04-20-issues.png"></p>
<p>また、下記図のように、それぞれのissueには目的 / 概要 / 参考 をざっくり記述しています。<br>
今後は、実装していきたいものをissueを見ながら作成していく予定です。</p>
<p><img src="https://storage.googleapis.com/p_624d40be30231c0018cbd931/e62f58bf-0087-4d24-9503-766271911d7b/1000x1000/2022-04-20-issue.png" alt="2022-04-20-issue.png"></p>
<h2>おわりに</h2>
<p>Next.js + Newt + Vercelを使用して技術ブログをリニューアルしました！ 🔨</p>
<p>今後は本記事を定期的にメンテナンスし、機能を追加しながら少しずつ成長させていけたらなと思っています。<br>
最後まで読んでいただき、ありがとうございました！ 😑</p>


新しいヘッドレスCMSを使用して技術ブログをリニューアルしました！ 🔨

Articles