目次 Yarnについて Yarnの特徴 Yarnの基本的な使用方法 まとめ Yarnについて Yarnは、高速で信頼性の高い、セキュアな依存関係管理ツールです。 JavaScriptのプロジェクトで利用されることが多いです。 Yarnは、npmのクライアントとしても動作するため、npm…

目次 zodライブラリの.omitメソッドについて .omit()とは? .omit()の利点 他のメソッドとの関連性 まとめ zodライブラリの.omitメソッドについて zodはTypeScriptのための優れたバリデーションライブラリです。 この記事では、.omitメソッドとその使用方法に…

目次 ReactでのZodの紹介 なぜZodなのか？ Zodのインストール 基本的なスキーマ定義 ReactでのZodを使用したフォーム検証 まとめ ReactでのZodの紹介 ZodはJavaScriptおよびTypeScriptのための強力なスキーマ宣言および検証ライブラリです。 これにより、開…

zodライブラリの.pickメソッドについて zodはTypeScript向けのバリデーションライブラリとして非常に人気があります。 この記事では、.pickメソッドの概要とその使用方法について詳しく解説します。 .pick()とは? .pick()メソッドは、オブジェクトスキーマか…

zodライブラリの.optionalメソッドについて zodはTypeScript向けの堅牢なバリデーションライブラリです。 この記事では、.optionalメソッドとその使用方法について詳しく解説します。 .optional()とは? .optional()メソッドは、特定のキーの値をオプションに…

zodライブラリの.partialメソッドについて zodはTypeScriptのための強力なバリデーションとパースライブラリです。 この記事では、.partialメソッドとその使用方法に焦点を当てて解説します。 .partial()とは? .partial()メソッドは、オブジェクトスキーマの…

目次 Knex.js でのテーブルカラムの削除方法 1. 新しいマイグレーションの作成 2. マイグレーションファイルの編集 3. マイグレーションの実行 まとめ Knex.js でのテーブルカラムの削除方法 Knex.js は Node.js の SQL クエリービルダおよびマイグレーショ…

目次 MUI v5 でのスマホサイズの判定方法 必要なインポート スマホサイズの判定方法 まとめ MUI v5 でのスマホサイズの判定方法 Material-UI（MUI）は、ReactのUIフレームワークとして非常に人気があります。 最新バージョンのMUI v5では、名前空間やインポ…

目次 React Router: ナビゲーションとパラメータの受け取り useNavigate でのナビゲーション useParams での URL パラメータの受け取り まとめ React Router: ナビゲーションとパラメータの受け取り React Router は React アプリケーションにおけるルーティ…

useNavigate を使ったURLパラメータに値を設定して React Router での遷移方法 React Router v6 から、useNavigate という新しいフックが導入されました。 これを使って、プログラム的にルーティングの遷移を行うことができます。 以下は useNavigate を使っ…

目次 Reactビルドファイルのindex.htmlを開く方法 1. 手動で開く 2. ローカルサーバーでホスティング 3. 実際のホスティング環境へデプロイ Reactビルドファイルのindex.htmlを開く方法 Reactアプリケーションをビルドすると、最適化された静的ファイルが生…

目次 Dockerのポート競合エラーの解決方法 原因 解決方法 1. 既存のプロセスを確認・終了 2. 異なるポートでの起動 3. Docker Composeファイルの修正 Dockerのポート競合エラーの解決方法 DockerやDocker Composeを使用してコンテナを起動しようとした際に、…

TypeScriptでunknown型の値を安全に文字列に変換する TypeScriptのunknown型は非常に有用ですが、それを直接テンプレートリテラルで使用すると、一部のESLintルールやTypeScriptの厳格な型チェックによってエラーが発生する場合があります。 問題点 直接テン…

目次 PostgreSQLとKnexでのbatchInsertエラーの解決 エラー "08P01" とは？ 解決策 まとめ PostgreSQLとKnexでのbatchInsertエラーの解決 大量のデータをPostgreSQLのテーブルに一度にインサートする際に、Knex.jsを使用すると非常に簡単になります。 しかし…

目次 Material-UIのアイコンボタンの色を変更する方法 インラインスタイルを使用する CSSでスタイルを適用 Material-UIのmakeStylesまたはuseStylesを使用する Material-UIのアイコンボタンの色を変更する方法 Material-UIのアイコンボタンの色を変更するの…

