<h2 id="h3984736af0">基本的な使い方</h2><ol><li>Zodでバリデーションのスキーマを定義<ol><li>このスキーマはformデータの型としても利用できる</li></ol></li><li>React Hook FormのuseFormフックを利用。この際にresolverを指定。先程作成したZodで定義したスキーマを利用。</li><li>inputにregisterを指定して入力フィールドをReact Hook Formの管理下に置く。</li></ol><pre><code class="language-javascript">import React from &apos;react&apos;;
import { useForm, Controller } from &apos;react-hook-form&apos;;
import { zodResolver } from &apos;@hookform/resolvers/zod&apos;;
import { z } from &apos;zod&apos;;

// まず、Zodを利用してバリデーションスキーマを定義します
const schema = z.object({
  name: z.string().nonempty({ message: &apos;Name is required&apos; }),
  email: z.string().email({ message: &apos;Invalid email address&apos; }),
});

// スキーマから型を生成します
type FormData = z.infer&lt;typeof schema&gt;;

const Form = () =&gt; {
  const { register, handleSubmit, formState: { errors } } = useForm&lt;FormData&gt;({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data: FormData) =&gt; {
    console.log(data);
  };

  return (
    &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
      &lt;input {...register(&quot;name&quot;)} /&gt;
      {errors.name &amp;&amp; &lt;p&gt;{errors.name.message}&lt;/p&gt;}

      &lt;input {...register(&quot;email&quot;)} /&gt;
      {errors.email &amp;&amp; &lt;p&gt;{errors.email.message}&lt;/p&gt;}

      &lt;input type=&quot;submit&quot; /&gt;
    &lt;/form&gt;
  );
};

export default Form;</code></pre><h2 id="h42d3bcf36c">inputのonChangeを検知してバリデーション行いたい</h2><pre><code class="language-typescript">  const {
    register,
    watch,
    setValue,
    formState: { errors },
  } = useForm&lt;SearchFormInputs&gt;({
    resolver: zodResolver(schema),
    mode: &quot;onChange&quot;,
  });</code></pre><p>modeは他にも</p><table><tbody><tr><th colspan="1" rowspan="1"><p>mode</p></th><th colspan="1" rowspan="1"><p></p></th></tr><tr><td colspan="1" rowspan="1"><p>onSubmit</p></td><td colspan="1" rowspan="1"><p>デフォルト。submitのタイミングでエラー表示</p></td></tr><tr><td colspan="1" rowspan="1"><p>onChange</p></td><td colspan="1" rowspan="1"><p>入力を検知してエラー表示。</p></td></tr><tr><td colspan="1" rowspan="1"><p>onBlur</p></td><td colspan="1" rowspan="1"><p>inputの外をクリックしたタイミングでエラー表示。</p></td></tr><tr><td colspan="1" rowspan="1"><p>onTouched</p></td><td colspan="1" rowspan="1"><p>最初のblurのタイミング、その後は毎回の変更のタイミングでエラー表示。</p></td></tr><tr><td colspan="1" rowspan="1"><p>all</p></td><td colspan="1" rowspan="1"><p>blurとchangeイベントでエラー表示。</p></td></tr></tbody></table><p>がある。</p><ul><li><a href="https://react-hook-form.com/docs/useform#mode">https://react-hook-form.com/docs/useform#mode</a></li></ul><h2 id="h5e494a105f">setValue時にもonChangeイベントを発火させたい</h2><pre><code class="language-typescript">setValue(&quot;query&quot;, suggestion.suggest, { shouldValidate: true });</code></pre><ul><li><a href="https://github.com/orgs/react-hook-form/discussions/3429">setValue then trigger the onChange event?</a></li></ul>

React Hook FormとZodで詰まったポイント

<h3 id="h3de35099b3">参考</h3><p><a href="https://zenn.dev/rh820/articles/1e62510776221e">https://zenn.dev/rh820/articles/1e62510776221e</a></p><p></p><h3 id="h67d2b7be6b">バージョン</h3><p>React: 18.x<br>ReactDOM: 18.x<br>Next.js: 13.x</p><h3 id="h8c9c386a73">導入するライブラリ等</h3><ul><li>TypeScript: 5.1.6</li><li>ESLint (8.23.0)</li><li>Prettier (8.43.0)</li><li>jest</li><li>testing-library</li><li>msw</li><li>react-hook-form</li><li>zod</li><li>swr</li></ul><h3 id="hd95efe0648">コマンドたち</h3><pre><code>amanokokorotarou🙃 ~/Project/Next on ☁️  (jp)  
❯ npx create-next-app@latest</code></pre><p>対話型で適当に答えて作成。</p><p>フォームとバリデーション関連。</p><pre><code class="language-shell">amanokokorotarou🙃 ~/Project/Next/suggest-sample-app on  main via  v18.12.1 on ☁️  (jp)
❯ npm install react-hook-form zod @hookform/resolvers</code></pre><p>テスト関連のライブラリ</p><pre><code class="language-shell">amanokokorotarou🙃 ~/Project/Next/suggest-sample-app on  main [!] via  v18.12.1 on ☁️  (jp) took 2s
❯ npm install -D jest @testing-library/react @testing-library/jest-dom @testing-library/react @testing-library/user-event msw cypress</code></pre><p>データ取得のためのライブラリ</p><pre><code class="language-shell">amanokokorotarou🙃 ~/Project/Next/suggest-sample-app on  main [!] via  v18.12.1 on ☁️  (jp) took 4s
❯ npm install swr</code></pre><p>prettierとtailwind関連のeslintとprettierのプラグインやルールセット</p><pre><code class="language-shell">amanokokorotarou🙃 ~/Project/Next/suggest-sample-app on  main [!] via  v18.12.1 on ☁️  (jp) took 2s
❯ npm install -D prettier prettier-plugin-tailwindcss eslint-config-airbnb eslint-plugin-tailwindcss</code></pre><div data-filename="prettierrc.js"><pre><code class="language-javascript">module.exports = {
  // eslint-disable-next-line global-require
  plugins: [require(&quot;prettier-plugin-tailwindcss&quot;)],
};</code></pre></div><h4 id="he58999dd7a">eslint.json</h4><p>参考: </p><ul><li><a href="https://stackoverflow.com/questions/59265981/typescript-eslint-missing-file-extension-ts-import-extensions">https://stackoverflow.com/questions/59265981/typescript-eslint-missing-file-extension-ts-import-extensions</a></li><li><a href="https://saiko1988.hatenablog.com/entry/2022/06/06/011410">https://saiko1988.hatenablog.com/entry/2022/06/06/011410</a></li><li><a href="https://zenn.dev/st43/scraps/1457ee40ed6902">https://zenn.dev/st43/scraps/1457ee40ed6902</a></li></ul><div data-filename="eslint.json"><pre><code class="language-json">{
  &quot;rules&quot;: {
    &quot;import/no-extraneous-dependencies&quot;: [&quot;error&quot;, { &quot;devDependencies&quot;: true }],
    &quot;import/extensions&quot;: [
      &quot;error&quot;,
      &quot;ignorePackages&quot;,
      {
        &quot;js&quot;: &quot;never&quot;,
        &quot;jsx&quot;: &quot;never&quot;,
        &quot;ts&quot;: &quot;never&quot;,
        &quot;tsx&quot;: &quot;never&quot;
      }
    ],
    &quot;react/jsx-filename-extension&quot;: [
      &quot;error&quot;,
      { &quot;extensions&quot;: [&quot;.js&quot;, &quot;.jsx&quot;, &quot;ts&quot;, &quot;tsx&quot;] }
    ],
    &quot;react/jsx-props-no-spreading&quot;: &quot;off&quot;,
    &quot;react/jsx-curly-brace-presence&quot;: &quot;off&quot;
  },
  &quot;extends&quot;: [
    &quot;airbnb&quot;,
    &quot;next/core-web-vitals&quot;,
    &quot;plugin:tailwindcss/recommended&quot;,
    &quot;prettier&quot;
  ],
  &quot;plugins&quot;: [&quot;tailwindcss&quot;]
}
</code></pre></div>

