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(厳格モード) は「コードの書き方をより厳しくチェックする」ための仕組みです。初心者は「...
JavaScript

JavaScript 逆引き集 | 開発時のデバッグ(debugger)

開発時のデバッグ(debugger ステートメント) — debuggerJavaScript には debugger ステートメントという特別な命令があります。初心者は「ここでプログラムを一時停止し...
JavaScript

JavaScript 逆引き集 | console.table で配列表現

console.table で配列表現 — console.table(data)JavaScript の console.table は「配列やオブジェクトを表形式で見やすく表示する」ための便利な関...
JavaScript

JavaScript 逆引き集 | 性能計測(console.time)

性能計測(console.time / console.timeEnd) — console.time('t'); console.timeEnd('t')JavaScript には 処理時間を計測す...
JavaScript

JavaScript 逆引き集 | Proxy でオブジェクト挙動をカスタム

Proxy でオブジェクト挙動をカスタム — new Proxy(obj, { get(target, k) { } })JavaScript の Proxy は「オブジェクトの操作を横取りしてカスタ...
JavaScript

JavaScript 逆引き集 | Reflect API(動的操作)

Reflect API(動的操作) — Reflect.get(obj, 'k') / Reflect.set(...)JavaScript の Reflect API は「オブジェクトを動的に操作す...
JavaScript

JavaScript 逆引き集 | Symbol を key とするオブジェクトプロパティ

Symbol を key とするオブジェクトプロパティ — obj = 1JavaScript の Symbol は「ユニークな識別子」を作るための型です。オブジェクトのプロパティキーに Symbol...
JavaScript

JavaScript 逆引き集 | Symbol を key とするオブジェクトプロパティ

Symbol を key とするオブジェクトプロパティ — obj = 1JavaScript の Symbol は「ユニークな識別子」を作るための型です。オブジェクトのプロパティキーに Symbol...
JavaScript

JavaScript 逆引き集 | Symbol の基本

Symbol の基本 — const s = Symbol('desc')JavaScript の Symbol は「一意(ユニーク)な値」を作るための型です。初心者は「他と絶対にかぶらない特別なラベ...
JavaScript

JavaScript 逆引き集 | 文字列テンプレートで複数行

文字列テンプレートで複数行 — line1\nline2複数行の文字列は「改行コードを埋め込む方法」と「テンプレートリテラルでそのまま改行を書く方法」の2通りあります。初心者は、まず「\n は改行コー...
JavaScript

JavaScript 逆引き集 | 短絡評価(&&/||)を利用した条件実行

短絡評価(&& / ||)を利用した条件実行 — cond && fn()JavaScript の 論理演算子 && と || は「真偽値の判定」だけでなく、短絡評価(ショートサーキット)を利用して「...
JavaScript

JavaScript 逆引き集 | 論理演算子で既定値(|| の注意)

