jQuery Mobileを使って少し画面を書いてみる：はじめまして。JavaScript（2）（1/2 ページ）

JavaScriptを理解するために、分岐やループなどの基礎と、jQueryとjQuery Mobileを使って、少し画面を書いてみましょう。

[野村亮之，Jamlogic]

　前回は、ブラウザでフロントエンドのJavaScriptを書くためのデバッグ方法と、簡単なJavaScriptを自分で書いてみるということを実践しました。今回は、もう少しプログラムを理解するために、分岐やループなど、ほかの言語でも出てくる制御関数について見ていきましょう。

　後半では、jQueryとjQuery Mobileを使って、少し画面を書いていくというステップに進みたいと思います。

プログラムの制御

　前回の記事で、JavaScriptを書く場所のお話をしました。また、console関数を使ってプログラムを少し書いてみました。

<script type=”text/javascript”>
var a = 1;
var b = 2;
console.debug(a + b); //答えは何？
//ifで比較することができます
if(a > b){
	console.debug(“aの方が大きい”);
}else{
	console.debug(“bの方が大きい”);
}
//分岐を下記のように書くことができます
switch(a){
	case 1:
		console.debug(“aは1である”);
		break;
	case 2:
		console.debug(“aは2である”);
		break;
	default:
		console.debug(“aはそれ以外である”);
		break;
}
//ループは以下のようにできます
//配列を順に呼び出して、アラートで配列の中身を表示します。
var arr = [“apple”, “orange”, “pine”];
for(var i = 0; i < arr.length; i++){
	console.debug(arr[i]);
}
var obj = {a: 1, b: 2, c: 3};
for(var key in obj){
	console.debug(obj[key]);
}
</script>

　まず、この中に出てくるフロー制御に関して見ていきましょう。

分岐1：if

　プログラムを分岐するときに、利用します。ifは、“もし”という意味なので、分かりやすいですよね。

if(a > b){
	console.debug(“aの方が大きい”);
}else{
	console.debug(“bの方が大きい”);
}

　このプログラムを日本語で読んでみると、もし（if）、変数aが変数bよりも大きい場合は、最初の{}の中のプログラムを実行する、それ以外（else）の場合は、elseの中のプログラムを実行するということです。

　さらに、下記のような書き方もできます。

演算子

>、<、>=などは、演算子といわれて、値や変数同士を評価するのに使われます。これは、小学校か中学校の数学でやりましたよね！それと同じです。

if(a > b){
	console.debug(“aの方が大きい”);
}else if(a == b){
	console.debug(“aとbは同じ”);
}else{
	console.debug(“bの方が大きい”);
}

　else ifは、“さらにもし次の条件だったら”ということをいうことができる宣言です。これを書き連ねていくと、どんどん分岐ができます。ただし、分岐の評価は、上から順に行っていきますので、最初のa > bが満たされれば、それ以降のelse ifやelseは実行されます。ですので、条件を良く見て書いていきましょう。

分岐2：switch

　これも分岐をすることができる関数です。値を評価して、分岐したい場合に使われることが多いです。

switch(a){
	case 1:
		console.debug(“aは1である”);
		break;
	case 2:
		console.debug(“aは2である”);
		break;
	default:
		console.debug(“aはそれ以外である”);
		break;
}

　これも、日本語に直してみましょう。もし、変数aが1だったら、case 1:から続くプログラムを実行する。2だったら、case 2:から続くプログラムを実行する。そして、それ以外の場合は、default:から続くプログラムを実行する。という意味です。

　ここで、続くプログラムと書いたのですが、break;（終わる）を入れない限り、その下のプログラムを続けて実行します。これを応用して、少し便利な使い方ができるのが、switchの使い方です。

switch(a){
	case 1:
	case 2:
		console.debug(“aは1または2である”);
		break;
	default:
		console.debug(“aはそれ以外である”);
		break;
}

　と書くことにより、case 1:、case 2:の場合を一緒に書くことも可能です。また、JavaScriptでも評価に関数を使うことができるので、以下のように書くことも可能です。

switch(true){
	case a > b:
		console.debug(“aの方が大きい”);
	case a == b:
		console.debug(“aとbは同じである”);
		break;
	default:
		console.debug(“bの方が大きい”);
		break;
}

　ifの分岐で書いたものをそのまま再現しました。caseの評価が、true（その通り）の場合に、それに続くプログラムを実行するということですね。

ループ：for

　プログラムの基本的なループ関数にforというものがあります。

var arr = [“apple”, “orange”, “pine”];
for(var i = 0; i < arr.length; i++){
	console.debug(arr[i]);
}

　配列・オブジェクトという新しい言葉が出てきましたが、この言葉については、次回以降で触れていきます。簡単に説明をすると、前回の説明で、変数を箱のようなものと表現しましたが、JavaScriptの配列は、永遠に続いている（ちょっと言い過ぎですが）、敷居が付いている箱だと思ってください。0番目から箱の中に数字や、文字列または、さらに配列やオブジェクトを入れることができて、順番に入れていくと0から順番に名前が付いていきます。

　オブジェクトは、ほかの言語では、連想配列みたいないわれ方もしますが、基本的には、入れる箱ごとに任意の名前が付けられる配列だと考えてください。

var arr = [“apple”, “orange”, “pine”];

　は、0番目が、appleという文字列、1番目がorangeという文字列、2番目がpineという文字列が入った箱の連なりです。0番目と書いたのは、JavaScriptの配列の最初の箱の呼び方が0番目だからです。

　上のプログラムでは、この配列をループして、console関数で出力しています。

　consoleばっかりで、画面に何も出てこないじゃんと思われている方、もう少しで画面に出力をしてきますので、ご辛抱を。

　日本語に置き換えてみると、変数iを0にして、変数iが配列arrの長さ（length）（この場合は、3ですね）よりも小さい場合に、{}の中のプログラムを実行するという意味です。また、1回ループするごとに変数iに1つ足してください（i++）とも書かれています。

　これを出力すると、

apple
orange
pine

　と出力されますよね。上の日本語の通り、配列arr から1つずつ値を取り出して、出力したことになります。最後に書いてある下記のプログラムですが、

var obj = {a: 1, b: 2, c: 3};
for(var key in obj){
	console.debug(obj[key]);
}

　jQueryなどのフレームワークで、$.eachなどがあるので、あまりこの書き方は知られていないかもしれないのですが、ループして、オブジェクトの値を取り出す方法です。

　制御関数は、ほかにもたくさんあるのですが、今回は基本的なものを見てみました。これで、少しプログラムっぽいものを書けるようになったのではないでしょうか？