Skip to content

6. 関数

JavaScript における関数は、コードを整理し、再利用性を高める非常に重要な要素です。この章では、関数の基礎から応用まで幅広く学びます。

6.1 関数の基本

6.1.1 関数の定義

JavaScript で関数を定義するには二つの方法があります:

  1. 関数宣言
  2. 関数式

関数宣言

関数宣言は以下のように記述します:

function greet() {
  console.log("Hello, World!");
}

この関数を呼び出すには、関数名の後に括弧を付けます:

greet(); // "Hello, World!" と表示されます

関数式

関数式は変数に関数を代入する方法です:

const greet = function () {
  console.log("Hello, World!");
};

このように定義された関数も、変数名を使って呼び出します:

greet(); // "Hello, World!" と表示されます

6.2 パラメーターと引数

関数にパラメーター(引数)を渡すことができます。以下は二つのパラメーターを受け取る関数の例です:

function add(a, b) {
  return a + b;
}

let sum = add(2, 3);
console.log(sum); // 5

6.3 関数の戻り値

関数はreturnキーワードを使って値を返すことができます。以下の例では、二つの数値を加算して結果を返します:

function multiply(a, b) {
  return a * b;
}

let product = multiply(4, 5);
console.log(product); // 20

6.4 関数のスコープ

関数内で宣言された変数は関数の外からアクセスできません。これは「スコープ」と呼ばれる概念に基づいています。

function scopeTest() {
  let localVariable = "I am local";
  console.log(localVariable); // "I am local" と表示されます
}

scopeTest();
console.log(localVariable); // エラー: localVariableは定義されていません

6.5 関数式とアロー関数

ES6 から導入されたアロー関数は、よりシンプルな関数定義方法を提供します。

const add = (a, b) => {
  return a + b;
};

let sum = add(2, 3);
console.log(sum); // 5

さらに短縮形として、以下のように書くこともできます:

const add = (a, b) => a + b;

let sum = add(2, 3);
console.log(sum); // 5

6.6 コールバック関数

コールバック関数は、引数として他の関数を受け取る関数です。これにより、処理の完了後に特定の動作を実行することができます。

function processUserInput(callback) {
  let name = prompt("名前を入力してください。");
  callback(name);
}

processUserInput(function (name) {
  alert("こんにちは、" + name + "さん!");
});

6.7 即時関数 (IIFE: Immediately Invoked Function Expression)

即時関数は、その場で定義してすぐに実行される関数です。スコープを汚染しないため、非常に便利な手法です。

(function () {
  console.log("即時関数が実行されました!");
})();

6.8 再帰関数

再帰関数とは、自分自身を呼び出す関数のことです。再帰関数は特定の問題を分割して解決するのに役立ちます。

function factorial(n) {
  if (n === 0) {
    return 1;
  }
  return n * factorial(n - 1);
}

let result = factorial(5);
console.log(result); // 120

6.9 関数のデフォルトパラメーター

ES6 から、関数の引数にデフォルト値を設定することができるようになりました。

function greet(name = "World") {
  console.log("Hello, " + name + "!");
}

greet(); // "Hello, World!"
greet("Alice"); // "Hello, Alice!"

6.10 組み込み関数

JavaScript には多数の組み込み関数があり、これにより標準的なタスクの多くを効率的に行うことができます。以下はその例です:

6.10.1 setTimeoutsetInterval

// 1秒後に実行される
setTimeout(() => {
  console.log("1秒経過しました");
}, 1000);

// 1秒ごとに繰り返し実行される
setInterval(() => {
  console.log("1秒ごとに実行されます");
}, 1000);

6.10.2 parseIntparseFloat

let num1 = "10";
let num2 = "10.5";

console.log(parseInt(num1)); // 10
console.log(parseFloat(num2)); // 10.5

これで関数の基本から少し高度なトピックまでカバーしました。実際にコードを書いて、色々な関数を試しながら理解を深めてください。