AIコードレビューの観点を整理したら、意外と知らない制御があった
Claude CodeやCopilotにコードレビューを任せるためのハーネスを構築していたときのことです。レビュー観点のチェックリストに「並行処理の制御」を追加しようとして、手が止まりました。
Mutex、デバウンス、Circuit Breakerあたりは書ける。でも「全部で何種類あるのか」と聞かれると、答えられない。
AIレビューに観点を教えるには、まず自分が全体像を把握していないと話にならない。そこで整理してみたら、17パターンもありました。しかも実務で意識していなかったものが結構ある。
この記事では、その17パターンを「レストラン運営」に例えて整理します。レストランも並行処理も、限られたリソースで複数の要求を同時にさばく必要がある点で同じです。
全体マップ：4つのカテゴリで整理する制御の世界
並行処理の制御パターンは、レストラン運営に例えると理解しやすくなります。
レストランも並行処理も、限られたリソース（厨房・スタッフ・席）を効率的に使って、複数の要求（お客様の注文）を同時に処理する必要があります。
4つのカテゴリに分類できます：
- 排他制御（誰が使えるか） - 厨房の使用権管理
- タイミング制御（いつ実行するか） - 注文タイミングの調整
- 協調制御（順番・合図） - スタッフ間の連携
- 安全制御（壊れた時どうするか） - トラブル時の対応
1. 排他制御：厨房の使用権を管理する
Mutex（ミューテックス）：「厨房は一人ずつ」
一言： 同時に1つの処理だけを許可する仕組み
レストラン例： 狭い厨房は一度に1人のシェフしか使えない。2人入ったら包丁がぶつかります
いつ使う： ファイル書き込み、カウンター更新など
class Mutex {
private locked = false;
private waitingQueue: (() => void)[] = [];
async acquire(): Promise<void> {
return new Promise((resolve) => {
if (!this.locked) {
this.locked = true;
resolve();
} else {
this.waitingQueue.push(resolve);
}
});
}
release(): void {
if (this.waitingQueue.length > 0) {
const next = this.waitingQueue.shift()!;
next();
} else {
this.locked = false;
}
}
}
// 使用例：ファイル更新の排他制御
const fileMutex = new Mutex();
async function updateCounter() {
await fileMutex.acquire();
try {
// ファイル読み込み→更新→書き込み
const count = await readCounterFile();
await writeCounterFile(count + 1);
} finally {
fileMutex.release();
}
}
Semaphore（セマフォ）：「厨房は3人まで」
一言： 指定した数まで同時処理を許可する仕組み
レストラン例： 大きな厨房は最大3人のシェフまで同時に作業可能。4人目は入口で待機
いつ使う： API同時接続数制限、ダウンロード並列数制御。Mutexの「上限1」を一般化したものです
class Semaphore {
private count: number;
private waitingQueue: (() => void)[] = [];
constructor(maxCount: number) {
this.count = maxCount;
}
async acquire(): Promise<void> {
return new Promise((resolve) => {
if (this.count > 0) {
this.count--;
resolve();
} else {
this.waitingQueue.push(resolve);
}
});
}
release(): void {
this.count++;
if (this.waitingQueue.length > 0) {
const next = this.waitingQueue.shift()!;
this.count--;
next();
}
}
}
// 使用例：API同時接続数制限
const apiSemaphore = new Semaphore(3);
async function callAPI(url: string) {
await apiSemaphore.acquire();
try {
return await fetch(url);
} finally {
apiSemaphore.release();
}
}
RWLock（読み書きロック）：「レシピは見るだけOK、更新は1人ずつ」
一言： 読み込みは複数OK、書き込みは1つだけの制御
レストラン例： レシピ確認は何人でもOK、レシピ更新は1人ずつ
いつ使う： 設定値参照、キャッシュ読み書きなど
class RWLock {
private readers = 0;
private writer = false;
private waitingWriters: (() => void)[] = [];
private waitingReaders: (() => void)[] = [];
async acquireRead(): Promise<void> {
return new Promise((resolve) => {
if (!this.writer && this.waitingWriters.length === 0) {
this.readers++;
resolve();
} else {
this.waitingReaders.push(resolve);
}
});
}
async acquireWrite(): Promise<void> {
return new Promise((resolve) => {
if (!this.writer && this.readers === 0) {
this.writer = true;
resolve();
} else {
this.waitingWriters.push(resolve);
}
});
}
releaseRead(): void {
this.readers--;
if (this.readers === 0 && this.waitingWriters.length > 0) {
const next = this.waitingWriters.shift()!;
this.writer = true;
next();
}
}
releaseWrite(): void {
this.writer = false;
if (this.waitingWriters.length > 0) {
const next = this.waitingWriters.shift()!;
this.writer = true;
next();
} else if (this.waitingReaders.length > 0) {
this.waitingReaders.forEach(resolve => {
this.readers++;
resolve();
});
this.waitingReaders.length = 0;
}
}
}
Spinlock（スピンロック）：「厨房の前で待機」
一言： 空きが出るまでひたすら確認し続ける仕組み
レストラン例： 厨房の前で「まだ？まだ？」と立って待つ。周りの迷惑です
いつ使う： OSカーネルやCPUレベルの超短時間排他制御向け。JavaScriptはシングルスレッドなので、while(true)で待つとブラウザが固まります。フロントエンドでは使わないでください
class Spinlock {
private locked = false;
acquire(): void {
while (this.locked) {
// ビジーウェイト（実際のJavaScriptでは非効率）
}
this.locked = true;
}
release(): void {
this.locked = false;
}
}
// 実用的なJavaScript版（非同期）
class AsyncSpinlock {
private locked = false;
async acquire(): Promise<void> {
while (this.locked) {
await new Promise(resolve => setTimeout(resolve, 1));
}
this.locked = true;
}
release(): void {
this.locked = false;
}
}
2. タイミング制御：注文タイミングを調整する
デバウンス：「注文確定は3秒待ってから」
一言： 連続実行を防ぎ、最後の実行から一定時間後に処理する
レストラン例： 「やっぱりパスタ」「いやカレー」「やっぱパスタ」。3秒黙ったら確定です
いつ使う： 検索入力、リサイズイベント。これがないとキーを打つたびにAPIが飛びます
function debounce<T extends (...args: any[]) => void>(
func: T,
delay: number
): (...args: Parameters<T>) => void {
let timeoutId: number | null = null;
return (...args: Parameters<T>) => {
if (timeoutId) clearTimeout(timeoutId);
timeoutId = window.setTimeout(() => func(...args), delay);
};
}
// 使用例：検索入力
const debouncedSearch = debounce((query: string) => {
console.log(`検索実行: ${query}`);
// API呼び出し
}, 300);
// input要素での使用
document.getElementById('search')?.addEventListener('input', (e) => {
const target = e.target as HTMLInputElement;
debouncedSearch(target.value);
});
スロットル：「注文は1分に1回まで」
一言： 一定間隔でのみ処理を実行する
レストラン例： どんなに「まだ？」と言われても、1分に1回しか注文を受け付けない。せっかちなお客様対策
いつ使う： スクロールイベント、ボタン連打防止。デバウンスとの違いは「最初の1回を即実行する」かどうか
function throttle<T extends (...args: any[]) => void>(
func: T,
interval: number
): (...args: Parameters<T>) => void {
let lastCallTime = 0;
return (...args: Parameters<T>) => {
const now = Date.now();
if (now - lastCallTime >= interval) {
lastCallTime = now;
func(...args);
}
};
}
// 使用例：スクロールイベント
const throttledScroll = throttle(() => {
console.log('スクロール位置更新');
updateScrollPosition();
}, 100);
window.addEventListener('scroll', throttledScroll);
Rate Limit：「1時間に10回まで」
一言： 指定時間内の実行回数を制限する
レストラン例： ランチタイムは1人1時間に10皿までの制限
いつ使う： API呼び出し制限、スパム防止など
class RateLimiter {
private requests: number[] = [];
constructor(
private maxRequests: number,
private windowMs: number
) {}
canExecute(): boolean {
const now = Date.now();
// 時間窓の外のリクエストを削除
this.requests = this.requests.filter(time => now - time < this.windowMs);
if (this.requests.length < this.maxRequests) {
this.requests.push(now);
return true;
}
return false;
}
getRetryAfter(): number {
if (this.requests.length === 0) return 0;
const oldestRequest = Math.min(...this.requests);
return this.windowMs - (Date.now() - oldestRequest);
}
}
// 使用例：API呼び出し制限
const rateLimiter = new RateLimiter(10, 60000); // 1分間に10回
async function callAPI() {
if (rateLimiter.canExecute()) {
return await fetch('/api/data');
} else {
const retryAfter = rateLimiter.getRetryAfter();
throw new Error(`Rate limit exceeded. Retry after ${retryAfter}ms`);
}
}
3. 協調制御：スタッフ間で連携する
Barrier（バリア）：「全員準備できたら一斉スタート」
一言： 全ての処理が完了するまで待機し、一斉に次へ進む
レストラン例： コース料理は全ての皿が揃ってから一斉にサーブ。1皿だけ先に出したら「なんで俺のだけ？」になります
いつ使う： 並列処理の同期。Promise.all がまさにこれ
class Barrier {
private count = 0;
private waitingPromises: (() => void)[] = [];
constructor(private totalCount: number) {}
async wait(): Promise<void> {
return new Promise((resolve) => {
this.count++;
this.waitingPromises.push(resolve);
if (this.count === this.totalCount) {
// 全員準備完了、一斉に解放
this.waitingPromises.forEach(resolve => resolve());
this.waitingPromises = [];
this.count = 0;
}
});
}
}
// 使用例：並列データ処理の同期
async function processDataInParallel(data: any[]) {
const barrier = new Barrier(data.length);
const tasks = data.map(async (item) => {
const result = await processItem(item);
await barrier.wait(); // 全員の完了を待つ
return result;
});
return Promise.all(tasks);
}
Latch（ラッチ）：「シェフの準備OKサインで一斉開始」
一言： 特定のイベントをトリガーとして複数の処理を開始
レストラン例： シェフの「準備OK」の合図で、ホールスタッフが一斉にサーブ開始
いつ使う： 初期化完了待ち、設定読み込み後の処理開始など
class CountDownLatch {
private count: number;
private waitingPromises: (() => void)[] = [];
constructor(count: number) {
this.count = count;
}
countDown(): void {
this.count--;
if (this.count === 0) {
this.waitingPromises.forEach(resolve => resolve());
this.waitingPromises = [];
}
}
async wait(): Promise<void> {
if (this.count === 0) return;
return new Promise((resolve) => {
this.waitingPromises.push(resolve);
});
}
}
// 使用例：初期化処理の完了待ち
const initLatch = new CountDownLatch(3);
async function initializeApp() {
// 3つの初期化処理を並列実行
loadConfig().then(() => initLatch.countDown());
connectDatabase().then(() => initLatch.countDown());
setupAuth().then(() => initLatch.countDown());
// 全ての初期化完了を待つ
await initLatch.wait();
console.log('アプリケーション初期化完了');
}
Event・Signal：「ベルを鳴らして知らせる」
一言： 特定のイベントの発生を他の処理に通知する仕組み
レストラン例： 注文完了のベルで、ホールスタッフに料理の準備完了を知らせる
いつ使う： 状態変更通知、非同期イベント処理など
class EventSignal {
private listeners: (() => void)[] = [];
private signaled = false;
signal(): void {
this.signaled = true;
this.listeners.forEach(listener => listener());
this.listeners = [];
}
async wait(): Promise<void> {
if (this.signaled) return;
return new Promise((resolve) => {
this.listeners.push(resolve);
});
}
reset(): void {
this.signaled = false;
}
}
// 使用例：データ更新の通知
const dataUpdatedSignal = new EventSignal();
async function updateData(newData: any) {
await saveData(newData);
dataUpdatedSignal.signal(); // 更新完了を通知
}
async function waitForDataUpdate() {
await dataUpdatedSignal.wait();
console.log('データが更新されました');
}
Channel・Queue：「注文伝票で厨房とやり取り」
一言： 処理間でデータを順序よく受け渡しする仕組み
レストラン例： ホールスタッフが直接厨房に叫ぶのではなく、伝票を通じて情報をやり取り。口頭だと「注文3つ聞こえなかった」が起きます
いつ使う： Web Worker通信、非同期パイプラインなど
class Channel<T> {
private queue: T[] = [];
private waitingReceivers: ((value: T) => void)[] = [];
async send(value: T): Promise<void> {
if (this.waitingReceivers.length > 0) {
const receiver = this.waitingReceivers.shift()!;
receiver(value);
} else {
this.queue.push(value);
}
}
async receive(): Promise<T> {
if (this.queue.length > 0) {
return this.queue.shift()!;
}
return new Promise((resolve) => {
this.waitingReceivers.push(resolve);
});
}
}
// 使用例：ワーカーとの通信
const taskChannel = new Channel<string>();
// Producer（タスク生成者）
async function producer() {
for (let i = 0; i < 10; i++) {
await taskChannel.send(`Task ${i}`);
console.log(`タスク${i}を送信`);
}
}
// Consumer（タスク処理者）
async function consumer() {
while (true) {
const task = await taskChannel.receive();
console.log(`処理中: ${task}`);
await processTask(task);
}
}
4. 安全制御：トラブル時の対応策
Circuit Breaker：「厨房火災時は営業停止」
一言： 連続失敗時に処理を一時停止し、システムを保護する
レストラン例： 厨房で火災が3回続いたら営業停止。「今度こそ大丈夫」と毎回再開するのは消防署が来ます
いつ使う： API障害時の保護。壊れたAPIを叩き続けても、相手も自分も疲弊するだけです
class CircuitBreaker {
private failureCount = 0;
private lastFailureTime = 0;
private state: 'CLOSED' | 'OPEN' | 'HALF_OPEN' = 'CLOSED';
constructor(
private threshold: number,
private timeout: number
) {}
async call<T>(operation: () => Promise<T>): Promise<T> {
if (this.state === 'OPEN') {
if (Date.now() - this.lastFailureTime > this.timeout) {
this.state = 'HALF_OPEN';
} else {
throw new Error('Circuit breaker is OPEN');
}
}
try {
const result = await operation();
this.onSuccess();
return result;
} catch (error) {
this.onFailure();
throw error;
}
}
private onSuccess(): void {
this.failureCount = 0;
this.state = 'CLOSED';
}
private onFailure(): void {
this.failureCount++;
this.lastFailureTime = Date.now();
if (this.failureCount >= this.threshold) {
this.state = 'OPEN';
}
}
}
// 使用例：API呼び出しの保護
const apiBreaker = new CircuitBreaker(5, 60000); // 5回失敗で1分間停止
async function callExternalAPI() {
return apiBreaker.call(async () => {
return await fetch('/external-api');
});
}
Retry + Backoff：「失敗したら間隔を空けて再試行」
一言： 失敗時に指数的に間隔を広げながら再試行する
レストラン例： 食材配送が来ない。1分後に電話、2分後にもう一度、4分後にもう一度。毎秒電話したら着信拒否されます
いつ使う： ネットワーク通信全般。即座にリトライすると障害中のサーバーをさらに追い込みます
class RetryWithBackoff {
constructor(
private maxRetries: number,
private baseDelayMs: number,
private maxDelayMs: number = 30000
) {}
async execute<T>(operation: () => Promise<T>): Promise<T> {
let lastError: Error;
for (let attempt = 0; attempt <= this.maxRetries; attempt++) {
try {
return await operation();
} catch (error) {
lastError = error as Error;
if (attempt === this.maxRetries) {
break; // 最後の試行なのでリトライしない
}
// 指数バックオフで待機
const delay = Math.min(
this.baseDelayMs * Math.pow(2, attempt),
this.maxDelayMs
);
console.log(`試行 ${attempt + 1} 失敗、${delay}ms後に再試行`);
await this.sleep(delay);
}
}
throw lastError!;
}
private sleep(ms: number): Promise<void> {
return new Promise(resolve => setTimeout(resolve, ms));
}
}
// 使用例：API呼び出しのリトライ
const retry = new RetryWithBackoff(3, 1000);
async function reliableAPICall() {
return retry.execute(async () => {
const response = await fetch('/api/data');
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return response.json();
});
}
Timeout：「注文は30分でタイムアウト」
一言： 処理時間に上限を設け、超過時はエラーとする
レストラン例： 注文から30分経っても料理が出なければキャンセル
いつ使う： API呼び出し、長時間処理の制限など
function withTimeout<T>(promise: Promise<T>, timeoutMs: number): Promise<T> {
return Promise.race([
promise,
new Promise<T>((_, reject) => {
setTimeout(() => {
reject(new Error(`Operation timed out after ${timeoutMs}ms`));
}, timeoutMs);
})
]);
}
// 使用例：API呼び出しのタイムアウト
async function callAPIWithTimeout() {
try {
const response = await withTimeout(
fetch('/api/slow-endpoint'),
5000 // 5秒でタイムアウト
);
return response.json();
} catch (error) {
if (error.message.includes('timed out')) {
console.log('API呼び出しがタイムアウトしました');
}
throw error;
}
}
// AbortController版（推奨）
async function callAPIWithAbort() {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);
try {
const response = await fetch('/api/data', {
signal: controller.signal
});
clearTimeout(timeoutId);
return response.json();
} catch (error) {
clearTimeout(timeoutId);
throw error;
}
}
Bulkhead：「火災は厨房だけ、客席は安全」
一言： システムを分離し、一部の障害が全体に波及しないようにする
レストラン例： 厨房で火災が起きても、客席は防火壁で安全。船の「隔壁（Bulkhead）」が語源です。1区画が浸水しても沈まない
いつ使う： リソース分離。外部API障害で自分のサービス全体が道連れになるのを防ぎます
class BulkheadPool<T> {
private pools: Map<string, T[]> = new Map();
private maxSizes: Map<string, number> = new Map();
createPool(name: string, maxSize: number): void {
this.pools.set(name, []);
this.maxSizes.set(name, maxSize);
}
async acquire(poolName: string, factory: () => T): Promise<T> {
const pool = this.pools.get(poolName) || [];
const maxSize = this.maxSizes.get(poolName) || 10;
if (pool.length > 0) {
return pool.pop()!;
}
if (pool.length >= maxSize) {
throw new Error(`Pool ${poolName} is exhausted`);
}
return factory();
}
release(poolName: string, resource: T): void {
const pool = this.pools.get(poolName);
if (pool) {
pool.push(resource);
}
}
}
// 使用例：API接続の分離
const connectionPool = new BulkheadPool<any>();
// 重要なAPIとそうでないAPIを分離
connectionPool.createPool('critical', 5);
connectionPool.createPool('normal', 3);
async function callCriticalAPI() {
const connection = await connectionPool.acquire('critical', () => {
return createConnection('critical-api.example.com');
});
try {
return await useConnection(connection);
} finally {
connectionPool.release('critical', connection);
}
}
async function callNormalAPI() {
const connection = await connectionPool.acquire('normal', () => {
return createConnection('api.example.com');
});
try {
return await useConnection(connection);
} finally {
connectionPool.release('normal', connection);
}
}
フロントエンド実務での使用頻度マトリクス
実際のフロントエンド開発での使用頻度を整理しました。
| 頻度 | パターン | 主な用途 |
|---|---|---|
| 超高頻度 | デバウンス | 検索入力、リサイズ処理 |
| スロットル | スクロール、ボタン連打防止 | |
| Timeout | API呼び出し、長時間処理 | |
| 高頻度 | Mutex | ファイル操作、状態更新 |
| Retry + Backoff | ネットワーク通信 | |
| Channel・Queue | Worker通信、非同期処理 | |
| 中頻度 | Rate Limit | API制限、スパム防止 |
| Circuit Breaker | 外部サービス連携 | |
| Event・Signal | コンポーネント間通信 | |
| 低頻度 | Semaphore | リソース制限 |
| Barrier | バッチ処理同期 | |
| Latch | 初期化処理 | |
| RWLock | キャッシュ管理 | |
| Bulkhead | システム分離 | |
| Spinlock | 超短時間排他（稀） |
まとめ：全部覚えなくていい。この3つだけ押さえろ
17パターンすべてを覚える必要はありません。フロントエンド開発で必須なのは、次の3つです。
1. デバウンス
const debouncedSearch = debounce(searchAPI, 300);
検索入力やリサイズ処理で必須。 これがないとAPIが連続実行されます。
2. スロットル
const throttledScroll = throttle(updateUI, 100);
スクロールやボタン連打防止で必須。 パフォーマンスを守ります。
3. Timeout
const response = await withTimeout(fetch('/api'), 5000);
API呼び出しで必須。 無限待機を防ぎます。
この3つがあれば、コードレビューで「並行処理の制御がない」と指摘されることはなくなります。
他のパターンは、必要になったときに調べれば十分です。まずはこの3つを確実にマスターして、安全で快適なフロントエンドアプリケーションを作りましょう。
17パターン、全部覚える必要はありません。デバウンス・スロットル・Timeout。この3つが入っているだけで、コードレビューの赤い通知は激減します。
残りの14パターンは、障害が起きたときに「ああ、あのレストランのやつか」と思い出せれば十分です。