目次 Knex.jsの「returning」メソッドの利用方法 基本的な利用法 複数のカラムを返す 注意点 まとめ Knex.jsの「returning」メソッドの利用方法 Knex.jsはJavaScriptのための強力なSQLクエリービルダーです。 特にPostgreSQL, Microsoft SQL Server, Oracle…

目次 Knex.jsで複数の条件でソートする方法 基本的なソートの方法 複数の条件でのソート まとめ Knex.jsで複数の条件でソートする方法 Knex.jsは、SQLクエリビルダーとして人気があります。 この記事では、Knex.jsを使用して、複数の条件でのソート方法につ…

目次 Knex.js での SELECT クエリのソート方法 Knex セットアップ SELECT クエリのソート 注意点 Knex.js での SELECT クエリのソート方法 Knex.js は人気のある SQL クエリビルダで、Node.js のアプリケーションでよく使用されます。 この記事では、Knex.js…

目次 TypeScriptでのパターンマッチング ts-patternの使い方 ts-patternの導入 基本的な使い方 複数の条件を組み合わせる まとめ TypeScriptでのパターンマッチング ts-patternの使い方 TypeScriptには標準でパターンマッチングの機能が組み込まれていません…

目次 Material-UI の ListItemText に HTML を安全に挿入する方法 手順 注意点 Material-UI の ListItemText に HTML を安全に挿入する方法 Material-UI は、React で美しくて機能的な UI を素早く構築するためのライブラリです。 しかし、ListItemText のよ…

目次 ts-patternでのオブジェクトキー存在チェック インストール キー存在チェックの基本 まとめ ts-patternでのオブジェクトキー存在チェック ts-patternはTypeScriptでのパターンマッチングを強化する非常に便利なライブラリです。 この記事では、ts-patte…

シングルページアプリケーション(SPA)とは シングルページアプリケーション（SPA）は、1つのWebページで完結するアプリケーションのことを指します。 ユーザーがページをナビゲートすると、ページ全体を再ロードするのではなく、必要な部分だけが動的に更新…

Reactのライフサイクルについて Reactのコンポーネントは、その存在期間中に特定の「ライフサイクルメソッド」を経ています。 これにより、コンポーネントのマウント、アップデート、アンマウント時の動作をカスタマイズできます。 マウント(Mount) コンポー…

Reactとは? Reactは、Facebookが開発したJavaScriptライブラリで、ユーザーインターフェースを構築するためのものです。 シングルページアプリケーションの開発に特に適しており、仮想DOMを使用して効率的なDOM更新を実現します。 Reactの特徴 仮想DOM: 実際…

Reactのサーバーサイドレンダリング (SSR) サーバーサイドレンダリング (SSR) とは、クライアントサイドだけでなく、サーバーサイドでReactコンポーネントをレンダリングする方法のことを指します。 なぜSSRを利用するのか？ 初期ロードの高速化: ブラウザが…

目次 実装 実装 以下のようにテストコードを実装すると test("日付変更テスト", async () => { // 日付を2023年1月1日に変更 vi.setSystemTime(new Date("2023-01-01T00:00:00.000Z")); const { getByText } = setup(<View />); }); 以下のDateが2023年1月1日で取得</view>…

目次 実装方法 実装方法 以下のように実装することで const map = new Map() map.set("a", "あああ"); map.set("b", "いいい"); map.set("c", "ううう"); const obj = Object.fromEntries(map.entries()); console.log(obj); 以下のようなオブジェクトが生成…

目次 期待値 実装 期待値 以下のようなオブジェクトを { key1: "aaa", hoge: "bbb" } 以下のようにvalueを空文字にしたい { key1: "", hoge: "" } 実装 以下のように実装することで、valueが空のオブジェクトにできます。 const obj = { key1: "aaa", hoge: …

目次 ts-pattern null、undefinedの比較 ts-pattern ts-patternは型比較に使用されるライブラリです。 github.com null、undefinedの比較 以下のように、「P.nullish」にてnullかundefinedの場合の処理を行っています。 import { P, match } from 'ts-patter…

目次 機能説明 実装方法 機能説明 以下のようなオブジェクトから const hoge = { sample_0_value: 'サンプルだよ', sample_1_value: 'サンプルだよ1', test_0_value: 'テストだよ' }; 以下のようなオブジェクトを取得したい ※keyに「sample」が含まれている…