icon
icon

JavaScriptで再帰処理を行う方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで再帰処理を行う方法について現役エンジニアが解説しています。再帰処理とは、ある処理の中で再び自身の処理をを呼び出すような処理のことを言います。フィボナッチ数列をサンプルにJavaScriptで再帰処理を行う方法を解説します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

JavaScriptで再帰処理を行う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで再帰処理を行う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

再帰処理とは

再帰処理とは、ある処理について、その処理の中で自身を呼び出すような処理のことを言います。

再帰処理のサンプルと解説

再帰処理のサンプルとしてフィボナッチ数列を取り上げてみます。フィボナッチ数列から引数で指定した位置の数字を取得する関数を考えます。まず、フィボナッチ数列がどのような数列であったかと言うと、

[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ...]

JavaScriptの配列に見立てて最初の0を0番目と考えることにします。例えば、6番目の8という値は、4番目の3と5番目の5を足した数になっています。

なので、次のような式が成り立ちます。

F(0) = 0 (n = 0)

F(1) = 1 (n = 1)

F(n) = F(n-2) + F(n-1) (n >= 2)

これを、JavaScriptの関数として記述してみます。

const f = n => n < 2 ? n : f(n-2) + f(n-1)

試しにコンソールに出力して確認しましょう。

for (let i = 0 ; i <= 10 ; i++) {
  console.log(f(i))
}

関数fは、その処理の中で自身である関数fを呼び出しています。つまり、この関数は再帰処理をしています。

[PR] コーディングで副業する方法とは

再帰処理の注意点

再帰処理には注意点があります。それは、実装の仕方によっては、永遠にループして処理が終わらなくなってしまう場合があることです。フィボナッチ数列の例で言えば、実は

F(0) = 0 (n = 0)

F(1) = 1 (n = 1)

の2つの式を外すと、その現象を再現することができます。先程の関数fを、2つの式を除外した形に変えてみます。

const f = n => f(n-2) + f(n-1)

この状態にして、コンソールに出力する処理を再び実行すると

「Uncaught RangeError: Maximum call stack size exceeded」

というエラーになります。関数fが永遠に値を返さないためです。

試しにnに2を代入してみましょう。期待する結果、戻り値は1です。

n=2のとき、関数fの戻り値はf(0) + f(1)となります。f(0)の戻り値はf(-2) + f(-1) で、f(1)の戻り値はf(-1) + f(0)です。

以下、同じことを繰り返すことになります。再帰処理を実装する際には、無限ループに陥らないように気を付けましょう。

筆者プロフィール

メンター久保田さん

Webシステム開発が中心のシステムエンジニア。

HTML、CSS、JavaScript(React、Vue.js)、PHP、Javaが守備範囲。最初に選ぶポケモンは炎タイプ。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。