Javascript
JavaScriptのreplaceAllで、特定の場合は置換されないようにする方法 JavaScriptのreplaceAllで、特定の場合は置換されないようにする方法 replaceAllを使って特定の条件で置換を避ける方法は、正規表現とカスタム関数を組み合わせることで実現できます。 特…
Reactで未入力チェックのバリデーションを実装 説明 Reactで未入力チェックのバリデーションを実装 Reactで未入力チェックのバリデーションを実装する方法について、以下に例を示します。 エラーメッセージは日本語にしています。 import React, { useState …
Reactで無限スクロールを実装する方法 説明 Reactで無限スクロールを実装する方法 Reactで無限スクロールを実装する方法はいくつかありますが、一般的なアプローチは、スクロールイベントを監視して新しいデータをロードする方法です。 以下に、Reactで無限…
ThymeleafでJavaScriptの変数に値を埋め込む方法 1. 直接埋め込み 2. データ属性を使った埋め込み まとめ ThymeleafでJavaScriptの変数に値を埋め込む方法 Thymeleafを使ってJavaScriptの変数にサーバーサイドの値を埋め込む方法を説明します。 使用場面は結…
location.assignとlocation.replaceの違い location.assign location.replace 主な違いのまとめ location.assignとlocation.replaceの違い location.assignとlocation.replaceは、どちらもJavaScriptで現在のページから別のページにリダイレクトするためのメ…
XMLHttpRequestとは 基本的な使い方 主なメソッドとプロパティ Fetch APIの例 XMLHttpRequestとは XMLHttpRequest（略してXHR）は、JavaScriptを使用してウェブブラウザとウェブサーバーの間でデータを非同期的にやり取りするためのAPIです。 これにより、ペ…
WebSocketとは 特徴 使用例 WebSocketサーバーとクライアント側の処理の実装例 Java側(サーバー側)の実装例 依存関係の追加 WebSocketハンドラの実装 WebSocketコンフィギュレーション Spring Bootアプリケーションのエントリーポイント クライアント側の実…
オブジェクトにtoJSONメソッドを持つ場合の挙動 オブジェクトにtoJSONメソッドを持つ場合の挙動 JavaScriptの JSON.stringify() メソッドは、オブジェクトをJSON形式の文字列に変換する際に、そのオブジェクトが toJSON メソッドを持っている場合に特別な挙…
Union型の引数を用いて変数の型を絞り込み タグ付きUnion型で絞り込みをする例 Union型の引数を用いて変数の型を絞り込み TypeScriptにおいて、Union型の引数を用いて変数の型を絞り込む例を示します。例えば、次のようなUnion型の引数を持つ関数を考えてみ…
TypeScriptでconstで宣言したオブジェクトのプロパティの書き換え オブジェクトを読み取り専用にするためにはas constを使うと便利 TypeScriptでconstで宣言したオブジェクトのプロパティの書き換え TypeScriptでは、constで宣言したオブジェクト自体は再代…
TypeScriptでは型にリテラルを設定できる どのような場面でリテラル型を使用するのか TypeScriptでは型にリテラルを設定できる TypeScriptでは、変数や関数の型にリテラル型を設定することができます。 リテラル型は、特定の値のセットを表現する型であり、…
TypeScriptで数値と文字列の要素で構成された配列をUnion型で表現 数値と文字列の以外の要素もUnion型で表現できるのか TypeScriptで数値と文字列の要素で構成された配列をUnion型で表現 TypeScriptでは、数値と文字列の要素で構成された配列をUnion型で表現…
TypeScriptでプライベートプロパティを設定 プライベートプロパティの設定例 説明 まとめ TypeScriptでプライベートプロパティを設定 TypeScriptではprivate修飾子を使用してプライベートプロパティを宣言できますが、 TypeScript 3.8以降では、クラスフィー…
TypeScriptのsymbol型 基本的な使い方 Symbolのプロパティとしての使用 Well-known Symbols 例: Symbol.iterator Symbolの利点 注意点 symbolを使用する具体的な場面 1. ユニークなプロパティキーの作成 2. クラスのプライベートプロパティ 3. Well-known Sy…
JavaScriptのPromise関数の役割 Promiseの基本的な役割 Promiseの基本的な使い方 Promiseの作成 Promiseの使用 Promiseのチェーン async/awaitとの違い Promiseとasync/awaitの違い Promiseの使用例 async/awaitの使用例 主な違い JavaScriptのPromise関数の…
TypeScriptにおける構造的部分型関係とは TypeScriptにおける構造的部分型関係とは TypeScriptにおける構造的部分型関係（structural subtyping）は、オブジェクトの型がその構造によって決まるという概念です。 TypeScriptでは、ある型が別の型の部分型（サ…
Next.jsで使用するNextPage型とは NextPage型を使用するメリット まとめ Next.jsで使用するNextPage型とは Next.jsでは、ページはReactコンポーネントとして定義され、TypeScriptとあわせて使用する場合は通常NextPage型を使用します。 これにより、Next.js…
export constとexport defaultの違い export const export default 組み合わせて使用することも可能 まとめ export constとexport defaultの違い export const と export default は、JavaScript（特にES6以降のバージョン）でモジュールをエクスポートする…
Javascriptのimportとrequire import require 主な違い 例 Javascriptのimportとrequire JavaScriptのimportとrequireは、モジュールを読み込むための方法ですが、それぞれ異なる目的と使い方があります。 import - 使用方法: ES6（ECMAScript 2015）以降の…
WordPressでスライドショーの機能を実装する方法 MetaSliderの使用方法 カスタムコーディングでの実装方法 WordPressでスライドショーの機能を実装する方法 WordPressでスライドショーの機能を実装する方法はいくつかあります。1. プラグインの利用 WordPres…
webpackの処理の流れ 上記を踏まえた実装例 SCSSを使用する場合 Typescriptを使用する場合 webpackの処理の流れ Webpackは、JavaScriptアプリケーションのためのモジュールバンドラーであり、アプリケーションに必要なすべてのモジュールを取り込み、それら…
E2Eテストにおけるロケーター PlaywrightでE2Eテストを行う場合のlocatorの書き方 なぜawaitが必要になるのか E2Eテストにおけるロケーター E2Eテスト（End-to-Endテスト）におけるロケーターとは、ウェブページやアプリケーションの要素（ボタン、テキスト…
axiosとは？ axiosを使用した処理例 axios以外のJavascriptのHTTPクライアント axiosとは？ axiosは、JavaScriptで使用される人気のあるHTTPクライアントライブラリです。 主にWebアプリケーションやNode.jsアプリケーションでサーバーとのHTTPリクエストを…
AMPページの特徴 AMPの流行性 AMPの実装例 AMPページの特徴 AMP（Accelerated Mobile Pages）は、ウェブページを高速に読み込み、モバイルデバイスでのユーザーエクスペリエンスを向上させるために設計されたオープンソースのイニシアチブです。 以下は、AMP…
ES6（ECMAScript 2015）以降ではvarの使用を避けることが推奨 ブロックスコープと関数スコープの違い ES6（ECMAScript 2015）以降ではvarの使用を避けることが推奨 JavaScriptにおいては、ES6（ECMAScript 2015）以降では、varの使用を避けることが推奨され…
TypeScriptのドキュメント生成機能、TypeDocについて TypeDocの生成方法 TypeDocで生成されたドキュメントの例 TypeScriptのドキュメント生成機能、TypeDocについて TypeScriptには、コードからドキュメントを自動生成する機能があります。 この機能は、Type…
TypescriptはJavaScriptの欠点を補う Typescriptは、JavaScriptの拡張言語であり、コンパイル時に静的型チェックを行うことができるため、JavaScriptの欠点であった型に関するエラーを減らすことができます。 このような特徴から、Typescriptは近年、Web開発…
Seleniumでのjavascriptのイベント実行 SeleniumではJavaScriptのイベントを実行することができます。 例えば、以下のようなJavaScriptコードがあるとします。 document.getElementById("myButton").click(); これは、idが「myButton」の要素をクリックするJ…
ESlintとPrettierの違いは？ ESLint Prettier 併用が推奨 ESLintの実行方法 1. 環境の準備 2. プロジェクトにESLintをインストール 3. ESLintの初期設定 4. ESLintの実行 5. 問題の修正 6. エディタ統合 ESLintを実行した前後の例 ESLint実行前のコード ESLi…
