Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
再帰関数を使ってみよう
Search
Yoshiaki Itakura
December 02, 2020
Programming
1
6.2k
再帰関数を使ってみよう
フロントエンドLT会 vol.2 - 2020冬まつり
の LT 用のスライドです。
Yoshiaki Itakura
December 02, 2020
Tweet
Share
More Decks by Yoshiaki Itakura
See All by Yoshiaki Itakura
Elementをさくっと拡張したい - @【ラクスル×KCF】FrontendNight
negibouze
0
550
Other Decks in Programming
See All in Programming
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
testingを眺める
matumoto
1
140
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
520
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
RDoc meets YARD
okuramasafumi
4
170
AIでLINEスタンプを作ってみた
eycjur
1
230
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
為你自己學 Python - 冷知識篇
eddie
1
350
OSS開発者という働き方
andpad
5
1.7k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
1から理解するWeb Push
dora1998
7
1.9k
Featured
See All Featured
KATA
mclloyd
32
14k
Context Engineering - Making Every Token Count
addyosmani
3
58
Fireside Chat
paigeccino
39
3.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Done Done
chrislema
185
16k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
What's in a price? How to price your products and services
michaelherold
246
12k
Producing Creativity
orderedlist
PRO
347
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Transcript
再帰関数を使ってみよう 板倉 義晃(@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