JavaScript
目次 クラス内のGetterについて ゲッターの定義方法 ゲッターの使用方法 ゲッターの利点 まとめ クラス内のGetterについて JavaScriptのクラス内において、getterはプロパティ値を取得するためのメソッドです。 これによって、プロパティにアクセスする際に…
TypeScriptでunknown型の値を安全に文字列に変換する TypeScriptのunknown型は非常に有用ですが、それを直接テンプレートリテラルで使用すると、一部のESLintルールやTypeScriptの厳格な型チェックによってエラーが発生する場合があります。 問題点 直接テン…
JavaScriptで日付を特定の日時に設定する方法 JavaScriptの Date オブジェクトは、日付と時間の操作に非常に便利なメソッドを提供しています。 特定の日付や時間にオブジェクトを設定する必要がある場合、いくつかの簡単なステップでこれを達成できます。 現…
目次 PostgreSQLとKnexでのbatchInsertエラーの解決 エラー "08P01" とは？ 解決策 まとめ PostgreSQLとKnexでのbatchInsertエラーの解決 大量のデータをPostgreSQLのテーブルに一度にインサートする際に、Knex.jsを使用すると非常に簡単になります。 しかし…
目次 Material-UIのアイコンボタンの色を変更する方法 インラインスタイルを使用する CSSでスタイルを適用 Material-UIのmakeStylesまたはuseStylesを使用する Material-UIのアイコンボタンの色を変更する方法 Material-UIのアイコンボタンの色を変更するの…
目次 JavaScriptでブラウザリロードとURL直接アクセスの判定方法 PerformanceNavigationTimingの利用 注意点 まとめ JavaScriptでブラウザリロードとURL直接アクセスの判定方法 近年のWeb開発において、ブラウザのリロードかURLの直接アクセスかを判定する場…
目次 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…
目次 Material-UI の ListItemText に HTML を安全に挿入する方法 手順 注意点 Material-UI の ListItemText に HTML を安全に挿入する方法 Material-UI は、React で美しくて機能的な UI を素早く構築するためのライブラリです。 しかし、ListItemText のよ…
目次 オブジェクトから任意のキーを除外して新しいオブジェクトを生成する方法 方法 例 まとめ オブジェクトから任意のキーを除外して新しいオブジェクトを生成する方法 JavaScriptでオブジェクトを操作するとき、特定のキーを持つエントリを除外して新しい…
JavaScriptで正規表現を使って文字を一括置換する方法 JavaScriptはテキスト操作に非常に柔軟な言語であり、正規表現を使用して文字列内のテキストを簡単に検索、置換することができます。 この記事では、JavaScriptのString.prototype.replace()メソッドを…
目次 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: …
目次 機能説明 実装方法 機能説明 以下のようなオブジェクトから const hoge = { sample_0_value: 'サンプルだよ', sample_1_value: 'サンプルだよ1', test_0_value: 'テストだよ' }; 以下のようなオブジェクトを取得したい ※keyに「sample」が含まれている…
目次 エラーの発生箇所 エラーの意味 対処方法 エラーの発生箇所 以下のソースが実行された際に、ChromeのDeveloperToolsにエラーが表示されます。 window.location.href = "app://aaa" エラーの意味 Failed to launch 'app://aaa' because the scheme does …
目次 Object.freeze()とは Object.freeze()の使い方 Object.freeze()とは 簡単に言うと該当のオブジェクトの書き換えや追加などが出来なくなるようにする方法です。 定数でオブジェクト型を作成する場合に使用します。 Object.freeze()の使い方 以下のように…
目次 UserAgentの取得方法 UserAgentの取得方法 以下を実行することで、UserAgentを取得する事ができます。 window.navigator.userAgent 以下の様にコンソール出力させると console.log(window.navigator.userAgent); 以下のようなUserAgentがコンソールに出…
目次 数字の配列をソートする方法 文字列の配列をソートする方法 数字でも文字列でもソートする方法 数字の配列をソートする方法 以下のサンプルのように、sort関数を使用してソートを行うことができます。 const numArrayData = [1, 3, 2] numArrayData.sor…
目次 分岐処理とは 条件分岐 条件に当てはまらない場合 複数の条件分岐 分岐処理とは 信号が青の場合は、進む。 信号が赤の場合は、止まる。 といったように、「〜の場合は、〜する」という分岐する処理のことを、分岐処理と言います。 条件分岐 以下のよう…
目次 分岐処理とは 条件分岐 条件に当てはまらない場合 複数の条件分岐 分岐処理とは 信号が青の場合は、進む。 信号が赤の場合は、止まる。 といったように、「〜の場合は、〜する」という分岐する処理のことを、分岐処理と言います。 条件分岐 以下のよう…
目次 はじめに 例外発生時にも実行される処理 はじめに 例外処理を記載したが、エラーが発生しても実行したい処理があります。 その場合の対応として、finally文を使用して処理を記載する事ができます。 例外発生時にも実行される処理 「finally」を記載する…