【初心者向け】アロー関数の基本と使い方、書き方を徹底解説

GAS

アロー関数とは、従来関数宣言に使用される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 関数内の thisperson オブジェクトを指すので、this.nameperson.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.nameundefined となり、結果として "Hello, undefined" が表示されます。

たぬき平社員
たぬき平社員

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

きつね部長
きつね部長

(めんどくさくなったんだな…)

まとめ

アロー関数は、従来の function=> で書き換えることで、コードの可読性を向上させるための便利な構文です。

  • シンプルな書き方: 引数が1つなら括弧を省略し、処理が1行なら return と波括弧 {} を省略可能
  • 固定された this: アロー関数では this が定義時のスコープに固定されるため、this の挙動が従来の関数とは異なる。
  • 関数リテラルに便利: 短くて一度だけ使うような関数(関数リテラル)には、アロー関数が適役

アロー関数を上手に使うことで、コードがより短く、読みやすくなり、効率的なプログラミングが可能になります。当記事があなたの参考になれば幸いです。

コメント

タイトルとURLをコピーしました