JavaScriptのアロー関数とは？コードをシンプルにするためのアロー関数の使い方
アロー関数とはJavaScriptの関数記法の１つで、名前のアロー（arrow：矢印）の通り【=>】という記号を使って関数を定義します。アロー関数を用いることで関数の定義を簡略化し、コードを直感的に、またシンプルにすることができます。本記事では、アロー関数の基本的な使い方や従来の関数記法であるfunctionとの違いを解説します。
目次
１．アロー関数の概要
JavaScriptのアロー関数は、以下のように記述します。
// アロー関数の宣言
(引数1, 引数2, …) => {
// 処理
};
// アロー関数を変数に代入する書き方
const 変数名 = (引数1, 引数2, …) => {
// 処理
};
// 変数に代入した関数を呼び出す
変数名(引数1, 引数2, …);【()】に指定した引数を関数の処理部分【{}】に矢印【=>】で渡す、というような直感的な記述ができるのが特徴です。
１-１．アロー関数の使用例
アロー関数の使用例を以下に示します。
const getTriangleArea = (base, height) => {
return base * height / 2;
};
console.log(‘三角形の面積：’ + getTriangleArea(10, 5)); // 三角形の面積：25base：底辺とheight：高さを渡して面積を返すだけのシンプルな関数です。
上記を従来の関数記法であるfunctionを用いて記述すると以下のようになります。
const getTriangleArea = function(base, height) {
return base * height / 2;
};
console.log(‘三角形の面積：’ + getTriangleArea(10, 5)); // 三角形の面積：25【=>】と【function】以外に違いが無く、あまりアロー関数で記述するメリットがないように思えますが、アロー関数では条件によっては記述を省略することができます。以下で解説します。
１-２．さまざまなアロー関数の書き方
アロー関数では、特定の条件を満たす場合処理部分の【{}】や【return】、引数部分の【()】を省略できます。ここではアロー関数をシンプルに記述するためのルールについて解説します。
１-２-１．処理が1行のみの場合
処理が１行のみの場合、【{}】と【return】を省略することができます。
// 1.1.の例を書き換えた形 const getTriangleArea = (base, height) => base * height / 2; console.log(‘三角形の面積：’ + getTriangleArea(10, 5)); // 三角形の面積：25
【{}】を省略すると【return】が不要となり、コードをシンプルにまとめることができます。
１-２-２．引数が1つのみの場合
引数が1つの場合は、【()】を省略することができます。
const getSquareNumber = num => num * num; const number = 3; console.log(number + ‘の２乗：’ + getSquareNumber(number)); // 3の２乗：9
処理部分の【{}】や【return】、引数部分の【()】を省略しない書き方は以下のようになります。
const getSquareNumber = (num) => {
return num * num;
};
const number = 3;
console.log(number + ‘の２乗：’ + getSquareNumber(number)); // 3の２乗：9コードがかなりシンプルになっていることがわかると思います。
１-２-３．引数がない場合の書き方
引数がない場合は【()】の省略はできないため、【()】を残して記述します。
const displayHelloWorld = () => console.log(‘Hello, world!’); displayHelloWorld();
このようにアロー関数は様々な書き方があり、コードをよりシンプルにまとめることができます。
２．function（従来の無名関数）との違い
アロー関数はfunctionを書き換えるだけのものではなく、いくつか異なる点があります。
２-１．arguments オブジェクトが使用できない
argumentsは関数内でのみ利用できるオブジェクトで、従来のfunctionでは引数の有無に関係なく配列のようにarguments[i]という形で関数に渡された引数を呼び出すことができます。
const getSumNumber = function() {
let result = 0;
for(let i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
};
console.log(getSumNumber(1, 2, 3)); // 6
console.log(getSumNumber(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)); // 55しかし、アロー関数で記述するとエラーとなってしまいます。
const getSumNumber = () => {
let result = 0;
for(let i = 0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
};
console.log(getSumNumber(1, 2, 3)); // Uncaught ReferenceError: arguments is not defined
console.log(getSumNumber(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)); // Uncaught ReferenceError: arguments is not defined２-２．thisを固定化する
アロー関数では関数内で【this】を参照する場合、最初に関数を定義した段階で【this】が参照するオブジェクトが固定化されます。そもそも【this】とは呼び出し元のオブジェクトへの参照を保持したキーワードであり、【this】が記述されたオブジェクトそのものを示します。thisの参照が固定化されるとはどういうことか？まず両者の違いを確認してみましょう。
・従来のfunction
window.param = ‘global param’;
let sampleFunc = function() {
console.log(this.param);
};
let object1 = {
param: ‘object1 param’,
func: sampleFunc
};
let object2 = {
param: ‘object2 param’,
func: sampleFunc
};
sampleFunc(); // global param
object1.func(); // object1 param
object2.func(); // object2 paramsampleFuncという関数の中で【this】が参照されていますが、sampleFuncはwindowオブジェクト内で定義されているため、【this.param】はグローバル変数のparam（window.param = ‘global param’;）を参照します。
しかしobject1とobject2それぞれのfuncとしてsampleFuncを呼び出すことにより、【this】はobject1とobject2それぞれを参照するようになるため、【this.param】が参照する値がそれぞれのオブジェクト内で指定したparamという値を参照するようになります。
・アロー関数
window.param = ‘global param’;
let sampleFunc = () => {
console.log(this.param);
};
let object1 = {
param: ‘object1 param’,
func: sampleFunc
};
let object2 = {
param: ‘object2 param’,
func: sampleFunc
};
sampleFunc(); // global param
object1.func(); // global param
object2.func(); // global param従来のfunctionではそれぞれのオブジェクトを参照していたthisですが、アロー関数内でthisを参照した場合は定義した段階でthisの参照オブジェクトが固定化される（今回の例ではwindowオブジェクトで固定されている）ため、object1やobject2の関数としてsampleFuncを呼び出してもそれぞれのオブジェクトのparamが参照されることはありません。
２-３．コンストラクタとして使用することができない
コンストラクタとは関数を用いて定義されたオブジェクトを指し、newを使ってオブジェクトを生成（インスタンス化）することができるものです。従来のfunctionは以下のようにインスタンス化してオブジェクトを生成することができます。
const Member = function(id, name) {
this.id = id;
this.name = name;
};
const member1 = new Member(1, ‘Amy’);
const member2 = new Member(2, ‘Bob’);
console.log({ id: member1.id, name: member1.name }); // { id: 1, name: ‘Amy’ }
console.log({ id: member2.id, name: member2.name }); // { id: 2, name: ‘Bob’ }しかし、以下のようにアロー関数を用いた場合はインスタンス化をすることができません。
const Member = (id, name) => {
this.id = id;
this.name = name;
};
const member1 = new Member(1, ‘Amy’);
const member2 = new Member(2, ‘Bob’);
console.log({ id: member1.id, name: member1.name }); // Uncaught TypeError: Member is not a constructor
console.log({ id: member2.id, name: member2.name }); // Uncaught TypeError: Member is not a constructor３．まとめ
アロー関数は関数を直感的に、シンプルに書くのに適しています。しかしfunctionを用いた場合と挙動が異なる場面がありますので、状況に合わせて両方を使いこなせるようにしましょう。
コメント