Next.jsセットアップ作業履歴。

<p>6月祝日ないのほんとありえない。</p><p>でもそのおかげで祝日のありがたみを知ることができる。</p><p>7月17日が楽しみです。</p>

6月

<p>2023年現在の先端技術は一切取り入れず、1900年代初頭の技術レベルで生活を営む閉鎖的な環境を創り出します。</p><p>この環境で生まれ育った人々を突然現代の世界に連れ出したとしたら、彼らは一瞬にして約120年分の技術進歩を目の当たりにします。それはまるでタイムマシンで未来へ旅したかのような感覚に陥るでしょう。</p><p>とても面白い実験だと思います。</p><p>この考察は、私たちが実際にはいつも一種の「タイムカプセル」の中にいるという見方を示唆します。</p><p>我々の「現在」は、私たちが認識している過去の技術と知識に基づいています。未来の人々からすれば、それは過去のものになります。これは私たちが未来から見れば、自分たちが生活している現在が過去の「タイムカプセル」に過ぎないという認識を導きます。</p><p>未来の人々と過去の人々と現代の人々が「現在」において出会う可能性もあるということです。</p>

タイムトラベル感覚に陥らせる方法。ボトルネック仮説あるいはタイムカプセル効果。

<p>説明とかは省きます。</p><p>とりあえず作業履歴だけ。</p><ol><li><a href="https://fig.io/">fig</a>をいれる。</li><li>starshipをいれる。ファイルは<a href="https://zenn.dev/oosuke3/scraps/38a42f48c6dba4">これ</a>を参照。</li><li><a href="https://www.nerdfonts.com/font-downloads">NerdFont</a>をダウンロード。</li><li><a href="https://qiita.com/P-man_Brown/items/551292fe3f12367608e2">zsh-autosuggestions</a></li></ol><p>4について、</p><p>zshrcへの記述は以下が正しい。</p><pre><code>source ~/.zsh/zsh-autosuggestions/zsh-autosuggestions.zsh</code></pre><h3 id="h397e38daae">補足</h3><p>今までいれてたやつを思い出してみる</p><p><a href="https://qiita.com/gilly/items/5ff7bd7142e963cdbb9b">bashからZshに乗り換え - preztoを使ってプロンプトテーマを変えてみた</a></p><p>これにautosuggestionsが入ってるから4の工程はいらない。</p><p>→prezto外して4いれる。</p><p>メモ。↓</p><pre><code class="language-shell"># Source Prezto.
if [[ -s &quot;${ZDOTDIR:-$HOME}/.zprezto/init.zsh&quot; ]]; then
  source &quot;${ZDOTDIR:-$HOME}/.zprezto/init.zsh&quot;
