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.1k
再帰関数を使ってみよう
フロントエンド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
NEWT Backend Evolution
xpromx
1
140
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
120
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
920
型で語るカタ
irof
0
760
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
テスト駆動Kaggle
isax1015
1
850
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
760
可変変数との向き合い方 $$変数名が踊り出す$$ / php conference Variable variables
gunji
0
210
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
1
330
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
220
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
16
5.8k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Site-Speed That Sticks
csswizardry
10
710
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Raft: Consensus for Rubyists
vanstee
140
7k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Unsuck your backbone
ammeep
671
58k
Typedesign – Prime Four
hannesfritz
42
2.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Automating Front-end Workflow
addyosmani
1370
200k
It's Worth the Effort
3n
185
28k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
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