第 9 回 JavaScript の基本機能関数を作るその1

固定リンクがコピーされました

（kintone エバンジェリスト）

これまでの回で、JavaScript の基本的な機能や for 文、 if 文について学んできました。
基本的には、これまでの回で学んできたことを組み合わせるだけで、さまざまなことができます。
今回は、処理の組み合わせをしやすくするための「関数」という機能について学んでいきます。

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

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

ここでの関数定義は function キーワードを用いた書き方で紹介しています。
当サイトの API ドキュメントのサンプルや一部 Tips で使われているアロー関数 => については、第10回 JavaScript の基本機能関数を作るその2 で説明します。

関数（ファンクション）とは

固定リンクがコピーされました

関数とは、一連の処理をまとめるための JavaScript の基本的な構成要素のひとつです。

関数は第2回でも少しだけ話しましたが、 alert() や、はじめようシリーズで毎回登場している console.log() も関数なんです。
これは、組込み数と呼ばれるもので、最初から定義されているのでいつでも使える関数です。
逆に、最初から用意されてない関数はユーザー定義関数といいます。

今回はユーザー定義関数を中心に勉強してみましょう！
一度関数を定義すると、その後は何度でも関数を使うことができますので、同じ処理をさせたいときに役に立ちます。
まずは、実際に定義された関数とその使い方を見てみましょう。
税込み金額を計算するための関数の定義を例にあげてみます。

税込み金額を計算するための関数定義と関数の利用

固定リンクがコピーされました

1
2
3
4
5
6
7
8


// 関数の定義
function calcTaxIncludedPrice(price) {
  const taxIncludedPrice = price * 1.08;
  return taxIncludedPrice;
}

// 関数の利用
console.log(calcTaxIncludedPrice(1000)); // 1000円に対する税込価格を表示

サンプルの実行環境

https://jsfiddle.net/kintone/b4f382gk/13/

関数の書式

固定リンクがコピーされました

関数を定義するには以下のようにコードを書く必要があります。

1
2
3
4
5


function 関数名(引数) {
  // 処理内容
  // return文
}
// 関数を使う

関数名

固定リンクがコピーされました

関数名は、変数定義と同じように好きな名前をつけることができます。
他の関数や変数と重複しないネーミングにしましょう。

引数

固定リンクがコピーされました

引数（ひきすう）は、関数に渡す値です。
関数を定義するときは、変数を使って引数を表します。
前述の例 calcTaxIncludedPrice 関数では、 price という引数が定義されています。
その後、 price * 1.08 という処理によって、渡した値を使って税込金額を計算できるのです。
引数を必要としない場合は省略できます。

処理内容

固定リンクがコピーされました

関数の処理内容を定義します。

return文

固定リンクがコピーされました

return を使うことによって、関数の処理を終了し、処理結果を返すことができます。
返す値のことを「戻り値」といいます。
処理結果を返す必要がなければ省略できます。その場合は関数の最後の行まで処理がされます。

関数を使う

固定リンクがコピーされました

関数を使うには 関数名() という風に宣言した関数名＋括弧が必要です。
何かしらの値を渡したい場合は括弧内に値を入れます。
さらに、処理結果を受け取りたい時は変数に処理結果を格納できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// testという関数が定義されている前提
// 1. ただ関数を使う場合
test();

// 2. 関数に値を渡したい場合
test(1);
test(1, 2); // 複数渡す場合はカンマ区切り

// 3. 処理結果を受け取る場合
const result = test(1);

関数の使い所

固定リンクがコピーされました

冒頭で述べたとおり、関数は処理をまとめるためだったり、再利用しやすくするために使うと効果的です。
たとえば、税込金額を求める関数 calcTaxIncludedPrice を使わない場合、税率が変わるといろんな所を修正しなくてはいけなくなります。

関数なしの場合

固定リンクがコピーされました

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


console.log(1000 * 1.08);
console.log(2000 * 1.08);
console.log(3000 * 1.08);
console.log(4000 * 1.08);

// ↓ 税率が変わると1.08を全て修正する必要がある

console.log(1000 * 1.10);
console.log(2000 * 1.10);
console.log(3000 * 1.10);
console.log(4000 * 1.10);

関数ありの場合

固定リンクがコピーされました

関数にしている場合は、関数内部の 1.08 を 1.10 に修正するだけで済みます。

1
2
3
4
5
6
7
8
9


function calcTaxIncludedPrice(price) {
  const taxIncludedPrice = price * 1.10; // ←ここを修正するだけでよい
  return taxIncludedPrice;
}

console.log(calcTaxIncludedPrice(1000));
console.log(calcTaxIncludedPrice(2000));
console.log(calcTaxIncludedPrice(3000));
console.log(calcTaxIncludedPrice(4000));

よく利用する処理はこのように関数などでまとめることが有効です。

練習

固定リンクがコピーされました

実際にいくつか他にも関数を作って試してみましょう。

三角形の面積を求める

固定リンクがコピーされました

三角形の面積を計算するための関数を作ってみます。
三角形は 底辺×高さ÷2 で求められますので、それを関数で計算させます。
最後に、計算結果を return で返却します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13



// 関数定義
function triangle(x, y) { // xを底辺、yを高さとして引数を設定
  const result = x * y / 2; // 三角形の計算
  return result;
}

// 関数利用(何回でも使える)
console.log(triangle(4, 8));
console.log(triangle(5, 10));
console.log(triangle(6, 12));
console.log(triangle(7, 14));
console.log(triangle(8, 15));

サンプルの実行環境： https://jsfiddle.net/kintone/8nxegpj3/3/

3つの値を合計しその結果を返す関数

固定リンクがコピーされました

3 つの値を渡される必要がありますので、引数を 3 つ用意する必要があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// 関数定義
function sum(a, b, c) {
  const result = a + b + c;
  return result;
}

// 関数利用
console.log(sum(1, 2, 3));
console.log(sum(10, 20, 30));
console.log(sum(7, 8, 9));
console.log(sum(-1, -2, -3));

サンプルの実行環境

https://jsfiddle.net/kintone/Lqwd9ur2/3/

まとめ

固定リンクがコピーされました

このように、関数を使いこなせるようになれば、同じようなコードを減らしつつ、変更に強いプログラムを書くことができます。
次回は if 文や for 文を組み合わせてより実用的な関数を作ります。

旧：はじめよう JavaScript