JavaScriptの関数（基礎編）

世界に存在するほぼ全てのプログラミング言語には、「変数」と「関数」という概念が存在します(*1)。

どの言語を学習するにせよ、「Hello World」が終わったら「変数」や「制御構文」、そして「関数」を理解していかなければ、その後に続く内容は増々理解できなくなります。

本記事では、JavaScriptの関数の「基礎編」として、関数の理解に必要な最低限且つ重要な内容をまとめています。

*1：他言語経験者からは、「Javaの場合、メソッドはあっても関数はない」といった指摘があるかもしれません。

しかし、メソッドも「少し特徴のある関数」という認識で問題ないと考えます。

JavaScriptにもメソッドはあるので、学習がそこまで進んだタイミングで、厳密な違いを理解するのが良いでしょう。

1. 関数とは

「関数」と聞くと、数学を思い浮かべる方が多いかもしれません。
プログラミングの関数と数学の関数は、根本的な考え方は同じで、共通点もあります。
しかし、当然ながら相違点もあり、別物として考えてください。

プログラミングにおける「関数」を一文で簡潔に表現するならば、次のようになります。

この一文👆から、今は具体的なイメージが湧かなかったとしても、しっかりと頭に刻み込んでおいてください。後にジワジワと効いてきます。

基本的な関数は以下の書式で作成します。

2. 世界一簡単な関数を作成する

コンソールに「Hello」と表示するだけの機能を持つ関数を作成してみましょう。

function sayHello() {
  console.log("Hello");
}

このhello.jsをhtmlファイルから読み込み、ブラウザのデベロッパーツールを開き、コンソールタブを確認するとどうなっているでしょうか。

> 

👆このように、何も表示されていません。
プログラムに間違いがある？　いいえ、そうではありません。

では早速、先ほどのプログラムに関数を呼び出すコードを追加します。

function sayHello() {
  console.log("Hello");
}

sayHello();  // 👈sayHello関数を呼び出すコード

> Hello

3. 世界一簡単な関数の中身

function sayHello() {
  console.log("Hello");
}

• function：「関数」、「機能」という意味の英単語。JavaScriptの関数を作る際には function から書き始める。
• sayHello：今回作成した関数の名前。機能を端的に表すネーミングにすることが重要。
• ()：JavaScriptの関数は、定義する時も呼び出す時も必ず丸カッコが必要。
• { }：波カッコ、あるいは中カッコと読み、関数の処理はこの波カッコの内側に記述する。

👆ココ、テストにデマス。

世界一簡単な関数の問題点

function sayHello() {
  console.log("Hello");
}

👆この関数にできることは、「Hello」という文字列をコンソールに表示させることだけです。
ということは、「Hello」以外の別のメッセージを表示させたい場合、別の関数を作る必要が出てきますね。

表示させたいものが増えるたびに、文字列を変えるためだけに関数を増やさなければならなくなります。

この問題を解決する手段に「引数ひきすう」があります。
「関数を呼び出す側から表示したいメッセージを渡し、関数が受け取る」という考え方です。

引数のある関数

関数に引数を持たせてみましょう。

function sayHello( message ) {
  console.log( message );
}

sayHello( "こんにちは！" );
sayHello( "ご機嫌いかが？" );

> こんにちは！
> ご機嫌いかが？

プログラムの流れを図解で説明します。

最初の sayHello 関数呼び出しでは「こんにちは！」を引数に指定しているので、下図のようにデータが受け渡され、コンソールに「こんにちは！」が表示されます。

2つ目の sayHello 関数の呼び出しも同様の考え方で、下図のようにデータが受け渡され、コンソールに「ご機嫌いかが？」が表示されます。

世界一簡単な関数のもう一つの問題点

function sayHello( message ) {
  console.log( message );
}

👆関数に「引数」を設定したことで、コンソールに表示するメッセージを変更可能にしました。
しかし、これでは別の問題が発生します。

表示させたいメッセージを変えることはできても、そのメッセージをコンソール以外に表示することができません。
コンソール表示専用関数では、使いどころは限られてしまいます。

