ようこそ

Hoshico Notes

日々の開発で学んだことや技術的な備忘録を綴っています。

Reactでクエリパラメータ管理

はじめに Reactアプリを開発する際、検索やフィルター、ページネーションなどでクエリパラメータ扱うことはよくあります。 React Router(v6)以降では、useSearchParamsを使用することで簡潔にクエリパラメータを管理す...

React

最近はNext.jsにおいてPages RouterではなくApp Routerを使う様になってきましたので今回は以前作ったNext.js用のスニペットをApp Router仕様に変更していきたいと思います。ちなみにですがスニペットに関...

Next.jsReactTypeScript

前回に引き続き、今回はReactのonchangeの型に付け方についてもまとめていこうと思います。 (1) changeEventの基本 changeEventの主な使用ケースとしてはinput要素(inputタグ)やselect要素(se...

TypeScriptNext.jsReact

今回はReactでのonClickの型の付け方についてまとめておこうと思い記事にしてみました。先に結論ですが、onClickの型は引数でeventをとる場合と取らない場合で型の指定の仕方が変わります。 (1) 引数にeventを取る場合 ...

TypeScriptReact

今回はNext.jsでファイルのファイルを選択選択し、選択されたファイル名を表示させる実装についての記事になります。まずは今回の実装の要件をまとめておきたいと思います。 ①画像ファイル(jpeg/jpg/png)を選択、登録できるようにし...

TypeScriptNext.jsReact

今回は繰り返し使用するようなコンポーネントの中でReact Hook Formを使用する際のポイントをまとめていきます。 ※ MUIはv5 / react-hook-form v7 になります (1)イメージ図下の画像のように(親)コンポ...

TypeScriptReactNext.js

React Hook FormをMUIで使用した時のメモ。今回はMUIの「TextField」と「CheckBox」に関して考えていきます。・型を用意まずはInputの型を定義 // TextFieldでtitleをCheckBoxで...

ReactTypeScript

最近Reactのコードを書いていて親から子へのpropsの渡し方って色々あるなと思いまとめてみました。多分他にも色んな渡し方があると思うので随時更新していきます。前提として親コンポーネント(App.tsx)から子コンポーネント(Home...

TypeScriptReact

現状(2022/5/2現在)React18が不安定な箇所もあるそうなので今回はReact17へのダウングレードの方法を投稿します。ちなみにですが create-next-app や create-react-app だとデフォルトでRea...

React