JavaScript 基礎 第6回 『関数の使い方について学ぼう』

前回学習した条件分岐と今回解説する「関数」は JavaScript のプログラミングでは非常に重要な概念です。この章で関数とその使い方についてしっかり理解していきましょう。

関数とは

関数とは、複数の命令を一度にまとめて呼び出すことができる仕組みです。
関数を使うことでプログラミングを大幅に効率化することができます。

関数を使うメリット

関数を用いる大きなメリットは以下の2点です。

・プログラムを効率的に書くことができ、見やすく作成できること
・同じプログラムを再利用できること

関数は複数の命令を1つの定義にまとめることができるため、プログラムを効率的に記述できるだけでなく、プログラムの見やすさも向上します。
また、関数は何度でも呼び出すことができ、記述を簡略化できると同時に、もし修正が発生した場合も1つの関数の修正を行うだけで対応することができる点も関数を使うメリットの一つです。

関数の書き方

ではさっそく関数の書き方について学んでいきましょう。
関数はfunctionというキーワードを使って定義します。

■関数の構文

function ●関数名● (●引数1●,●引数2●) {
  ●処理の内容●
  return ●戻り値●;
}

このように、functionの後に関数名を定義し、ブロック内（{}の中）に実行したい処理を記述します。これによって関数名を読み出すだけでブロック内の処理を実行できるようになります。
関数を使うには「引数」と「戻り値」について理解する必要があります。

let ●変数名● = function (●引数1●, ●引数2●, …) {
  ●行いたい処理●
  return ●戻り値●;
};

引数、戻り値

関数は関数の呼び出し側と、引数と戻り値という2つの値でやり取りします。

「引数」とは、関数を呼び出す際に関数側に渡す値を指し、文字列や数値など、関数に渡したいデータがある場合は引数を設定します。
また、引数はカンマ（,）区切りで複数指定することが可能です（上述の「■関数の構文」参照）。

一方、「戻り値」とは、呼び出し元に渡す、関数の処理結果の値です。
下記の例にあるreturnは関数の終了を示すキーワードで、関数の呼び出し元に返す値を指定しています。
なお、returnがない場合は戻り値は「undefined（未定義）」となり、関数が終了します。

■例1. hello関数

let yourname = prompt('あなたの名前は？');
hello(yourname);

function hello(yourname) {
  let message = 'こんにちは';
  alert(message + '、' + yourname + 'さん');
  return;
}

例1では、helloという関数を呼び出しており、その際「yourname」という引数を渡しています。「yourname」は変数なので、1行目の「あなたの名前は？」の解答が「yourname」に格納され、その値がhello関数に引き渡される、という流れとなります。

下図のように「Taro」という引数を渡してhello関数の処理が実行された場合は、「こんにちは、Taroさん」という戻り値が呼び出し元に引き渡されるのです。

デフォルト引数

本項では関数を呼び出す側からの値を関数が受け取る仕組みとして引数を紹介しました。
では、引数が必要な関数を引数なしで実行するとどうなるのでしょうか？

例えば、先ほどの例1のhello関数を引数の指定なしで呼び出すと、引数「yourname」が「undefined（未定義）」となり、「こんにちは、undefinedさん」と表示されてしまいます。

■例2. 引数を指定せずに例1のhello関数を呼び出した場合

function hello(yourname) {
  let message = 'こんにちは';
  alert(message + '、' + yourname + 'さん');
  return;
}

hello();　//引数なしでhello関数を呼び出す

このように、引数の指定がないと思わぬエラーや不具合の原因に繋がりかねません。
こうしたケースに備えて、引数が省略された場合の値を予め指定しておくことが可能です。この引数をデフォルト引数といいます。
デフォルト引数の書き方は以下のとおりです。

■デフォルト引数

function ●関数名●( ●引数1● = '●デフォルト値1●', ●引数2● = '●デフォルト値2●' ) {
  ●実行する処理●
}

デフォルト引数を使って例1のhello関数を記述すると以下のようになります。

■例3. hello関数にデフォルト引数を適用した場合

function hello(yourname = 'Hanako') {　//デフォルト引数として「hanako」を指定
  let message = 'こんにちは';
  alert(message + '、' + yourname + 'さん');
  return;
}

hello(); //引数なしでhello関数を呼び出す

デフォルト引数に「Hanako」を指定することで、引数「yourname」の値がない場合では「Hanako」という値が渡されるようになり、引数の指定がないまま関数を実行しても不具合やエラーを回避することができます。

このように、デフォルト引数を指定することで引数の指定が必須ではなくなり、必要な場合のみ引数を渡せばよいので、より柔軟かつ利便性の高い関数を設定することができるようになるのです。

関数と変数の有効範囲

最後に、関数と変数の有効範囲について説明します。
関数の中で宣言した変数はその関数内でしか利用することができません。

■例4. 変数messageをhello関数の外で使用した場合

function hello(yourname = 'Hanako') {
  let message = 'こんにちは';                 //変数messageをhello関数内で宣言
  alert(message + '、' + yourname + 'さん');
  return;
}

console.log(message);　　　　　　　　　　　　　 //変数messageをhello関数の外で利用

例4のように関数内で定義した変数を関数の外で利用しようとすると、「messageが定義されていない」というエラーメッセージが表示されてしまいます。つまり変数messageはhello関数内でしか利用できないということになります。
例4では「let」で変数を宣言していますが、「var」や「const」で宣言した場合も同様のエラーが表示されます。

なお、関数の外で宣言した変数に関しては、関数内でも使用することが可能です。

let message = 'さようなら'       //関数の外側で変数messageを宣言
function hello() {
  let message = 'こんにちは';    //関数の内側で変数messageが重複
  alert(message);
  return;
}

console.log(message);           //'さようなら'と表示される
hello();                        //'こんにちは'と表示される

まとめ

さて、この章では「関数」について解説してきました。
関数を使えば行われる処理の記述が大幅に効率化されることがお判りいただけたかと思います。
関数は「引数」と「戻り値」の考え方さえ理解できれば簡単に使うことができ、プログラミングの世界での使用頻度も非常に高いため、この章できちんと押さえておきましょう。