先生と生徒の会話形式で理解しよう

生徒

「JavaScriptで関数ってよく聞くけど、そもそも関数って何ですか？」

先生

「関数は、よく使う処理をひとかたまりにして名前をつけたものです。例えば、『計算をする』『文字を表示する』などの作業をまとめておけます。」

生徒

「じゃあ、関数を使うと何が便利なんですか？」

先生

「同じ処理を何度も書かなくて済むので、プログラムがスッキリしてミスも減ります。使いたいときに呼び出すだけで処理が実行できますよ。」

生徒

「具体的にどうやって作るんですか？」

先生

「基本的な書き方をこれから一緒に見ていきましょう！」

1. JavaScriptの関数とは？

関数とは、プログラムの中で繰り返し使いたい処理をまとめたものです。関数を作っておくと、その名前を呼ぶだけでまとめた処理を実行できます。たとえば、料理のレシピのように、一連の作業手順を名前で呼び出すイメージです。

2. 関数の基本的な作り方（関数宣言）

JavaScriptで関数を作る一番基本的な方法は「関数宣言」と呼ばれる書き方です。次のように書きます。


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

このコードでは、greetという名前の関数を作りました。中の console.log は画面に文字を表示する命令です。

この関数を使いたいときは、下のように「呼び出す（実行する）」ことで中の処理が動きます。


greet();  // 「こんにちは！」と表示される

関数は必要に応じて、外からデータを受け取ることができます。この受け取る値のことを「引数（ひきすう）」と言います。たとえば名前を受け取って挨拶する関数を作ってみましょう。


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

greet("太郎");  // こんにちは、太郎さん！
greet("花子");  // こんにちは、花子さん！

このように関数に名前を渡すと、その名前を使って挨拶してくれます。

関数は計算などをして結果を返すこともできます。返された結果のことを「戻り値（もどりち）」と呼びます。戻り値を受け取るには return を使います。


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

let result = add(3, 5);
console.log(result);  // 8

この関数は2つの数字を受け取って足し算をし、計算結果を返します。返された値は変数に保存できます。

関数を呼び出すには、関数名のあとに丸括弧 () をつけます。必要な引数があれば、丸括弧の中に渡します。


greet("太郎");  // 引数を渡して関数を実行
let sum = add(10, 20);
console.log(sum);

丸括弧を忘れると関数は実行されないので注意しましょう。

JavaScriptには他にも関数を作る方法があります。ここでは簡単に2つだけ紹介します。

まずは「関数式」と呼ばれる書き方です。関数を変数に代入します。


const greet = function(name) {
  console.log("こんにちは、" + name + "さん！");
};

greet("太郎");

もう一つは「アロー関数」と呼ばれ、より短く書けます。


const greet = (name) => {
  console.log("こんにちは、" + name + "さん！");
};

greet("花子");

どちらも関数を作る方法ですが、初めは「関数宣言」で十分理解できます。