再帰関数を使ってみよう 板倉 義晃（@ita_3y） @フロントエンドLT会 vol.2 - 2020冬まつり

本日のお品書き 1. 再帰関数 とは（30秒） 2. 再帰関数の例（30秒） 3. 実践1: オブジェクトから不要な値を取り除く（1分〜2分） 4. 実践2: 関数を定期的に実行する（2分） 5. 自己紹介（余った時間） 6. まとめ

再帰関数 とは あるものについて記述する際に、記述しているものそれ自身への参照が、そ の記述中にあらわれることをいう。（Wikipedia） 再帰 とは 再帰呼び出し とは 手続きや関数といった概念をもつプログラミング言語で、ある手続き中で再び その手続き自身を呼び出すこと。（Wikipedia） 再帰関数 とは 再帰的（自分自身を呼び出す）な関数のこと。

再帰関数の例 "There are 3 left." "There are 2 left." "There are 1 left." "Finished." 終了条件が無いと無限ループするの で、なるべく先に書いておく。 再帰呼び出し

実践1: オブジェクトから不要な値を取り除く やりたいこと ・値 が null の場合は undefined を返す ・値 が Array の場合は null を undefined に変換した Array を返す ・値 が Object の場合は 値が null のプロパティを削除した Object を返す

実践1: オブジェクトから不要な値を取り除く ・x が null の場合 　=> undefined を返す ・x が Array の場合 　=> Array の要素毎に removeNull を呼び出し （再帰呼び出し）、結果を返す ・val が Object の場合 　=> 値が null のプロパティ削除後に、値毎に removeNull を呼び出し（再帰呼び出し）、結果を オブジェクトにして返す

実践1: オブジェクトから不要な値を取り除く

実践2: 関数を定期的に実行する setTimeout と setInterval について 指定時間経過後、一度だけ関数を実行します。 setTimeout 各実行の間は指定した間隔で、定期的に関数を実行します。 setInterval 再帰的な setTimeout は実行の間の遅延を保証しますが、 setInterval は保証しません。 setInterval は関数の実行時間がインターバルに含まれるため、実際の遅延は指定時間よりも短 くなります。 再帰的な setTimeout は固定の遅延を保証します。 https://ja.javascript.info/settimeout-setinterval 再帰的な setTimeout と setInterval

実践2: 関数を定期的に実行する ・タイマースタート時 　=> execute を指定して、setTimeout を呼び出 す ・execute 関数実行時 　=> 自身（execute）を指定して、setTimeout を呼 び出す（再帰呼び出し） ・タイマーストップ時 　=> clearTimeout を呼び出して処理をキャンセ ルする https://gist.github.com/negibouze/6a8574432210ea87d6eef2bebcc03712 ※長いので画像は一部抜粋したものです。

自己紹介 ・板倉 義晃（いたくら よしあき） ・Twitter: @ita_3y ・GitHub: negibouze

まとめ ・オブジェクトの探索等、再帰的な処理をしたい時は再帰関数が使えるかも ・再帰呼び出しをする時は、必ず終了条件があることを確認しよう ・等間隔の遅延を入れたい時は setTimeout の再帰呼び出しが良いかも ・JavaScript で再起呼び出しをする時はスタックオーバーフローに注意しよう ご清聴ありがとうございました。 参考: JavaScript・再帰・トランポリン https://qiita.com/41semicolon/items/985bdd2f551d9392463c