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

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

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

 

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

 

 

再帰処理とは

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

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

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

[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サービス公開を習得できる、オンラインブートキャンプを開催しています。

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