関数 - cybozu developer network

関数

関数とは

関数とは、呼び出すとさまざまな処理を行ってくれるものです。
自分で関数を作ることもでき、よく使う処理や複数の処理をまとめることができます。
関数がオブジェクトの中に入っている場合は、メソッドと呼ばれます。

ウィンドウにアラートを表示できる window.alert() は、window オブジェクトの中にある alert() メソッドを呼び出しているということになります。

1

window.alert('Hello, kintone');

関数宣言

関数の基本の形は、次のとおりです。

1
2
3


function 関数名(パラメータ) {
  処理
}

まずは、window.alert() を実行する関数を作ってみましょう。
関数名には処理を理解しやすい名前をつけるようにします。
今回はアラートを表示する関数ですから、showAlert という名前をつけます。
なお、パラメーターはこの後説明しますので空欄にしておきます。

1
2
3


function showAlert() {
  window.alert('初めての関数');
}

呼び出し

作成した関数の呼び出し方は次のとおりです。

1

関数名();

今回の関数名は showAlert ですので、次のように呼び出します。

1

showAlert();

パラメーター（引数）

パラメーターは、関数に渡す値です。引数（ひきすう）とも呼ばれます。
今回のように特定の処理を行う場合にはパラメーターは不要ですが、実行するごとにアラートへ表示する値を変えたいときは、パラメーターを利用します。
次のようにコードを書き換えてみましょう。

1
2
3


function showAlert(message) {
  window.alert(message);
}

指定したパラメーター（message）は、処理内で利用できます。実行時に値を渡すことで、都度表示する値を変えることができます。

1
2


showAlert('初めての関数');
showAlert('2回目の関数');

return

関数の処理部で return を用いることで、値が返されます。この値を 戻り値 と呼びます。
今回は商品価格を渡すと、割り引き後の価格が返ってくるコードを書いてみましょう。

1
2
3


function calcDiscountedPrice(price) {
  return price * 0.8; // 2割引した価格を返す
}

パラメーターprice に 0.8 を乗算した値を return します。
後は実行時に商品価格を渡してあげるだけです。

1

calcDiscountedPrice(5000); // 実行結果 4000

関数式

関数は、関数式を用いた定義もできます。
基本の形は次のとおりです。

1
2
3


const 変数名 = function 関数名 (パラメータ) {
  処理
};

関数名を省略して書くことが多いです。これを無名関数と言います。

1
2
3


const 変数名 = function (パラメータ) {
  処理
};

実行時には、変数名で呼び出します。

1

変数名();

関数宣言と関数式には、見た目以外にも違いがあります。
ここで理解しておくべきなのは、関数の巻き上げです。
JavaScript では基本的にコードが書かれた順に実行されるため、定義→実行の順でコードを書きます。
しかし、関数宣言の場合、定義より前に実行しても、関数が前に定義されたと判断されて正常に実行されます。
これが関数の巻き上げです。

1
2
3
4
5


calcDiscountedPrice(5000); // 巻き上げられてエラーにならない

function calcDiscountedPrice(price) {
  return price * 0.8;
}

一方、関数式の場合は、巻き上げが起こらずエラーになります。

1
2
3
4
5


calcDiscountedPrice(5000); // 巻き上げられずエラーになる

const calcDiscountedPrice = function(price) {
  return price * 0.8;
};

不要なエラーを防ぐためにも、定義→実行の順にコードを書いていくようにしましょう。

アロー関数

ES2015 からはアロー関数が使えるようになりました。
アロー関数を使うと従来の書き方よりもシンプルに書くことができますが、一部制限があります。
詳しくは、 MDN Web Docs を参照してください。

従来の関数式

1
2
3


const 変数名 = function (パラメータ) {
  処理
};

アロー関数の関数式

1
2
3


const 変数名 = (パラメータ) => {
  処理;
};

スコープ

JavaScript では、値や式を参照できる範囲が決まっています。
これをスコープと言います。次の例では変数 subjects は関数内で定義されているため、関数外からはアクセスできません。

1
2
3
4
5
6
7
8


function calcAve(score) {
  const subjects = 5;
  console.log(subjects); // 実行結果 5
  return score / subjects;
}

calcAve(455);
console.log(subjects); // エラー

次の場合は、関数外で変数 subjects を定義しているため、subjects にはアクセスできます。

1
2
3
4
5
6
7
8
9


const subjects = 5;

function calcAve(score) {
  console.log(subjects); // 実行結果 5
  return score / subjects;
}

calcAve(455);
console.log(subjects); // 実行結果 5

まとめ

関数を使うことで、多くのメリットがあります。
同じような処理をまとめることでコードの可読性が向上し、メンテナンスもしやすくなります。
また、どこからでも呼び出せるようになるので、再利用がしやすくなります。
次回はイベントについて学習しましょう。

はじめよう JavaScript

関数

目次