Day 4：Arrow Functionで「現代的な関数の書き方」に慣れる
Day 4では、Reactでめちゃくちゃよく登場する Arrow Function（アロー関数） をじっくり見ていきます。 見た目はちょっと独特ですが、慣れてしまうと「もう普通の function には戻れない…」というくらい、書きやすくて便利なスタイルです。
ゴールは 「通常の関数をArrow Functionに書き換えられるようになること」。 そのために、基本構文・引数・戻り値・1行／複数行の書き方・変数への保存まで、順番にかみ砕いていきます。
Arrow Functionとは：短く書ける「モダンな関数の書き方」
Arrow Functionのざっくりイメージ
Arrow Functionは、ES6で追加された「関数を短く書くための新しい記法」です。 =>（矢印）を使って、次のように書きます。
// 通常の関数
function add(a, b) {
return a + b;
}
// Arrow Function版
const addArrow = (a, b) => {
return a + b;
};
console.log(addArrow(3, 5)); // 8
functionキーワードの代わりに=>を使う- 関数そのものを「変数」に代入して使うことが多い
Reactでは、コンポーネント定義やイベントハンドラ、map などのコールバックで、Arrow Functionが頻繁に登場します。
基本構文：通常の関数からArrow Functionへ
通常の関数との対応関係
まずは「通常の関数」と「Arrow Function」の対応を、シンプルな例で見てみます。
// 通常の関数（functionキーワード）
function greet(name) {
console.log("こんにちは、" + name + "さん！");
}
// Arrow Function版
const greetArrow = (name) => {
console.log("こんにちは、" + name + "さん！");
};
// 呼び出し方はどちらも同じです
greet("太郎");
greetArrow("花子");
変わっているところは：
function greet(name) { ... }→const greetArrow = (name) => { ... }- 「関数の名前」ではなく、「変数名」に関数を代入している
Arrow Functionは「関数式」の一種で、関数を値として扱う感覚に慣れていくことが大事です。
引数と戻り値：Arrow Functionでも考え方は同じ
引数の書き方
引数の書き方は、通常の関数とほぼ同じです。
// 1つの引数を受け取るArrow Function
const double = (n) => {
return n * 2;
};
// 2つの引数を受け取るArrow Function
const add = (a, b) => {
return a + b;
};
console.log(double(5)); // 10
console.log(add(3, 7)); // 10
()の中に引数を並べる- 複数ある場合はカンマで区切る
戻り値とreturn
戻り値の考え方も、通常の関数と同じです。 return で値を返すことで、関数の外側でその結果を使うことができます。
// 税込み価格を計算して戻り値として返すArrow Function
const calcTaxIncluded = (price, taxRate) => {
const tax = price * taxRate;
const total = price + tax;
return total; // 戻り値
};
console.log(calcTaxIncluded(1000, 0.1)); // 1100
Arrow Functionでも、「戻り値を返す関数」と「表示だけする関数」を意識して書き分けると、コードが整理しやすくなります。
1行で書く方法：暗黙のreturnでスッキリさせる
「式だけ」のArrow Functionはreturnを省略できる
Arrow Functionの大きな特徴のひとつが、1行で書くときに return を省略できることです。 「1つの式をそのまま返すだけ」の場合、波括弧 {} と return を省略して書けます。
// 通常の書き方（ブロック本体）
const double = (n) => {
return n * 2;
};
// 1行版（式本体）
// n * 2 の結果が「暗黙の戻り値」になります
const doubleShort = (n) => n * 2;
console.log(double(5)); // 10
console.log(doubleShort(5)); // 10
もう少し例を増やしてみます。
// 挨拶文を返すArrow Function
const greet = (name) => `こんにちは、${name}さん！`;
// 年齢が18歳以上かどうかを判定するArrow Function
const isAdult = (age) => age >= 18;
console.log(greet("太郎")); // こんにちは、太郎さん！
console.log(isAdult(20)); // true
console.log(isAdult(15)); // false
- 1行で書くときは「式本体」
- その式の結果が自動的に戻り値になる（暗黙のreturn）
Reactのコードでは、この「1行Arrow Function」が頻繁に登場します。
複数行の処理：ブロック本体で明示的にreturnを書く
複数行のときは波括弧＋returnが必須
処理が1行で収まらない場合は、通常の関数と同じように 波括弧 {} を使ってブロック本体を書きます。 このときは、戻り値を返したいなら 必ず return を書く必要があります。
// ログを出しつつ、合計値を返すArrow Function
const addWithLog = (a, b) => {
console.log("足し算します：" + a + " + " + b);
const result = a + b;
console.log("結果：" + result);
return result; // 明示的に戻り値を返します
};
const value = addWithLog(3, 5); // ログが出て、戻り値が value に入ります
console.log("value:", value); // value: 8
注意ポイント：
const wrong = (a, b) => {
a + b; // これだけでは何も返されません（戻り値は undefined）
};
console.log(wrong(3, 5)); // undefined
- 波括弧
{}を使ったときは、暗黙のreturnは効かない - 戻り値が欲しいなら、必ず
returnを書く
「1行なら return 省略OK」「複数行なら return 必須」という切り替えを、早めに体に染み込ませておくと混乱しにくくなります。
関数を変数に保存：Arrow Functionの基本スタイル
「関数＝値」として扱う
Arrow Functionは、変数に代入して使うのが基本スタイルです。
// 足し算をするArrow Functionを、add という変数に保存します
const add = (a, b) => a + b;
// 偶数判定をするArrow Functionを、isEven という変数に保存します
const isEven = (num) => num % 2 === 0;
// 呼び出し方は「変数名(引数)」
console.log(add(3, 5)); // 8
console.log(isEven(4)); // true
console.log(isEven(5)); // false
- 関数そのものが「値」なので、変数に入れたり、別の関数に渡したりできる
- Reactでは、コンポーネントやイベントハンドラをこういう形で書くことが多い
たとえば、Reactのイベントハンドラはこんな感じになります。
// ボタンがクリックされたときに呼ばれるArrow Function
const handleClick = () => {
console.log("ボタンがクリックされました");
};
// JSXの中で使うイメージ
<button onClick={handleClick}>クリック</button>
「関数を変数に保存しておいて、必要な場所で渡す」という感覚がつかめてくると、Reactのコードがぐっと読みやすくなります。
通常の関数をArrow Functionに書き換える練習テンプレート
ゴールに向けて、「通常の関数 → Arrow Function」への書き換えを、具体的な例で練習してみます。
ステップ1：通常の関数
// 通常の関数で書かれた例
// 1. 足し算
function add(a, b) {
return a + b;
}
// 2. 税込み価格計算
function calcTaxIncluded(price, taxRate) {
const tax = price * taxRate;
const total = price + tax;
return total;
}
// 3. 偶数判定
function isEven(num) {
return num % 2 === 0;
}
ステップ2：Arrow Functionに書き換え
// Arrow Function版
// 1. 足し算（1行で書けるので、暗黙のreturnを使います）
const add = (a, b) => a + b;
// 2. 税込み価格計算（複数行なので、ブロック本体＋return）
const calcTaxIncluded = (price, taxRate) => {
const tax = price * taxRate;
const total = price + tax;
return total;
};
// 3. 偶数判定（1行なので暗黙のreturn）
const isEven = (num) => num % 2 === 0;
ステップ3：呼び出し方は同じ
console.log(add(3, 5)); // 8
console.log(calcTaxIncluded(1000, 0.1)); // 1100
console.log(isEven(4)); // true
書き換えのコツ：
function 関数名(引数) { ... }をconst 関数名 = (引数) => { ... }に変える- 1行で「式を返すだけ」の場合は、波括弧と
returnを省略してconst 関数名 = (引数) => 式;にする
このパターンに慣れてしまえば、ほとんどの通常の関数をArrow Functionにスムーズに書き換えられるようになります。
Day 4のまとめ
- Arrow Functionとは
=>を使って関数を短く書くためのモダンな記法で、Reactで頻出します。 - 基本構文
const 名前 = (引数) => { 処理 }が基本形。関数を変数に保存して使うスタイルです。 - 引数・戻り値 通常の関数と同じ考え方で、
()に引数、returnで戻り値を扱います。 - 1行で書く方法 「式を返すだけ」の場合は、
const fn = (x) => x * 2;のように、波括弧とreturnを省略できます（暗黙のreturn）。 - 複数行の処理 複数行のときは
{}を使い、戻り値が欲しければ必ずreturnを書きます。 - 関数を変数に保存 Arrow Functionは関数を値として扱う前提で、変数に代入しておき、必要な場所で呼び出したり渡したりします。
- ゴール達成のイメージ 通常の
functionで書かれた関数を、const 名前 = (引数) => { ... }やconst 名前 = (引数) => 式;に自然に書き換えられるようになれば、Day 4のゴール達成です。