モダンJavaScriptの基礎から始める挫折しないためのReact入門 60日コース | モダンJavaScript基礎 － DAY 4：Arrow Function（アロー関数）

React 60日で身につけるReact
2026.08.20
スポンサーリンク
スポンサーリンク
  1. DAY 4：Arrow Function 前半 ― 「そもそも何者か」をつかむ
  2. Arrow Functionとは何か
    1. 関数の“新しい書き方”だと理解する
  3. 基本構文をテンプレートで覚える
    1. まずは“型”を覚えてしまう
    2. 例：挨拶を表示する関数
  4. 引数の基本イメージ（前半の段階で押さえておくこと）
    1. 丸括弧の中に“外から渡したい値”を書く
    2. 引数がない場合の書き方
  5. 戻り値の基本イメージ（“結果を返す出口”）
    1. returnで「結果を外に渡す」
    2. 戻り値がない関数との違い
  6. 1行で書くための“予告”としてのイメージ
  7. 関数を変数に保存する感覚（前半のゴール）
    1. 「関数＝値」として扱う世界への入り口
  8. 前半のまとめと、中盤・後半へのつながり
  9. DAY 4：Arrow Function 中盤 ― 「使いこなすための核心部分」
  10. Arrow Functionと基本構文の再確認（中盤の土台）
    1. 従来のfunctionとの対応を頭に置いたまま進める
  11. 引数：丸括弧のルールと「1つだけのときの省略」
    1. 基本：丸括弧の中に引数を書く
    2. 引数が1つだけのときの省略ルール
  12. 戻り値：returnと「結果を返す関数」の考え方
    1. 複数行の処理ではreturnを書くのが基本
    2. 戻り値がない関数との違い
  13. 1行で書く方法：暗黙のreturnという“必殺技”
    1. 1行Arrow Functionの基本形
    2. 1行Arrow Functionのテンプレート
    3. 配列操作と1行Arrow Function
  14. 関数を変数に保存する：Arrow Functionの“標準スタイル”
    1. 関数＝値として扱う感覚を固める
  15. 中盤のまとめと、前半・後半とのつながり
  16. DAY 4：Arrow Function 後半 ― 「実務で使える形」に仕上げる
  17. 前半・中盤の復習から後半への橋渡し
    1. 前半で押さえたこと（ざっくり）
    2. 中盤で押さえたこと（ざっくり）
  18. 複数行の処理：Arrow Functionで“ちゃんとしたロジック”を書く
    1. 複数行のArrow Functionの基本形
    2. 暗黙のreturnとの違いを意識する
  19. 関数を変数に保存する：再利用と安全性の視点
    1. 関数を“名前付きの部品”として扱う
    2. 再利用のメリット
  20. Reactコンポーネント内でのArrow Functionの使い方
    1. イベントハンドラとしてのArrow Function
    2. 配列とArrow Function（Reactでの典型パターン）
  21. セキュリティ・安全性の観点からの一言
  22. DAY 4（後半）のまとめ ― Arrow Functionを「Reactの武器」にする

DAY 4：Arrow Function 前半 ― 「そもそも何者か」をつかむ

DAY 4では、Reactで非常によく使われる Arrow Function（アロー関数） を扱います。 前半では、「Arrow Functionとは何か」「基本構文」「引数と戻り値のイメージ」を、従来の function と比較しながら、プログラミング初心者向けにかみ砕いて説明していきます。

Arrow Functionとは何か

関数の“新しい書き方”だと理解する

まず押さえてほしいのは、Arrow Functionは 「新しい種類の関数」ではなく、“関数の新しい書き方” だということです。 やっていることは従来の関数と同じですが、書き方がコンパクトで、Reactとの相性がとても良いです。

従来の書き方と並べてみます。

// 従来の関数定義
function add(x, y) {
  return x + y;
}

// Arrow Functionで書いた場合
const add = (x, y) => {
  return x + y;
};
JavaScript

どちらも「2つの数を足し算する関数」です。 違いは次の2点です。

  • function キーワードの代わりに => を使っている
  • 関数を「変数に代入する形」で書いている（const add = ...）

この「関数を変数に保存する」というスタイルが、Reactで非常によく使われるため、Arrow Functionが標準的な書き方になっています。

