【ECMAScript編】第4回：処理をまとめる基本単位

皆さん、こんにちは！「EcmaScript基礎マスターへの道」、第4回へようこそ。

これまでの回で、変数を使ってデータを格納し、条件分岐や繰り返し処理でプログラムの流れを制御する方法を学びました。しかし、プログラムが複雑になるにつれて、同じような処理を何度も書いたり、コードが長くなって読みにくくなったりすることがあります。

そこで今回学ぶのが、関数です。関数は、特定の処理をひとまとまりにして、必要に応じて呼び出せるようにする非常に強力なツールです。関数を使いこなすことで、コードの再利用性が高まり、プログラムが格段に読みやすく、そして保守しやすくなります。

本回では、以下の内容を中心に学びます。

関数とは何か、なぜ必要か
関数の宣言方法と呼び出し方
関数に値を受け渡す「引数」と、結果を返す「戻り値」
ES6から導入された簡潔な「アロー関数」

それでは、さっそく関数の世界へ飛び込みましょう！

関数はプログラムの部品化と考えると分かりやすいですね。複雑な機械も、小さな部品の組み合わせでできています。

なるほど！それなら、どこにどの機能があるか一目で分かるし、何か問題が起きても、その部品だけを見ればいいから修正も楽そう！

メイン解説

1. 関数とは何か、なぜ必要か

関数は「特定の処理を行う一連の命令をまとめたもの」です。例えるなら、家電製品の「機能ボタン」のようなものです。洗濯機に「スタート」ボタンがあるように、プログラムにも「〇〇を計算する」「△△を表示する」といった特定の役割を持つボタン（関数）を用意できるわけです。

関数を使う主なメリットは以下の通りです。

再利用性: 一度関数を定義すれば、何度でもその処理を呼び出して使うことができます。
可読性: 複雑な処理を小さな関数に分割することで、コード全体が読みやすくなります。
保守性: 変更が必要な場合も、特定の関数だけを修正すればよく、影響範囲を限定できます。

まさにその通りです。特にチーム開発では、コードの統一性やメンテナンス性が非常に重要になるため、関数の活用は必須と言えるでしょう。

デザインでも、共通のコンポーネントを使い回すのと同じ感覚ですね！

2. 関数の宣言方法と呼び出し方

EcmaScriptには、いくつかの関数の宣言方法があります。まずは最も基本的な「関数宣言」から見ていきましょう。

関数宣言 (Function Declaration)

function キーワードを使って関数を定義します。

// これは関数宣言です
function greet() {
  console.log("こんにちは！");
}

このコードでは、greet という名前の関数を定義しました。この時点では、関数の中の処理（console.log("こんにちは！");）はまだ実行されていません。関数の中の処理を実行するには、関数を呼び出す必要があります。

関数を呼び出すには、関数名の後に () をつけます。

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

// greet 関数を呼び出します
greet(); // 出力: こんにちは！
greet(); // 何度でも呼び出せます

関数式 (Function Expression)

関数は、変数に代入することもできます。これを「関数式」と呼びます。

// これは関数式です
const sayHello = function() {
  console.log("Hello there!");
};

// 関数式も関数名(変数名)の後に () をつけて呼び出します
sayHello(); // 出力: Hello there!

関数式では、function の後に名前をつけない「匿名関数（無名関数）」を使うのが一般的です。変数名が関数の名前のような役割を果たします。

関数宣言と関数式は似ていますが、巻き上げ（hoisting）の挙動に違いがあります。今はまず基本的な書き方をマスターしましょう。

巻き上げ？ちょっと難しそうだけど、まずは動かすことが大事ってことですね！

3. 引数（ひきすう）とは？

関数は、外部から値を受け取って処理を行うことができます。この受け取る値を引数（ひきすう）と呼びます。引数を使うことで、関数をより柔軟に、様々なデータに対して適用できるようになります。

引数は、関数名の後の () の中に定義します。複数ある場合はコンマ (,) で区切ります。

// name を引数として受け取る greet 関数
function greetByName(name) {
  console.log("こんにちは、" + name + "さん！");
}

// 関数を呼び出す際に、引数として値を渡します
greetByName("太郎"); // 出力: こんにちは、太郎さん！
greetByName("花子"); // 出力: こんにちは、花子さん！

// 複数の引数を受け取る関数
function add(a, b) {
  console.log(a + b);
}

add(5, 3); // 出力: 8
add(10, 20); // 出力: 30

引数は、関数に渡す『材料』のようなものです。同じ計算をする関数でも、引数が変われば異なる結果が得られます。

デザインツールで、同じボタンコンポーネントでも、テキストや色を引数として渡してバリエーションを作るのと似てますね！

4. 戻り値（もどりち）とは？

関数は、処理の結果を呼び出し元に返すことができます。この返される値を戻り値（もどりち）と呼びます。戻り値を返すには、return キーワードを使用します。

// 2つの数の和を計算し、その結果を返す関数
function calculateSum(num1, num2) {
  const sum = num1 + num2;
  return sum; // sum の値を戻り値として返します
}

// 関数を呼び出し、戻り値を変数に格納します
const result1 = calculateSum(10, 5);
console.log(result1); // 出力: 15

const result2 = calculateSum(100, 200);
console.log(result2); // 出力: 300

// 戻り値は直接別の処理に使うこともできます
console.log(calculateSum(7, 8) * 2); // 出力: 30 (15 * 2)

return 文が実行されると、その時点で関数の処理は終了し、指定された値が返されます。return 文がない関数は、暗黙的に undefined を返します。

