アロー関数とは、従来関数宣言に使用されるfunction
の代わりに =>
で関数定義する関数です。アローの名前の通り矢印の記号を用いて記述します。アロー関数を使うとfunction
よりもコードが短くなるというメリットがあります。

アローは英語で矢印の意味です
functionを => で記述するのがアロー関数
アロー関数を使った一例をご説明します。
function greet(name) {
return "こんにちは、" + name + "さん";
}
上記をアロー関数化すると次のようになります。
const greet = name => "こんにちは、" + name + "さん";
アロー関数化するとコードがシンプルになり可読性がよくなりました。アロー関数の記述方法にはいくつか決まり事があり、場合によっては上記のように1行に処理をまとめられます。次で詳しく説明します。
アロー関数の書き方
アロー関数は条件によって短縮できる部分とできない部分があります。まずは基本的なアロー関数の記述方法についてご紹介します。
基本的な記述方法
アロー関数の基本的な記述方法は下記です。
関数名 = (引数1, 引数2, ...) => {
関数の処理;
};
const greet = (name) => {
return "こんにちは、" + name + "さん";
};
functionの代わりに=>で記述されています。
引数が1つだけの場合
引数が1つだけの場合、括弧を省略することができます。
const greet = name => {
return "こんにちは、" + name + "さん";
};
//省略しなくてもOK
const greet = (name) => {
return "こんにちは、" + name + "さん";
};
1行の処理で済む場合
関数の処理が1行で終わる場合、return
と波括弧 {}
を省略できます。
const greet = name => "こんにちは、" + name + "さん";
通常の関数では、計算や処理の結果を外に返すためにreturn
を使います。アロー関数は、波括弧 {}
を使わなければその1行が自動的に返されるようになっているのでreturn
の記述を省くことができるのです。結果としてさらにコードを短くできます。
引数がない場合
引数がない場合は、括弧を空にします。
const greet = () => "こんにちは、世界";
複数の引数がある場合
引数が複数ある場合は、通常通り括弧で括ります。
const add = (a, b) => a + b;
上記のようにアロー関数はコードが短縮できるので可読性を向上させます。GASで使用する場合、入れ子関数のときに使用されることが多いです。
アロー関数は関数リテラルに使用される
アロー関数は関数リテラルに使用されることが多いです。関数リテラルは無名関数とも呼ばれ、名前を持たない関数のことです。
function doubleNumbers() {
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(n) {
return n * 2;
});
Logger.log(doubled); // [2, 4, 6, 8, 10]がログに表示
}
上記のコードでは、2回目のfunction(n)
が関数リテラルです。1回目の関数はdoubleNumbers
という命名がされていますが、2回目は名前がなく引数だけを渡しています。
上記のコードは配列の要素をそれぞれ2倍にする機能を持っています。それではこのコードをアロー関数化してみましょう。
function doubleNumbers() {
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(n => n * 2);
Logger.log(doubled); // [2, 4, 6, 8, 10]がログに表示
}

わざわざ名前をつけるような関数じゃないときにアロー関数や関数リテラルも使うってことか!

アロー関数も関数リテラル(無名関数)の一種です、最初は関数リテラルをさらに短くするときにアロー関数を使うと考えておけばいいでしょう
アロー関数ではthisの挙動が変わる

最後にひとつだけ、アロー関数で this
を使用する場合、従来の関数と挙動が異なるので注意してください
通常の関数では、this
は「その関数が呼び出されたオブジェクト」を指しますが、アロー関数では this
はその関数が定義されたスコープの this
を継承し、そのスコープの this
が使用されるためです。
次で詳しく説明します。
従来のthisの挙動
通常の関数では、this
は「その関数を呼び出したオブジェクト」を指します。
const person = {
name: "たぬき",
greet: function() {
console.log("Hello, " + this.name);
}
};
person.greet(); // "Hello, たぬき"
greet
関数内の this
は person
オブジェクトを指すので、this.name
は person.name
の “たぬき” を指し、結果として "Hello, たぬき"
が表示されます。
アロー関数のthis
アロー関数では、this
は「アロー関数が定義されたスコープの this
」をそのまま使う性質があります。
const person = {
name: "たぬき",
greet: () => {
console.log("Hello, " + this.name);
}
};
person.greet(); // "Hello, undefined"
この場合、アロー関数内の this
は、person
よりも外側のスコープ、つまりグローバルスコープ(ブラウザでは window
、Node.js では global
)を指します。
そのため、this.name
は undefined
となり、結果として "Hello, undefined"
が表示されます。

thisについてはまたの機会に詳しく

(めんどくさくなったんだな…)
まとめ
アロー関数は、従来の function
を =>
で書き換えることで、コードの可読性を向上させるための便利な構文です。
- シンプルな書き方: 引数が1つなら括弧を省略し、処理が1行なら
return
と波括弧{}
を省略可能 - 固定された
this
: アロー関数ではthis
が定義時のスコープに固定されるため、this
の挙動が従来の関数とは異なる。 - 関数リテラルに便利: 短くて一度だけ使うような関数(関数リテラル)には、アロー関数が適役
アロー関数を上手に使うことで、コードがより短く、読みやすくなり、効率的なプログラミングが可能になります。当記事があなたの参考になれば幸いです。
コメント