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
560
Other Decks in Programming
See All in Programming
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
2
820
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
外接に惑わされない自システムの処理時間SLIをOpenTelemetryで実現した話
kotaro7750
0
100
Developer Joy - The New Paradigm
hollycummins
1
370
CSC509 Lecture 06
javiergs
PRO
0
270
Amazon Verified Permissions実践入門 〜Cedar活用とAppSync導入事例/Practical Introduction to Amazon Verified Permissions
fossamagna
2
100
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
4
16k
Go言語はstack overflowの夢を見るか?
logica0419
0
630
Devoxx BE - Local Development in the AI Era
kdubois
0
140
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.2k
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
360
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Balancing Empowerment & Direction
lara
5
700
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Fireside Chat
paigeccino
41
3.7k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
How STYLIGHT went responsive
nonsquared
100
5.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Bash Introduction
62gerente
615
210k
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