JavaScript 逆引き集

以下は業務で役立つ JavaScript の操作・小技を優先して並べた逆引き集です。各項目は動作の要旨と最小スニペットを示します。

配列のループ（for） — for (let i=0;i<arr.length;i++) {}
配列のループ（for…of） — for (const v of arr) {}
配列のループ（forEach） — arr.forEach(v=>{})
map で配列変換 — const r = arr.map(x=>x*2)
filter で条件抽出 — const r = arr.filter(x=>x>10)
reduce で集計 — const sum = arr.reduce((a,b)=>a+b,0)
find で最初の一致を取得 — arr.find(x=>x.id===3)
findIndex でインデックス取得 — arr.findIndex(x=>x.id===3)
includes で存在確認（原始値） — arr.includes(5)
some でいずれか判定 — arr.some(x=>x>10)
every で全件判定 — arr.every(x=>x>0)
flat で1階層平坦化 — arr.flat()
flatMap の変換＋平坦化 — arr.flatMap(x=>x.items)
concat で配列結合 — const r = arr1.concat(arr2)
スプレッドで配列コピー/結合 — [...a, ...b]
配列のソート（数値） — arr.sort((a,b)=>a-b)
配列を逆順 — arr.reverse()
配列の重複除去（Set） — [...new Set(arr)]
配列をユニークに（オブジェクトキーで） — Object.values(_.keyBy(arr,'id'))（lodash例）
配列の分割（chunk） — for (let i=0;i<arr.length;i+=n) chunks.push(arr.slice(i,i+n))
join で文字列結合 — arr.join(',')
split で文字列分割 — 'a,b'.split(',')
文字列のトリム — s.trim()
文字列を大文字/小文字 — s.toUpperCase(), s.toLowerCase()
正規表現でマッチ — s.match(/pattern/)
正規表現で置換（全体） — s.replace(/a/g,'b')
正規表現で部分抽出（キャプチャ） — const [,p]=s.match(/(foo)/)
テンプレートリテラル — `Hello ${name}`
数値を固定小数点 — num.toFixed(2)
数値の丸め（Math） — Math.round/ceil/floor
ランダム整数生成 — Math.floor(Math.random()*n)
日付の現在取得 — new Date()
日付を ISO 文字列に — new Date().toISOString()
日付の差分（日数） — (d2-d1)/(1000*60*60*24)
日付フォーマット（簡易） — ${d.getFullYear()}-${d.getMonth()+1}-${d.getDate()}
Intl.DateTimeFormat の利用 — new Intl.DateTimeFormat('ja-JP').format(d)
タイムゾーン指定変換（Intl） — new Intl.DateTimeFormat('en-US',{timeZone:'UTC'})
JSON 文字列化／復元 — JSON.stringify(obj), JSON.parse(str)
オブジェクトのキー列挙 — Object.keys(obj)
オブジェクトの値列挙 — Object.values(obj)
オブジェクトのエントリ列挙 — Object.entries(obj)
オブジェクトのクローン（浅） — {...obj}
深いコピー（JSON） — JSON.parse(JSON.stringify(obj))（注意：関数/undef は除外）
オブジェクトのマージ — {...a,...b}
プロパティの存在チェック — 'prop' in obj
オブジェクトのプロパティ削除 — delete obj.key
動的プロパティアクセス — obj[key]
オブジェクトのキー順ソート（新規オブジェクト作成） — Object.keys(o).sort().reduce(...)
Map の基本 — const m=new Map(); m.set(k,v); m.get(k)
Set の基本 — const s=new Set(arr)
Map から配列へ — [...map.entries()]
WeakMap の利用（ガベージに強い参照） — new WeakMap()
Promise 基本生成 — new Promise((res,rej)=>{})
async/await 基本 — async function f(){ const r = await p }
Promise.all（並列） — await Promise.all([p1,p2])
Promise.race（最初） — await Promise.race([p1,p2])
Promise.allSettled（結果全取得） — await Promise.allSettled(ps)
fetch で HTTP GET — const r=await fetch(url); const json=await r.json()
fetch POST（JSON） — fetch(url,{method:'POST',body:JSON.stringify(data),headers:{'Content-Type':'application/json'}})
axios（外部）基本 — axios.get(url).then(r=>r.data)（外部ライブラリ）
エラーハンドリング（try/catch） — try{ }catch(e){}
カスタムエラー投げる — throw new Error('msg')
再試行ロジック（簡易） — for(i=0;i<3;i++){ try{await f();break}catch{} }
タイマー（setTimeout） — setTimeout(()=>{},1000)
取消可能タイマー（clearTimeout） — const id=setTimeout(...); clearTimeout(id)
繰り返し（setInterval） — const id=setInterval(()=>{},1000)
clearInterval で解除 — clearInterval(id)
debounce 実装（簡易） — const debounce=(fn,ms)=>{let t;return(...a)=>{clearTimeout(t);t=setTimeout(()=>fn(...a),ms)}}
throttle 実装（簡易） — const throttle=(fn,ms)=>{let l=0;return(...a)=>{if(Date.now()-l>ms){l=Date.now();fn(...a)}}}
イベントリスナー追加（DOM） — el.addEventListener('click',fn)
イベントリスナー削除 — el.removeEventListener('click',fn)
フォームのsubmit防止 — e.preventDefault()
クラス操作（classList） — el.classList.add('a'); el.classList.toggle('b')
属性の取得／設定 — el.getAttribute('data-x'); el.setAttribute('data-x',v)
dataset（data-*）の利用 — el.dataset.foo = 'bar'
要素の生成 — const n=document.createElement('div')
要素の挿入（append/appendChild） — parent.append(child)
innerHTML を使う（注意：XSS） — el.innerHTML = '<b>hi</b>'
textContent を使う（テキストのみ） — el.textContent='text'
CSS スタイル変更 — el.style.display='none'
親要素の取得 — el.parentElement
子要素の取得 — el.children
querySelector（単一） — document.querySelector('.cls')
querySelectorAll（複数） — document.querySelectorAll('li')
NodeList を配列に変換 — Array.from(nodeList) または [...nodeList]
フラグメント利用で描画高効率化 — const frag=document.createDocumentFragment(); frag.append(...)
イベントデリゲーション — parent.addEventListener('click', e=>{ if(e.target.matches('button'))... })
フォーカス制御 — el.focus()
要素の表示・非表示（CSSクラス） — el.classList.toggle('is-hidden')
getBoundingClientRect で座標取得 — el.getBoundingClientRect()
スクロール位置取得 — window.scrollY / el.scrollTop
smooth スクロール — window.scrollTo({top:0,behavior:'smooth'})
localStorage 書き込み／読み出し — localStorage.setItem('k',v); localStorage.getItem('k')
sessionStorage 書き込み／読み出し — sessionStorage.setItem('k',v)
Cookie セット（簡易） — document.cookie = 'k=v; path=/; max-age=3600'
IndexedDB 基本（簡易） — const req = indexedDB.open('db')（要詳細実装）
URLSearchParams（クエリ操作） — const p=new URLSearchParams(location.search); p.get('q')
URL 生成／解析（URLクラス） — const u=new URL('/a','https://example.com')
history.pushState／replaceState — history.pushState({},'','/page')
popstate イベント検知 — window.addEventListener('popstate', ()=>{})
Blob とファイル作成 — const b=new Blob([txt],{type:'text/plain'})
ダウンロード（リンク生成） — const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download='file.txt'; a.click()
FileReader でローカルファイル読み込み — const fr=new FileReader(); fr.onload=e=>console.log(e.target.result)
input[type=file] の扱い — const f = input.files[0]
Canvas 基本描画 — const ctx=canvas.getContext('2d'); ctx.fillRect(0,0,100,100)
画像を Canvas に描画 — ctx.drawImage(img,0,0)
canvas.toDataURL で画像取得 — canvas.toDataURL('image/png')
WebSocket 基本接続 — const ws=new WebSocket(url); ws.onmessage=e=>{}
SSE（EventSource）受信 — const es=new EventSource(url); es.onmessage=e=>{}
Navigator.online でオンライン判定 — navigator.onLine
geolocation API（位置取得） — navigator.geolocation.getCurrentPosition(p=>{})
Clipboard API（コピー） — navigator.clipboard.writeText('text')
Clipboard API（取得） — navigator.clipboard.readText().then(t=>{})
Web Crypto API（ランダム） — crypto.getRandomValues(new Uint8Array(16))
URL 文字列エンコード／デコード — encodeURIComponent/decodeURIComponent
Base64 エンコード／デコード — btoa(str), atob(b64)（注意：UTF-8の場合処理必要）
Module（ESM）インポート — import fs from 'fs'（環境による）
動的 import（コード分割） — const mod=await import('./mod.js')
export の基本 — export function f(){} / export default ...
require（CommonJS） — const x = require('x')（Node）
process.env（環境変数参照） — process.env.NODE_ENV（Node）
Buffer の利用（Node） — Buffer.from('text')
fs.readFile（Node） — const data = fs.readFileSync('a.txt','utf8')
EventEmitter（Node） — const e=new EventEmitter(); e.on('x',()=>{})
クロージャの基本 — function outer(){let a=1; return ()=>a++ }
this の扱い（関数とアロー） — function f(){console.log(this)}; const a=()=>console.log(this)
call/apply/bind — fn.call(ctx,arg1) / fn.apply(ctx,[args]) / fn.bind(ctx)
スコープと var/let/const の違い — var は関数スコープ、let/const はブロックスコープ
即時実行関数（IIFE） — (function(){})(); / ( () => {} )()
モジュールパターン（名前空間） — const My = (()=>{ return {fn(){}} })()
プロトタイプ継承（古典） — Child.prototype = Object.create(Parent.prototype)
class 構文 — class A{ constructor(x){ this.x=x } method(){} }
extends 継承 — class B extends A{}
super の使用 — super() / super.method()
getter/setter（アクセサ） — get v(){} / set v(x){}
static メソッド — static build(){}
instanceof 判定 — obj instanceof Class
typeof 判定（原始型） — typeof x === 'string'
isNaN と Number.isNaN の違い — Number.isNaN(x) 推奨
型変換（Number/String/Boolean） — Number('1'), String(1), Boolean(0)
parseInt/parseFloat の使い方 — parseInt('12',10)（基数指定）
オブジェクトのデフォルト引数 — function f(a=1,b={}){}
rest 引数と spread 構文 — function f(...args){} / f(...arr)
可変長引数の扱い — (...args) => args
引数のデフォルト値に関数 — function f(x=Date.now()){}
配列の入れ子の安全アクセス（?.） — obj?.a?.b
Optional chaining の利用（安全なネスト参照） — a?.b()
Nullish coalescing（??） — const v = a ?? 'default'
論理演算子で既定値（|| の注意） — const v = a || 'def'（”や0も代替される）
短絡評価（&&/||）を利用した条件実行 — cond && fn()
文字列テンプレートで複数行 — `line1\nline2`
Symbol の基本 — const s = Symbol('desc')
Symbol を key とするオブジェクトプロパティ — obj[s] = 1
Reflect API（動的操作） — Reflect.get(obj,'k') / Reflect.set(...)
Proxy でオブジェクト挙動をカスタム — new Proxy(obj,{get(target,k){}})
性能計測（console.time） — console.time('t'); console.timeEnd('t')
console.table で配列表現 — console.table(data)
開発時のデバッグ（debugger） — debugger ステートメント
Strict mode の有効化 — 'use strict';
モジュールトップでの strict（ESM はデフォルト）
ESLint / Prettier の導入（品質） — eslint --init（設定手順）
型チェックに TypeScript を導入（基本） — tsc --init（設定手順）
JSDoc でドキュメント注釈 — /** @param {number} x */ function f(x){}
コメントアウトのスタイル — // / /* ... */
配列をオブジェクトのマップに変換 — arr.reduce((m,x)=>{m[x.id]=x;return m},{})
オブジェクトの配列をグルーピング — arr.reduce((g,x)=>{(g[x.type]||=(g[x.type]=[])).push(x);return g},{})
並列 HTTP リクエスト制御（同時 N 件） — pMap(arr,fn,{concurrency:5})（p-mapライブラリ）
ファイルアップロード（fetch, FormData） — const fd=new FormData(); fd.append('file',file); fetch(url,{method:'POST',body:fd})
multipart/form-data の扱い（FormData） — 上と同じ
JSON Schema でバリデーション（AJV 等） — ajv.validate(schema,data)（ライブラリ）
バリデーション（簡易） — if(!data.name) throw new Error('name required')
型のランタイムチェック（zod 等） — z.string().parse(x)（ライブラリ）
CSRF トークンの送信（ヘッダ） — fetch(url,{headers: {'X-CSRF-Token':token}})
CORS の基礎知識（ブラウザ側） — mode:'cors' 等の設定
Basic 認証ヘッダ — Authorization: 'Basic '+btoa(${user}:${pass})
Bearer トークン利用 — headers: {'Authorization': 'Bearer '+token}
JWT の検証（Node） — jwt.verify(token,secret)（ライブラリ）
OAuth フローの基本（認可コード） — サーバー・クライアントの連携が必要
ページネーションの実装（オフセット） — limit, offset パラメータ利用
無限スクロール（IntersectionObserver） — const obs=new IntersectionObserver(cb); obs.observe(el)
IntersectionObserver の基本 — 要素が見えた時のコールバック利用
ResizeObserver の利用（DOM サイズ監視） — new ResizeObserver(cb).observe(el)
MutationObserver（DOM 変化監視） — new MutationObserver(cb).observe(target,{childList:true})
画像の遅延読み込み（loading=lazy） — <img loading="lazy">（HTML属性）
Service Worker の登録（PWA） — navigator.serviceWorker.register('/sw.js')
キャッシュ API（service worker 内） — caches.open('v1').then(c=>c.put(req,res))
オフライン対応の基本（PWA） — service worker + manifest
ページフォーカスの検出 — window.addEventListener('visibilitychange', ()=>{})
Web Vitals 基礎（LCP, FID 等） — 計測ライブラリ利用推奨
パフォーマンス測定（Performance API） — performance.now() / performance.mark()
メモリ使用量の簡易確認（performance.memory） — ブラウザ依存
ストリーミングレスポンス（fetch stream） — const reader = res.body.getReader()
ReadableStream / WritableStream 基本 — ストリーム処理のための API
ArrayBuffer / TypedArray の利用 — new Uint8Array(buffer)
バイナリデータの扱い（DataView） — new DataView(buffer)
TextEncoder / TextDecoder（エンコード） — new TextEncoder().encode(str)
Cross-origin resource の画像操作の注意（tainted canvas） — img.crossOrigin='anonymous' 等
CSS アニメーションのトリガー（class） — el.classList.add('anim')（CSS定義必要）
Web Animations API（JSでアニメ） — el.animate([{transform:'...'}],{duration:500})
requestAnimationFrame の利用（アニメ最適化） — requestAnimationFrame(step)
LRU キャッシュの実装（簡易） — Map を使って順序管理するパターン
キャッシュ制御（ETag/If-None-Match） — サーバー側と連携
圧縮リクエスト（Accept-Encoding） — ブラウザは自動処理
レスポンスのストリーミング表示（部分描画） — ストリーム読みながら DOM 更新
大きい配列の分割処理（yield 使用） — 非同期に分割処理して UI ハング防止
Web Worker（重い処理を別スレ） — new Worker('worker.js')
SharedWorker とデータ共有（複数タブ） — new SharedWorker('sw.js')
OffscreenCanvas（ワーカーで描画） — offscreen.transferControlToOffscreen()
HTML template 要素の使用 — <template> を cloneNode して使う
Shadow DOM（カプセル化） — el.attachShadow({mode:'open'})
Custom Elements（Web Components） — customElements.define('my-el', class extends HTMLElement{})
formData.entries() を使ったフォーム解析 — for(const [k,v] of fd.entries())
アクセシビリティ（ARIA 基本） — role と aria-* 属性の利用
画像の alt 属性は必須 — <img alt="説明">
セマンティック HTML の推奨（button, nav, main等）
レスポンシブデザインのための画面幅判定 — window.matchMedia('(max-width:600px)').matches
CSS メディアクエリの JS 連動 — mql.addEventListener('change', cb)
i18n の基本（Intl） — new Intl.NumberFormat('ja-JP').format(n)
数値ローカライズ（Intl.NumberFormat） — 上と同様
通貨フォーマット（Intl） — new Intl.NumberFormat('ja-JP',{style:'currency',currency:'JPY'}).format(1000)
plural rules（Intl.PluralRules） — new Intl.PluralRules('en').select(n)
ユーザー言語の取得 — navigator.language
リソースのプリフェッチ（link rel=preload/preconnect） — HTML 側で設定
画像の srcset/sizes によるレスポンシブ画像配信
SVG の操作（DOMとして） — document.querySelector('svg').querySelectorAll('path')
SVG を外部から読み込む際の注意（CORS）
CSS 変数（カスタムプロパティ）を JS で制御 — el.style.setProperty('--c','red')
computed style の取得 — getComputedStyle(el).getPropertyValue('width')
动的に CSS を追加（style 要素） — const s=document.createElement('style'); s.textContent='...'
CSS セレクタの最適化（性能配慮） — 深いセレクタや :nth-child 過度使用を避ける
モーダルのフォーカストラップ実装（基本） — キーボードフォーカス管理
キーボードイベント（keydown/keyup） — window.addEventListener('keydown', e=>{})
イベントのデフォルト阻止と伝播停止 — e.preventDefault(); e.stopPropagation()
drag & drop 基本（HTML5） — dragstart/dragover/drop を実装
ファイルドラッグ受け取り（DataTransfer） — e.dataTransfer.files
リアルタイム入力検証（inputイベント） — input.addEventListener('input', cb)
contenteditable 要素の扱い（HTML） — <div contenteditable> の取り扱い注意点
セッション管理（JWT Cookie vs localStorage） — セキュリティ観点で検討
XSS 対策（出力エスケープ） — 危険な HTML を入れない／sanitizeする
CSP（Content Security Policy）の導入 — サーバー側ヘッダ設定推奨
サーバーエラーのユーザー表示戦略（フレンドリーなメッセージ）
ログ出力戦略（環境別） — dev: console, prod: リモートログ等
ソースマップ（デバッグ） — ビルドに sourcemap を付ける
ビルドツールの利用（Vite/webpack/rollup） — 関連設定で最適化
tree-shaking の基本（不要コード削減） — ESM を利用して最適化
gzip / brotli のサーバー圧縮設定（配信最適化）
キャッシュヘッダ（Cache-Control）設計の基本
CDN の利用（静的資産） — 高速配信のために利用
レスポンスヘッダの最適化（HSTS等） — セキュリティ向上
サーバーサイドレンダリング（SSR）概念 — Next.js などを利用するパターン
クライアントサイドレンダリング（CSR）の利点と欠点
ハイブリッドレンダリング（ISR/SSG 等） — ビルド時間と更新頻度で選択
SEO 基本（メタタグ、構造化データ） — SSR や prerender が有利
robots.txt / sitemap.xml の生成と配置
Open Graph / Twitter Card の設定（SNS 見栄え）
Lighthouse でパフォーマンス計測 — 改善指標の取得
アセットの遅延読み込み（dynamic import、lazy） — 初期ロード低減
Critical CSS の扱い（インラインで先出し） — FCP 改善
画像最適化（WebP/AVIF） — 変換とレスポンシブ配信
SVG スプライト化で HTTP リクエスト削減
HTTP/2/3 の利用（多重並列） — サーバー/CDN設定
TLS 設定（強い暗号スイート） — セキュリティ観点
ヘルスチェックエンドポイントと監視の設置（サーバ）
ロードバランシング（水平スケール）設計の基礎
Rate limiting（API保護） — サーバー側で実装
サーバー側キャッシュ（Redis 等）を考慮した設計
バックエンドへのリクエスト遅延対処（タイムアウト/再試行）
API のバージョニング戦略（URI or Header）
GraphQL 基本（スキーマとリゾルバ） — 利点と注意点
WebSocket を使った双方向通信の設計（接続/再接続）
エンドツーエンド暗号化（必要な場合） — 要件確認
バックグラウンドジョブの設計（キュー） — ワーカー・再試行・DLQ 等
ロギングレベル設計（info/warn/error） — 運用性向上
モニタリングの導入（Prometheus/Grafana 等） — 指標設計
エラーレポート（Sentry 等）の導入 — 自動収集と通知
CI/CD（自動テストとデプロイ） — ビルドパイプライン設計
単体テスト（Jest 等） — テスト駆動開発の基本
E2E テスト（Playwright / Cypress） — ブラウザ統合テスト
テストのカバレッジ目標設定 — 重要領域の保護
モックとスタブの使い分け（単体テスト）
コンポーネント隔離テスト（Storybook） — UI のドキュメント化
型安全（TypeScript）でランタイムエラー削減
API クライアント自動生成（OpenAPI） — サーバーとの整合性保持
スキーマ駆動開発（Contract testing） — Pact などの一貫性検証
レスポンスの遅延可視化（フロント計測） — ユーザー体験の観察
UX のフロー設計（エラーと成功時のナビゲーション）
フォームの設計（アクセシビリティとバリデーション）
多言語対応の工程（翻訳ファイル管理）
アクセスログと分析（どこで離脱しているか）
A/B テストの設計（計測指標の定義）
機能フラグの導入（段階的リリース） — feature toggle ライブラリ活用
セキュリティレビューのチェックリスト作成 — XSS/CSRF/認可等
ソフトウェア要件のトレーサビリティ管理 — 変更管理の基礎
技術負債の定期返済計画 — 優先度と工数管理
ドキュメント化（README/設計書） — 継続的な更新ルール
コードレビューのガイドライン — 小さな PR と自動チェック
モノレポ vs マルチレポの判断基準 — 組織とスケールで選択
パッケージ管理（npm/yarn/pnpm）と lockfile の運用
ライブラリの脆弱性スキャン（npm audit 等） — 定期的に実施
依存関係の最小化（bundle size 対策） — 必要な機能だけ導入
Babel の導入（トランスパイル） — 新機能を古い環境に対応
Polyfill の適用（core-js 等） — 必要な機能のみ導入
コンポーネント設計原則（Single Responsibility）
状態管理の選択（Redux, Zustand, Vuex 等） — 要件に合わせて選択
immutable データの扱い（immer等） — 変更による副作用防止
フック（React）基本 — useState, useEffect の使い方
カスタムフック設計（再利用） — 分離と副作用管理
コンポーネントの最適化（memo, useMemo, useCallback） — 再描画制御
サーバー側レンダリングのデータフェッチ戦略（getServerSideProps等）
クライアント側でのデータフェッチ最適化（SWR, React Query） — キャッシュと再検証
optimistic update の実装 — UX 改善のための楽観更新
リフェッチ戦略（interval/visibility） — 新鮮さと負荷のバランス
トランザクション的操作の設計（複数 API 呼び出し） — ロールバック戦略
ファイルサイズ測定（bundle analyzer） — ビルド解析
HTTP ステータスコードの使い分け（200/201/400/401/403/404/500）
API エラーの構造化（code/message/details） — クライアントでの扱いが楽に
ローカルでの SSL/TLS（開発） — mkcert 等の利用
マイクロフロントエンドの導入検討（利点と複雑さ）
コンポーネントライブラリ化（Design System） — 一貫性維持
UI テスト自動化（snapshot） — 変更検知の効率化
イメージ差分テスト（Percy 等） — ビジュアル回帰検出
ETL/データパイプラインのフロント側最適化（分割処理）
CSV/Excel インポート処理（PapaParse, SheetJS） — 大容量対応注意点
CSV エクスポート（Blob + download） — 上記ダウンロードパターン利用
PDF 生成（jsPDF 等） — レイアウトの限界を理解して使う
OCR 連携（外部 API） — 画像からテキスト抽出の設計
画像圧縮クライアント処理（browser-image-compression） — ネットワーク負荷低減
動画のトリミング／サムネイル生成（ブラウザ内で大変） — サーバー委託が現実的
IoT デバイスと連携するための WebAPI 設計（MQTT 等）
レスポンスタイム SLA を満たすための設計（KPI 設定）
障害対応フロー（オンコール，エスカレーション）設計
フォールトトレランス設計（冗長化） — 可用性確保
データバックアップと復旧計画（DB/ストレージ）
GDPR 等の法令対応（個人データの取り扱い） — 保持と削除ルール
ロールベース認可（RBAC）実装の基本 — サーバー側で検証必須
SSO（SAML, OIDC）導入の考慮点 — セキュリティ要件確認
監査ログの設計（何を記録するか） — 変更履歴等の保存
パフォーマンス劣化検出（アラート閾値） — 自動通知の設定
レイテンシの分解（DNS/TCP/TLS/TTFB） — ボトルネック特定
DB クエリ最適化（索引、N+1 問題回避） — API 側でのバッチ化
キャッシュ無効化戦略（バージョニング） — アセットと API の整合性
データマイグレーション手順（スクリプト化とロールバック計画）
スキーマ変更の互換性設計（後方互換）
イベントドリブン設計（イベントバス） — 非同期疎結合設計
メッセージング（Kafka/RabbitMQ）設計の基本 — パターン理解
スロットリングとバックプレッシャーの設計 — 安定性確保
リリースノートの自動生成（コミットメッセージ） — 戦略化
バックアップからのリストア検証（定期テスト）
インフラ構成管理（IaC: Terraform 等） — 再現性の確保
コンテナ化（Docker）での環境差の低減 — イメージ設計
Kubernetes 基礎（デプロイ/Service/Ingress） — 運用設計
シークレット管理（Vault 等） — 平文禁止
サービスメッシュ（Istio 等）導入の考慮点 — 複雑性とのトレードオフ
ロールアウト戦略（ブルーグリーン、カナリア） — リスク低減
負荷テスト（k6, JMeter） — キャパシティ設計
ストレステストと耐障害性評価 — 最大負荷での挙動確認
障害注入テスト（Chaos Engineering） — 回復性向上
SLA/SLI/SLO の定義と監視 — ビジネス要件に合わせる
コスト最適化（クラウドリソース） — 定期レビュー
マルチリージョン構成の検討（可用性/レイテンシ）
データプライバシー（暗号化-at-rest/in-transit） — 要件に応じて適用
キー回転（キー管理）運用フロー設計
監査とコンプライアンス（ログ保存、アクセス制御）
アクセスポリシー（最小権限）実装の徹底
サードパーティ依存のリスク管理（ライブラリ/サービス）
SLA違反時の対処手順（契約/通知）
セキュリティインシデント対応フロー（連絡網、調査）
脆弱性の優先順位付け（CVSS 等） — パッチ運用計画
自動デプロイのロールバック機能（失敗時の即時復旧）
バックエンドでのレート制限（IP/ユーザー単位）実装
API Gateway の役割と導入（認証/認可/制限）
GraphQL のパフォーマンス対策（深いネストや複雑クエリ制限）
設計ドキュメントのテンプレート（ADR: Architecture Decision Record）
コード整形ルールの自動化（pre-commit hooks）
Git ブランチ戦略（GitFlow/Trunk-based）選定
チーム間のオンボーディングドキュメント整備
技術選定の評価マトリクス作成（保守性/成熟度/コミュニティ）
スキルマップ作成と育成計画 — 技術継承の仕組み
コスト見積もりと予実管理（開発/運用）
リスク登録簿の作成（技術・運用リスク）
SLA と SLO のエスカレーション定義
定期的なセキュリティレビューとペネトレーションテスト委託
実運用でのログ保持期間とアーカイブ設計
データライフサイクル（収集→保存→削除）ポリシー設計
GDPR/CCPA に基づくデータ削除 API の提供
バッチ処理の設計（時間窓、並列数制御）
ジョブスケジューラ（Cron, k8s CronJob）利用パターン
旧バージョンの互換性テスト自動化
技術的負債の見積もり方法（型付け/ドキュメント等）
依存ライブラリのライフサイクル管理（EOLチェック）
アーカイブと取り出しの自動化（長期データ保存）
定期的なセキュリティパッチ適用の自動化
API の可観測性（トレーシング: OpenTelemetry）導入
分散トレーシングの設計（サンプリング/タグ）
ログ相関（traceId/spanId）で障害解析を迅速化
可用性目標に応じた冗長構成（Active-Active 等）
DB レプリケーションとフェイルオーバー設計
キャッシュ整合性の設計（invalidation戦略）
コンテンツ配信におけるエッジ側最適化（CDN機能利用）
定期的な負荷予測とキャパシティプランニング
コードベースの可視化ツール（依存関係解析）導入
レガシーシステムのリファクタ戦略（段階的移行）
監査ログの匿名化・マスキング設計（個人情報保護）
セキュアコーディングガイドラインの整備
CI の並列実行でビルド時間を短縮する設定
マルチステージ Dockerfile でイメージ最小化
起動時間短縮（cold start 対策） — サーバレスの場合特に重要
外部 API 呼び出しのタイムアウトと回線切替戦略
エッジコンピューティングの適用検討（レイテンシ低減）
顧客データ取り扱いに関する契約（DPA）確認
技術負債のKPI化（負債返済率など）で見える化
ソフトウェアライセンス管理（サードパーティライブラリ）
知的財産（成果物）の帰属とドキュメント化
インフラコストアラート設定（予算超過防止）
セキュリティポリシーの社内周知と承認フロー
アクセスキーの定期ローテーション運用
デプロイ前の自動統合テスト（smoke test）実装
ブルーグリーン展開の自動切替化（ヘルスチェックベース）
レスポンス圧縮（gzip/brotli）条件の最適化
API レスポンスのサイズ制御（必要なフィールドのみ返す）
クライアント側のキャッシュ制御（ETag/Last-Modified）活用
リクエストトレーサビリティの設計（ID付与）
APM（Application Performance Monitoring）導入 — 監視自動化
監査証跡の長期保存ポリシー（法規対応）
バックアップ整合性テスト（復元手順ドキュメント）
本番環境のスモークテスト自動化（デプロイ後確認）
構成管理（Config as Code）で環境差を削減
テンプレートエンジン（Handlebars, EJS）基本使用法
メール送信（SMTP/API）実装とリトライ戦略
支払い（決済）連携のセキュリティ要件（PCI DSS）
サードパーティ SDK の抽象化（差替え容易）
サービスのオブザーバビリティを設計段階から組み込む
ダークローンチの実施フロー（影響最小化）
バックエンドのスキーマ互換性テスト（contract tests）
開発支援ツール（ローカル Mock Server）運用
ローカル Kubernetes 開発環境（kind/minikube）利用法
DB マイグレーションツール（Flyway/Knex）運用手順
マルチテナンシー設計（データ分離の方法）
キャパシティ増減の自動化（オートスケーリング）設定
故障時の自動フェイルオーバー検証（定期テスト）
API スロットリングの伝達方法（429レスポンス）
ユーザーデータエクスポート機能の実装（GDPR対応）
ログの集約と長期保存（ELK/EFK）設計
セッションストア（Redis）構成と永続化考慮
データ整合性を保つための補助プロセス（整合性チェック）
リードレプリカを使った読み取り最適化設計
書き込み負荷分散（シャーディング等）検討
バッチ再実行時の重複排除（idempotency key）設計
外部連携の回復ロジック（キュー・再試行）実装
重大障害時のロールバック計画（手順書化）
アクセス解析とイベント設計（どのイベントを集めるか）
セキュリティテスト自動化（SCA/DAST）導入
使用しているクラウドのベストプラクティスに従った設計
技術負債の優先順位付け（ビジネス影響）モデル化
エンドユーザーへの障害通知フロー（ステータスページ）
継続的なコスト予測（リソース利用率からの推定）
モデル駆動とコード整合性（スキーマ生成ツール）
SLA 違反時の補償フロー（ビジネス側ルール）整備
サービス停止時の代替手段（Fallback）設計
バックアップの暗号化とキーマネジメント
ロールベースアクセスの自動付与と解除（オンボーディング）
監査レポートの自動生成（規制対応）
依存サービス停止時のGraceful degradation 設計
API の段階的廃止（Deprecation policy）と通知フロー
運用ドキュメントのプレイブック化（Runbook）
SLA 管理の責任分界（RACI）定義
メンテナンスウィンドウの通知と影響最小化手順
アウトバウンド通信の制御（FW/Proxy）設計
開発効率を上げるテンプレートの整備（プロジェクト初期化）
実行環境差異を吸収する抽象化層の設計
監査ログからの自動インシデント抽出（検知ルール）
シークレットの読み取り失敗時のフェールセーフ設計
API ゲートウェイでのヘルスチェック統合
バックエンドのスロットリング通知（Retry-After ヘッダ）
重要機能のSLOモニタリング（ユーザー影響測定）
リソース削減案の継続的なレビュー（定期的な最適化）
コードの可読性改善（命名規則・コメント規則）
依存ライブラリのアップデートポリシー（テストカバレッジ必須）
事業継続計画（BCP）に基づくテック側の対応策
リスクに基づくテスト優先順位付け（重要機能先行）
技術選定のProof of Concept（PoC）実施基準
ベンダーLock-in を避けるための抽象化戦略
サービスの終了（sunset）手続きとユーザー通知計画
本番データの取り扱い（マスキング、サニタイズ）方針
開発環境と本番環境の差分管理（構成テンプレート）
定常運用指標（MTTR, MTBF 等）を定義し追跡
変更管理プロセス（承認と追跡）を運用に組み込む
コードレベルでの機密情報検出（pre-commit hook）導入
開発者向けのオンコール訓練とエスカレーション演習
本番での実験（Feature Flags）とロールバック計画
プロダクトインシデント後のポストモーテム実施と改善計画
技術ロードマップとリソース配分の整合化
SLA に基づく障害報告テンプレート整備
セキュリティ・プライバシーに関する社内教育プログラム設計
依存関係グラフの定期監査（古いパッケージ検出）
重要データの二重保存（冗長なバックアップ）ポリシー
サービス閉域網（VPC）設計とアクセス制御
デプロイ前の影響分析（依存関係と互換性）実施
仕様変更時の影響範囲ドキュメント化（自動化支援）
継続的改善ループ（PDCA）を組織文化にする仕組み

2025年12月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31