JavaScript関数を使う手順11個！おすすめの本3選紹介

システム
エンジニア

JavaScript関数はどのように使うのでしょうか。

プロジェクト
マネージャー

JavaScript関数を使うには手順が大切です。順番にご紹介していきましょう。

JavaScriptとは

JavaScriptとは、オブジェクト指向プログラミング言語の1つです。ウェブページでよく使用されるスクリプト言語であり、動的なウェブページやウェブアプリケーション、Node.jsなどの実行環境で使用されます。

JavaScriptも、多くのプログラミング言語と同様に、型、演算子、for文やwhile文などを持ち、関数を定義して使用できます。以下では、JavaScriptの関数について説明します。

関数（function）とは

関数（function）とは、プログラムのサブルーチンの一種で、0個以上の引数を受け取って、計算を行った結果を返すもののことです。サブルーチンとは、外部から呼び出せるよう機能や処理をまとめたものです。

関数には、具体的な値を引数として与えることができます。例えば、引数aとbを受け取ってa+bの結果を返す関数plus(a, b)がある場合、引数1と3を与えたplus(1, 3)は4を返すことになります。

関数の定義

関数の定義とは、プログラマーが処理の内容を決めて独自の関数をつくることです。関数定義のための文法が決まっており、ユーザーは、自由に関数を定義できます。また、演算子やよく使用する関数などは、あらかじめ定義されていることもあります。

関数を定義する際には、関数名、引数、処理の内容、戻り値が必要です。これら全てがそろっている必要はなく、引数のない関数、戻り値のない関数なども定義できます。

JavaScript関数を使う手順11個

JavaScriptで関数を使うには、関数を定義し、引数や戻り値などを設定する必要があります。関数の定義や呼び出しの方法などは、プログラミング言語ごとに決まっており、JavaScriptにも独自の文法があります。

JavaScript関数を書く方法

JavaScriptの関数を書くには、複数の方法があります。1つ目は、一般的な関数宣言による方法、2つ目は、変数に無名関数を代入する関数式による方法、3つ目は、Functionオブジェクトのコンストラクタとして関数を定義する方法です。

同じ処理であっても、このように3つの方法で関数を記述し、定義できます。ここからは、それぞれの方法について、書き方や特徴について説明します。

1：関数宣言

関数宣言は、関数定義文 (function statement) によって定義される関数です。functionキーワードと、関数名、関数への引数のリスト、関数本体となるJavaScript の文を記述します。

関数本体となるJavaScriptの文は、波括弧{ }で囲みます。戻り値は、この波括弧内部でreturn文を使って指定します。また、引数は値渡しとなるため、波括弧内部で変更した値は外部に影響しません。

2：関数式

関数式とは、関数を代入する式のことです。関数式は関数を定義する際に使用され、変数に関数そのものを代入します。

このように代入される関数はfunctionキーワードのみで、名前を付ける必要がなく、無名関数とも呼ばれます。

一方で、関数式では名前をつけることもでき、関数内部で関数自身を参照する際や、デバッガーのスタックとレース機能などで、問題となっている関数を特定する際に利用できます。

3：コンストラクタ

JavaScriptに用意されているFunction関数のコンストラクタを使って、文字列から関数を作成できます。Function関数の第一引数に関数の引数を与え、第二引数に文字列として、関数本体の処理を与えます。

このように生成されたFunctionオブジェクトは、変数に代入することができ、代入した変数を関数式と同様に関数として使用できます。

JavaScript関数の作成方法

JavaScriptの関数を作成するには、上記の関数宣言、関数式、Functionコンストラクタのいずれかを用いて、関数を定義します。関数定義の中で、その関数でおこなう処理を記述します。

関数宣言の場合は関数名を、関数式とFunctionコンストラクタの場合は変数名を、それぞれ内容に合わせて命名します。また、波括弧{ }内部、あるいはFunction関数の第二引数には、引数を用いた処理を記述します。

4：アロー関数

アロー関数とは、function式の代替構文です。関数式による関数定義を、=>という記号を用いて記述することで、無形関数をより短く簡潔に表現できます。

関数式による関数定義では、var a = function(number){ };のように、functionを使用します。一方でアロー関数では、var a = number => { };のように、functionを=>で代替します。

JavaScript関数の呼び出し方法

JavaScriptの関数の呼び出しとは、定義した関数にパラメータを渡して、動作を実行するということですJavaScript関数は、関数名(引数)という表記で呼び出すことができます。

関数を呼び出すと、関数を定義した際に記述した関数本体の処理が実行されます。また、引数を渡すことで、引数を使用した処理が可能になります。定義したスコープの内部であれば、他の関数内部や任意の場所で呼び出すことが可能です。

5：関数名の指定

関数を呼び出す際には、関数名を指定します。関数名は、関数宣言の場合はfunctionに続いて設定した関数名を使用し、関数式とFunctionコンストラクタの場合は、関数を代入した変数名を関数名として使用できます。

単純に関数を呼び出す際には、関数名(引数1, 引数2);というように、関数に括弧( )を続けて表記します。引数が存在しない関数の場合は、関数名()で実行されます。

6：クリック

動的なウェブページにおいて、クリックした時にJavaScript関数を呼び出す場合は、onclick属性を使用します。onclickは、クリック時に実行するスクリプトを記述する属性です。指定する際には、HTMLのタグ内にonclick=”関数名()”と記述します。

