関数とは、プログラムの中で同じような処理を何度も利用したい場合に定義する処理の雛形のことです。
関数の使い方をマスターすれば、いよいよ脱入門者!

JavaScriptでよく見る3つの関数定義方法の違いについても解説します。

JavaScriptのスキルを身につけてWebエンジニアとして活躍したいなら、約15.5万の講座の中から自分に合ったものを探せるこちらのサービスがおすすめです。
習得したいスキルに合わせてプロのエンジニアが解説する動画で効率的な学習ができます!
フロントエンドエンジニアになりたい人の Webプログラミング入門

関数とは

関数(function)は、処理をまとめておきプログラム中の任意の場所で呼び出せるようにするための手段です。
特に大きなプログラムになると、どこに何が書いてあるのかを把握するのが難しくなり、同じような処理を何度も記述することになったりします。
そこで処理を関数化し、プログラムが煩雑になったり、繰り返し同じような処理を記述することを防ぎます

大きな問題を解決するプログラムを組むには、それを小さな問題に分割して個別に解決していくという方針が有効です。
このような手法を分割統治といいます。

分割統治の考え方を実現するという意味でも、プログラミングにおいて関数の知識は必須となるのです!

ついでにJavaScriptでは関数はオブジェクトとして扱われる、ということも覚えておくと便利です。

最初に関数を定義しておく必要があり、定義された関数はプログラムの中から呼び出せるようになります。

関数が担う仕事は、入力を受け取り、何らかの処理を行い、出力を返す、の3つです。
関数には名前があり、処理の内容を表現するような名前をつけることが一般的です。

引数とは関数に対して与える入力のことで、引数に応じてその関数の出力が変化します。
関数によっては引数がないものや複数あるもの、任意で指定できる引数を持つものなどがあります。

関数が行う処理は様々で、関数を利用するときはその処理の内容はブラックボックスとなっています。

戻り値とは関数が返す出力のことです。
定義された処理を行うだけで戻り値を持たない関数もあります。

先述した通り、関数の処理はブラックボックスになっているので、その関数を使うことでどのような結果が得られるのかは実装者が把握しておく必要があります。
JavaScriptで標準で利用できる関数を利用する際は、その処理内容や出力結果をよく調べてから使うようにしましょう。
また、自分で関数を実装する際は、どのような処理を行う関数なのかすぐにわかる名前をつけるなど工夫するようにしましょう。

関数の呼び出し

まずは関数の使用方法(関数呼び出し)について見ていきます。

JavaScriptでは、すでに実装されている様々な関数を利用することができます。
関数を呼び出すには、その関数の名前を記述しその後ろに丸括弧を付け、この丸括弧の中には引数のリストを渡します。

関数名(引数1, 引数2, ...);

例えば、次の関数では引数に指定した値をコンソールに出力するという処理を行います。
正確にはconsoleオブジェクトの中にあるlog関数(メソッド)という扱いになります。

console.log('Hello, World!');

本気でWebエンジニアを目指すなら、現役で活躍する講師の現場で使える技術を学べるこちらの講座がおすすめです。
コミュニティマネージャーとの面談から理想のキャリアと現状に合わせた、自分専用のコースを組み立てることができます。
まずは無料のWeb説明会に参加してみましょう!
ゼロから人気のWebスキルを学ぶなら【Cucua】

関数の定義

続いて関数を自作する方法(関数の定義)について見ていきます。

JavaScriptでは用意されている関数以外にも、自分で関数を作成して利用することができます。
関数を定義する際は関数内で使用したい引数、実際の処理内容、関数が返す戻り値を決める必要があります。

関数を定義する際に、関数内部で使用したい引数に名前を付けて用意したもの仮引数といいます。
これに対して関数を呼び出す際の実際の引数実引数と呼ぶこともあります。
仮引数や戻り値は、必要なければ用意しなくても構いません。

関数を定義する方法はいくつかあり、状況によって使い分けます。

関数宣言

最も基本的な関数の定義方法は、関数宣言です。

最初にfunctionと記述して宣言を行い、関数名を記述して、関数内で利用したい仮引数を列挙します。
処理内容は{}で囲ってブロック化し、最後にreturnで戻り値を指定します。

function 関数名(仮引数1, 仮引数2, ...)
{
    // 処理

    return 戻り値;
}

関数を宣言するタイミングは、関数を呼び出す前でも後でも問題ありません。
このようにプログラムの後方で宣言されている関数を、それよりも前方で利用することを関数の巻き上げといいます。

