全てのコンテンツ

React

【React】React Queryを使って、APIを取得する

React Query を使って、API の取得を管理します。 まずは、React Query をインストールします。 プロジェクトのターミナルで、 npm install --save react-query を実行します。 App.tsx で React Query…

続きを読む
2022年06月01日2 分
React

【React】React Datasheetを使って、ExcelのようなUIを実装する

React Datasheet を使うと、Excel のような UI を実装することができます。 基本的な使用方法 まずは、React Datasheet をインストールします。 プロジェクトのターミナルで、 npm install react-datasheet --save…

続きを読む
2022年05月31日2 分
Node.js

【Node.js】Vitestを使って、ソースコードをテストする

Vitest を使うと、JavaScript や TypeScript のソースコードをテストすることができます。 まずは、Vitest をインストールします。 ターミナルで、 npm install --save vitest を実行します。 インストール完了後、package…

続きを読む
2022年05月30日1 分
React

【React】React Router V6で、ページごとのレイアウトを変更する

ダッシュボードのレイアウトを使用しているプロジェクトがあるとします。 ログイン画面では、ダッシュボードが必要ないので、ログイン画面でダッシュボードのコンポーネントを利用しないようにします。 その場合、React Router の Outlet を使用します。 react…

続きを読む
2022年05月27日1 分
React

【React】Redux Toolkitを使って、簡単にグローバルな状態を管理する

Redux のセッティングは難しいイメージですが、Redux Tookit を使うと、簡単にグローバルな状態を管理することができます。 手順は、ほとんど公式サイト( https://redux-toolkit.js.org/ )を参考にしました。 まずは、React Redux…

続きを読む
2022年05月26日3 分
TypeScript

【TypeScrpt】JavaScriptからTypeScriptへ変換する際、any型を使わない一つの方法

Javascript のソースコードを TypeScript に変換しようとしています。 person が any 型ではないのかと言われています。 このまま any 型にしてもいいのですが、TypeScript ではなるべく any…

続きを読む
2022年05月25日1 分
TypeScript

【TypeScrpt】Record<Keys, Type>を使い、同じ型をまとめて指定する方法

会員とゲストのリストを作成しています。 このままでも型推論してくれているのですが、guestやmemberに数値が入ってもエラーになりません。 この場合、Recordを使い、キーがguest、memberで、valueがstring[]型にします。 配列内にはstring…

続きを読む
2022年05月24日1 分
TypeScript

【TypeScrpt】keyofを使いオブジェクトのキーを基に、型を指定する方法

特定のキーを基に、値を返す関数を作成しました。 無事、意図した内容が表示されているのですが、例えば key の一覧にないキーを使用する場合、コンパイルエラーが発生します。 この場合、keyof を使用し、key…

続きを読む
2022年05月23日1 分
TypeScript

【TypeScrpt】型推論したオブジェクトを、型として使用する方法

プロフィールを基に、テキストが作成されるコードを作成しました。 この場合、personに『Parameter 'person' implicitly has an 'any' type.』というコンパイルエラーが発生しています。 type や interface…

続きを読む
2022年05月22日1 分
TypeScript

【TypeScrpt】受け取ったオブジェクトと異なるオブジェクトを返す場合に、型を指定する方法

個人情報にフルネームを追加したいと思い、以下のコードを作成しました。 すると、tanaka.fullNameで、fullNameの型がないというコンパイルエラーが発生しました。 Person型にfullNameを追加すると、 tanaka内にfullName…

続きを読む
2022年05月21日1 分