第10回 関数の基本的な取り扱い方：TypeScriptで学ぶJavaScript入門（4/5 ページ）

プログラミング初心者向けのTypeScript入門連載。第10回は関数の基本的な使い方について詳しく解説する。TypeScriptでプログラミングへの理解を一歩深めよう。

[羽山博，著]

簡単な関数の書き方（その3：アロー関数式を使う）

　三つ目の書き方は、アロー関数式あるいはラムダ式と呼ばれる簡潔な書き方だ。前の書き方を簡潔にして、「(引数のリスト) : 戻り値の型 => { 関数の処理 };」のような形式で書く。先ほどの関数を書き換えてみよう。

var add2 = (x: number, y: number): number => {
  return x + y;
};
var answer: number = add2(10, 20);
alert(answer);
window.close();

アロー関数式を使って関数を定義する例（TypeScript）

　以下の図で書き方を確認しておこう。

図8　関数の書き方（その3）
引数のリストと戻り値の型を書き、「=>」の後に関数の本体を書く。何を与えれば何が返されるかが直感的に分かる書き方になっている

　戻り値が簡単な式の場合は、さらに簡略化できる。「=>」の後に、戻り値を直接書けばよい。上の例をさらに書き換えてみよう。

var add2 = (x: number, y: number): number => x + y;
var answer: number = add2(10, 20);
alert(answer);
window.close();

アロー関数式を使ってより簡潔に関数を定義する例（TypeScript）

　これは、特に図解するまでもないだろう。いきなりこの書き方を見ると面食らってしまう人もいるかもしれないが、これまでの書き方を順にたどってくると、実感を持って理解できるのではないだろうか。

一つの関数で複数の戻り値を返す方法

　これまでに示したいずれの関数の書き方でも、戻り値は一つしか指定できないように思われるかもしれない。実際、書き方としては一つしか指定できないのだが、戻り値にオブジェクトを指定すれば、複数の値をまとめて返せる。以下の例は、割り算の商と余りを返す関数div2を定義して、利用するプログラムである。例えば、20÷8＝2…4なので、関数div2に引数として「20」と「8」を与えると、割り算の商の「2」と余りの「4」が返される。

function div2(x: number, y: number) {
  var q: number = Math.floor(x / y);
  var r: number = x - q * y;
  return { quotient: q, reminder: r }  // （1）
};
var result = div2(20, 8);  // （2）
alert("商は" + result.quotient + "、余りは" + result.reminder);
window.close();

複数の値を返す関数（TypeScript）

　戻り値のデータ型は複雑になるので、宣言に含めずに型推測を使っている。ポイントとなるのは、（1）の戻り値の指定の部分。{ }の中に「プロパティ名: 値」をカンマで区切っていくつか書いてあることに注目しよう。これを見ると、quotientプロパティ（商を表す）の値はqの値となり、reminderプロパティ（余りを表す）の値はrの値となることが分かる。

　（2）ではdiv2関数を呼び出し、戻り値を変数resultに代入している。これで、変数resultが、戻り値のオブジェクトを参照するようになるので、result.quotitentで商が得られ、result.reminderで余りが得られる。

　なお、この例では、除数が0である場合にエラーとなることを考慮していない。また、小数を指定すると誤差が生じることがある。

　実行結果は以下の通り。

図9　複数の戻り値を返す関数を利用したプログラムの実行例
二つの数値を与えて、商と余りを求める関数の実行結果。複数の値がまとめて返されたことが分かる。

　除数や被除数に負の値や小数がある場合の商と余りの求め方にはいろいろな方法があるが、ここでは、商を「被除数÷除数の結果を切り下げた値」とし、余りを「被除数−商×除数」としている。例えば、−20.4÷8.3を普通に計算すると、−2.4578...になるが、この結果を切り下げると−3になる。余りは、−20.4−（−3）×8.3なので、4.5となる。この余りはExcelのMOD関数で求められる結果と同じである。ただし、この方法でも小数点以下には誤差が出ることに注意。

　ところで、ここでは、最初に紹介した関数宣言を使って関数を定義したが、もちろん、アロー関数式を使うこともできる。アロー関数式を使った書き方がどのようなものになるかは練習問題としておこう。答えは以下のURLから見られるが、ぜひ自分で試してみてほしい。URLで示されるプログラムでは除数が0の場合も考慮し、0で割り算をしようとすると関数div2が「{NaN, NaN}」というオブジェクトを返すので、それにより、エラーメッセージを表示するものにしておいた（「NaN」は「Not a Number」を意味する値で、この場合は除数に0を与えたために、商も余りも適正な値になっていないことを示すために使っている）。

• 除数が0である場合を考慮して、商と余りを返す関数（アロー関数式を使用したバージョン）