JavaScriptのfunction(関数)～基礎編～

TOP
コラム
JavaScriptのfunctio

JavaScriptのfunctionとは？

JavaScriptにはfunctionというものがあります。functionとは日本語で関数と訳されます。

functionはよく行う処理を1つにまとめ、自由に名前をつけられるものです。つけた名前を記述することでfunction(関数)を使用することができます。

functionのメリットは様々な処理を1つにまとめることで、同じ処理を何度も書く必要がなく、また別のプログラムにも使い回すことが可能になるという点です。

ここではJavaScriptのfunctionについて説明します。

functionの基本

JavaScriptのfunctionは()内のパラメータを受け取り、処理を行い、その処理結果呼び出し元に返すものです。

JavaScriptのfunctionの基本を説明します。

functionの作成方法


function ファンクション名(要求するパラメータ){
 具体的な処理内容
}

ファンクション名には呼び出す時に必要なファンクション名をつけます。

ファンクション名の文字や単語の制限は変数名と同じです。

functionの呼び出し方法


ファンクション名(要求するパラメータ)

functionを呼び出す時は上記のような形になります。

functionの利用方法

JavaScriptのfunctionの利用方法には3つあります。

関数宣言で記述する方法、関数式で記述する方法、コンストラクタで記述する方法の3つです。

関数宣言で記述する方法

関数宣言で記述する方法はfunctionの基本で説明した通りの記述した形です。


function ファンクション名(要求するパラメータ){
 具体的な処理内容
}

関数式で記述する方法

関数を宣言する時に関数名を記述しなくても大丈夫なため、無名関数、匿名関数と呼ばれています。

関数式（関数リテラル）によるfunctionの使用方法です。


let sample = function(){
 具体的な処理内容
}

コンストラクタで記述する方法

JavaScriptに用意されているFunctionオブジェクトのコンストラクタを利用して関数を定義する方法です。

第1引数に引数名を指定し、第2引数に処理の内容を記述します。

コンストラクタを使用した記述はメリットもなく間違いやすいとこもあるため、あまり利用することがないと言われています。

サンプルコード


'use strict';
function total(price) {
    const tax = 0.1;
    return price + price * tax;
}
console.log('コーラの値段は税込み' + total(100) + '円です。');


結果
コーラの値段は税込み110円です。

totalというfunctionを作成し、ファンクション名であるtotalを記述することでtotalを呼び出しています。

注意しなければならないのは、パラメータpriceはfunction()に続く｛｝の中でだけ有効な変数として機能するため｛｝外では機能しません。

複数の引数をもつfunction

JavaScriptのfunctionはfunction(引数1,引数2…)のように複数の引数を記述することができます。


function sample(引数1、引数2){
 //引数1、引数2はこの中に記述する処理で使用できる
}

サンプルコード


function drink(name,price){
 console.log(name + 'は' + price + '円です');
}

drink('コーラ',120);//引数に値を渡す

結果


コーラは120円です

これは引数にname、priceを設定してます。

その後にdrink('コーラ',120)と記述することで、nameにコーラ、priceに120と格納されています。

引数を使用して実行結果のように文字列を表示しています。

戻り値を設定したfunction

returnを使用することで、処理結果を返すことができます。

また戻り値を使用し、条件分岐をすることができます。

returnを使用した例


function total(num1,num2){
 return num1 + num2;
}
console.log(total(1,4));


実行結果
5

このコードは引数であるnum1,num2を足してreturnしています。

returnを記述することで足し算の結果を返すようにしています。

関数が実行されてから、処理内容の結果をconsole.log()にて出力していいます。

戻り値を使った条件分岐の例

先ほど作成した関数totalを使用し説明します。


if( total(1, 5) > 5) {
 console.log( '5よりも大きい' );
}
else {
 console.log( '5よりも小さい');
}


実行結果
5よりも大きい

total()は2つの引数を足した結果を返すものです。

今回は1と5が足され6という結果を返しています。

そのため、5よりも大きいという結果となります。

つまり、return文を使用することで、関数を普通の値と使用することができます。

まとめ

JavaScriptのfunction(関数)について簡単に説明しました。

JavaScriptで開発を行う時functionは便利であり、よく使われるものとなっています。