リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
（著者：kintone エバンジェリスト 村濱 一樹）
これまでの回で、JavaScriptの基本的な機能やfor文, if文について学んできました。基本的には、これまでの回で学んできたことを組み合わせるだけで、様々なことができるようになります。
今回は、処理の組み合わせをしやすくするための「関数」という機能について学んでいきます。
ぜひ、以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/
※記述ミスなどでうまく動作しないときのために、下の方にサンプル実行環境も用意していますので必要に応じてご利用ください。
※ここでの関数定義はfunctionキーワードを用いた書き方で紹介しています。
当サイトのAPIドキュメントのサンプルや一部Tipsで使われているアロー関数「=>」については、第10回 JavaScriptの基本機能 関数を作る その2で説明します。
関数(ファンクション)とは
関数とは、一連の処理をまとめるためのJavaScriptの基本的な構成要素の一つです。
関数は第2回でも少しだけ話しましたが、 alert() や、はじめようシリーズで毎回登場している console.log() も関数なんです。これは、組み込み関数と呼ばれるもので、最初から定義されているのでいつでも使える関数です。逆に、最初から用意されてない関数はユーザー定義関数といいます。
今回はユーザー定義関数を中心に勉強してみましょう！
一度関数を定義すると、その後は何度でも関数を使うことができますので、同じ処理をさせたいときに役に立ちます。
まずは、実際に定義された関数とその使い方を見てみましょう。税込み金額を計算するための関数の定義を例にあげてみます。
-
税込み金額を計算するための関数定義と関数の利用
サンプル実行環境: https://jsfiddle.net/kintone/b4f382gk/13/
関数の書式
関数を定義するには以下のようにコードを書く必要があります.
- 関数名
関数名は、変数定義と同じように好きな名前をつけることができます。他の関数や変数と重複しないネーミングにしましょう。 - 引数
引数（ひきすう）は、関数に渡す値です。関数を定義するときは、変数を使って引数を表します。前述の例calcTaxIncludedPrice関数では、priceという引数が定義されています。
その後、price * 1.08という処理によって、渡した値を使って税込金額を計算することができるのです。引数を必要としない場合は省略できます。 - 処理内容
関数の処理内容を定義します。 - return文
returnを使うことによって、関数の処理を終了し、処理結果を返すことができます。返す値のことを「戻り値」といいます。
処理結果を返す必要がなければ省略できます。その場合は関数の最後の行まで処理がされます。 - 関数を使う
関数を使うには関数名()という風に宣言した関数名＋括弧が必要です。何かしらの値を渡したい場合は括弧内に値を入れます。
さらに、処理結果を受け取りたい時は変数に処理結果を格納することができます。
関数の使い所
冒頭で述べた通り、関数は処理をまとめるためだったり、再利用しやすくするために使うと効果的です。
例えば、税込金額を求める関数 calcTaxIncludedPrice を使わない場合、税率が変わると色んな所を修正しなくてはいけなくなります。
-
関数なしの場合
関数にしている場合は、関数内部の
1.08を1.10に修正するだけで済みます。 -
関数ありの場合
よく利用する処理はこのように関数などでまとめることが有効です。
練習
実際にいくつか他にも関数を作って試してみましょう。
-
三角形の面積を求める
三角形の面積を計算するための関数を作ってみます。三角形は底辺×高さ÷2で求められますので、それを関数で計算させます。最後に、計算結果をreturnで返却します。サンプル実行環境： https://jsfiddle.net/kintone/8nxegpj3/3/
-
3つの値を合計しその結果を返す関数
3つの値を渡される必要がありますので、引数を3つ用意する必要があります。サンプル実行環境： https://jsfiddle.net/kintone/Lqwd9ur2/3/
このように、関数を使いこなせるようになれば、同じようなコードを減らしつつ、変更に強いプログラムを書くことができるようになります。
次回はif文やfor文を組み合わせてより実用的な関数を作ります。
<< 第8回 JavaScriptの基本機能 おさらい if文とfor文の組み合わせ・2重for | はじめようJavaScript第10回 JavaScriptの基本機能 関数を作る その2 >>
いつもありがとうございます。
とても勉強させていただいております。
本当に素人で申し訳ないのですが、質問させてください。
関数（ファンクション）とはの章で練習課題で結果を一旦
「result」に入れているのですが、その下の関数の利用の
ところでも出てきませんし、入れる必要があるのか不思議です。
また、「result」は予め「var」で宣言する必要はないのでしょうか。
（下記の内容でいいように思います。）
細かなところで申し訳ございませんが、宜しくお願い致します。
// 関数定義
function triangle(x, y) { // xを底辺、yを高さとして引数を設定
var triangle = x * y / 2; // 三角形の計算
return triangle;
}
// 関数利用(何回でも使える)
console.log(triangle(4, 10));
console.log(triangle(5, 8));
console.log(triangle(6, 4));
console.log(triangle(7, 6));
console.log(triangle(8, 12));
I.Hayashi 様
お世話になっております。
var triangle = x * y / 2;
↑ここはtriangleではなく、resultです。ここでresultを宣言するのです。
function triangle(x, y) { // xを底辺、yを高さとして引数を設定
var result = x * y / 2; // 三角形の計算
return result;
}
↑ここはfunctionを定義するのです。
生産用の機械を用意すると理解するとわかりやすいかもしれません。
ここで、渡される材料（x と y）を加工（計算）して結果を箱（result）に入れて出口から吐き出すように、
機械を設計する工程に当たります。
console.log(triangle(4, 10));
↑ここは先ほど定期したfunctionを呼び出します。
設計しておいた機械を使って生産するとして理解してください。
4と10は加工用の原材料です。実行完了すると 4* 10 / 2の計算結果を吐き出します。
また、こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います
ここの資料を参考に勉強させてもらっています。
最初のサンプル中
// 関数の定義
function tax(price) {
const tax = price * 1.08;
return tax;
}
// 関数の利用
console.log(tax(1000)); // 1000円に対する税込価格を表示
とありますが、
関数名は、変数定義と同じように好きな名前をつけることができます。他の関数や変数と重複しないネーミングにしましょう。
という説明もありますし、関数名taxと関数名tax内で宣言している変数(定数?)taxは違う名前の方が良かったのではないかと感じました。
次のサンプルで関数名と戻り値が違うので分かりましたが、私自身は税込み値のサンプルを見ている段階だと、関数名と戻り値の変数名を同じにしなくてはいけないのかと勘違いしてしまいました。
サイボウズマン 様
お世話になっております。cybozu developer network 運営でございます。
フィードバックをいただき、ありがとうございます！
ご指摘の内容を社内にフィードバックし、修正を検討します。
今後とも、よろしくお願いいたします。