MooToolsマスターへの道4日目です。

今回はDay 4 - Functionsです。

まだ以前のチュートリアルを見ていない方はMooToolsを30日でマスターするチュートリアルを試す！【目次】からどうぞ。

では、ちゃちゃっと勉強開始です。

Functions and Mootools 1.2

今日はMootoolsから少しステップバックして基本的なJavaScriptのfunctionを見ていきましょう。

Mootoolsのテーマは保持して、どこにMootoolsのfunctionを置くか意識しておきましょう。
このチュートリアルではdomreadyFunctionの中にコードを書いています。
しかしfunctionを記述する時は、出来ればdomreadyの外に記述したいです。
domreadyの中で呼び出すまでそのfunctionは実行されません。

これはfunctionに適したコードを試したり保持したりする一般的に良い手法です。
周りに干渉するコードがあるときに、容易に全てを見渡せます。

次に挙げる形をこのチュートリアルでは慣習にしていきましょう。

すべての例がこの形式に続きます。
これは、ページが読み込まれるとき実行される機能をもたらします。

また、この記述に続き、ボタンを押下する事で結果を確認出来るようにする事も出来ます。
これについては次のチュートリアルで出てくるイベントハンドラで達成されます。

基本事項

Mootoolsに焦点を当てる前にjavascriptでfunctionを定義するいくつかの方法があります。

以下の例ではsimple_functionという変数を宣言して、その中にfunctionを定義しています。

var simple_function = function(){
	//functionが呼び出された時にalertを表示
	alert('This is a simple function');
//functionの定義の終わりに閉じタグを挿入
}

この閉じタグは見落としやすい上に、見落とすと大変苦労します。
注意していきましょう。

それでは次に以下の例を見ていきましょう。
functionを宣言し、ページが読み込まれた段階でfunctionを呼び出します。

var simple_function = function(){
	alert('This is a simple function');
}
 
window.addEvent('domready', function() {
        //simple_functionをページが読み込まれたら呼び出す
        simple_function();
});

Single Parameter

いかなる場所からもコードの塊を容易に呼ぶことができます。
さらにパラメーターを渡す事でより便利になります。
パラメーターを使用するにはfunctinの後ろの括弧内に変数名を加える必要があります。

var name_of_function = function(name_of_the_parameter){
    /*functionの記述はここ*/
}

この記述を行うとfunctionの中で宣言した変数を使用出来ます。
変数名はできる限り描写的にした方が良いでしょう。

以下の例ではパラメーターを受け取って、パラメーターを含むalertを表示するfunctionを定義しています。
表示される文章の最初の部分がシングル・クォーテションによって囲まれますが、パラメーターを囲む必要はありません。
パラメーターと文章を連結する際には「+演算子」を使用します。

var single_parameter_function = function(parameter){
        alert('the parameter is : ' + parameter);
}
 
window.addEvent('domready', function(){
        single_parameter_function('this is a parameter');
});

Multiple Parameter - 複数のパラメーター

JavaScriptは定義するパラメーターに制限を持ちません。
一般的には読みやすさの為にパラメーターの数は最小限に保ちます。
複数パラメーターを定義する場合はカンマで区切ります。
以下の例では二つのパラメーターの値を取得して一つの変数に代入しています。

var third_number = first_number + second_number;

次の「+」演算子は↑とは異なり、文字列を結合させる働きをします。

alert(first_number + " plus " + second_number + " equals " + third_number);

はじめは紛らわしく感じるかも知れませんが、実際には凄く簡単です。
数値の間で「+」演算子を使用した場合は合計を、文字列の場合は結合となります。

var two_parameter_function = function(first_number, second_number){
        //first_numberとsecond_numberの合計を取得します。
        var third_number = first_number + second_number;
 
        //結果を表示します。
        alert(first_number + " plus " + second_number + " equals " + third_number);
}
 
window.addEvent('domready', function(){
	two_parameter_function(10, 5);
});

このscriptを実行すると「10 plus 5 equals 15」とalertが表示されます。

返り値

alertで結果を表示するのは非常に便利ですが、他のどこかでその結果を使用する必要が出てくるでしょう。
これを達成する為に、functionの中でreturnを使用します。

以下の例は↑で紹介したfunctionに似ています。
違う点はalertを出さないで合計の値を返す（return）点です。

return third_number;

更に以下のdomready内でそれ以上のことを行います。
この値を表示するために、return_valueという変数に返り値を代入してalertで表示しています。

var two_parameter_returning_function = function(first_number, second_number){
		var third_number = first_number + second_number;
		return third_number;
}
window.addEvent('domready', function(){
	var return_value = two_parameter_returning_function(10, 5);
	alert("return value is : " + return_value);
});

このfunctionを実行すると「return value is : 15」とalertが表示されます。

Functions as Parameters - パラメーターとしてのfunction

MootoolsのdomreadyCodeを見るとパラメーターとしてfunctionが使用されている事に気づくでしょう。

window.addEvent('domready', function(){
	/*code*/
});

このようなパラメーターとして渡される関数は無名関数と呼ばれます。

function(){
	/*code*/
}

無名関数を使用しないで、以下の様に記述する事も出来ます。

//domreadyで呼び出すfunctionを構築します。
var domready_function(){
	/*code*/
}
 
//domready eventにfunctionを割り当てます。
window.addEvent('domready', domready_function);

どちらが良いとは分かりませんが、このチュートリアル内では従来の方法で構築していきます。
何か情報がある場合は連絡ください。（と書いてあります）

4日目の感想

本家の方には最後に今まで学んできた事+αで出来る背景色の変更Scriptが乗っています。
是非読み解いてみてください。

随分日があいてしまいましたが、4日目終了です。

5日目もがしがし頑張ります！
次回はイベントハンドラです。

MooToolsを30日でマスターするチュートリアルを試す！【目次】に戻る

Tumblr

Tweet

2008年11月11日