yieldは「一時停止ボタン」のような存在
皆さんは、プログラミングをしていて「この処理、一度止めてから続きはまた今度やりたいな」と思ったことはありませんか？通常の関数は、呼び出されると最初から最後まで一気に駆け抜けて終わります。しかし、JavaScriptのyield（イールド）というキーワードを使うと、関数の実行を途中で「一時停止」させることができるのです。これは「ジェネレーター関数」という特別な関数の中だけで使える魔法のような仕組みです。
なぜ一時停止できると嬉しいのか？
例えば、Webサイトで「無限スクロール」を実装する場面を想像してください。ユーザーがページを下にスクロールするたびに、少しずつデータを読み込んで表示させたいですよね。一度に1000件のデータを全て読み込むとブラウザが重くなってしまいます。そんな時、yieldを使えば「必要な分だけデータを取得して、続きはまたスクロールされた時に」という制御が非常にスマートに書けます。メモリを節約しながら、必要なタイミングで必要な分だけ処理を動かすという、効率的なプログラムを作るための強力な武器になるのです。
簡単な書き方を見てみよう
ジェネレーター関数を作るには、関数名の前にアスタリスク（）を付けます。そして、止めたい場所にyieldを書くだけです。
function myGenerator() {
yield ‘こんにちは’;
yield ‘JavaScriptの世界へ’;
yield ‘ようこそ！’;
}
const iterator = myGenerator();
console.log(iterator.next().value); // こんにちは
console.log(iterator.next().value); // JavaScriptの世界へ
console.log(iterator.next().value); // ようこそ！
このように、next()というメソッドを呼ぶたびに、yieldで指定した値が一つずつ返ってきます。
初心者が押さえておくべきポイント
最初は難しく感じるかもしれませんが、「処理を小分けにするためのリレーのバトン」だとイメージしてみてください。一気にゴールまで走るのではなく、途中で誰かにバトンを渡して待機するイメージです。この考え方を身につけると、非同期処理（データの取得など）を扱う際に、非常に読みやすく、メンテナンスしやすいコードを書けるようになります。まずは小さな関数で、yieldを使って自分の好きなタイミングで処理を進める練習から始めてみてくださいね。