スポンサーリンク
JavaScript

JavaScript | 基礎構文:文字列操作 – 置換(replace)

初心者向け:置換(replace)の基本replace は「文字列の一部を別の文字列に置き換える」ためのメソッドです。基本は「元の文字列.replace(置換したいもの, 置換後の文字)」という形で使...
JavaScript

JavaScript | 基礎構文:文字列操作 – 検索(indexOf / includes)

初心者向け:検索(indexOf / includes)の基本文字列や配列の中から「ある値が含まれているか」「位置はどこか」を調べる代表的なメソッドが indexOf と includes です。迷っ...
JavaScript

JavaScript | 基礎構文:文字列操作 – 部分取得(slice / substring)

初心者向け:部分取得(slice / substring)の基本文字列から「一部だけ取り出す」ための代表的なメソッドが slice と substring です。どちらも「開始位置と終了位置」を指定し...
JavaScript

JavaScript | 基礎構文:文字列操作 – length

初心者向け:length の基本length は「長さ(要素数や文字数)」を表すプロパティです。配列や文字列でよく使います。読み取り専用で、基本的に数値を返します。文字列の length(文字数)co...
JavaScript

JavaScript | 基礎構文:文字列操作 – エスケープシーケンス

初心者向け:エスケープシーケンスの基本エスケープシーケンスは、文字列の中で「そのまま書けない特殊な文字」を表すための記号です。バックスラッシュ(\)から始まる短いコードで、改行・タブ・引用符などを安全...
JavaScript

JavaScript | 基礎構文:文字列操作 – テンプレートリテラル

