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

　複雑な処理をまとめて再利用可能にするのが 関数 です。関数は「複数の命令をひとまとめにし、名前を付けて呼び出せる」仕組みで、コードの可読性や保守性を高めます。
　ここでは、まず関数の定義や役割を整理し、続いて作成方法や命名ルール、イベントハンドラからの呼び出しまでを学びます。

１．関数とは？

　関数は、複数の処理をひとまとめにして“名前付きのブロック”として扱う仕組みです。イベントハンドラに直接複雑なコードを書く代わりに、関数を呼び出すだけで同じ処理を実行できます。

用語説明
関数複数の命令をまとめたブロック。呼び出しで実行される。
定義function 関数名() { ... } の形式で行う。
呼び出し<タグ onclick="関数名()"> などで実行タイミングを指定

ファイル名： lesson04-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔧 関数とは？サンプル</title>
</head>
<body>
  <h1>🔑 関数とは？</h1>
  <button onclick="showMessage()">メッセージ表示</button>
  <script>
    function showMessage() {
      alert('関数が呼び出されました！');
    }
  </script>
</body>
</html>

ブラウザの出力例

アラートで「関数が呼び出されました！」が表示される

コード解説

  • function showMessage() { … }：関数定義。showMessage は半角英字で始める。
  • onclick="showMessage()"：クリック時に関数を呼び出す。

２．関数の作成方法

　関数は <script> タグ内で定義します。基本的な定義方法と、ES6以降のアロー関数を比較したのが下表です。

定義形式説明
function 名称() { … }最も基本的な関数定義
const 名称 = () => { … }ES6のアロー関数式

2.1. 通常の関数定義

ファイル名： lesson04-2.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>📐 関数定義サンプル</title></head>
<body>
  <h1>✍️ 通常の関数定義</h1>
  <script>
    function calcTax(amount) {
      return amount * 0.1;
    }
    console.log(calcTax(1000)); // 100
  </script>
</body>
</html>

ブラウザの出力例

デバックコンソールの出力

100

コード解説

  • function calcTax(amount) { … }：引数 amount を受け取り、return で戻り値を返す。
  • console.log()：計算結果をコンソールに表示。

2.2. アロー関数

　ES6から導入されたアロー関数は、従来の function 定義に比べて簡潔に書けます。以下の表で比較します。

比較項目通常の関数アロー関数
定義方法function foo(a) { return a; }const foo = a => a;
引数が1つfunction foo(a) {}a => { ... }（括弧省略可）
本体が式のみの場合{ return a * b; }a * b（波括弧と return 省略可）

ファイル名： lesson04-3.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🚀 アロー関数サンプル</title></head>
<body>
  <h1>⚡ アロー関数</h1>
  <script>
    const greet = name => `こんにちは、${name}さん！`;
    console.log(greet('花子'));
  </script>
</body>
</html>

ブラウザの出力例

デバックコンソールの出力

こんにちは、花子さん！

コード解説

  • const greet = name => … ;：引数が1つなら括弧省略可。
  • テンプレートリテラルで文字列を埋め込む。

３．関数名に指定できない文字

関数名には以下のルールがあります。違反すると構文エラーになります。

ルール例外
英数字、_、$ のみcalc-tax（ハイフンNG）
先頭は数字以外1func はNG
予約語を使用しないfunction, return, class など

予約語（一部抜粋）

break    case     catch   class   const
continue debugger default delete do
else     enum     export  extends false
finally  for      function if     implements
import   in       instanceof interface let
new      null     package  private protected
public   return   static   super  switch
this     throw    true     try    typeof
var      void     while    with   yield

４．イベントハンドラから関数を呼び出す

HTML属性か、addEventListener によって関数を呼び出す方法を見てみましょう。

方法記述例
HTML属性<button onclick="myFunc()">実行</button>
addEventListenerelem.addEventListener('click', myFunc);

4.1. HTML属性で呼び出し

ファイル名： lesson04-4.html

「計算」ボタンをクリックします。

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🎯 属性呼び出し</title></head>
<body>
  <h1>🖱️ 属性で関数呼び出し</h1>
  <button onclick="calculate()">計算</button>
  <script>
    function calculate() {
      console.log(2 + 3);
    }
  </script>
</body>
</html>

ブラウザの出力例

デバックコンソールの出力

5

4.2. addEventListenerで呼び出し

ファイル名： lesson04-5.html

「クリック」ボタンをクリックします。

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔗 リスナー呼び出し</title></head>
<body>
  <h1>🔌 イベントリスナー</h1>
  <button id="btn">クリック</button>
  <script>
    document.getElementById('btn')
      .addEventListener('click', function() {
        console.log('リスナー経由で実行');
      });
  </script>
</body>
</html>

ブラウザの出力例

デバックコンソールの出力

5リスナー経由で実行

５．サンプル：関数で合計金額を計算するHTML

複数のオプションを選択できるフォームで、関数を使って合計金額を動的に計算する例です。

ファイル名： lesson04-6.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>😊 関数の基本</title>
</head>
<body>
  <h1>✨ 関数の基本へようこそ</h1>

  <p>基本サービス（1人分）: ¥500</p>
  <form onchange="calculateTotal()">
    <label><input type="checkbox" id="opt1"> サラダ（¥200）</label><br>
    <label><input type="checkbox" id="opt2"> スープ（¥150）</label><br>
    <label><input type="checkbox" id="opt3"> ドリンク（¥100）</label>
  </form>

  <p>合計金額: <span id="total">¥500</span></p>

  <script>
    function calculateTotal() {
      let total = 500;
      if (document.getElementById('opt1').checked) total += 200;
      if (document.getElementById('opt2').checked) total += 150;
      if (document.getElementById('opt3').checked) total += 100;
      document.getElementById('total').textContent = '¥' + total;
    }
  </script>
</body>
</html>

ブラウザの出力例

コード解説

  • <form onchange="calculateTotal()">：チェックボックスの状態が変わるたびに関数を呼び出す。
  • document.getElementById('opt1').checked：チェック状態を取得（true/false）。
  • let total = 500;：基本サービス料金を初期値に設定。
  • total += … ;：オプション料金を加算。
  • textContent = '¥' + total;：合計金額を <span> に反映。

まとめ

　関数の基本を学び、定義方法、命名規則、呼び出し手法から、実践的な合計計算サンプルまでを習得しました。この後のコンテンツ「08 関数の引数」で、引数と戻り値の応用や スコープ の概念を詳しく解説します。