レッスン4：関数——処理のかたまりに名前を付ける

このレッスンで学ぶこと

• 関数の役割と使うメリットを説明できる
• function宣言とアロー関数の2つの書き方を使える
• 引数と戻り値を正しく使える
• スコープ（変数が見える範囲）の基本を理解する

---

レッスン3では、条件分岐と繰り返しを学びました。同じ処理を何度も書かずに済む仕組みです。このレッスンでは、もう一段階上の「処理のかたまりに名前を付けて呼び出す」仕組み——関数を学びます。関数はJavaScriptの中核となる要素のひとつで、これからのレッスンすべてで使います。

関数とは

関数は、何回も使う処理に名前を付けて、まとめておけるようにする仕組みです。料理のレシピに例えるとわかりやすいかもしれません。「カレーの作り方」というレシピを書いておけば、毎回その手順を考え直さずに「カレーの作り方を実行する」と指示するだけで済みます。プログラムでも同じことを関数で実現します。

関数を使うメリットは3つあります。

1. 同じ処理を何度も書かずに済む：処理に名前を付けて、必要なところで呼び出すだけ
2. コードの意図が明確になる：calculateTax(price) という名前があるだけで、何をしているコードなのかがわかる
3. 修正がしやすくなる：ロジックを変更したい場合、関数の中だけを直せば、呼び出している箇所すべてに反映される

function宣言——基本の関数の書き方

JavaScriptで関数を作るもっとも基本的な書き方が、function 宣言です。

function greet() {
  console.log("こんにちは！");
}

greet();  // 関数を呼び出す

function 関数名() { 処理 } の形で関数を定義し、関数名() で呼び出します。greet() を実行すると「こんにちは！」とコンソールに出力されます。

何度でも呼び出せるのが関数の便利な点です。

greet();
greet();
greet();

これで「こんにちは！」が3回表示されます。

引数——関数に値を渡す

関数の括弧 () の中に書く変数を「引数（ひきすう）」と呼びます。関数に値を渡せる仕組みです。

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

greet("森田");
greet("佐藤");
greet("田中");

実行すると、コンソールに3行が表示されます。

こんにちは、森田さん！
こんにちは、佐藤さん！
こんにちは、田中さん！

引数を使うと、関数の振る舞いを呼び出すたびに変えられます。同じ関数を、違う名前で何度も呼び出した結果が確認できます。

引数は複数指定できます。

function introduce(name, age) {
  console.log(`私は${name}、${age}歳です。`);
}

introduce("森田", 30);
introduce("佐藤", 25);

カンマで区切って書きます。呼び出すときも、定義した順に値を渡します。

💡 ポイント 引数の名前は、関数の中だけで通じる「仮の変数名」です。呼び出す側で別の名前の変数を使っていても問題ありません。const userName = "森田"; greet(userName); のように渡せます。

戻り値——関数から値を返す

関数の中で計算した結果を、呼び出し元に返したいときは return を使います。

function calculateTax(price) {
  return price * 0.10;
}

const tax = calculateTax(1000);
console.log(tax);  // 100

calculateTax(1000) を呼び出すと、関数の中で 1000 * 0.10 が計算され、その結果である 100 が return で返されます。返された値を tax という変数に入れているわけです。

戻り値は、そのまま別の式の中で使うこともできます。

function calculateTax(price) {
  return price * 0.10;
}

const price = 1000;
console.log(`税込価格は${price + calculateTax(price)}円です。`);
// 税込価格は1100円です。

📝 補足 return は関数の処理を「ここで終了して値を返す」命令でもあります。return 以降のコードは実行されません。条件分岐と組み合わせて、特定の場合だけ早めに関数から抜ける、という書き方にも使えます。

アロー関数——もう一つの関数の書き方

JavaScriptには、function 宣言とは別に「アロー関数」という書き方があります。=>（矢印）を使うのが特徴です。

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

greet("森田");

書き方は違いますが、結果は function 宣言と同じです。「name という引数を受け取り、コンソールに表示する関数」を greet という変数に入れています。

戻り値がある関数も同じく書けます。

const calculateTax = (price) => {
  return price * 0.10;
};

console.log(calculateTax(1000));  // 100

アロー関数の省略形

アロー関数は、書き方をさらに短くできます。

引数が1つだけの場合、引数の括弧を省略できます。

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

