カテゴリー内の他の記事

はじめようJavaScript第9回 JavaScriptの基本機能 関数を使う その1


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

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

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

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

関数(ファンクション)とは

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

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

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

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

サンプル実行環境: https://jsfiddle.net/kintone/b4f382gk/2/

関数の書式

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

  • 関数名
    関数名は、変数定義と同じように好きな名前をつけることができます。他の関数や変数と重複しないネーミングにしましょう。
  • 引数
    引数は、関数を実際に利用する際に、関数に値を渡すことのできる変数です。前述の例 tax 関数では、 priceという引数が定義されています。
    その後、 price * 1.08 という処理によって、渡した値をつかって消費税を計算させることができるのです。引数を必要としない場合は省略できます。
  • 処理内容
    関数の処理内容を定義します。
  • return文
    return を使うことによって、関数の処理を終了し、処理結果を返すことができます。返す値のことを「戻り値」といいます。
    処理結果を返す必要がなければ省略できます。その場合は関数の最後の行まで処理がされます。
  • 関数を使う
    関数を使うには 関数名() という風に宣言した関数名+括弧が必要です。何かしらの値を渡したい場合は括弧内に値を入れます。
    さらに、処理結果を受取たい時は変数に処理結果を格納することができます。

    Edit_fiddle_-_JSFiddle__5_.png

関数の使い所

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

  • 関数なしの場合

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

  • 関数ありの場合

    近い将来消費税増税の可能性も高いですし、よく利用する処理はこのように関数などでまとめることが有効です。

練習

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

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

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

  • 3つの値を合計しその結果を返す関数
    3つの値を渡される必要がありますので、引数を3つ用意する必要があります。

    サンプル実行環境: https://jsfiddle.net/kintone/Lqwd9ur2/1/

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

<< 第8回 JavaScriptの基本機能 おさらい if文とfor文の組み合わせ・2重for  | はじめようJavaScript第10回 JavaScriptの基本機能 関数を作る その2 >>

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

Avatar
I.Hayashi

いつもありがとうございます。

とても勉強させていただいております。

本当に素人で申し訳ないのですが、質問させてください。

関数(ファンクション)とはの章で練習課題で結果を一旦

「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により編集されました
Avatar
cybozu Development team

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の計算結果を吐き出します。

また、こちらは記事に対するフィードバックの欄となっておりますため、
記事の内容の発展などのご質問は、大変お手数ですがコミュニティにお願いできますでしょうか。
コミュニティのほうが多くの方がご覧になっているため、アドバイスも得やすいかと思います

 

 

 

 

cybozu Development teamにより編集されました
ログインしてコメントを残してください。