TypeScript
TypeScriptでunknown型の扱い方 TypeScriptでは、unknownという特別な型があります。 これはある値の型がコンパイル時には明確でないことを示すための型です。 この記事では、unknown型の値を安全に操作する方法について説明します。 基本的な問題 以下の関…
TypeScriptでunknown型の値を安全に文字列に変換する TypeScriptのunknown型は非常に有用ですが、それを直接テンプレートリテラルで使用すると、一部のESLintルールやTypeScriptの厳格な型チェックによってエラーが発生する場合があります。 問題点 直接テン…
目次 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には標準でパターンマッチングの機能が組み込まれていません…
目次 ts-patternでのオブジェクトキー存在チェック インストール キー存在チェックの基本 まとめ ts-patternでのオブジェクトキー存在チェック ts-patternはTypeScriptでのパターンマッチングを強化する非常に便利なライブラリです。 この記事では、ts-patte…
TypeScriptとは TypeScriptはJavaScriptのスーパーセットとして開発されました。 これにより、TypeScriptはJavaScriptのすべての機能に加えて、静的型検査などの追加機能を提供しています。 TypeScriptのインストール TypeScriptをインストールするには、以…
目次 実装 実装 以下のようにテストコードを実装すると 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」が含まれている…
目次 警告が発生する場所 警告の意味 解消方法 警告が発生する場所 以下の処理などで警告が発生する場合があります。 ※「obj[key]」の部分で警告になります。 const value = obj[key]; 警告の意味 Variable Assigned to Object Injection Sinkeslintsecurity…
目次 KnexのUpdateの方法 オブジェクト型を使用して一括でUpdateする方法 KnexのUpdateの方法 以下のようにUpdateを行うことができます。 export const setData = async ( knex: Knex, id: number, name: string, ) => { await knex("table") .update({name:…
目次 Object.freeze()とは Object.freeze()の使い方 Object.freeze()とは 簡単に言うと該当のオブジェクトの書き換えや追加などが出来なくなるようにする方法です。 定数でオブジェクト型を作成する場合に使用します。 Object.freeze()の使い方 以下のように…
目次 CSS Modulesを使用したCSSの設定方法 サンプル CSS Modulesを使用したCSSの設定方法 CSS Modulesを使用する際には、特別なライブラリをインストールするなどは必要ありません。 「index.tsx」と同じ階層に「index.module.css」のファイルを作成してくだ…
目次 事前準備 ライブラリインストール ソースコード 事前準備 スライダーに表示したい任意の画像を３種類用意して、「img.png」「img1.png」「img2.png」として、ソースコードと同じディレクトリに格納する。 ライブラリインストール 以下のコマンドを実行…
目次 はじめに TextFieldのdatetime-localタイプに初期値を設定する方法 日付のフォーマットを変換 はじめに 本記事は、Material UIのライブラリの「TextField」に関する記事です。 mui.com TextFieldのdatetime-localタイプに初期値を設定する方法 以下のよ…
目次 はじめに datetime-localタイプで秒を表示する方法 はじめに 本記事は、Material UIのライブラリの「TextField」に関する記事です。 mui.com datetime-localタイプで秒を表示する方法 以下のように、「inputProps」に「{ "step": 1 }」を設定する事で、…
目次 App.tsx Error404Page 遷移方法 App.tsx SPAとして、App.tsxを作成します。 以下のサンプルは、「/hoge」のページのみを用意していますが、こちらは任意でカスタマイズしてください。 Error404Pageは後述しますので、そちらのパスに修正してください。 …
目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/Link ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 リンク表…
目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/TextField ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 テキ…
目次 ディレクトリ構造 index.tsx index.module.css コンポーネントの呼び出し方 ディレクトリ構造 コンポーネント部分のディレクトリ構造は以下とします。 ~/Button ┣ index.tsx ┗ index.module.css index.tsx 「index.tsx」には以下を記載します。 ボタン…
目次 事前準備 Propsで文字列を渡す方法 初期値を設定する方法 事前準備 以下のようなボタンコンポーネントを準備します。 const Button = () => { return ( <button onClick={() => {console.log('ボタン押下')}}> ボタン </button> ); }; export default Button; このコンポーネントは以下…
目次 事前準備 Propsで文字列を渡す方法 初期値を設定する方法 事前準備 以下のようなボタンコンポーネントを準備します。 const Button = () => { return ( <button> ボタン表示タイトル </button> ); }; export default Button; このコンポーネントは以下の様に呼び出します…
目次 完成したテーブル テーブルのコンポーネント作成 テーブルコンポーネントを使用 ソートの方法 フィルターの方法 完成したテーブル 本記事のコンポーネントでは、以下の画像のテーブルが作成できます。 テーブルのコンポーネント作成 以下、「CustomTabl…
目次 React v17以前 React v18以降 React v17以前 React v17以前では、以下のサンプルのように「VFC」を使用してPropsを渡していました。 また、初期値などのdefaultPropsで設定していました。 import React, { VFC } from "react"; import styles from "./i…
目次 はじめに 環境毎のWebPackを修正する 環境毎のCSSを作成する 定義したCSS定数を読み込む CSS定数を使用する方法 はじめに 以下の記事を参考に、環境定数を用意してください。 https://reigle.info/entry/2022/08/20/100000reigle.info 環境毎のWebPack…