戻り値は、関数が行った処理の『成果物』です。この成果物を次の処理に利用することで、プログラム全体の流れを構築できます。

アウトプット！関数が何かをしてくれた結果を、さらに別の関数に渡して加工したりできるんですね。

5. アロー関数 (Arrow Function)

ES2015（ES6）からは、より簡潔な記述で関数を定義できる「アロー関数」が導入されました。特に短い処理の関数を書く際に便利です。

アロー関数の基本的な構文は (引数) => { 処理内容 } です。

// 基本的なアロー関数
const multiply = (x, y) => {
  return x * y;
};

console.log(multiply(4, 5)); // 出力: 20

// 引数が1つの場合は () を省略できます
const greetSingle = name => {
  return "こんにちは、" + name + "さん！";
};

console.log(greetSingle("次郎")); // 出力: こんにちは、次郎さん！

// 処理が1行で、それが戻り値である場合は、{} と return を省略できます
const subtract = (a, b) => a - b;

console.log(subtract(10, 4)); // 出力: 6

// 引数がない場合は、() を必ず記述します
const showDate = () => new Date().toLocaleDateString();

console.log("今日の日付は " + showDate() + " です。"); // 出力例: 今日の日付は 2023/1/1 です。

アロー関数は、function キーワードを使った関数といくつか違いがありますが、まずは「簡潔に書ける関数」として理解しておけば十分です。多くの場面でアロー関数が使われていますので、この書き方に慣れていきましょう。

アロー関数は、特にコールバック関数としてよく使われます。記述量が少なく、thisの挙動も異なるため、モダンなJavaScript開発では主流です。

書くのが楽になるのは嬉しい！見た目もスッキリしますね。

6. 実践的な関数の活用例

これまでに学んだことを活かして、いくつか関数を使った例を見てみましょう。

// 商品の合計金額を計算する関数
function calculateTotalPrice(price, quantity) {
  if (price < 0 || quantity < 0) {
    console.log("価格と数量は正の値を入力してください。");
    return 0; // 不正な場合は0を返す
  }
  return price * quantity;
}

// 消費税込みの価格を計算するアロー関数
const calculateTaxIncludedPrice = (totalPrice, taxRate = 0.10) => {
  return totalPrice * (1 + taxRate);
};

// ユーザーへのメッセージを表示する関数
function showWelcomeMessage(userName) {
  console.log("------------------------");
  console.log("ようこそ、" + userName + "さん！");
  console.log("楽しいショッピングをお楽しみください。");
  console.log("------------------------");
}

// 関数の利用
showWelcomeMessage("Alice"); // ユーザーへの歓迎メッセージを表示

const itemPrice = 1500;
const itemQuantity = 2;

const subtotal = calculateTotalPrice(itemPrice, itemQuantity);
console.log("商品の小計: " + subtotal + "円");

const finalPrice = calculateTaxIncludedPrice(subtotal);
console.log("合計金額（税込み）: " + finalPrice + "円");

// 不正な値のテスト
const invalidPrice = calculateTotalPrice(-100, 5);
console.log("不正な値での計算結果: " + invalidPrice);

このように、関数を使うことで、それぞれの処理を役割ごとに分割し、コードが分かりやすくなります。calculateTotalPrice のような関数は、商品の種類が変わっても再利用できますし、もし消費税率が変わったとしても、calculateTaxIncludedPrice 関数の中身だけを修正すれば良いので、変更にも強くなります。

まとめ

今回はEcmaScriptにおける「関数の基礎と活用」について学びました。

関数は、特定の処理をひとまとまりにしたもので、コードの再利用性、可読性、保守性を向上させます。
function キーワードを使った「関数宣言」や、変数に代入する「関数式」で定義します。
関数名の後に () をつけて呼び出します。
「引数」を使って関数に値を与え、関数を柔軟に利用できます。
return キーワードを使って、関数の処理結果を「戻り値」として返すことができます。
ES6から導入された「アロー関数」は、より簡潔に関数を記述できる便利な方法です。

関数は、プログラムを組み立てる上で非常に重要な概念です。さまざまな場面で関数を使いこなし、読みやすく、効率的なコードを書く練習を重ねていきましょう。

次回は、オブジェクトという概念に入り、関連するデータをひとまとめにする方法を学びます。お楽しみに！

チャンネル登録よろしくお願いします

こんにちわ！JS太郎です‼
このチャンネルでは、はじめてプログラミングをする人はもちろん、小学生からでも理解出来るように判りやすく解説しています。
是非、一緒にプログラミングを学んでご自身の付加価値を高めていきましょう。

メイン解説

1. 関数とは何か、なぜ必要か

2. 関数の宣言方法と呼び出し方

関数宣言 (Function Declaration)

関数式 (Function Expression)

3. 引数（ひきすう）とは？

4. 戻り値（もどりち）とは？

5. アロー関数 (Arrow Function)

6. 実践的な関数の活用例

まとめ

チャンネル登録 よろしくお願いします

関連記事

Vue.js開発効率を劇的に上げる！主要オプション徹底活用ガイド【実用サンプルコード付】

開発効率爆上げ！LodashとES6の厳選メソッド25選でJavaScriptを極める

【ECMAScript編】第1回：EcmaScriptの世界へようこそ

jQuery 4.0.0登場！IEサポート終了で実現する「モダンWeb開発」の加速

コメントを残す コメントをキャンセル

チャンネル登録よろしくお願いします

コメントを残すコメントをキャンセル