基本構文をテンプレートで覚える

まずは“型”を覚えてしまう

Arrow Functionの基本構文は、次のテンプレートで覚えると分かりやすいです。

const 関数名 = (引数1, 引数2, ...) => {
  // 実行したい処理
  return 戻り値;
};
JavaScript

この形に、具体的な処理を当てはめていきます。

例：挨拶を表示する関数

const greet = (name) => {
  console.log(`こんにちは、${name}さん！`);
};

greet('佐藤'); // こんにちは、佐藤さん！
JavaScript

ここで起きていることを、ステップで整理します。

  1. 関数を変数に保存しているjsconst greet = (name) => { ... }; greet という変数に、「名前を受け取って挨拶を表示する関数」を保存しています。
  2. 引数を受け取っているjs(name) => { ... } name が引数で、「誰に挨拶するか」を表しています。
  3. 関数を呼び出しているjsgreet('佐藤'); ここで、greet に保存されている関数が実行され、name に '佐藤' が渡されます。

このように、Arrow Functionは「関数を変数として扱う」スタイルとセットで理解すると、スッと頭に入ってきます。

引数の基本イメージ（前半の段階で押さえておくこと）

丸括弧の中に“外から渡したい値”を書く

Arrow Functionの引数は、従来の関数と同じように 丸括弧 () の中に書きます。

const add = (x, y) => {
  return x + y;
};

console.log(add(2, 3)); // 5
JavaScript
  • x, y が引数
  • add(2, 3) のとき、x = 2, y = 3 が渡されます

ここで重要なのは、「毎回変わる値は引数にする」という考え方です。

  • 毎回同じ処理：足し算する
  • 毎回変わる値：足し算したい2つの数

この「毎回変わる値」を引数として外から渡すことで、同じ関数を何度も再利用できるようになります。

引数がない場合の書き方

引数がない場合は、必ず空の丸括弧 () を書きます。

const sayHello = () => {
  console.log('こんにちは！');
};

sayHello(); // こんにちは！
JavaScript
  • () の中に何も書かれていない → 引数なし
  • 呼び出し側も sayHello() のように、引数を渡さずに実行します

戻り値の基本イメージ（“結果を返す出口”）

returnで「結果を外に渡す」

Arrow Functionでも、戻り値は従来の関数と同じように return で返します。

const double = (number) => {
  const result = number * 2;
  return result;
};

const value = double(5);
console.log(value); // 10
JavaScript

ここで起きていることを分解すると、

  1. double(5) を呼び出すと、number に 5 が渡される
  2. result に number * 2（つまり 10）が代入される
  3. return result; によって、10 が戻り値として返される
  4. 呼び出し側の value に、その戻り値 10 が入る

という流れになります。

戻り値がない関数との違い

戻り値を返さない関数も書けます。

const logMessage = (message) => {
  console.log(message);
};

logMessage('テスト'); // テスト
JavaScript

この場合、return がないので、戻り値は undefined になります。 「結果を他の処理に渡したいとき」は return を使い、「画面表示やログ出力だけしたいとき」は return を省略する、という使い分けを意識すると整理しやすいです。

1行で書くための“予告”としてのイメージ

前半では詳しくは踏み込みませんが、Arrow Functionの大きな特徴として 「短い処理なら1行で書ける」 という点があります。

const double = (number) => number * 2;
JavaScript
  • {} を書いていない
  • return も書いていない
  • それでも「number * 2 の結果」が戻り値として返される

この書き方は「暗黙のreturn」と呼ばれ、中盤でじっくり扱います。 前半の段階では、「Arrow Functionは短く書けるんだな」というイメージだけ持っておいていただければ十分です。

関数を変数に保存する感覚（前半のゴール）

「関数＝値」として扱う世界への入り口

Arrow Functionの基本構文は、次のように「関数を変数に保存する」形になっています。

const add = (x, y) => {
  return x + y;
};

const result = add(3, 4);
console.log(result); // 7
JavaScript

ここで重要なのは、

  • add は「数値」ではなく「関数」という“値”である
  • add(3, 4) と書くことで、その関数を実行している
  • 実行結果（戻り値）を result に代入している

という構造です。

