React 【React×TypeScript】propsの型を条件分岐させる
propsの型を条件によって分岐させる方法を２つ記録しておきます🙋♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。1つのpropの値で分岐させるあるpropの値を元に型を分岐させるやり方...
TypeScript
React 
TypeScript 【TypeScript】ユニオン型のジェネリクス使用時、Arrayメソッド(map,filter,sort…)の返り値の型が合わない
問題ユニオン型のジェネリクスを使用した値を、配列のメソッドに適用したときに発生した問題です。以下が、エラーが発生するサンプルコードです。typeDog={type:'dog'id:stringname:stringkind:...
エラー 【husky/lint-staged】tscを実行するとエラーになる
huskyとlint-stagedを使用して、pre-commit時にtscを実行するとエラーになっていたので、解決方法を記録します。エラー内容数十行のエラーが出てきますが、内容は主に以下でした。node_modules/next/dist...
TypeScript 【TypeScript】canvas（HTMLElement）の型を指定する
TypeScriptでcanvasを使用するとき、型をどうしようか迷ったのでメモです。canvasの型エディタの候補でも出てくると思いますが、HTMLCanvasElementです。ただ、これを以下のように当てはめるとエラーになります><c...
React 【React×TypeScript】コンポーネントをPropsとして渡す方法
コンポーネントをPropsとして渡す方法に少し手こずったので、メモしておきます。ポイント指定するPropsの型は、JSX.ElementやReact.ReactNodeなどを使用するコンポーネントを受け取る際は、引数にpropsを受け取り、...
Next.js 【Next.js×TypeScript】_app.tsx内のMyAppの型定義でエラーが出る
eslintを使用しているのですが、Next.jsの_app.tsx内でMyappのエラーが出ていました。その解消方法を記録します。元のコード({Component,pageProps}:AppProps)=>に波線が引かれ、Missing...
制作物/つくってみた 自主制作Webアプリ解説「パンBOX – お気に入りのパン屋さんを見つける、つながる」
アプリ概要ユーザーは福岡市内のパン屋を探したり、口コミ投稿やお気に入り保存ができます。また、店舗側は店舗情報充実や口コミへの返信ができるアプリです。ユーザー側福岡市にあるパン屋を検索できるパン屋への口コミを点数付きで投稿・編集・削除できるお...
JavaScript 【React × JavaScript or TypeScript】ページネーションをreact-paginateライブラリを使って実装してみた
使用したライブラリreact-paginateを使用しました。Reactのnpmでインストール可能なページネーション系で、本日時点でpopularityが第2位のものです。1位のものよりこちらの方がスタイルの調整が効きそうな気がしたのでこの...
React 【TypeScript×React】childrenの受取を必須にしたい！もしくは拒否したい！
開発をするなかで、このコンポーネントにはchildrenが絶対必要って設定したい…！ってなるとき、たまにありませんか？かなり簡潔ですが、以下のようにすればできます。必ず受け取るときReactNodeを指定します。import{ReactNo...
TypeScript 【TypeScript】？って何？Propsのオプションを指定する
初めてTypeScriptを使用した際、プロパティについている「？」ってなに？？？となっていたのですが、これを読めば解決します。プロパティについている「？」とは？？そのプロパティが、オプション（任意）であることを示しています！逆に、？を書か...
React 【TypeScript×React】React.FCとは? その特徴
TypeScriptとReactで開発をしていると、必ずと言ってもいいほど使うのがReact.FCです。最初に見たときは「なんぞや？」と思ったので、基本的な点を説明していきます。React.FCとは？略さずに書くと、React：Functi...
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>という形で文字列を囲んでいます。うまくいった例これを<inputvalue=""/>とすると、うまくいきました！結論：<input></input>で文字列...