フロントエンド開発の現場では、Promiseやasync/awaitが主流となり、Generator関数（function）の出番は減ったように感じるかもしれません。しかし、Generator関数は単なる「反復子（イテレータ）を作るための道具」以上のポテンシャルを秘めています。
Generator関数は「一時停止」と「再開」の魔法
通常の関数は呼び出されると最後まで一気に実行されますが、Generator関数は yieldキーワード を使うことで、実行の途中で処理を一時停止し、外部から値を受け取ったり、処理を再開させたりすることができます。
この「処理の主導権を外部に渡せる」という特性は、実は状態遷移が複雑なUIロジックにおいて非常に強力です。
具体的な活用事例：ステップ形式のフォーム制御
例えば、ユーザーが入力を行うウィザード形式のフォームを考えてみましょう。「住所入力」「確認画面」「完了」といったステップを管理する際、ステート管理ライブラリを使わずにGenerator関数でフローを定義すると、非常に可読性が高まります。
function registrationFlow() {
const profile = yield ‘USER_INFO’;
const address = yield ‘ADDRESS_INFO’;
const confirmation = yield ‘CONFIRM’;
return { …profile, …address, confirmation };
}
このように記述すれば、フォームの遷移順序が関数内に「手続き」として明示されます。外部からnext()を呼び出すたびに次のステップへ進むという設計は、状態の管理を極めてシンプルにします。
なぜ今、改めて注目すべきなのか
最新のフロントエンド開発では、Redux-Sagaのように「副作用を分離して管理する」ための仕組みとしてGenerator関数が活用されてきました。また、最近では大規模なデータ処理や、複雑なアニメーションのシーケンス制御においても、状態の保持と中断・再開を両立できるGenerator関数の特性が再評価されています。
async/awaitは「完了を待つ」ことに特化していますが、Generator関数は「フローそのものを制御する」ことに長けています。ぜひ、次のプロジェクトで「複雑な条件分岐が入り乱れる処理」に出会ったときは、Generator関数によるフロー制御を検討してみてください。コードの見通しが劇的に変わるはずです。