fi</code></pre>

zshをいい感じに使うための作業履歴

<p>内藤新宿というのは東京都新宿区新宿一丁目から新宿二丁目・三丁目の一帯にあたる場所にあった、江戸時代の宿場である。</p><p>僕が小学校時代に所属していたサッカーチームは<a href="https://ameblo.jp/u-23verdy/entry-10700188254.html">FC新宿内藤</a>という<a href="http://www.kusa1987.jp/record/common2010/pc/team/1_76.html">チーム</a>であり、当時この名前がどういう意味かはイマイチ分かっていなかった。</p><p>当時、新宿区のサッカー連盟の偉い人で内藤さんという人がいたのでその人の名前を冠しているものだと思っていた。</p>

内藤新宿

<h2 id="he2485005d0">目的</h2><p>今現在実家の近くの激狭物件に住んでるけどさすがに引っ越したい。<br>家賃相場がこの辺は高いので土地勘のないところへ引っ越さなければいけなそう。</p><p>色々調べるのでメモしとく。</p><h2 id="had31107fd9">理想(全部を満たすのはムリ)</h2><ul><li>家賃は7.5万くらいが限界そう。。(もっと稼ぎたい。。。。。)</li><li>なんやかんや友だちがこの辺に住んでいるのでサクッと遊べる距離には居たい。</li><li>出社することもあるだろうから出社で片道1時間未満に収まる距離。<ul><li>出社頻度自体は少ないので駅までの距離は割と妥協できるポイント。</li></ul></li><li>風呂トイレ別。</li><li>7~8帖くらいはほしい。<ul><li>リモートなのでデカい机がある。</li></ul></li><li>治安よい。</li><li>近くにスーパーがある。(コンビニだけだとお金的にキツイ。)</li><li>キレイ。<ul><li>築年数あってもリノベとかあるから探すのむずい。</li></ul></li></ul><p></p><h2 id="h853e7cded3">雑多なメモ</h2><p>正直どこでもいいのでなんて調べればいいかがわからない。<br>「〇〇駅」と決まっていればその駅でいい物件を探すだけなので楽。<br>→今は23区で調べてみてる。</p><p>埼京線が最強なことに気づいた。池袋→新宿→渋谷を全て通る神のような路線。埼京線沿いであれば埼玉まで入ってもいいのでは？と思い始めた。<br>→調べてみたらめっちゃ混んでるらしい。</p>

