Ugo

Webエンジニアのためのプログラミング情報サイト

JavaScriptの関数（function）を習う！高階関数や無名関数についても解説。

JavaScriptの関数（function）を習う！高階関数や無名関数についても解説。

この記事では、JavaScriptの関数（function）について説明していく。

この記事は以下のような人たちに向けて書いている。

  • プログラミング初心者でJavaScriptの基礎を習得したい人。
  • JavaScriptの関数について勉強したい人。
  • 他のプログラミング言語をすでに習得しており、JavaScriptの関数についてその特徴などを知りたい人。

なお、Google ChromeやFireFoxといったおもなブラウザを使用している人はデベロッパーツールを使いJavaScriptのコードを実際に実行することができる。ぜひ、自分でコードを書きながら記事を読み進めてほしい。

目次

関数とは

まずは関数の定義から確認しよう。

「関数」とはプログラミングにおける一連の処理の集まりで、繰り返し使用するコードを集めたものと考えるとわかりやすいだろう。

関数は「ファンクション」「メソッド」などとも呼ばれる。

デフォルト関数とユーザ定義関数

関数にはデフォルトで用意されている「デフォルト関数」とユーザが作成する「ユーザ定義関数」がある。この記事で説明しているのはユーザ定義関数のほうだ。

JavaScriptのユーザ定義関数の定義の方法には以下の3種類がある。

  1. function命令を使った定義
  2. Functionオブジェクトを使った定義
  3. 無名関数を使った定義

関数の書き方

では、実際に関数の書き方を勉強していこう。

関数の定義

関数の定義の仕方を例を使って説明する。

ここではfunction命令を使って関数を定義したい。

function logText(text) {
console.log(text);
}

この関数は変数に格納することもできる。

const logText = function(text) {
console.log(text);
}

関数の命名ルール

関数の名前は通常キャメルケースで表記する。

キャメルケースとは最初の文字を小文字で表記し、単語の変わり目で大文字を使用する表記方法。

例: getUserNameById(), changeView()

関数名は単語2・3語から構成されているのが望ましい。長すぎると読みづらく、短すぎると識別しずらくなる。

引数と戻り値

関数は複数の引数とひとつの戻り値を持つ。

例えば足し算の関数であれば、2つの数字を引数として関数に渡し、結果を戻り値として返すことになる。

function add(op1, op2) {
return op1 + op2;
}

JavaScriptでは、引数や戻り値のデータ型の指定は行わない。

戻り値はreturn命令の後に表記する。

関数の呼び出し

定義した関数を呼び出す際は関数名で呼び出すことができる。

function add(op1, op2) {
return op1 + op2;
}

console.log(add(3, 5));

関数の高度な使い方

ここからはより高度な関数の使い方を見ていこう。
JavaScriptの関数の自由度の高さがわかるだろう。

JavaScriptの関数は一種のデータ型

JavaScriptにおける関数は一種のデータ型であり、これはJavaScript特有の非常に重要な特徴だ。

これを確認するために、以下のようなコードを書いてみよう。

const triangle = function(bottom, height) {
return bottom * height / 2;
}

console.log(triangle(5, 4));
console.log(triangle);

ひとつ目の呼び出しではコンゾールに「10」が出力される。これは多くのプログラミング言語で使用されるような普通の関数の呼び出しだ。

ふたつ目の呼び出しを呼び出しを見てみよう。ここでは通常渡すはずの引数が書かれていない。Javaなどのプログラミング言語ではエラーとなるコードだが、JavaSciptでは関数の定義を呼び出すことができる。

ƒ (bottom, height) {
return bottom * height / 2;
}

これが「JavaScriptでは関数は一種のデータ型である。」ということの証明となる。

引数のデータ型を明示する

関数の呼び出しの際には、引数の名前を明示的に示してもいい。

function add(op1, op2) {
return op1 + op2;
}

console.log(add(op1: 4, op2: 5));

関数を引数として渡す（高階関数）

JavaScriptでは、関数を他の関数の引数として渡すことができる。

function arrayLoop(data, func) {
  for(const key in data) {
    func(key, data[key]);
  }
}

function showValue(key, value) {
  console.log(key + ':' + value); 
}

const array = [35, 12, 8, 95, 4];
arrayLoop(array, showValue);

上記の関数では、関数「showValue」を引数として関数「arrayLoop」に渡している。

無名関数（関数リテラル・匿名関数）

無名関数は名前を持たない関数で、再利用しない関数に対して用いられる。

無名関数は特に先の項で紹介した高階関数とともに使用される。先ほどのコードを無名関数を使って書き換えると以下のようになる。

function arrayLoop(data, func) {
  for(const key in data) {
    func(key, data[key]);
  }
}

const array = [35, 12, 8, 95, 4];
arrayLoop(array, 
  function(key, value) {
    console.log(key + ':' + value);
  }
);

どうだろう少し読みやすくなったのでは無いだろうか？

MENU