【6日でできるJavaScript入門】関数の引数

　関数に外部から値を渡すことで、同じ処理を異なるデータで使い回せるようになる仕組みが関数の引数です。引数を活用すると、より汎用的で柔軟な関数を作成でき、コードの重複を減らせます。ここでは、引数の基本概念から指定方法、汎用化のメリット、複数引数の使い方までをステップごとに解説します。

１．関数の引数とは？

関数の呼び出し時に値をカッコ内に渡し、その値を関数定義側の変数として受け取る仕組みです。

用語	説明
引数	関数に渡す値（リテラルや変数など）
パラメータ	関数定義側で受け取る変数名

サンプルHTML（単独表示可）

ファイル名： lesson08-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>💡 引数の基本サンプル</title>
</head>
<body>
  <h1>📊 税込価格を計算</h1>
  <p>CD-R 10枚（500円） <button onclick="tax(500);">税込み価格を計算</button></p>
  <script>
    function tax(price) {
      let taxIn = price * 1.1;
      alert('税込み価格は' + taxIn + '円です');
    }
  </script>
</body>
</html>

ブラウザの出力例

コード解説

onclick="tax(500)"：呼び出し時に 500 を引数として渡す
function tax(price)：price がパラメータとして受け取る
price * 1.1：渡された値を使って処理を実行

２．引数の指定方法

関数呼び出し時のカッコ内に、数値・文字列・変数などをカンマ区切りで記述します。

種類	記述例	説明
数値	abc(3)	3 を引数として渡す。
文字列	abc('富士山')	文字列をシングルクォートで囲む。
変数	abc(value)	変数 `value` の中身を渡す。

2.1. サンプルHTML

ファイル名： lesson08-2.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🎯 引数指定サンプル</title></head>
<body>
  <h1>🏷️ ラベル付き引数</h1>
  <button onclick="showLabel('ラベル');">表示</button>
  <script>
    function showLabel(text) {
      alert('受け取った文字は' + text);
    }
  </script>
</body>
</html>

ブラウザの出力例

３．引数を利用して関数を汎用化

同じ処理を異なる値で何度も書くのではなく、引数で値を変えるだけで使い回せるようになります。

3.1. 複数関数版（非汎用）

ファイル名： lesson08-3.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔴 非汎用サンプル</title></head>
<body>
  <h1>割引価格（固定版）</h1>
  <button onclick="saleS();">S席</button>
  <script>
    function saleS() { alert(6000 * 0.8 + '円'); }
  </script>
</body>
</html>

ブラウザの出力例

3.2. 汎用関数版

ファイル名： lesson08-4.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🟢 汎用化サンプル</title></head>
<body>
  <h1>割引価格（汎用版）</h1>
  <button onclick="sale(6000);">S席</button>
  <script>
    function sale(price) {
      alert('割引後の価格は' + (price * 0.8) + '円');
    }
  </script>
</body>
</html>

ブラウザの出力例

４．複数の引数を指定する場合

カッコ内をカンマで区切ることで、複数の値を渡せます。

4.1. サンプルHTML

ファイル名： lesson08-5.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>📌 複数引数サンプル</title></head>
<body>
  <h1>🎫 席種と価格</h1>
  <button onclick="sale('S席', 6000);">S席</button>
  <script>
    function sale(seat, price) {
      alert(seat + 'の割引後価格は' + (price * 0.8) + '円');
    }
  </script>
</body>
</html>

ブラウザの出力例

まとめ

　関数の引数では、呼び出し側で値を渡し、関数側で任意の変数名（パラメータ）として受け取ります。これにより、同じ処理を複数のデータで再利用可能となり、コードの重複を防ぎます。引数を使いこなし、より汎用性の高い関数を作成しましょう。