関数の中身が「値を1つ返すだけ」の場合、波括弧と return も省略できます。

const calculateTax = price => price * 0.10;

console.log(calculateTax(1000));  // 100

たった1行になりました。短くて読みやすい関数を書きたい場面で重宝します。

💡 ポイント 入門段階では「アロー関数も書ける」ことを知っておけば十分です。本コースでは、内容に応じて両方を使います。後のレッスンでDOMやイベント処理を扱うとき、アロー関数の読みやすさが効いてきます。

function宣言とアロー関数、どちらを使う？

実務では、どちらも使われています。本コースの方針は次のとおりです。

• トップレベルの独立した関数：function 宣言（function 名前() {}）
• 配列の処理やイベント処理など、その場で短く書く関数：アロー関数

例えば、レッスン5で扱う配列の forEach メソッドの中身は、アロー関数で書くのが普通です。慣れてくると自然に使い分けられるようになります。

スコープ——変数が見える範囲

関数の中で宣言した変数は、その関数の中だけで使えます。これを「ローカル変数」と呼び、変数が有効な範囲を「スコープ」と呼びます。

function calculateTotal() {
  const taxRate = 0.10;
  const price = 1000;
  return price + price * taxRate;
}

console.log(calculateTotal());  // 1100
// console.log(taxRate);  // ← エラー：関数の外では taxRate は見えない

関数の中で const や let で宣言した taxRate は、関数の外から呼び出すとエラーになります。「関数の中の変数は、その関数の中でしか使えない」のです。

逆に、関数の外で宣言した変数は、関数の中からも見えます。

const greeting = "こんにちは";

function sayGreeting() {
  console.log(greeting);  // 関数の外の変数も見える
}

sayGreeting();  // "こんにちは"

💡 ポイント スコープを理解すると、変数を関数の中に閉じ込めておくことの大切さが見えてきます。関数ごとに必要な変数を内部に持つことで、別の関数とぶつかる心配がなくなり、コードが安全に書けます。

実習：プロフィール関連の関数を作る

学んだ知識を実習で確かめます。main.js を次のように書き換えてください。

// 1. 引数なし、戻り値なしの関数
function showHeader() {
  console.log("=== 自己紹介 ===");
}

// 2. 引数あり、戻り値なしの関数
function introduce(name, age) {
  console.log(`私は${name}、${age}歳です。`);
}

// 3. 引数あり、戻り値ありの関数
function calculateTax(price) {
  return price * 0.10;
}

// 4. アロー関数の例（短い書き方）
const formatYen = amount => `${amount}円`;

// 関数を呼び出す
showHeader();
introduce("森田 彩花", 30);

const itemPrice = 2000;
const tax = calculateTax(itemPrice);
console.log(`商品価格：${formatYen(itemPrice)}`);
console.log(`消費税：${formatYen(tax)}`);
console.log(`合計：${formatYen(itemPrice + tax)}`);

保存してブラウザを再読み込みすると、コンソールに次の5行が表示されます。

=== 自己紹介 ===
私は森田 彩花、30歳です。
商品価格：2000円
消費税：200円
合計：2200円

4つの関数を組み合わせて、自己紹介と価格計算をしました。それぞれの関数が独立した「部品」として働いているのがわかります。

🔰 初学者の方へ 関数を書くのが面倒に感じる時期があるかもしれません。最初は console.log を直接書くほうが早いと感じても、コードが大きくなってきたとき、関数にまとめておいたほうが圧倒的に読みやすく直しやすくなります。慣れるまで何度も書いてみましょう。

まとめ

このレッスンでは、以下のことを学びました。

• 関数は、処理のかたまりに名前を付けて呼び出せる仕組み
• function 関数名() {} 形式と、アロー関数 () => {} 形式の2つの書き方がある
• 引数で関数に値を渡し、return で値を返せる
• アロー関数の省略形は、引数1つ・1行返すだけの場合に短く書ける
• 関数内で宣言した変数は、関数の外からは見えない（ローカルスコープ）
• 関数を使うと、コードが整理され、修正もしやすくなる

次のレッスンでは「配列とオブジェクト」を学びます。複数のデータをまとめて扱う方法を身につけ、レッスン3で先取りした配列も含めて、より深く扱えるようになりましょう。

---

確認クイズ

このレッスンの理解度をチェックしましょう。

回答する もう一度挑戦