論理演算子で既定値(|| の注意) — const v = a || 'def'('' や 0 も代替される)JavaScript では 論理演算子 || を使って「左側が falsy(falseっぽ...
JavaScript

JavaScript 逆引き集 | Nullish coalescing(??)

Nullish coalescing(??) — const v = a ?? 'default'JavaScript の Nullish coalescing 演算子 ?? は「値が null また...
JavaScript

JavaScript 逆引き集 | Optional chaining の利用(安全なネスト参照)

Optional chaining の利用(安全なネスト参照) — a?.b()JavaScript の オプショナルチェイニング演算子 ?. は「存在しないかもしれないプロパティや関数を安全に参照す...
JavaScript

JavaScript 逆引き集 | 配列の入れ子の安全アクセス(?.)

配列の入れ子の安全アクセス(オプショナルチェイニング ?.) — obj?.a?.bJavaScript の オプショナルチェイニング演算子 ?. は「存在しないかもしれないプロパティに安全にアクセス...
JavaScript

JavaScript 逆引き集 | 引数のデフォルト値に関数

引数のデフォルト値に関数 — function f(x = Date.now()) {}JavaScript では 引数のデフォルト値に「関数の呼び出し結果」を指定できます。初心者は「引数が渡されなか...
JavaScript

JavaScript 逆引き集 | 可変長引数の扱い

可変長引数の扱い — (...args) => argsJavaScript では 可変長引数(いくつでも引数を受け取れる仕組み)を rest 引数 ...args で書けます。初心者は「渡された引数...
JavaScript

JavaScript 逆引き集 | rest 引数と spread 構文

rest 引数と spread 構文 — function f(...args) {} / f(...arr)JavaScript には rest 引数 と spread 構文 という似た書き方があり...
JavaScript

JavaScript 逆引き集 | オブジェクトのデフォルト引数

オブジェクトのデフォルト引数 — function f(a = 1, b = {}) {}関数の引数に「値が渡されなかったときの既定値(デフォルト)」を設定できます。初心者は「未指定や undefin...
JavaScript

JavaScript 逆引き集 | parseInt/parseFloat の使い方

parseInt / parseFloat の使い方 — parseInt('12', 10)(基数指定)JavaScript では文字列を数値に変換する方法として parseInt と parseF...
JavaScript

JavaScript 逆引き集 | 型変換(Number/String/Boolean)

型変換(Number / String / Boolean) — Number('1'), String(1), Boolean(0)JavaScript では値の型を 明示的に変換 するために Nu...
JavaScript

JavaScript 逆引き集 | isNaN と Number.isNaN の違い

isNaN と Number.isNaN の違い — Number.isNaN(x) 推奨JavaScript で「値が NaN (Not a Number) かどうか」を判定する方法は2つあります。...
JavaScript

JavaScript 逆引き集 | typeof 判定(原始型)

typeof 判定(原始型) — typeof x === 'string'JavaScript の typeof 演算子は「変数や値の型」を文字列で返します。初心者は「この値は文字?数?それとも別の...
JavaScript

JavaScript 逆引き集 | instanceof 判定

instanceof 判定 — obj instanceof ClassJavaScript の instanceof 演算子は「あるオブジェクトが特定のクラス(コンストラクタ関数)から生成されたかど...
JavaScript

JavaScript 逆引き集 | static メソッド

static メソッド — static build(){}JavaScript の static メソッドは「インスタンスを作らなくてもクラスから直接呼び出せる関数」です。初心者は「クラスの便利関数...
JavaScript

JavaScript 逆引き集 | getter/setter(アクセサ)

getter / setter(アクセサ) — get v() {} / set v(x) {}JavaScript の getter / setter は「プロパティにアクセスしたときの動作」を自由...
JavaScript

JavaScript 逆引き集 | super の使用

super の使用 — super() / super.method()JavaScript の super は「親クラス(基底クラス)」を呼び出すためのキーワードです。extends で継承したクラ...
JavaScript

JavaScript 逆引き集 | extends 継承

extends 継承 — class B extends A {}JavaScript の extends は「クラスの継承」を表します。親クラス(基底クラス)の機能を子クラス(派生クラス)が引き継ぎ...
JavaScript

JavaScript 逆引き集 | class 構文

class 構文 — class A { constructor(x){ this.x = x } method(){} }JavaScript の class 構文は、オブジェクト指向プログラミング...
JavaScript

JavaScript 逆引き集 | プロトタイプ継承(古典)

プロトタイプ継承(古典) — Child.prototype = Object.create(Parent.prototype)JavaScript には「プロトタイプ継承」という仕組みがあります。こ...
JavaScript

JavaScript 逆引き集 | モジュールパターン(名前空間)

モジュールパターン(名前空間) — const My = (()=>{ return { fn(){} } })()JavaScript では昔から「モジュールパターン」という書き方がありました。これ...
JavaScript

JavaScript 逆引き集 | 即時実行関数(IIFE)

即時実行関数(IIFE) — (function(){})(); / (() => {})()JavaScript では 即時実行関数 (IIFE: Immediately Invoked Funct...
JavaScript

JavaScript 逆引き集 | スコープと var/let/const の違い

スコープと var / let / const の違い — var は関数スコープ、let / const はブロックスコープJavaScript で変数を宣言するときに使うキーワードは var / ...
JavaScript

JavaScript 逆引き集 | call/apply/bind

call / apply / bind の基本 — fn.call(ctx, arg1) / fn.apply(ctx, ) / fn.bind(ctx)JavaScript では 関数の呼び出し時に...
JavaScript

JavaScript 逆引き集 | this の扱い(関数とアロー)

this の扱い(関数とアロー関数)JavaScript の this は「その関数が呼ばれたときに参照するオブジェクト」を指します。ただし 通常の関数 と アロー関数 では挙動が違うため、初心者が混...
JavaScript

JavaScript 逆引き集 | クロージャの基本

クロージャの基本 — function outer(){ let a = 1; return ()=>a++ }JavaScript の クロージャ は「関数が作られたときの変数を覚えていて、あとから...
JavaScript

JavaScript 逆引き集 | EventEmitter(Node)

EventEmitter(Node.js) — const e = new EventEmitter(); e.on('x', ()=>{})Node.js には イベント駆動 の仕組みがあり、その中...
スポンサーリンク