.net column
.NET開発者のためのブログメディア

関数宣言と関数式の違いとは?JavaScript関数を使う12の手順

2020年05月18日

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

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

JavaScriptとは


JavaScriptとは、オブジェクト指向プログラミング言語の1つです。ウェブページでよく使用されるスクリプト言語であり、動的なウェブページやウェブアプリケーション、Node.jsなどの実行環境で使用されます。JavaScriptも、多くのプログラミング言語と同様に、型、演算子、for文やwhile文などを持ち、関数を定義して使用できます。以下では、JavaScriptの関数について説明します。

JavaScriptの関数ってそもそもなに?


関数(function)とは、プログラムのサブルーチンの一種で、0個以上の引数を受け取って、計算を行った結果を返すもののことです。サブルーチンとは、外部から呼び出せるよう機能や処理をまとめたものです。関数には、具体的な値を引数として与えることができます。例えば、引数aとbを受け取ってa+bの結果を返す関数plus(a, b)がある場合、引数1と3を与えたplus(1, 3)は4を返すことになります。

関数の定義とは

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

JavaScript関数を使う12の手順


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文の中に入れることもできます。

12:戻り値を指定しない場合は?

戻り値を必要としない場合、return文の戻り値は省略して記述できます。この場合、呼び出し元にはundefinedが返ります。前項の様な条件分岐をし、「分岐先で処理を終了させる。戻り値は不要」といった場合には、戻り値省略のreturn文を記述します。ただ、処理を終えた関数は自動的に呼び出し元に返りますので「関数の最後まで実行する。戻り値は不要」の場合は、関数の最後にreturn文の記述は不要です。

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


JavaScript関数を使うときに注意する点はいくつかあります。例えば、functionを使った関数宣言により関数を定義すると、関数が上書きされることがあります。関数式を使うことで、この上書きはエラーとして検出されるようになります。また、通常の関数では、thisはグローバルオブジェクトを指します。一方で、オブジェクトの内部で定義された関数の中では、thisはそのオブジェクトを指しています。

JavaScriptの関数宣言と関数式の違い


前述の通り、関数宣言は関数定義文によって定義される関数です。対して関数式は、変数へ代入して利用する関数となります。JavaScript特有の概念である巻き上げによって、関数宣言と関数式では関数が使用できるタイミングが異なります。関数宣言された関数は、巻き上げがされるために関数宣言の記述前であっても使用できます。対して関数式は巻き上げが行われないため、実際に関数式が記述された場所以降でないと正しく実行できません。

巻き上げの有無とは?

JavaScriptでは、関数内のどの位置で宣言した関数及び変数も、そのスコープの先頭で定義されたと見なされます。これが巻き上げです。ただし、巻き上げが行われるのは定義のみとなり、初期化は実行されません。つまり、定義された関数である関数宣言は巻き上げられますが、変数に代入された関数式は変数のみが巻き上げられるため、関数式内部の処理(変数の初期化)は行われません。

無名関数のメリットとは?


変数に関数を代入して利用する関数式の多くの場合や、アロー関数を使用する場合に記述されるのが無名関数です。無名関数はその字のごとく、関数式に名前がありません。関数名を付けた状態で記述した場合と比べて、無名関数の関数式はコード量が削減され、簡潔に記述ができるメリットがあります。また、関数式に名前を付けないことで、「そこだけで利用される関数式であり、広く使いまわさない処理である」という表現もできます。

即時関数ってどんな関数式?

定義と同時に実行される無名関数のことです。定義した関数式に直接引数を与える事で、即時実行します。その為、改めて関数式を呼び出す必要もなく、極めて簡潔に記述ができます。また即時関数にすることで、その関数式内で利用される変数や関数がグローバルではなくローカルとなります。異なる関数式で同名の変数をグローバル変数として定義し利用した場合、使い方によっては予期せぬ動きをしてしまいがちです。これがお互い即時関数内であれば、ローカル変数となり干渉することなく独立して動作できるのです。

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

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

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


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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)