基本知識

【JS第6回】関数の基本：処理の共通化と呼び出し

JavaScript基礎講座 全10回（第6回）

【JS第6回】関数の基本：処理の共通化と呼び出し

コードの再利用性を高め、すっきりと整理するための「関数（Function）」を学習します。関数へのデータの渡し口である「引数」と、処理結果の出口である「戻り値（返り値）」を完全にマスターしましょう。

📌 JavaScript講座ロードマップ一覧（クリックで移動）

1. 関数（Function）は処理をまとめる魔法の箱

プログラムを書いていると、「消費税の計算」や「日時のフォーマット整形」など、同じような処理を何度も繰り返し行いたくなる場面に直面します。その都度同じコードをコピペして書くと、修正が必要になった際にすべての箇所を直さなければならず、バグの原因になります。

そこで、一連の命令のまとまりに名前をつけて部品化したものを 関数（Function） と呼びます。一度関数を作っておけば、必要なときにその名前を呼び出すだけで何回でもその処理を再利用できます。

2. 関数の入出力：引数（ひきすう）と戻り値（もどりち）

関数を実用的で強力なものにするために、以下の2つのインターフェースを定義します。

① 引数（ひきすう = Argument / Parameter）

関数を呼び出す際に、外部から関数の中へ引き渡す「入力データ」です。括弧の中に変数名のようにして宣言し、関数内部の処理で利用します。

② 戻り値（返り値 = Return Value）

関数内部で計算や処理が終わった後、その呼び出し元へ戻される「出力結果」です。関数の中で `return` キーワードを使用して指定します。

3. モダンな記法：アロー関数（Arrow Function）

従来のJavaScriptでは function calculate() { ... } のように定義していましたが、ES6（2015年のアップデート）以降では、よりスマートに書ける 「アロー関数」 が主流になっています。

アロー関数は、矢印（`=>`）の記号を用いて以下のように定義します。 

const 関数名 = (引数) => {
    /* 処理 */
    return 戻り値;
};

4. 独自の関数を定義して呼び出してみよう

以下のコードは、商品の「本体価格」を引数で受け取り、10%の消費税を加算した「税込価格」を戻り値として返すアロー関数の例です。

script.js 
/* 消費税を加算するアロー関数（引数: price） */
const getTaxIncludedPrice = (price) => {
    const taxRate = 0.1;
    const total = price * (1 + taxRate);
    return total; /* 計算結果（戻り値）を外へ返す */
};

/* 関数の呼び出し（引数に「1000」や「2500」を引き渡す） */
const itemPrice1 = getTaxIncludedPrice(1000);
const itemPrice2 = getTaxIncludedPrice(2500);

console.log(`商品1の税込価格: ${itemPrice1}円`); /* 1100円 */
console.log(`商品2の税込価格: ${itemPrice2}円`); /* 2750円 */
✍️ 第6回 理解度チェック（問題）

関数を終了させるとともに、処理した結果（出力データ）を関数の呼び出し元へ戻す（返す）ために使用するJavaScriptのキーワードは何でしょうか？

※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。

5. まとめと次回予告

第6回の講義はお疲れ様でした！今回の重要ポイントを振り返りましょう。

  • 関数は何度も使う処理を1つに部品化（共通化）したものである。
  • 関数への入力値を「引数」、関数からの出力結果を `return` を用いる「戻り値」と呼ぶ。
  • 矢印記号（`=>`）を用いた「アロー関数」が現在のJavaScriptの主流な書き方。

次回（第7回）は、Web制作の実務における主役である「DOM操作：HTML要素を書き換える」を学び、JavaScriptを使って画面上のテキストやCSSを動的に変形させる方法を学習します。お楽しみに！

📖 JavaScriptの基礎を全10回でマスターする

🔑 第6回 理解度チェックの解答と解説

【解説】

正解は **`return`** です。 関数ブロックの処理の途中で `return` 命令が読み込まれると、その時点で関数の実行は終了し、指定された値が呼び出し元に返されます。なお、`return` の後ろに値を書かなかったり、そもそも `return` 自体を書かなかった場合は、戻り値として `undefined`（未定義）が返されるルールになっています。

関連記事