JavaScript ・ 基本構文
() =>
短く書ける関数（アロー関数）
function の代わりに => を使って、関数を短く書く方法です。map() や addEventListener() に渡す小さな関数でよく使います。
01
サンプルコード
JS
1const double = (n) => n * 2;
2const greet = (name) => {
3 return name + 'さん、こんにちは';
4};
5
6console.log(double(21));
7console.log(greet('山田'));
02
実行結果
コンソール
- console.log() の出力がここに表示されます
03
解説
(引数) => { 処理 } の形で関数を作ります。function と書くより短く、配列のメソッドなどに渡す関数を簡潔に書けます。
処理が1つの式だけなら、{ } と return を省略できます。(n) => n * 2 は「n を受け取って n * 2 を返す」という意味です。
引数が1つなら ( ) も省略できます（n => n * 2）。引数がないときは () => と書きます。
04
応用例・注意点
省略の書き方
| 書き方 | 説明 |
|---|---|
() => 処理 | 引数なし |
n => n * 2 | 引数1つ・式1つ（( ) と return を省略） |
(a, b) => a + b | 引数2つ |
() => ({ x: 1 }) | オブジェクトを返すときは ( ) で囲む |
配列の処理に渡す
アロー関数は map() や filter() と組み合わせて使うことが多いです。
JS
1const prices = [480, 550, 620];
2const withTax = prices.map((p) => Math.round(p * 1.1));
3console.log(withTax);
注意点
- 01アロー関数の中の this は、外側の this をそのまま使います。オブジェクトのメソッドに使うときは注意します。
- 02{ } を付けた場合は、値を返すのに return が必要です。