JavaScript 関数とは？function・引数・returnを初心者向けにわかりやすく解説【第5講】

今回のゴール

前回は繰り返し処理（for文・while文）を学びました。

JavaScript for文・while文とは？繰り返し処理を初心者向けにわかりやすく解説【第4講】

今回は関数（function）を学びます。

処理をまとめて再利用できるようになることが今回のゴールです。

関数とは？

同じ処理を何度も書くと、コードが長くなり管理しにくくなります。

たとえば、画面に「こんにちは」と3回表示する場合です。

console.log("こんにちは");
console.log("こんにちは");
console.log("こんにちは");

同じコードが何度も出てきています。

このようなときに使うのが関数です。

関数とは、処理をひとまとめにして、必要なときに呼び出せる仕組みです。

関数の基本構文

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

この時点ではまだ実行されません。

実行するには、関数を呼び出します。

greet();

実行結果

こんにちは

何回でも呼び出せます。

greet();
greet();
greet();

greet のような名前を関数名といいます。

引数とは？

関数には、外から値を渡すことができます。

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

greet("田中");
greet("佐藤");

実行結果

こんにちは 田中
こんにちは 佐藤

name の部分を引数といいます。

呼び出すときに渡した値が引数に入ります。

returnとは？

関数は、処理した結果を返すことができます。

この返される値を戻り値といいます。

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

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

実行結果

8

return は「結果を返す」という意味です。

関数は、入力して、処理して、結果を返すことができます。

関数を使うメリット

• 同じ処理を何度も使い回せる
• コードが短くなる
• 修正がしやすくなる
• 読みやすいコードになる

演習問題

1. 自分の名前を表示する関数を作ってください。
2. 2つの数字を足す関数を作ってください。
3. 円の面積を求める関数を作ってください。

模範解答① 自分の名前を表示する関数

function showName() {
  console.log("田中");
}

showName();

模範解答② 数字を足す関数

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

console.log(add(3, 7));

模範解答③ 円の面積を求める関数

function circle(r) {
  return 3.14 * r * r;
}

console.log(circle(5));

宿題

税込価格を計算する関数を作ってみましょう。

例：1000円の商品に10%の税金を加える。

まとめ

• 関数は処理をまとめる仕組み
• 関数は呼び出して使う
• 引数で値を受け取れる
• returnで結果を返せる

次に学ぶおすすめ記事

JavaScript 配列とは？array・要素追加・ループ処理を初心者向けにわかりやすく解説【第6講】