【JavaScript入門】関数を定義する

JavaScriptの基本的な内容として、ここでは関数（functions）を扱っていきましょう。

関数はJavaScriptをはじめとしたプログラミングにおいての基本的な概念の一つです。

これまでプログラミングのコードを書いて来ましたが、同じ処理をするコードであっても、その都度書いてきました。この何度も同じようなコードを書くのはとても手間がかかります。

関数を使ってこういったコードをまとめると、何度も書く必要がなくなり、その代わりに関数を利用することでとても見通しがよくなります。

ここでは関数の基本的な使い方を見ていきましょう。

関数を定義する
関数を利用する
まとめ

関数を定義する

関数はfunctionキーワードを使って、次のような形で基本的に定義します。

function 関数名(引数) {
    ...処理コード...
    return 戻り値;
}

このfunction命令に続けて関数名を付け、丸括弧()で引数を指定します。複数必要であれば、カンマ（,）で区切って指定します。引数は仮引数ともいい、関数内部でのみ参照します。続けて波括弧{}でブロックを作り、その中に処理コードを書き、returnキーワードで戻り値を指定します。

変数名の書き方に規則がありましたが、関数名もそれに合うように作ります。関数名はどのような処理をするのか見てわかる単語を組み合わせて名付けます。一般的に「動詞+名詞」の形で命名して、キャメルケース（camelCase）で記述するのが一般的です。

関数を利用する

では実際に簡単なコードで関数を作って実行してみましょう。

function calculateAge(birthYear) {
    return 2019 - birthYear;
}

var ageKatsuo = calculateAge(1990);
var ageWakame = calculateAge(2001);
var ageTara = calculateAge(2005);
console.log(ageKatsuo, ageWakame, ageTara);

2019年の年齢を計算する関数を定義してみました。

関数名をcalculateAge()、引数を誕生年のbirthYearとします。2019年から誕生年を引くと2019年時点での年齢が計算できますので、「2019 – birthYear」をreturnで戻り値にします。

これで関数が定義できました。

関数を実行するには、関数に引数を与えるだけです。ここではそれを変数に格納しています。それをconsole.log()でJavaScriptコンソールで表示してみるとこうなります。

ここでは３名の年齢を計算してみましたが、関数に誕生年を入れるだけで計算できていることがわかります。

関数を使わなければ、それぞれ計算式のコードを書く必要があるので、関数の威力が理解できると思います。

この関数を利用して処理する関数をさらに書いてみましょう。

上のコードの関数定義部分に続けて次のように選挙権があるかどうかを判断する新たな関数を定義してみます。

function calculateAge(birthYear) {
    return 2019 - birthYear;
}

// var ageKatsuo = calculateAge(1990);
// var ageWakame = calculateAge(2001);
// var ageTara = calculateAge(2005);
// console.log(ageKatsuo, ageWakame, ageTara);

function votingRightAge(year, name) {
    var age = calculateAge(year);
    var voting = 18 - age;

    if (voting > 0) {
        console.log(name + 'は選挙権がありません。あと' + voting + '年で投票できます。');
    } else {
        console.log(name + 'は選挙権があります。');
    }

}

VotingRightAge(1990, 'カツオ');
VotingRightAge(2001, 'ワカメ');
VotingRightAge(2005, 'タラ');

冒頭の関数は上で定義したものです。途中の表示処理をコメントアウトしています。

二つ目のfunctionからみていきましょう。関数名をvotingRightAge()とします。選挙権年齢ですね。引数にyear、nameを与え、誕生年と名前を渡すことにします。

波括弧のブロック内では、冒頭の年齢計算の関数を利用して、変数ageに格納しています。選挙権は18歳なので18から年齢であるageを引いて変数votingに渡しています。

続けて、if-else文を使って、このvotingのが０より大きい時とそうでない時で条件分岐させます。votingのが０より大きい時は選挙権はなく、そうでないときは選挙権があるということをconsole.log()で表示する処理を書いています。

これで関数の完成です。この関数に、誕生年と名前を入れて実行しています。

ChromeブラウザのJavaScriptコンソールにはこのように表示されます。