住む場所

<p><a href="https://help.microcms.io/ja/knowledge/specification-of-utc-time">作成日（createdAt）や公開日（publishedAt）がAPI経由で取得すると1日ズレてしまいます。ズレを調整する方法は？</a></p>

microCMSにおいてAPI取得でdate型がUTCで返ってくる

<p>初対面の場では、自己表現と謙虚さの間で微妙なバランスが必要となる。特に謙虚さと承認欲求との間のジレンマは、自己紹介や初対面の会話の中で特に顕著に感じる。</p><p style="text-align: start">謙虚さは自分の達成や能力を過度に強調しないこと、他者から学ぶ姿勢を持つことを意味する。謙虚な態度は一般的に社交的なコミュニケーションの中で好意的に受け取らるが、しかし、この謙虚さが過度になると、自身の真の価値を適切に伝えることが難しくなり、他者に自己の能力や達成を認識してもらう機会を失うことがある。</p><p style="text-align: start">一方、承認欲求は、自己の価値を認識し、他人にその価値を理解してもらいたいという人間の基本的な欲求である。初対面の状況では、特に自己の能力や達成を他者に理解してもらい、その価値を認めてもらうことが重要であるが、しかし、承認欲求が強すぎると、他人の前で自己の能力や達成を過度に強調する結果となり、謙虚さを欠いた振る舞いとなってしまう可能性がある。</p><p style="text-align: start">このように、初対面の場では、謙虚さと承認欲求の間の適切なバランスを見つけることが重要である。自己の価値を理解し、それを適切に伝えつつ、謙虚な態度と他者から学ぶ姿勢を保つことが求められる。これにより、他者に好意的に受け取られ、同時に自己の価値を認めてもらうことができる。</p>

初対面の場における謙虚さと承認欲求のジレンマ

<p>謎。</p><p>とりあえずやったこと</p><pre><code class="language-shell">yarn add -D eslint-config-next</code></pre><h2 id="heae49c81e4">解決</h2><p>上位フォルダに <code>.eslintrc.json</code>というファイルがありそれを読み込んでたっぽい。。</p><p>そっちのファイルを削除したらなおった。</p><h2 id="h3de35099b3">参考</h2><ul><li><a href="https://stackoverflow.com/questions/70817670/eslint-failed-to-load-config-next-core-web-vitals-to-extend-from">ESLint: Failed to load config &quot;next/core-web-vitals&quot; to extend from [duplicate]</a></li><li><a href="https://stackoverflow.com/questions/74154509/eslint-error-couldnt-find-the-config-next-core-web-vitals-to-extend-from">Eslint error ,,couldn&apos;t find the config &quot;next/core-web-vitals&quot; to extend from&quot;</a></li></ul>