JavaScript

【JavaScript】関数(第9回)

関数についての学習をします。

準備をしよう

下のURLをクリックして、「paiza.IO」を開いてください。
https://paiza.io/ja/projects/new

学習内容

関数とは

関数とは、プログラミングの基本処理の1つで、複数の処理をまとめる機能のことです。

処理A、処理B、処理Cをそれぞれ実行するよりも、それらをまとめた処理Dを1度実行したら早いです。また、同じ処理を別の場面で使いたい場合、一度処理をまとめておけば、内部を気にすることなく、便利に使うことができます。

単純な関数

まずは、一番単純な関数を紹介します。

イメージ

処理A、処理B、処理Cを、1つの関数にまとめています。

書き方

関数には、「定義側」と「呼び出し側」があります。

定義側は関数を「作る側」、呼び出し側は関数を「使う側」になります。関数は、定義をする→呼び出す、という流れになりますので、以下に定義側と呼び出し側とで分けて、書き方を見ていきます。

定義側
  1. 「function」というキーワードの後に、その関数の名前を決めます。関数名の後ろに「()」をつけます。その後、まとめる処理を囲むために「{}」を置きます。
  2. 「{}」の中に、まとめる処理を書きます。

具体的に見ていきましょう。

  1. 「calc」という名前の関数を定義しています。
  2. まとめた処理は、10と20を足して、結果をコンソール画面に出力する、というものです。

これで、関数を定義することができました。次に、これを実行する方法を見ていきます。

呼び出し側

呼び出し側は簡単で、定義した関数名を書いて、その後ろに「()」をつけるだけです。最後に分の終わりであることを示す「;」をつけます。これで、関数の中身が実行されます。

練習

paiza.IOに、以下のコードを入れて下さい。

function calc1() {
    let num1 = 10;
    let num2 = 20;
    let sum = num1 + num2;
    console.log(sum);
}
calc1();
実行結果

コードを実行してみましょう。

30

引数付きの関数

引数とは

引数とは、関数に外部から追加的に入れることができる情報のことです。「ひきすう」と読みます。

基本的に関数は、あらかじめ定義した状態で使いますが、実行時に一部内容を追加して実行したいときに、この引数を設定しておくことができます。

イメージ

実行時に「〇」というものを関数内部に追加して、実行させる。

書き方

以下のように書きます。(定義側と呼び出し側をまとめて書いています)

  1. 定義側では、引数は関数名後ろの「()」内に書きます。関数内部では、その引数名を使った処理を書いておきます。こうすることで、将来この関数が使われるときに、実行時に渡された引数が、その場所に入って実行されるようになります。(定義側の引数を「仮引数」、呼び出し側の「実引数」と呼ぶことがあります)
  2. 呼び出し側では、関数名後ろの「()」に引数として具体的なデータを入れて実行します。このデータは、定義側の仮引数の場所に入って、具体的な処理がなされます。

具体的に見ていきましょう。

  1. 定義側では、「arg」という名前の仮引数を設定しています。この仮引数は、関数内部の「num1+num2+arg」のところで使われています。
  2. 呼び出し側では、具体的に「2」という数字を渡しています。これが実引数で、定義側の「arg」に入り、内部の処理がなされます。
練習

paiza.IOに、以下のコードを入れて下さい。(引数により結果が異なるのを確認するため、複数実行)

function calc2(arg) {
    let num1 = 10;
    let num2 = 20;
    let sum = num1 + num2 + arg;
    console.log(sum);
}
// 実行1
calc2(2);
// 実行2
calc2(5);
実行結果

コードを実行してみましょう。

32
35

戻り値のある関数

戻り値とは

戻り値とは、関数実行後に外部に戻される情報のことです。「もどりち」と読みます。

捉え方としては、関数が実行されると、関数全体が新しい値に代わる、というイメージするとよいです。演算回で説明したように、式は評価されると、式全体が実行結果の値に代わりますが、同じような捉え方です。(例:「1+2」という式は評価されると、「3」という値に代わる)

イメージ

引数としてある値(〇)を入力すると、戻り値として新しい値(☆)を出力する、という捉え方ができます。数学での関数と近い使い方になります。

書き方

以下のように書きます。(定義側と呼び出し側をまとめて書いています)

  1. 定義側では、「return」というキーワードを書くと、ここで関数処理は終了となり、関数全体がこの値に代わります。
  2. 呼び出し側では、関数処理後に、関数全体がreturnの値に代わり、その値を変数「result」に代入しています。

具体的に見ていきましょう。

  1. 定義側では、仮引数「arg」に 2 を掛けたものを return しています。
  2. 呼び出し側では、実引数として「2」を渡しています。関数内部では、計算されて「2*2」の結果「4」となり、関数全体が「4」に化けます。これが「result」に代入されます。
練習

paiza.IOに、以下のコードを入れて下さい。(引数により結果が異なるのを確認するため、複数実行)

function calc3(arg) {
    let sum = arg * 2;
    return sum;
}
let result = calc3(2);
console.log(result);
実行結果

コードを実行してみましょう。

4

コード全体

練習
function calc1() {
    let num1 = 10;
    let num2 = 20;
    let sum = num1 + num2;
    console.log(sum);
}
calc1();

function calc2(arg) {
    let num1 = 10;
    let num2 = 20;
    let sum = num1 + num2 + arg;
    console.log(sum);
}
// 実行1
calc2(2);
// 実行2
calc2(5);

function calc3(arg) {
    let sum = arg * 2;
    return sum;
}
let result = calc3(2);
console.log(result);
実行結果
30
32
35
4

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

まとめ

以上になります。今回は関数についてお伝えしました。

関数はどのプログラミングでも基本的に備わっている機能なので、考え方を理解しておいてください。引数や戻り値が出てきて理解が難しい場合は、まずは単純な形を覚えて”まとめる”という感覚を掴んでいただければと思います。

概念と使い方を理解したら、どんどん自分で書いてみてください。自然と身についていきます。

タイトルとURLをコピーしました