Upgrade to Pro — share decks privately, control downloads, hide ads and more …

再帰関数を使ってみよう

 再帰関数を使ってみよう

フロントエンドLT会 vol.2 - 2020冬まつり の LT 用のスライドです。

8eca2a4c2c8c77c5d0000435037f55f1?s=128

Yoshiaki Itakura

December 02, 2020
Tweet

Transcript

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

  2. 本日のお品書き 1. 再帰関数 とは(30秒) 2. 再帰関数の例(30秒) 3. 実践1: オブジェクトから不要な値を取り除く(1分〜2分) 4.

    実践2: 関数を定期的に実行する(2分) 5. 自己紹介(余った時間) 6. まとめ
  3. 再帰関数 とは あるものについて記述する際に、記述しているものそれ自身への参照が、そ の記述中にあらわれることをいう。(Wikipedia) 再帰 とは 再帰呼び出し とは 手続きや関数といった概念をもつプログラミング言語で、ある手続き中で再び その手続き自身を呼び出すこと。(Wikipedia)

    再帰関数 とは 再帰的(自分自身を呼び出す)な関数のこと。
  4. 再帰関数の例 "There are 3 left." "There are 2 left." "There

    are 1 left." "Finished." 終了条件が無いと無限ループするの で、なるべく先に書いておく。 再帰呼び出し
  5. 実践1: オブジェクトから不要な値を取り除く やりたいこと ・値 が null の場合は undefined を返す ・値

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

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

  8. 実践2: 関数を定期的に実行する setTimeout と setInterval について 指定時間経過後、一度だけ関数を実行します。 setTimeout 各実行の間は指定した間隔で、定期的に関数を実行します。 setInterval

    再帰的な setTimeout は実行の間の遅延を保証しますが、 setInterval は保証しません。 setInterval は関数の実行時間がインターバルに含まれるため、実際の遅延は指定時間よりも短 くなります。 再帰的な setTimeout は固定の遅延を保証します。 https://ja.javascript.info/settimeout-setinterval 再帰的な setTimeout と setInterval
  9. 実践2: 関数を定期的に実行する ・タイマースタート時  => execute を指定して、setTimeout を呼び出 す ・execute 関数実行時

     => 自身(execute)を指定して、setTimeout を呼 び出す(再帰呼び出し) ・タイマーストップ時  => clearTimeout を呼び出して処理をキャンセ ルする https://gist.github.com/negibouze/6a8574432210ea87d6eef2bebcc03712 ※長いので画像は一部抜粋したものです。
  10. 自己紹介 ・板倉 義晃(いたくら よしあき) ・Twitter: @ita_3y ・GitHub: negibouze

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

    JavaScript・再帰・トランポリン https://qiita.com/41semicolon/items/985bdd2f551d9392463c