JavaScript入門:テンプレートリテラルとはテンプレートリテラルは 文字列をもっと便利に書ける方法 です。バッククォート( ` )で囲んで書きます。普通の文字列よりも「変数の埋め込み」や「複数行...
JavaScript

JavaScript 逆引き集 | ResizeObserver の利用(DOM サイズ監視)

ResizeObserver の利用(DOM サイズ監視) — new ResizeObserver(cb).observe(el)Web ページで「要素のサイズが変わったら処理をしたい」ときに便利な...
JavaScript

JavaScript 逆引き集 | IntersectionObserver の基本

IntersectionObserver の基本 — 要素が見えた時のコールバック利用Web ページで「ある要素が画面に入ったかどうか」を調べたいときに便利なのが IntersectionObserv...
JavaScript

JavaScript 逆引き集 | 無限スクロール(IntersectionObserver)

無限スクロール(IntersectionObserver) — const obs = new IntersectionObserver(cb); obs.observe(el)Web ページで「下ま...
JavaScript

JavaScript 逆引き集 | ページネーションの実装(オフセット)

ページネーションの実装(オフセット方式) — limit, offset パラメータ利用大量のデータを一度に表示すると重くなるので、ページネーション(ページ分割表示)を使います。初心者は「limit ...
JavaScript

JavaScript 逆引き集 | OAuth フローの基本(認可コード)

OAuth フローの基本(認可コード方式) — サーバー・クライアントの連携が必要OAuth は「外部サービスの認証・認可」を安全に行う仕組みです。初心者は「OAuth = 他サービスのアカウントを使...
JavaScript

JavaScript 逆引き集 | JWT の検証(Node)

JWT の検証(Node.js) — jwt.verify(token, secret)(jsonwebtoken ライブラリ)Web アプリや API では「ログイン済みかどうか」を確認するために ...
JavaScript

JavaScript 逆引き集 | Bearer トークン利用

Bearer トークン利用 — headers: { 'Authorization': 'Bearer ' + token }Web API にアクセスするときに「Bearer トークン認証」を使う場...
JavaScript

JavaScript 逆引き集 | Basic 認証ヘッダ

Basic 認証ヘッダ — Authorization: 'Basic ' + btoa(user + ':' + pass)Web API にアクセスするときに「Basic 認証」を使う場合がありま...
JavaScript

JavaScript 逆引き集 | CORS の基礎知識(ブラウザ側)

ポイントまとめCORS(Cross-Origin Resource Sharing)は「異なるオリジン(ドメイン・ポート・プロトコル)の間で安全にリソースを共有する仕組み」です。ブラウザの fetch...
JavaScript

JavaScript 逆引き集 | CSRF トークンの送信(ヘッダ)

CSRF トークンの送信(ヘッダ) — fetch(url, { headers: { 'X-CSRF-Token': token } })Web アプリでは CSRF(Cross-Site Requ...
JavaScript

JavaScript 逆引き集 | 型のランタイムチェック(zod 等)

型のランタイムチェック(Zod ライブラリ) — z.string().parse(x)JavaScript は柔軟ですが「型の間違い」によるバグが起きやすいです。TypeScript を使えばコンパ...
JavaScript

JavaScript 逆引き集 | バリデーション(簡易)

バリデーション(簡易) — if (!data.name) throw new Error('name required')プログラムでは「入力データが正しいかどうか」を確認する処理が必要です。これを...
JavaScript

JavaScript 逆引き集 | JSON Schema でバリデーション(AJV 等)

JSON Schema でバリデーション(AJV ライブラリ)Web アプリや API では「受け取ったデータが正しい形かどうか」をチェックする必要があります。そこで便利なのが JSON Schema...
JavaScript

JavaScript 逆引き集 | multipart/form-data の扱い(FormData)

multipart/form-data の扱い(FormData)Web アプリで「ファイルやフォームデータをサーバーに送る」ときによく使われるのが multipart/form-data です。これ...
JavaScript

JavaScript 逆引き集 | ファイルアップロード(fetch, FormData)

ファイルアップロード(fetch + FormData) — const fd = new FormData(); fd.append('file', file); fetch(url, { meth...
JavaScript

JavaScript 逆引き集 | 並列 HTTP リクエスト制御(同時 N 件)

並列 HTTP リクエスト制御(同時 N 件) — pMap(arr, fn, { concurrency: 5 })(p-map ライブラリ)Web API を複数呼び出すとき、一度に大量のリクエス...
JavaScript

JavaScript 逆引き集 | オブジェクトの配列をグルーピング

オブジェクトの配列をグルーピング — arr.reduce((g,x)=>{(g||=(g=[])).push(x);return g},{})配列の要素を「カテゴリごとにまとめたい」場面はよくありま...
JavaScript

JavaScript 逆引き集 | 配列をオブジェクトのマップに変換

配列をオブジェクトのマップに変換 — arr.reduce((m, x) => { m = x; return m; }, {})JavaScript で「配列をオブジェクトに変換」したい場面はよくあ...
JavaScript

JavaScript 逆引き集 | コメントアウトのスタイル

コメントアウトのスタイル — // / /* ... */JavaScript では コメントアウトを使って「コードの説明」や「一時的な無効化」を行います。初心者は「// は1行コメント、/* ......
JavaScript

JavaScript 逆引き集 | JSDoc でドキュメント注釈

JSDoc でドキュメント注釈 — /** @param {number} x */ function f(x){}JavaScript では JSDoc という「コメントで書くドキュメント注釈」を使...
JavaScript

JavaScript 逆引き集 | 型チェックに TypeScript を導入(基本)

型チェックに TypeScript を導入(基本) — tsc --init(設定手順)JavaScript は柔軟ですが「型の間違い」によるバグが起きやすいです。そこで TypeScript を導入...
JavaScript

JavaScript 逆引き集 | ESLint / Prettier の導入(品質)

ESLint / Prettier の導入(コード品質向上) — eslint --init(設定手順)JavaScript の開発では コード品質チェック(Lint) と コード整形(Format)...
JavaScript

JavaScript 逆引き集 | モジュールトップでの strict(ESM はデフォルト)

モジュールトップでの Strict Mode(ESM はデフォルト)JavaScript には Strict Mode(厳格モード) という「安全にコードを書くためのチェック機能」があります。通常は ...
JavaScript

JavaScript 逆引き集 | Strict mode の有効化

Strict mode の有効化 — 'use strict';JavaScript の Strict mode(厳格モード) は「コードの書き方をより厳しくチェックする」ための仕組みです。初心者は「...
スポンサーリンク