以下は関数宣言の例です。
自分で宣言した関数は、JavaScriptで標準で利用できる関数と同様に呼び出すことができます。

// Helloという文字列をコンソールに出力する関数
function console_hello()
{
    console.log('Hello.');
}

// 引数として受け取った2つの数値を足した値を返す関数
function add_numbers(x, y)
{
    sum = x + y;
    return sum;
}

関数式

関数式は関数を定義する書き方のひとつで、 変数に関数を代入するようなイメージです。
関数宣言と細かい違いはありますが、基本的にはどちらを使っても問題ないです。
複雑で大きい関数を作りたい場合にはパフォーマンスに多少差が出ることはあります。

関数式の特徴として、関数の機能自体に名前がついているわけではなく、代入した変数名を名前として用いることが挙げられます。
つまり関数自体は無名関数として宣言できるということです(関数式でも関数に名前を付けることはできます)。

関数を変数に代入しているため、他の関数(高級関数)の引数として渡したり戻り値として関数式を返したりといった使い方もあります。

let 関数名 = function(仮引数1, 仮引数2, ...)
{
    // 処理

    return 戻り値;
};

関数式では関数式を宣言するよりも前に関数を呼び出そうとするとエラーとなる(巻き上げされない)点は注意です。
また、関数式の末尾にはセミコロンが必要なことにも気をつけましょう。

ちなみにこのような記述ができるのは、最初に言ったように関数がオブジェクトとして扱われているからです。

関数式の定義例を以下に示します。

let add_numbers = function(x, y)
{
    return x + y;
};

アロー関数

アロー関数関数式の短縮記法です。
関数名の指定はできず、functionキーワードも省略されています。

よりシンプルな記法になっており、プログラム全体の記述量を減らすことができます。
こちらは内部的な動作改善も行われている比較的新しい記法なので、積極的に使用していくのが良いでしょう。

let 関数名 = (仮引数1, 仮引数2, ...) => {
     // 処理

    return 戻り値;
}

プログラミングでわからないことがあったら、その道のプロに質問するのが一番!
現役で活躍中のエンジニアと繋がって、効率的にWeb開発のスキルを身につけましょう。
プログラミング学習のスキルプラットフォーム【MENTA】

再帰的な関数

再帰的な関数とは、関数の中でその関数自体を呼び出すようなもののことです。
このような処理を再帰呼び出しといい、多段階的に繰り返し自身を実行していくようなイメージとなります。

単純に再帰呼び出しを繰り返すと、永遠と処理が終わらない関数になってしまうため、条件(ベースケース)を設けて打ち切る必要があります。
そのため、以下のような形式で実装するのが基本となっています。

function func(引数1, 引数2, ...)
{
    if( ベースケース )
    {
        return ベースケースに対する値;
    }

    // 再帰呼び出し
    func(引数リスト);
    return 結果;
}

フィボナッチ数列

このような再帰関数を利用する例としてフィボナッチ数列を求める関数があります。
フィボナッチ数列とは0番目と1番目の項が1で、N番目の項(N = 2, 3, 4…)がその直前の2項の和になるような数列です。

1 1 2 3 5 8 13 21 34 55 89 144 233 ...

フィボナッチ数列のN番目の項を求める関数をJavaScriptで実装すると以下のようなコードになります。

function fibo(n)
{
    // ベースケース
    if ( n === 0 ) return 1;
    else if ( n === 1 ) return 1;

    // 再帰呼び出し
    return fibo(n - 1) + fibo(n - 2);
}

ただしこのプログラムは算量の観点からあまり効率の良いものとは言えません
実際にnに大きな値を入れて実行してみると相当な時間がかかってしまうことがわかるでしょう。
興味のある方はより効果的なアルゴリズム(メモ化など)についても調べてみてください。

まとめ

JavaScriptで関数を呼び出す方法と、関数を定義する方法について紹介してきました。
最初は関数を使うタイミングがわからないかもしれませんが、積極的にプログラムを関数化していくようにしましょう。

ひとりではなかなかプログラミングの学習が続かない、未経験だから不安が多い、という方はプログラミングスクールを利用してみるのも有効です。
本物のエンジニアに学ぶことで、時間がない方でも最短でスキルを身につけることができます。
現役エンジニアのパーソナルメンターからマンツーマンで学べる

お悩みの方は、まずは無料キャリアカウンセリングにお申込みください。

関連記事

この記事のタグ