jQuery：特定の機能をまとめる「関数」の書き方

今回は、「jQueryで使う関数ってなに？」や「関数の書き方ってどうするの？」などの疑問をお持ちの方がいることでしょう。そこで、jQueryで使用する関数について、詳しく記載していこうと思います。

jQueryを使用してホームページやWebページに様々な機能や効果、演出を加えるためには、「関数」を理解することが必要になります。関数を使用しなくても実現できる機能は多いのですが、プログラムの汎用性、利便性などを考慮すると、この知識は必須といえることと思います。

という事で、それでは今回はッ、

・jQueryで使う関数とは
・用意されている関数とオリジナルの関数
・関数の書き方：作り方
・関数の呼び出し方
・無名関数について

上記について記載していこうと思います…。

jQueryで使う関数とは

関数とは「何らかの一連の処理をおこなう、複数の命令の集まり」です。例えば「引数として渡した数値を使用して足し算をおこない、その結果を返す関数」などが、簡単に説明すると考えられます。

関数は、同一コード内や、他のコードからも呼び出すことができるので「繰り返し実行する処理」や「なんども利用する処理」を関数としてまとめておくことで、同じコードを何度も記述する手間を省くことができます。

また、一連の処理を一か所にまとめることによって、その処理の内容を変更する際の手間を大幅に軽減することにもつながります。

■関数を使用しない場合

$(function (){
$(“header”)
.on(“mouseover”, function(){
// 処理1
// 処理2
// 処理3
});
$(“main”)
.on(“mouseover”, function(){
// 処理1
// 処理2
// 処理3
});
$(“footer”)
.on(“mouseover”, function(){
// 処理1
// 処理2
// 処理3
});
});

■関数を使用した場合

$(function (){
$(“header”)
.on(“mouseover”, 関数名);
$(“main”)
.on(“mouseover”, 関数名);
$(“footer”)
.on(“mouseover”, 関数名);

function 関数名(){
// 処理1
// 処理2
// 処理3
}
});

上記に例を記載していますが、例えば、処理1、処理2、処理3をコード内の複数の箇所で利用する場合を考えてみます。コードを見ると分かる通り、関数を使用することで、コード量を軽減できることが分かります。処理内容が複雑になればなるほど、関数を使用することのメリットは大きくなります。

また、関数を使用すると一連の処理の所在が明らかになるため、処理内容の修正が生じた場合にも一か所の修正だけで対応することが可能になります。

用意されている関数とオリジナルの関数

jQueryやJavaScriptには「さまざまなコードでの利用が想定される汎用的な処理」が関数として、あらかじめ数多く用意されています。このMK-blogでもjQueryやJavaScriptに用意されている各種関数を利用してサンプルコードを記載しています。用意されている関数を使用することで、一から膨大なコードを書くことなく、複雑な処理を実装することができます。

一方で、皆さん自身が「オリジナルの関数」を作成することもできます。jQueryやJavaScriptには用意されていないけれども、自作するプログラム内でなんども利用する一連の処理を関数としてまとめることが可能です。

ライブラリ、プラグイン、関数、拡張ライブラリの違い

ライブラリ、プラグイン、関数、拡張ライブラリの違いについて、分かりやすいように一覧にて記載してみます。

■ jQueryに関する用語の定義
用語	説明
ライブラリ	Webページに実装できる「機能」や「効果」などをまとめたプログラム。jQueryはJavaScriptのライブラリ
プラグイン	ライブラリの「機能」や「効果」を拡張するために追加するプログラムのこと。
拡張ライブラリ	プラグインのまとまりのこと。＜例＞UI構築に特化した拡張ライブラリ「jQuery UI」など
関数	ある値をあたえると、何らかの値を返す処理のまとまり。ライブラリやプラグインは複数の関数のまとまりで構成されている。

上記を分かりやすくソフト：Photoshopで例えると分かりやすくなります。Photoshop（ライブラリ）の使い方を覚えれば、だれでも簡単に様々な機能や効果を実現できます。使用できる機能や効果はPhotoshop側が自動的に処理をしてくれるので（関数により処理）、自分で複雑な処理を実装する必要はありません。

また、Photoshopにもともと付属しているブラシだけではなく、異なったブラシを使いたい場合は、ブラシ（プラグイン）を探して追加することもできます。さらにさまざまなブラシのバリエーションが欲しい場合は、数パターンのブラシセット（拡張ライブラリ）を追加することも可能です。

上記のように、ライブラリをベースとして、ライブラリにはない機能を付け加えたい場合、プラグインを追加します。また、そのプラグインのセットが拡張ライブラリです。関数はライブラリやプラグインを構成している機能のまとまりになります。

関数の書き方：作り方

オリジナルの関数を作成する際は、下記の構文で関数を定義します。

関数の作り方function 関数名（　引数1, 引数2・・・）{
実行する処理（引数1と引数2は関数内では変数のように使用できる）
return 値;
}

上記の構文を文章で解説すると下記のようになります。少し複雑な構文ですが、基本を理解しておくと問題なく使えるようになります。

・最初に「function」を記述する
・functionに続いて任意の関数名を指定する
・関数名に続いて()を記述し、必要な場合は「,」カンマ区切りで引数を指定
・引数は複数指定することも、指定を省略することも可能
・()に続いて{}を記述し、その中に「実行する処理」を記述する
・{}内では、引数は変数と同様に使用できる
・関数の呼び出し元に何らかの値を返す場合はreturn文を記述する
・return文は何も相対を返さない場合、省略可能

文章だけだと少し分かりにくいので、簡単なサンプルを記載してみます。下記でオリジナルの関数MKを作成しています。この関数では、2つの引数（sample1とsample2）を受け取り、関数内で2つの引数を足し算し、その値を呼び出し元に戻します。この呼び出し元に戻される値の事を「返り値」または「戻り値」と呼びます。

■関数の作成例

function MK(sample1,sample2){
return sample1 + sample2;
}