第 10 回 JavaScript の基本機能 関数を作る その 2

著者名: 村濱 一樹 (External link) (kintone エバンジェリスト)

目次

information

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript

前回はユーザー関数を作ってみました。
今回は for 文と if 文を組み合わせて、さらに便利な関数を作っていきたいと思います。
関数を使いこなせるようになれば何度も同じことを書く必要がなくなるので便利です。
前回の記事 に関数とは何かということを書いていますので、必要な方は復習してから今回の章を試してみてください。

以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/ (External link)

記述ミスなどでうまく動作しないときのために、下の方にサンプル実行環境も用意していますので必要に応じて利用してください。

if 文の関数化 - BMI 計算を関数化

第 5 回の記事 では、if 文の例として BMI 計算を題材にしました。
サンプルの下記コードを関数化してみましょう。

https://jsfiddle.net/kintone/27vhnxuj/6/ (External link)

関数のキモは、「何を入力して」「何を出力する(もしくはどういう処理をする)」かということに尽きます。
第 5 回のコードでは、if 文内で console.log() を使っていましたが、関数は return で結果を返すとすっきり書けることが多いです。
なるべく「何を入力して」「何を出力するか」ということを意識しながら関数を定義しましょう。

  • 入力:身長(数値), 体重(数値)
  • 出力:体型診断(文字列)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// BMIを算出し、どういう体型か判断する関数
function calcBMI(height, weight) {
  // BMIを算出する(体重/身長の二乗)
  const BMI = weight / height ** 2;

  // 条件分岐
  // 〜 18.5    痩せ型
  // 18.5 〜 25 標準
  // 25 〜 30   太り気味
  // 30 〜      肥満
  if (BMI < 18.5) {
    return 'あなたは痩せ型です';
  } else if (BMI < 25) {
    return 'あなたは標準体型です';
  } else if (BMI < 30) {
    return 'あなたは太り気味です';
  }

  return 'あなたは肥満体型です';
}

// 関数呼び出し、結果を格納
const result = calcBMI(1.7, 60); // 170cm 60kg
console.log(result);

サンプルの実行環境

https://jsfiddle.net/kintone/w5cumdpn/4/ (External link)

for 文の関数化 - すべての数値に消費税をかける関数

前回の記事でも消費税計算の関数は書きましたが、for 文を駆使していっぺんにデータを処理する関数を定義しましょう。
たくさんの値を処理するには、配列を使うのが適していますので、入力・出力ともに配列を活用します。

  • 入力:消費税が加算されていない金額(配列)
  • 出力:消費税が加算された金額(配列)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
// 消費税を計算する関数
function addTax(price) {
  for (let i = 0; i < price.length; i++) {
    // 消費税計算
    price[i] = price[i] * 1.08;
  }
  return price;
}

// 関数呼び出し、結果を格納
const result = addTax([100, 200, 300, 400, 500]);
console.log(result);

サンプルの実行環境

https://jsfiddle.net/kintone/tvm3L7ou/5/ (External link)

if 文と for 文の関数化組み合わせ - 関数の中から別の関数を呼び出す

関数の中から関数を呼び出すことも可能です。
先に上げた BMI 判定関数を、消費税を計算する関数と同様、配列で処理できるようにしてみます。

  • 入力:身長と体重(配列)
  • 出力:判定結果(配列)
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// BMIを算出し、どういう体型か判断する関数
function calcBMI(height, weight) {
  // BMIを算出する(体重/身長の二乗)
  const BMI = weight / height ** 2;

  if (BMI < 18.5) {
    return 'あなたは痩せ型です';
  } else if (BMI < 25) {
    return 'あなたは標準体型です';
  } else if (BMI < 30) {
    return 'あなたは太り気味です';
  }

  return 'あなたは肥満体型です';
}

// 配列を一度で処理する用の関数
function calcBMIarray(status) {
  // 空の配列を宣言
  const result = [];

  for (let i = 0; i < status.length; i++) {
    const height = status[i][0];
    const weight = status[i][1];
    // 体型を判断する
    const shape = calcBMI(height, weight);
    // 配列(result)の末尾に値を追加する
    result.push(shape);
  }

  return result;
}

// 関数呼び出し、結果を格納
const data = [
  [1.5, 40],
  [1.55, 45],
  [1.6, 50],
  [1.7, 80],
  [1.8, 80],
];
const result = calcBMIarray(data);
console.log(result);

サンプルの実行環境

https://jsfiddle.net/kintone/85L4v6kr/19/ (External link)

関数の定義方法

関数の定義方法は大きく分けると 2 つあります。
利用はどちらでも好みで大丈夫ですが、両方とも Web の記事などでみかけることになると思うので説明しておきます。

  • 定義方法 1:関数宣言

    1
    2
    3
    
    function name() {
    // 処理内容
    }
  • 定義方法 2:変数代入

    1
    2
    3
    
    const name = function() {
    // 処理内容
    };

どちらも name() で呼び出せますが、若干違いがあります。
「定義方法 1」では、関数を定義する前と後のどちらでも関数を呼び出すことができます。

1
2
3
4
5
6
7
// 関数呼び出し
console.log(tax(1000));

// 関数宣言
function tax(price) {
  return price * 1.08;
}

それと比べて、「定義方法 2」では、関数を変数に代入しているため、関数呼び出しはそのあとでなければできません。

1
2
3
4
5
6
7
// 関数宣言
const tax = function(price) {
  return price * 1.08;
};

// 関数呼び出し(関数呼び出しは必ず関数宣言のあと)
console.log(tax(1000));

どちらがよいかは究極的には好みではありますが、なれないうちは「定義方法 1」から覚えたほうがいいと思います。
少々難易度が高くなってきましたが、一度定義できれば、何度でも使えるという利点は大きいです。

アロー関数

前述の関数の「定義方法 2」(変数代入による定義)では、以下のように => を使って書くこともできます。
2015 年 6 月に発行された ES6 という JavaScript の新しい規格に沿った定義方法で、=> の部分が矢印(アロー)のように見えるので、アロー関数と呼ばれます。

1
2
3
4
// アロー関数の定義
const tax = (price) => {
  return price * 1.08;
};

アロー関数で定義するメリットはコードを簡略化できることです。
式が 1 行の場合は、アロー関数を使うと {}return を省略できます。
たとえば、tax 関数の場合には、たった 1 行で定義できます。

1
2
// アロー関数の定義(簡略化)
const tax = (price) => price * 1.08;

アロー関数を定義して使いこなすことは、初心者のうちは少し難しいかもしれません。
しかし、「=> をつかった表現は関数の定義を表している」ということを理解すると、以降のチュートリアル記事や API ドキュメントに出てくるサンプルコードも読みやすくなるかと思います。
ぜひアロー関数を使った書き方に慣れていきましょう。