React 【React×TypeScript】propsの型を条件分岐させる
propsの型を条件によって分岐させる方法を２つ記録しておきます🙋♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。 1つのpropの値で分岐させる あるpropの値を元に型を分岐させるや...
TypeScript
React 
TypeScript 【TypeScript】ユニオン型のジェネリクス使用時、Arrayメソッド(map,filter,sort…)の返り値の型が合わない
問題 ユニオン型のジェネリクスを使用した値を、配列のメソッドに適用したときに発生した問題です。以下が、エラーが発生するサンプルコードです。 type Dog = { type: 'dog' id: string name: ...
JavaScript 【Jest/Testing Library/ next/link】TypeError: Cannot read properties of null (reading ‘push’)
Jest, React Testing Libraryを用いたテスト時に、next/link周りで出たエラーの対処法です。 エラー内容 TypeError: Cannot read properties of null (reading &...
TypeScript 【TypeScript】canvas（HTMLElement）の型を指定する
TypeScriptでcanvasを使用するとき、型をどうしようか迷ったのでメモです。 canvasの型 エディタの候補でも出てくると思いますが、HTMLCanvasElementです。 ただ、これを以下のように当てはめるとエラーになります...
Next.js 【Next.js×TypeScript】_app.tsx内のMyAppの型定義でエラーが出る
eslintを使用しているのですが、Next.jsの_app.tsx内でMyappのエラーが出ていました。その解消方法を記録します。 元のコード ({ Component, pageProps }: AppProps) =>に波線が引かれ、...
JavaScript 【React × JavaScript or TypeScript】ページネーションをreact-paginateライブラリを使って実装してみた
使用したライブラリ react-paginateを使用しました。 Reactのnpmでインストール可能なページネーション系で、本日時点でpopularityが第2位のものです。1位のものよりこちらの方がスタイルの調整が効きそうな気がしたので...
React 【TypeScript×React】childrenの受取を必須にしたい！もしくは拒否したい！
開発をするなかで、このコンポーネントにはchildrenが絶対必要って設定したい…！ってなるとき、たまにありませんか？ かなり簡潔ですが、以下のようにすればできます。 必ず受け取るとき ReactNodeを指定します。 import { R...
TypeScript 【TypeScript】？って何？Propsのオプションを指定する
初めてTypeScriptを使用した際、プロパティについている「？」ってなに？？？となっていたのですが、これを読めば解決します。 プロパティについている「？」とは？？ そのプロパティが、オプション（任意）であることを示しています！ 逆に、？...
React 【TypeScript×React】React.FCとは? その特徴
TypeScriptとReactで開発をしていると、必ずと言ってもいいほど使うのがReact.FCです。 最初に見たときは「なんぞや？」と思ったので、基本的な点を説明していきます。 React.FCとは？ 略さずに書くと、React：Fun...
React 【TypeScript×React】useReducerとuseContextを使ってログイン状態を管理する
SPAを制作しているときに、Reactの状態管理でログイン状態かログアウト状態かを取得したかったため、useReducertとuseContextで実装しました。 方針 ログイン状態を判断するstateをグローバルで管理するそのstateに...
React 【TypeScript×React】React-Modalの使い方
Reactで簡単にモーダルが作れるライブラリのインストールと使い方の説明です。今までは自分で一からモーダルを作っていたのですが、今回はライブラリにあやかりました。 前提環境 TypeScriptとReactはインストール済。 インストール ...
React 【エラー/TypeScript×React】inputが使えない。inputが入ったコンポーネントを返すと読み込まれなくなる。
はまったエラーがあったので記録です！ エラーが出たコード <input></input>という形で文字列を囲んでいます。 うまくいった例 これを<input value="" />とすると、うまくいきました！ 結論：<input></inp...