技術ブログ

プログラミング、IT関連の記事中心

TypeScript

TypeScript入門

目次 TypeScript入門 特徴 静的型付け クラスベースのオブジェクト指向 コンパイル時のエラーチェック ツールのサポート JavaScriptとの互換性 豊富なコミュニティとエコシステム まとめ TypeScript入門 TypeScriptは、JavaScriptに型システムを加えたプログ…

TypeScriptのBigInt型について

目次 TypeScriptのBigInt型について 特徴 使用例 結論 TypeScriptのBigInt型について TypeScriptのBigInt型はJavaScriptのBigIntデータ型をサポートする機能で、64ビットを超える整数値を扱うために使用されます。この記事では、BigInt型の基本的な特徴と使…

TypeScriptの`readonly`使用ガイド

目次 TypeScriptのreadonly使用ガイド プリミティブ型にはreadonlyは不要 複合型にreadonlyを使用 結論 TypeScriptのreadonly使用ガイド TypeScriptでのreadonly修飾子の使用は、コードの安全性と可読性を向上させる強力なツールです。この記事では、readonl…

TypeScriptで文字列 "1E+300" を数値に変換する方法

目次 TypeScriptで文字列 "1E+300" を数値に変換する方法 ステップバイステップの説明 注意点 TypeScriptで文字列 "1E+300" を数値に変換する方法 TypeScriptで科学的表記を含む文字列を数値に変換する方法を説明します。例として、"1E+300" という文字列を…

React TypeScriptでのPlaywrightを使用したスクリーンショットの撮影方法

目次 React TypeScriptでのPlaywrightを使用したスクリーンショットの撮影方法 ステップ1: Playwrightのインストール ステップ2: テストファイルの作成 ステップ3: テストの実行 追加オプション React TypeScriptでのPlaywrightを使用したスクリーンショット…

React TypeScriptの型定義について プロパティの使用

目次 React TypeScriptの型定義について 基本的な型定義 プロパティの使用 React TypeScriptの型定義について TypeScriptを使用するReactアプリケーションにおいて、型定義はコードの安全性と可読性を高める重要な要素です。この記事では、基本的な型定義の…

ReactとMaterial-UI、TypeScriptを使用したメニューの表示方法

目次 ReactとMaterial-UI、TypeScriptを使用したメニューの表示方法 前提条件 メニューコンポーネントの実装 まとめ ReactとMaterial-UI、TypeScriptを使用したメニューの表示方法 TypeScriptを使用したReactアプリケーションでMaterial-UIを扱う場合、アク…

React TypeScriptで日本語(ひらがな、カタカナ、漢字)の入力チェックをする方法

目次 React TypeScriptで日本語(ひらがな、カタカナ、漢字)の入力チェックをする方法 正規表現による文字範囲の定義 入力チェック関数の作成 React コンポーネントでの使用 注意点 React TypeScriptで日本語(ひらがな、カタカナ、漢字)の入力チェックを…

TypeScriptの強化された型安全性:`StrictOmit`の利用

目次 TypeScriptの強化された型安全性:StrictOmitの利用 StrictOmitとは? 使い方の例 StrictOmitの利点 まとめ TypeScriptの強化された型安全性:StrictOmitの利用 TypeScriptはその型システムの柔軟性と強力な型チェック機能で知られていますが、ts-essen…

TypeScriptの強化された型安全性:`StrictOmit`の利用

目次 TypeScriptの強化された型安全性:StrictOmitの利用 StrictOmitとは? 使い方の例 StrictOmitの利点 まとめ TypeScriptの強化された型安全性:StrictOmitの利用 TypeScriptはその型システムの柔軟性と強力な型チェック機能で知られていますが、ts-essen…

TypeScriptでの `isolatedModules` エラーの解決方法

目次 TypeScriptでの isolatedModules エラーの解決方法 エラーの詳細 原因 具体的な問題の例 解決策 まとめ TypeScriptでの isolatedModules エラーの解決方法 TypeScriptで開発を進める際には、isolatedModules フラグに関連するエラーに遭遇する可能性が…

Knex.js と TypeScript でのトランザクションの正しい取り扱い

目次 Knex.js と TypeScript でのトランザクションの正しい取り扱い トランザクションの基本 明示的なコミットやロールバックの取り扱い まとめ Knex.js と TypeScript でのトランザクションの正しい取り扱い Knex.js は Node.js のための強力な SQL クエリ…

`isFinite`関数についての解説

目次 isFinite関数についての解説 基本的な使用方法 注意点 isFinite関数についての解説 JavaScript及びTypeScriptにおけるisFiniteは、与えられた値が有限の数値であるかどうかを判定するグローバル関数です。 この記事では、この関数の使用方法と注意点に…

TypeScript での安全な JSON パース

目次 TypeScript での安全な JSON パース 問題点 解決策 まとめ TypeScript での安全な JSON パース JSON 文字列のパースは Web 開発の中で一般的なタスクの1つですが、不正な JSON 文字列や空文字を遭遇すると、エラーが発生することがあります。 この記事…

Material-UIのIconButtonのアイコン色の変更方法

目次 Material-UIのIconButtonのアイコン色の変更方法 1. アイコンに直接colorプロパティを追加する 2. CSSを使用してアイコンの色をオーバーライドする 3. スタイリングライブラリを使用する styled-componentsの例 @emotion/styledの例 Material-UIのIconB…

React TypeScriptでのAES256暗号化・複合化の実装

目次 React TypeScriptでのAES256暗号化の実装 1. パッケージのインストール 2. 暗号化と復号化のヘルパー関数の作成 3. 暗号化と復号化の使用方法 4. セキュリティ上の注意 React TypeScriptでのAES256暗号化の実装 React TypeScriptプロジェクトでAES256の…

TypeScriptで`unknown`型のObjectのチェック

TypeScriptでunknown型の扱い方 TypeScriptでは、unknownという特別な型があります。 これはある値の型がコンパイル時には明確でないことを示すための型です。 この記事では、unknown型の値を安全に操作する方法について説明します。 基本的な問題 以下の関…

TypeScriptで`unknown`型の値を安全に文字列に変換する @typescript-eslint/restrict-template-expressions

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

Material-UIのアイコンボタンの色を変更する方法

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

Knex.jsの「returning」メソッドの利用方法

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

Knex.jsで複数の条件でソートする方法

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

Knex.js での SELECT クエリのソート方法

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

ts-patternを使用した複数条件の比較(または) P.union

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

ts-patternでのオブジェクトキー存在チェック

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

TypeScriptとは

TypeScriptとは TypeScriptはJavaScriptのスーパーセットとして開発されました。 これにより、TypeScriptはJavaScriptのすべての機能に加えて、静的型検査などの追加機能を提供しています。 TypeScriptのインストール TypeScriptをインストールするには、以…

vitestで現在日時を変更する方法 vi.setSystemTime

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

JavaScriptでMapクラスからオブジェクト型に変換する方法

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

JavaScriptでオブジェクトの中身を全て空にする方法

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

ts-patternライブラリのmatchでnullかundefinedのチェックをする方法 TypeScript

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

オブジェクト型のkeyに任意の文字が含まれる物のみを取得する方法 TypeScript

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