JavaScriptでは、関数も「値」として扱えるため、

  • 変数に代入できる
  • 他の関数に引数として渡せる
  • 配列やオブジェクトの中に入れられる

という柔軟な使い方ができます。 Reactでは、この「関数を値として扱う」スタイルが当たり前に使われるので、Arrow Functionの書き方に慣れておくことがとても大切です。

前半のまとめと、中盤・後半へのつながり

前半では、

  • Arrow Functionは「関数の新しい書き方」であり、やっていることは従来の関数と同じであること
  • 基本構文：const 関数名 = (引数) => { 処理; return 戻り値; }; というテンプレートで書けること
  • 引数は () の中に書き、毎回変わる値を外から渡すための仕組みであること
  • 戻り値は return で返し、結果を他の処理に渡せるようになること
  • 関数を変数に保存することで、「関数＝値」として扱える世界に入っていくこと

を確認しました。

この土台の上に、中盤では「1行で書く方法（暗黙のreturn）」と「引数の省略ルール」 を、 後半では「複数行の処理」と「Reactコンポーネント内での実践的な使い方」 を重ねていくことで、Arrow Functionが「Reactで戦える武器」として自然に使えるようになっていきます。

DAY 4：Arrow Function 中盤 ― 「使いこなすための核心部分」

DAY 4の中盤では、Arrow Functionを実際に使いこなすうえで重要になる 引数・戻り値・1行で書く方法 を、ステップバイステップで深掘りしていきます。 前半で「Arrow Functionとは何か」「基本構文」を押さえたうえで、ここからは「どう書くと読みやすく・再利用しやすくなるか」という実践的な視点に入っていきます。

Arrow Functionと基本構文の再確認（中盤の土台）

従来のfunctionとの対応を頭に置いたまま進める

まず、中盤の説明に入る前に、Arrow Functionの基本構文をもう一度確認しておきます。

// 従来の関数定義
function add(x, y) {
  return x + y;
}

// Arrow Functionで書いた場合
const add = (x, y) => {
  return x + y;
};
JavaScript

やっていることは同じですが、Arrow Functionでは、

  • function の代わりに => を使う
  • 関数を「変数に保存する形」で書く（const add = ...）

というスタイルになります。 この対応関係を頭に置いたまま、引数・戻り値・1行で書く方法を見ていくと、理解がスムーズになります。

引数：丸括弧のルールと「1つだけのときの省略」

基本：丸括弧の中に引数を書く

Arrow Functionの引数は、従来の関数と同じように 丸括弧 () の中に書きます。

const add = (x, y) => {
  return x + y;
};

console.log(add(2, 3)); // 5
JavaScript

ここでは、

  • x, y が引数
  • add(2, 3) と呼び出したとき、x = 2, y = 3 が渡されます

という流れになっています。

このとき意識してほしいのは、「毎回変わる値は引数にする」という考え方です。

  • 毎回同じ処理：2つの数を足し算する
  • 毎回変わる値：足し算したい2つの数

この「毎回変わる値」を引数として外から渡すことで、同じ関数を何度も再利用できるようになります。

引数が1つだけのときの省略ルール

Arrow Functionには、引数が1つだけのときに丸括弧を省略できるというルールがあります。 これはReactのコードで非常によく使われるので、ここでしっかり押さえておきます。

const double = number => {
  return number * 2;
};

console.log(double(5)); // 10
JavaScript
  • 引数が1つ → number => { ... } のように書けます
  • 引数が0個 → 必ず () が必要です
const sayHello = () => {
  console.log('こんにちは！');
};
JavaScript

この省略ルールは、配列操作などで特に威力を発揮します。

const numbers = [1, 2, 3];

const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]
JavaScript

ここでは n => n * 2 が「引数が1つだけのArrow Function」です。 Reactのコードを読むときに、「この n は1つだけの引数なんだな」とすぐに認識できるようになると、コードの理解がかなり楽になります。

戻り値：returnと「結果を返す関数」の考え方

複数行の処理ではreturnを書くのが基本

Arrow Functionでも、戻り値は従来の関数と同じように return で返します。 まずは複数行の処理を書く基本形から確認します。

const double = (number) => {
  const result = number * 2;
  return result;
};

const value = double(5);
console.log(value); // 10
JavaScript

