Next.js 16のCache Componentsを理解する
はじめに Next.js 16でキャッシュ周りが変わったらしいが全然追えていなかったので今回は use cache に関して整理してみました。 キャッシュは1箇所じゃない 前提知識としてWebアプリケーションの「キャッシュ」は1つの場所だけ...
Next.jsTypeScript
ようこそ
Hoshico Notes
日々の開発で学んだことや技術的な備忘録を綴っています。
Next.jsのmiddlewareに関して
今回はNext.jsのmiddlewareに関しての記事になります。 本記事は Next.js 13 以降の App Routerを前提 として解説しています。 1.Next.jsのmiddlewareでできること Next.jsのmidd...
Next.js
TypeScriptはフロントエンドとバックエンドでどのように使われているか
普段、開発時にTypeScriptを使用しているものの、どのように解析・実行されているのか今ひとつ理解できていなかったため、今回整理してみることにしました。 1. フロントエンドとバックエンドでのTypeScriptの使われ方 TypeSc...
TypeScript
Reactでクエリパラメータ管理
はじめに Reactアプリを開発する際、検索やフィルター、ページネーションなどでクエリパラメータ扱うことはよくあります。 React Router(v6)以降では、useSearchParamsを使用することで簡潔にクエリパラメータを管理す...
React
Nest.jsでGoogle認証(OAuth2.0)を使う【フロントエンド編】
こちらは 前回の記事 のフロント側の実装になります。 ポイントとしては、 ①Googleログイン後にid_tokenとrefresh_tokenを取得する ②id_tokenが有効期限(1時間)を過ぎていた場合はrefresh_tokenを...
TypeScriptNext.js
Nest.jsでGoogle認証(OAuth2.0)を使う
フロントエンドがNext.jsでバックエンドがNest.jsのアプリケーションにおいて、Google認証を入れたいときのバックエンド側の実装をまとめてみました。 ※ フロントエンドの実装に関しては後日掲載します。 調べた中でいろんな実装方法...
Node.jsNest.jsTypeScript
Next.js App Router用のスニペットを作る
最近はNext.jsにおいてPages RouterではなくApp Routerを使う様になってきましたので 今回は以前作ったNext.js用のスニペットをApp Router仕様に変更していきたいと思います。 ちなみにですがスニペットに関...
Next.jsReactTypeScript
MongoDBのaggregateの基礎
今回はMongoDBで集計する際に使用するaggregateに関して、基礎的なものをまとめておこうと思います。 ※ Aggregate Piplineのみ 今回は以下のようなMLBの選手成績のデータを用意しました。 obpは"出塁率"、sl...
Node.js
Mapのkey()とvalues()について
久々の更新になります！ さて、今回はMapについて少し掘り下げていきます。 Mapの値取得 Mapの値取得の前にオブジェクトのついての少し触れておきます。 objectでは値の取得を行いたい場合 const fruits = { En: "...
JavaScriptTypeScript
ReactでのonChangeの型について
前回に引き続き、今回はReactのonchangeの型に付け方についてもまとめていこうと思います。 (1) changeEventの基本 changeEventの主な使用ケースとしてはinput要素(inputタグ)やselect要素(se...
TypeScriptNext.jsReact
ReactでのonClickの型について
今回はReactでのonClickの型の付け方についてまとめておこうと思い記事にしてみました。 先に結論ですが、onClickの型は引数でeventをとる場合と取らない場合で型の指定の仕方が変わります。 (1) 引数にeventを取る場合 ...
TypeScriptReact
Next.jsでローカルファイルを選択する
今回はNext.jsでファイルのファイルを選択選択し、選択されたファイル名を表示させる実装についての記事になります。 まずは今回の実装の要件をまとめておきたいと思います。 ①画像ファイル(jpeg/jpg/png)を選択、登録できるようにし...
TypeScriptNext.jsReact
jestでmockを作成する
今回はjestのmock関数の「jest.fn()」に関しての基本をまとめていきます。 (1)jest.fn()について 関数に関して、このjest.fn()を利用することで指定した値を返すようなmock関数にすることができます。 今回は例...
JavaScript
React Hook Formを親子コンポーネントで使用する
今回は繰り返し使用するようなコンポーネントの中でReact Hook Formを使用する際のポイントをまとめていきます。 ※ MUIはv5 / react-hook-form v7 になります (1)イメージ図 下の画像のように(親)コンポ...
TypeScriptReactNext.js
パターンで考えるInfer
TypeScriptのinferについてしっかり理解できるように使用パターンから考えてみました。 ※ 今回はTypeScriptのi nferTypes1.ts を参考にしています。 (1) T extends ( infer U )? U...
TypeScript
TypeScriptの型引数にextendsを使用する
TypeScriptのextendsについての学習のメモ。 ※extendsの継承については今回は触れません。 このextendsを使用すれば、型引数に制約をかける事が可能になります。 ではでは順を追って説明していきます。 ・型引数を持つ型...
TypeScript
JSのflatとconcatとflatMapとfillを一気に学ぶ
今回はJSのメソッドのflatとflatMapとfillについてまとめていきます。 ちなみにこのメソッドたちは下の問題に挑戦するまでは一切使用したことがなかったものです... ・flatメソッドについて mdnより const arr1 =...
JavaScript
JSのindexOfとfindIndexとfindの特徴とTSでの型をほんのりと覚えられるようになるコツ
今更ながらfindIndexというものを最近知ったので、indexOfとfindと一緒にまとめておこうと思います。 ・3つのポイント ３つとも配列に対して、「何かを探す」という操作をするのだが この3つのポイントを知っておけば少しは違いがわ...
TypeScriptJavaScript
TypeScriptの as const を理解する
型アサーション自体は使用することを推奨されていないが、こちらのas constに関しては使用することでより安全に使用できるとのこと。 ・as const とは？ typeof を使用して配列やオブジェクトから型を生成する際に、すべての要素、...
TypeScript
React Hook FormをMUIで使用してみた。
React Hook FormをMUIで使用した時のメモ。 今回はMUIの「TextField」と「CheckBox」に関して考えていきます。 ・型を用意 まずはInputの型を定義 // TextFieldでtitleをCheckBoxで...
ReactTypeScript
JSのメソッド(Object.values / some / indexOf )
最近Reactのリアルタイム検索(入力されるたびに検索かけるやつ)を実装した際に使用したメソッドのメモ。 ・Object.valuesについて これはオブジェクト内のプロパティの値のみを配列として返すメソッドになります。 const use...
JavaScript
Reactのpropsの渡し方と型の付け方
最近Reactのコードを書いていて親から子へのpropsの渡し方って色々あるなと思いまとめてみました。 多分他にも色んな渡し方があると思うので随時更新していきます。 前提として親コンポーネント(App.tsx)から子コンポーネント(Home...
TypeScriptReact
Next.js(~12v)に関するメモ
このページはNext.jsに関するメモ(基本的なこと)のページ。 随時更新予定 ・アプリケーション作成 npx create-next-app <アプリ名> --typescript ・pages/api/hello.tsの型 ...
Next.js
インデックスシグネチャとMappedTypesについて
今回はTypeScriptのインデックスシグネチャとMappedTypesについての投稿になります。 ・インデックスシグネチャとは？ 「どんなプロパティ名(※ 指定された任意の型を持つ)が来てもOK」にできる特殊な記法になります。 具体的に...
TypeScript
特定の要素の個数をカウントする方法
今回は配列の中に特定の要素がいくつあるかをカウントする方法についての投稿になります。 ・考え方 今回はfilterメソッドを使用します。 大まかな流れとしては、 ①ある配列からfilterを使用し特定の要素を抜き出して別の配列を作成する ②...
JavaScript
filter(Boolean)について
今回はJavaScriptのメソッドである「filter」を使用した filter(Boolean)について解説していきます。 ・filter(Boolean)とは？ 結論ですがfilter(Boolean)を使用することでfalseになる...
JavaScript
React17へのダウングレード方法
現状(2022/5/2現在)React18が不安定な箇所もあるそうなので今回はReact17へのダウングレードの方法を投稿します。 ちなみにですが create-next-app や create-react-app だとデフォルトでRea...
React