演習で覚えるGenerator Function

この記事の対象者

• JavaScriptのGenerator Functionについてざっくり知りたい人

• 実際に演習問題でGeneratorの使い方を定着させたい人

概要

どんも〜今回は演習ベースでGenerator Functionについて解説します！
3問の演習を通してGenerator Functionが書ける状態を目指します！

Generator Functionについて

Generator Functionの用途ですが、以下の記事が参考になりました！

• 過去に非同期処理で使われていた

• うまく使えばテストしやすい！、速度もはやい！、読みやすい！

【初心者向けかは微妙】JavaScriptの非同期処理の歴史にGeneratorがあったことも忘れないであげてください - Qiita

そんなGenerator Functionを使いこなせるようにトレーニングしましょう！

まずはウォーミングアップです！

問題1

配列dataが存在する時、Generator Functionを用いて配列dataのそれぞれの値を出力してください。

入力例

問題2

次の関数delayは、指定された時間だけ待機し、その後に値を返すPromiseを生成します。

このdelay関数を使用して、以下の条件を満たすGeneratorを作成してください

• 最初に2秒待機し、”開始”という文字列を出力する

• 次に1秒待機し、”中間”という文字列を出力する

• 最後に3秒待機し、”終わり”という文字列を出力する

• 4回以上Generator Functionを呼び出してください

また、終わりと表示された後にGenerator Functionを呼び出しても更新されないようにしてください

問題3

次の配列dataには、ランダムな遅延時間で試してください。

この配列dataの各要素に対して、delay関数を使用して非同期的に処理を行うGenerator Functionを作成してください。具体的には、各要素の値をミリ秒単位の遅延時間として使用し、その後に要素のインデックスを出力してください。

// 例の出力

3
2
4
0
1

まとめ

普段はGenerator Functionをあんまり使ってこなかったからこの機会に整理できてめっちゃ良かった！