ここで起きていることを分解すると、

  1. double(5) を呼び出すと、number に 5 が渡される
  2. result に number * 2（つまり 10）が代入される
  3. return result; によって、10 が戻り値として返される
  4. 呼び出し側の value に、その戻り値 10 が入る

という流れになります。

この「戻り値を返す関数」という考え方は、Reactコンポーネントにも直結します。 Reactコンポーネントは「UI（JSX）を戻り値として返す関数」として定義されるため、return の感覚に慣れておくことがとても重要です。

戻り値がない関数との違い

戻り値を返さない関数も書けます。

const logMessage = (message) => {
  console.log(message);
};

logMessage('テスト'); // テスト
JavaScript

この場合、return がないので、戻り値は undefined になります。 「結果を他の処理に渡したいとき」は return を使い、「画面表示やログ出力だけしたいとき」は return を省略する、という使い分けを意識すると整理しやすいです。

1行で書く方法：暗黙のreturnという“必殺技”

1行Arrow Functionの基本形

Arrow Functionの中盤で最も重要なのが、「1行で書くときに return を省略できる」というルールです。 これによって、Reactのコードが非常にコンパクトになります。

const double = (number) => number * 2;

console.log(double(5)); // 10
JavaScript

ここでは、

  • {} を書いていない
  • return も書いていない
  • それでも「number * 2 の結果」が戻り値として返される

という挙動になっています。 このような書き方を「暗黙のreturn」と呼びます。

1行Arrow Functionのテンプレート

よく使う形は次のテンプレートで覚えておくと便利です。

const 関数名 = (引数) => 戻り値の式;
JavaScript

具体例をいくつか見てみます。

const add = (x, y) => x + y;
const isEven = (number) => number % 2 === 0;
const greet = (name) => `こんにちは、${name}さん！`;
JavaScript
  • add は「2つの数を足し算する関数」
  • isEven は「偶数かどうかを判定する関数」
  • greet は「挨拶文を作る関数」

いずれも、1行で「何をしているか」がはっきり分かる書き方になっています。

配列操作と1行Arrow Function

Reactでは、配列を map してコンポーネントを並べる場面が非常に多いです。 そのときに、1行Arrow Functionが大活躍します。

const numbers = [1, 2, 3];

const doubled = numbers.map((n) => n * 2);
console.log(doubled); // [2, 4, 6]
JavaScript

ここでは、

  • (n) => n * 2 が1行Arrow Function
  • n * 2 の結果が暗黙的に戻り値になります

このように、「短い処理は1行で書く」というスタイルに慣れておくと、Reactのコードがかなり読みやすくなります。

関数を変数に保存する：Arrow Functionの“標準スタイル”

関数＝値として扱う感覚を固める

Arrow Functionは、「関数を変数に保存する」スタイルと非常に相性が良いです。 中盤では、この感覚をしっかり固めておきます。

const add = (x, y) => x + y;
const isEven = (number) => number % 2 === 0;
const greet = (name) => `こんにちは、${name}さん！`;

console.log(add(2, 3));        // 5
console.log(isEven(4));        // true
console.log(greet('佐藤'));    // こんにちは、佐藤さん！
JavaScript

ここで重要なのは、

  • add という変数に「足し算する関数」が入っている
  • isEven という変数に「偶数判定する関数」が入っている
  • greet という変数に「挨拶文を作る関数」が入っている

という構造です。

JavaScriptでは、関数も「値」として扱えるため、

  • 変数に代入できる
  • 他の関数に引数として渡せる
  • 配列やオブジェクトの中に入れられる

という柔軟な使い方ができます。 Reactでは、イベントハンドラや map / filter などで「関数を渡す」場面が多いため、この感覚が非常に重要になります。

中盤のまとめと、前半・後半とのつながり

DAY 4の中盤では、

  • Arrow Functionの基本構文を、従来の function と対応させて整理したこと
  • 引数は () の中に書き、1つだけなら括弧を省略できること
  • 複数行の処理では {} を使い、return を明示的に書く必要があること
  • 1行で書く場合は「暗黙のreturn」によって return を省略できること
  • const 関数名 = (引数) => 式; という1行Arrow FunctionのテンプレートがReactで頻出すること
  • 関数を変数に保存することで、関数を「値」として扱えるようになること