この場合は、HTMLのscript属性を用いてJavaScriptを直接書き込むか、JavaScriptファイルを読み込むようにします。

7：ロード

動的なウェブページにおいて、画面をロードした時にJavaScript関数を呼び出す場合は、onload属性を使用します。onloadは、ロード時に実行するスクリプトを記述する属性です。onclickと同様に、HTMLのタグ内にonload=”関数名()”と記述します。

onloadの場合も、HTMLのscript属性を用いてJavaScriptを直接書き込むか、ファイルを読み込むようにします。

JavaScript関数の引数を設定する方法

JavaScript関数に引数を設定するには、関数定義と関数呼び出しの際に、関数名の後の括弧( )内に記述します。関数定義の際に指定した引数の数と、関数呼び出しの際に渡す引数の数は同じにならなければなりません。

8：設定する

関数定義の際に引数を設定する場合は、括弧内に(引数1,引数2,引数3)のように引数を並べて設定します。関数宣言の場合は、関数名の後に指定し、関数式の場合は、functionの後に指定します。

指定した引数は、波括弧{ }内の関数の処理で使用できます。例えば、function(a, b){return a+b}のように、二つの引数をとり、その値を足し合わせる関数を定義できます。

9：値を渡す

関数に値を渡すためには、関数呼び出しの際に括弧( )内に渡したい値や変数を与える必要があります。関数名(引数1,引数2,引数3)のように複数の引数を渡すことができますが、引数の数は、関数定義の際に指定した数と同じでなければなりません。

また、関数は数字、文字列、クラスなど、さまざまな型の引数をとることができます。JavaScriptは動的型付け言語ですので、関数定義の時点では型を明示はしていません。

10：別の関数

関数の引数として、別の関数を渡すことができます。これにより、関数内で処理を行ったあとで別の関数を呼び出すということが可能になり、このような関数をコールバック関数と言います。

通常の引数と同じように、引数に関数名や関数を代入した変数などを与えることで、引数を渡すことができます。コールバック関数を引数にとる例としては、一定時間後に引数として渡された関数を実行するsetTimeout()などがあります。

JavaScrip関数の戻り値を設定する方法

JavaScript関数では、呼び出し元に返す値として戻り値を設定できます。関数内で処理を終えたあとで、処理の結果として出た値や処理の成功、失敗を表すステータスなどを戻り値として返すことができます。

戻り値はreturn a のようにreturn文に続けて記述します。return文で戻り値を与えたところで、関数は終了してしまうため、return文は一般的に一番最後に配置されることが多いです。

11：条件分岐

条件分岐などの場面で、JavaScript関数の戻り値を活用できます。if文の中に、戻り値を設定した関数を含む式を入れると、その結果に応じて次の処理を変更することが可能になります。

また、関数の戻り値を条件によって変更することで、条件分岐の結果を返す関数を作成する方法があります。関数の戻り値は数値だけではなく、booleanなども扱えるため、関数そのものをif文の中に入れることもできます。

JavaScript関数を使うときに注意する点

JavaScript関数を使うときに注意する点はいくつかあります。例えば、functionを使った関数宣言により関数を定義すると、関数が上書きされることがあります。関数式を使うことで、この上書きはエラーとして検出されるようになります。

また、通常の関数では、thisはグローバルオブジェクトを指します。一方で、オブジェクトの内部で定義された関数の中では、thisはそのオブジェクトを指しています。

JavaScriptを学べるおすすめの本3選

JavaScriptを学ぶのに書籍を利用すると、体系的な知識を得ることができます。専門的なものから、初心者が学びやすいものまで多く出版されています。以下では、JavaScriptを学ぶのにおすすめの本を3冊紹介します。

1：スラスラ読める JavaScriptふりがなプログラミング

「スラスラ読める JavaScriptふりがなプログラミング」は、JavaScriptを学びたい初学者やエンジニアを目指す人向けの本となっています。基本的な文法に加えて、応用問題も掲載されています。

プログラムの読み方にふりがなをつけてのせるというコンセプトで、プログラムの読めない入門者でも学びやすい内容になっています。

2：脱初心者のJavaScript力を底上げするための本

「脱初心者のJavaScript力を底上げするための本」は、JavaScriptの基本をおさえた学習者が次のステップに進むための書籍です。美しくコードを書くポイントや、特殊な関数、その他の発展的な内容を取り扱っています。

3：JavaScriptエンジニアのためのNode.js入門

「JavaScriptエンジニアのためのNode.js入門」は、JavaScriptとNode.jsの解説書です。Node.jsというサーバーサイドのJavaScript環境について書かれた書籍ですが、JavaScriptの文法や初歩的なプログラムから掲載されています。

システム
エンジニア

JavaScript関数を使うには注意が必要なのですね。

プロジェクト
マネージャー

そうですね。JavaScript関数を正しく理解して上手に使いこなしましょう！

JavaScriptの関数を理解して使いこなそう！

JavaScriptの関数を理解して使いこなすことができれば、さまざまな動的ウェブサイトやウェブアプリケーションを作成できます。書籍やインターネットなどでJavaScriptを習得して、JavaScriptの関数を自由に作れるようになりましょう。