この問題を解決する手段に「戻り値もどりち」があります。
「関数を呼び出す側は、関数から返される結果のみを受け取り、その後の処理は呼び出し元でプログラムする」という考え方です。

戻り値のある関数

関数に戻り値を持たせてみましょう。

function sayHello( message ) {
  return message;
}

alert( sayHello("こんにちは！") );
console.log( sayHello("ご機嫌いかが？") );

プログラムの流れを図解で説明します。

最初の sayHello 関数呼び出しは「こんにちは！」を引数に指定しているので、そのメッセージがそのままreturnによって返され、アラート（alert）がポップアップ表示されます。

2つ目の sayHello 関数の呼び出しも同様の考え方で、関数からreturnされた結果がコンソールに「ご機嫌いかが？」が表示されます。

上記の通り、「戻り値」は呼び出し元に返されます。
返された値を使い回したい場合などに、戻り値を変数に入れておくことができます。

次の例は、「ご機嫌いかが？」というメッセージを2回続けてコンソールに表示するプログラムです。

function sayHello( message ) {
  return message;
}

let result = sayHello("ご機嫌いかが？")
console.log( result );
console.log( result );

return文のない関数

JavaScriptでは、すべての関数は戻り値を持ちます。
それはreturn文を記述していない関数についても同様です。

明示的に戻り値をreturnしていないJavaScriptの関数は「undefined」を返します。

簡単な実例でイメージを掴む

function plus(number1, number2) {
  return number1 + number2;
}

まずは、👆この関数を「読んで」みてください。
プログラム内に登場する主な単語の意味は以下の通りです。

• function ： 関数、機能
• plus：加える
• number：数
• return：返す、戻す

「命名規則」の記事でもお伝えしているとおり、プログラミング言語は「言語」のひとつであり、言語で書かれたものは文章です。
プログラミング言語は、コンピュータと意思疎通するための言語であり、日本語や英語の学習とほとんど変わりません。

英語の勉強を思い出してください。
「読む」と「書く」あるいは「聞く」と「話す」では、それぞれどちらが簡単ですか？

多くの人が「読む」、「聞く」の方が「書く」、「話す」よりも簡単であると答えるのではないでしょうか。

プログラムコードを目にしたら、まずは可能な範囲で日本語の文章に訳していくことを心がけてみましょう。

関数（中級編）の予習

後の「関数（中級編）」で詳しく解説する内容ですが、DOM操作に進むうえで知っておいた方が良い知識をリストアップし、サンプルプログラムを掲載します。

JavaScriptの関数は、変数に代入できる

// 名前のない関数を定義し、変数「func」に代入している。
let func = function() {
  console.log("Hello");
};

// 関数が代入されている変数の名前「func」で呼びだしている。
func();

> Hello

JavaScriptの関数は、引数に設定できる

function func() {
  console.log("Hello);
}
function funcHasFunc(f) {
  f();  // 仮引数として受け取ったfを呼び出す
}

// funcHasFuncの実引数に関数のfuncを渡している
funcHasFunc(func);

👆のプログラムを別の書き方に変更してみます。👇

function funcHasFunc(f) {
  f();
}

// funcHasFuncの実引数として、関数をまるごと渡している
funcHasFunc( function() {
  console.log("Hello");
} );

> Hello

JavaScriptの関数は、戻り値としてリターンできる

function getFunc() {
  return function(number) {
    console.log(number * 2);
  };
}

let returnedFunc = getFunc();
returnedFunc(3);

> 6

まとめ

記事冒頭にも記載しましたが、JavaScriptに限らずプログラミング言語には「関数」が存在しています。
中でもJavaScriptでは、関数がトップレベルオブジェクトであり、最重要の概念であると言えます。

JavaScriptの関数は、単に関数としてだけでなく、オブジェクトとして、コンストラクタとしての側面を持つことができます。
そして書き方のバリエーションも豊富です。

そのため本記事では、関数の最も基本的な書き方と、最初に覚えておくべき考え方、用語について説明しました。

この後、DOM操作や中級編に進んでいく上で、知っておくべき内容もまとめておきます。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

それでは最後までお読みいただき、ありがとうございました。

『詳説 JavaScript』メニューに戻る