を確認しました。

前半で学んだ「Arrow Functionとは何か」「基本構文」の土台の上に、 中盤で「引数・戻り値・1行で書く方法」という“使いこなしの核心”を重ねることで、 Reactのコードに出てくるArrow Functionが、ぐっと読みやすく・書きやすくなっていきます。

後半では、この知識を使って 複数行の処理を含むArrow Functionの設計 や、 Reactコンポーネント内での実践的な使い方・注意点 を扱い、Arrow Functionを「Reactで戦える武器」として仕上げていきます。

DAY 4：Arrow Function 後半 ― 「実務で使える形」に仕上げる

DAY 4の後半では、これまで前半・中盤で学んだ Arrow Functionの基本構文・引数・戻り値・1行で書く方法 を土台にして、 より実務に近い形で使えるようにするための 複数行の処理 と 関数を変数に保存する考え方（再利用） を深掘りしていきます。

Reactでは、「ちょっとした処理」から「コンポーネントのロジック」まで、Arrow Functionが幅広く使われます。 後半では、単なる文法知識ではなく、「どう書くと読みやすく、安全で、再利用しやすいか」という視点で整理していきます。

前半・中盤の復習から後半への橋渡し

前半で押さえたこと（ざっくり）

  • Arrow Functionは「関数の新しい書き方」であり、やっていることは従来の function と同じであること
  • 基本構文は const 関数名 = (引数) => { 処理; return 戻り値; }; というテンプレートで書けること
  • 引数は () の中に書き、毎回変わる値を外から渡すための仕組みであること
  • 戻り値は return で返し、結果を他の処理に渡せること

中盤で押さえたこと（ざっくり）

  • 引数が1つだけのときは number => { ... } のように括弧を省略できること
  • 複数行の処理では {} を使い、return を明示的に書く必要があること
  • 1行で書く場合は「暗黙のreturn」によって return を省略できること 例：const double = (number) => number * 2;
  • const 関数名 = (引数) => 式; という1行Arrow FunctionのテンプレートがReactで頻出すること
  • 関数を変数に保存することで、関数を「値」として扱えるようになること

この土台の上に、後半では 複数行の処理を含むArrow Functionの設計 と Reactコンポーネント内での実践的な使い方・再利用の考え方 を重ねていきます。

複数行の処理：Arrow Functionで“ちゃんとしたロジック”を書く

複数行のArrow Functionの基本形

複数行の処理を書くときは、必ず {}（波括弧）を使い、必要に応じて return を書きます。

const calcTaxIncluded = (price, taxRate) => {
  const taxAmount = price * taxRate;
  const total = price + taxAmount;
  return total;
};

const taxRate = 0.1;
console.log(calcTaxIncluded(1200, taxRate)); // 1320
JavaScript

ここでやっていることをステップで整理すると、

  1. calcTaxIncluded(1200, 0.1) を呼び出すと、price = 1200, taxRate = 0.1 が渡されます。
  2. taxAmount に price * taxRate（120）が代入されます。
  3. total に price + taxAmount（1320）が代入されます。
  4. return total; によって、1320が戻り値として返されます。

このように、複数行のArrow Functionは「中でちゃんと計算・処理をして、最後に結果を返す関数」として設計できます。

暗黙のreturnとの違いを意識する

1行で書くArrow Functionとの違いを、はっきり意識しておくことが重要です。

// 1行（暗黙のreturn）
const double = (number) => number * 2;

// 複数行（明示的なreturn）
const doubleWithLog = (number) => {
  console.log('2倍にします');
  return number * 2;
};
JavaScript
  • 1行の場合 → {} を省略し、return も省略できる（暗黙のreturn）
  • 複数行の場合 → {} を使い、return を明示的に書く必要がある

「処理が1行で書けるかどうか」が、暗黙のreturnを使うかどうかの判断基準になります。 ログ出力や条件分岐などが入ってくると、自然と複数行になり、return を書く形になります。

関数を変数に保存する：再利用と安全性の視点

関数を“名前付きの部品”として扱う

Arrow Functionは、関数を変数に保存するスタイルと非常に相性が良いです。 これは、関数を「名前付きの部品」として扱うための基本的な考え方です。

