目次 JavaScriptで現在のURLを取得する方法 window.locationオブジェクトとは 完全なURLの取得 URLの各部分へのアクセス まとめ JavaScriptで現在のURLを取得する方法 Webページ上で現在のURLを取得する必要があるとき、JavaScriptはこのタスクを簡単にこな…

目次 JavaScriptで文字列の前方一致を検査する方法 startsWithメソッドの使用 正規表現の利用 sliceやsubstringメソッドを利用 JavaScriptで文字列の前方一致を検査する方法 文字列の前方一致を検査する際、JavaScriptには複数のアプローチが存在します。 こ…

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

目次 JavaScriptのMapオブジェクトをJSONに変換する方法 前提 MapをJSONに変換する方法 まとめ JavaScriptのMapオブジェクトをJSONに変換する方法 JavaScriptのMapオブジェクトは非常に便利で、キーと値のペアを保持するための特別なコレクションです。 しか…

目次 JSONを整形して出力する方法 基本の方法 タブを使用した整形 まとめ JSONを整形して出力する方法 JSONのデータはデフォルトで一つの長い行として出力されることが多いです。 しかし、開発中やデバッグ時に、これを整形された形で読む必要がしばしばあり…

目次 JavaScriptのMapオブジェクトをループで処理する方法 forEach()を使用する for...ofを使い、entries()を使用する for...ofを使い、keys()を使用する for...ofを使い、values()を使用する Object Destructuringを使用する まとめ JavaScriptのMapオブジ…

目次 JavaScript Mapオブジェクトのキー存在チェック hasメソッドの基本的な使用方法 注意点 まとめ JavaScript Mapオブジェクトのキー存在チェック JavaScriptのMapオブジェクトは、キーと値のペアを保存するためのコレクションです。 時々、特定のキーがMa…

目次 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 のよ…

目次 オブジェクトから任意のキーを除外して新しいオブジェクトを生成する方法 方法 例 まとめ オブジェクトから任意のキーを除外して新しいオブジェクトを生成する方法 JavaScriptでオブジェクトを操作するとき、特定のキーを持つエントリを除外して新しい…

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

JavaScriptで正規表現を使って文字を一括置換する方法 JavaScriptはテキスト操作に非常に柔軟な言語であり、正規表現を使用して文字列内のテキストを簡単に検索、置換することができます。 この記事では、JavaScriptのString.prototype.replace()メソッドを…

目次 Testing-libraryで変数を正規表現として使用する方法 Testing-libraryで変数を正規表現として使用する方法 @testing-library/react は、Reactのコンポーネントをテストするための人気のあるライブラリです。 特に、DOMの要素をテキストベースで照合する…

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

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

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

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

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

目次 マークアップ言語とは？ 主なマークアップ言語の例 なぜマークアップ言語を使用するのか？ マークアップ言語とは？ マークアップ言語とは、テキストを加工して表示するための言語の一つです。 この言語はテキストの意味や構造を示すタグや注釈を付加し…

目次 CSSのflex-shrinkを理解しよう flex-shrinkとは何ですか？ flex-shrinkの使い方 flex-shrinkの注意点 まとめ CSSのflex-shrinkを理解しよう flex-shrinkは、Flexboxレイアウトで使用されるCSSプロパティです。 Flexboxは、コンテナ内のアイテムのレイア…

目次 setMonthを行なっても月が変更されない問題 対処法1 対処法2 setMonthを行なっても月が変更されない問題 次のように、dateの日付を書き換えたのですが、「2023年7月」と変更されない現象が起きました。 let date = new Date(); date.setFullYear(2023);…

目次 目的 実装 目的 指定されたキーの配列を参照し、そのキーが既存のオブジェクトに存在しない場合、新たに追加したいと考えています。 例えば、以下のようなオブジェクトが既存で存在しています。 { aaa: '1' } そして、以下のようなキーの配列を参照しま…

目次 スプレッド構文とは 配列のスプレッド構文 オブジェクトのスプレッド構文 スプレッド構文とは スプレッド構文は、配列やオブジェクトを展開して個々の要素やプロパティに分解するための便利な構文です。 配列のスプレッド構文 以下のようにスプレッド構…

目次 実装 実装 以下のようにテストコードを実装すると 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」が含まれている…