【JavaScript】アロー関数の使い方（基本）

アロー関数とは？

アロー関数は、ES6（ECMAScript 2015）で導入された、簡潔な構文で関数を定義する方法です。従来の関数定義よりも簡潔で読みやすく、特にコールバック関数を扱う際によく利用されます。

以下はアロー関数の基本的な書き方です。

// 引数がない場合
const func1 = () => {
  // 関数の中身
}

// 引数が1つの場合
const func2 = (arg1) => {
  // 関数の中身
}

// 引数が複数ある場合
const func3 = (arg1, arg2, arg3) => {
  // 関数の中身
}

// 引数が1つの場合は()を省略できる
const func4 = arg1 => {
  // 関数の中身
}

// return文のみの場合は{}とreturnを省略できる
const func5 = arg1 => arg1 * 2;

アロー関数の例

// 従来の関数定義
function double(x) {
  return x * 2;
}

// アロー関数による定義
const doubleArrow = x => x * 2;

console.log(double(5)); // 結果：10
console.log(doubleArrow(5)); // 結果：10

上記の例では、double()関数を従来の方法で定義しています。

引数xを受け取り、return文で2倍した値を返します。次に、同じ処理をアロー関数で定義しています。

関数名はdoubleArrowとし、引数xを受け取り、x * 2の式で計算した結果を返すようにしています。console.log()を使用して、それぞれの関数に引数5を渡して実行しています。

結果はどちらも10となります。

引数がない場合、1つの場合、複数ある場合

[rml_read_more]

下記の例では、引数がない場合、1つの場合、複数ある場合のアロー関数を定義しています。

// 引数がない場合のアロー関数
const greet = () => {
  console.log('Hello, world!');
}

// 引数が1つの場合のアロー関数
const sayName = name => {
  console.log(`My name is ${name}.`);
}

// 引数が複数ある場合のアロー関数
const sum = (a, b) => {
  console.log(a + b);
}

greet(); // 結果：Hello, world!
sayName('Alice'); // 結果：My name is Alice.
sum(3, 5); // 結果：8

それぞれの関数内では、console.log()を使用して、文字列や計算結果を表示しています。

greet()関数やsayName()関数では、アロー関数の引数の書き方を見ることができます。引数がない場合は()を使用し、引数が1つの場合は()を省略することができます。

また、sayName()関数では、テンプレートリテラルを使用して、文字列の中に変数を埋め込んでいます。

まとめ

以上がアロー関数の基本的な使い方になります。

アロー関数の中では、従来の関数と同様に引数や変数を使用できます。また、thisの挙動が従来の関数と異なるため、thisを使用する場合には注意が必要です。