const add = (x, y) => x + y;
const isEven = (number) => number % 2 === 0;
const greet = (name) => `こんにちは、${name}さん！`;

console.log(add(2, 3));        // 5
console.log(isEven(4));        // true
console.log(greet('佐藤'));    // こんにちは、佐藤さん！
JavaScript

ここでは、

  • add という変数に「足し算する関数」が入っている
  • isEven という変数に「偶数判定する関数」が入っている
  • greet という変数に「挨拶文を作る関数」が入っている

という構造になっています。

再利用のメリット

関数を変数に保存しておくと、次のようなメリットがあります。

  • 同じ処理を何度も使い回せる → コードの重複が減り、保守性が上がります。
  • 意味のある名前を付けられる → add, isEven, greet など、処理の意図が一目で分かるようになります。
  • テストしやすくなる → 個々の関数を単体でテストできるようになります。

Reactでは、イベントハンドラやロジックをArrow Functionで定義し、 コンポーネント内で何度も呼び出したり、他のコンポーネントに渡したりすることがよくあります。

Reactコンポーネント内でのArrow Functionの使い方

イベントハンドラとしてのArrow Function

Reactでは、ボタンのクリック時の処理などをArrow Functionで定義することが多いです。

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <button onClick={handleClick}>
      現在のカウント: {count}
    </button>
  );
}
JSX

ここで handleClick は、

  • Arrow Functionで定義された「イベントハンドラ」
  • 変数 handleClick に保存されている関数
  • onClick に渡される「関数という値」

という役割を持っています。

この構造は、DAY 4で学んだすべての要素が組み合わさっています。

  • Arrow Functionの基本構文：const handleClick = () => { ... };
  • 引数なし：() => { ... }
  • 複数行の処理：setCount(count + 1); というロジック
  • 関数を変数に保存：handleClick にイベントハンドラを保存

配列とArrow Function（Reactでの典型パターン）

Reactでは、配列を map してコンポーネントを並べる場面が非常に多いです。

const items = ['A', 'B', 'C'];

function ItemList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}
JSX

ここで (item) => ( <li key={item}>{item}</li> ) がArrow Functionです。

  • 引数：item
  • 戻り値：<li key={item}>{item}</li> というJSX
  • 1行（実質1つの式）なので、暗黙のreturnが使われています

このように、Arrow Functionは「配列の各要素に対して何をするか」を表現するのに非常に向いています。

セキュリティ・安全性の観点からの一言

Arrow Functionそのものは、セキュリティ上特別な危険を生むものではありませんが、 「何を引数として受け取り、何を戻り値として返すか」 を明確に設計することは、安全なコードを書くうえで重要です。

  • 不要な引数を受け取らない
  • 戻り値の型や意味を統一する
  • 外部から渡される値（ユーザー入力など）をそのまま危険な処理に渡さない

といった基本的なルールを、Arrow Functionでも意識しておくと、 Reactアプリ全体の安全性・信頼性が高まります。

DAY 4（後半）のまとめ ― Arrow Functionを「Reactの武器」にする

DAY 4の後半では、

  • 複数行の処理を含むArrow Functionの書き方 → {} を使い、return を明示的に書くことで、ちゃんとしたロジックを表現できること
  • 1行Arrow Functionとの違い（暗黙のreturn） → 短い処理は1行で、複雑な処理は複数行で書き分けること
  • 関数を変数に保存することで、関数を「名前付きの部品」として再利用できること
  • Reactコンポーネント内で、イベントハンドラや配列操作にArrow Functionが自然に使われること
  • セキュリティ・安全性の観点からも、「引数と戻り値を明確に設計する」ことが重要であること

を確認しました。

前半・中盤・後半を通して、Arrow Functionは単なる「新しい記法」ではなく、 Reactで読みやすく・安全で・再利用しやすいコードを書くための基礎ツール であることが見えてきたと思います。

このあとは、Arrow Functionを使った配列操作（map / filter / reduce）や、 より複雑なReactコンポーネントのロジックに踏み込んでいくことで、 モダンJavaScriptとReactの世界がさらに立体的に見えてくるはずです。

スポンサーリンク
タイトルとURLをコピーしました