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

生徒

「先生、JavaScriptでループを使うときに関数を呼び出すことができるって聞いたんですが、どういうことですか？」

先生

「はい、ループの中で関数を呼び出すと、同じ処理をまとめて書けてコードがすっきりします。関数は処理のまとまりを名前で呼び出せる仕組みです。」

生徒

「具体的にはどんなふうに使うんですか？初心者にもわかるように教えてください！」

先生

「それでは、基本からわかりやすく説明しましょう！」

1. 関数とは何か？

関数（function）とは、「何かの処理をまとめて名前をつけたもの」です。何度も使いたい処理を関数にしておくと、呼び出すだけで同じ処理ができます。例えば、「名前を表示する」「計算する」などの処理を関数にまとめます。

2. ループとは？

ループは「同じ処理を繰り返す」ための仕組みです。JavaScriptではforやwhileという命令で書きます。例えば、数字を1から10まで順番に表示したいときにループを使います。

3. ループの中で関数を呼び出すメリット

ループの中に処理を直接書くこともできますが、関数にまとめておくとコードが見やすくなり、修正や再利用が簡単になります。また、関数に名前をつけることで「何をしている処理か」がわかりやすくなります。

4. 具体例：名前リストを表示する関数を作ってループで呼び出す

例えば、友達の名前を並べて画面に表示したいとき、名前を表示する処理を関数にまとめます。


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

const names = ["太郎", "花子", "次郎"];

for (let i = 0; i < names.length; i++) {
  showName(names[i]);  // ループの中で関数を呼び出す
}

このコードでは、showNameという関数を作り、引数として名前を受け取って挨拶を表示しています。ループで名前のリストを順に処理して、関数を呼び出しています。

5. 引数って何？

引数（ひきすう）とは、関数に渡すデータのことです。上の例でいうとnameが引数です。関数は引数を使って処理を行います。関数を呼び出すときに「これを使ってね」と値を渡すイメージです。

6. 実例：数値の2乗を計算して表示する関数を使う

次は数字のリストを使って、それぞれの2乗（自分自身をかけた数）を計算して表示する関数を作ります。


function printSquare(num) {
  const result = num * num;
  console.log(num + "の2乗は" + result + "です");
}

const numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
  printSquare(numbers[i]);
}

このようにループの中で関数を呼び出すと、数字を1つずつ関数に渡して処理ができます。

7. なぜ関数を使うと便利？

同じ処理を何度も書かなくて済む
コードが見やすく、わかりやすくなる
処理の内容を変更するときに関数だけ直せば良い
複雑な処理も名前で簡単に呼び出せる

8. 応用例：配列の中の文字列をすべて大文字にして表示する

文字列を大文字に変換する関数を作って、配列のすべての文字列に使ってみましょう。


function shout(text) {
  console.log(text.toUpperCase());
}

const words = ["apple", "banana", "cherry"];

for (let i = 0; i < words.length; i++) {
  shout(words[i]);
}

toUpperCase()は文字列を大文字に変換するJavaScriptの組み込み関数です。自分で作った関数の中で使っています。