絵でわかるWebプログラミング入門

プログラミング入門!制御構文とは?

ここでは、プログラミング入門として制御構文と呼ばれる技法を学習しましょう。

プログラミング入門!プログラムとは?プログラミング入門!変数と配列とは?を学習してから取り掛かりましょう。


制御構文という言葉は重要ではありません。制御構文と呼ばれるそれぞれのプログラミング技法がどういう技法なのかを理解することが大切です。ここでは、入門ということでif文、for文、そして関数を学習しましょう。

if文でかんたん振り分け

if(いふ)文は条件によって処理を分けることができるプログラミングの技法です。概念としては人間の思考に近いので、入門者でもわかりやすい技法だと思います。簡単にいうと、偶数ならこっち、奇数ならあっち、みたいな技法です。


if文のイメージ
		if( 条件 ) { 条件が合うとき } else { それ以外 };

このように、まず条件を書き、そして条件が合っているときとそれ以外のときの処理を書いておきます。

次のように、複数の条件を書くこともできます。

		if( 条件1 ) {

			条件1に合うとき

		} else if (条件2) {

			条件2に合うとき

		} else {

			それ以外

		};

この例では、条件1に合えばその{ブロック}の処理が行われ、条件1に合わず条件2に合えば条件2の{ブロック}の処理が行われ、条件2にも合わなければelseの{ブロック}の処理が行われます。


さて、具体的にプログラム上でどうやって条件を表現したらよいでしょうか?


JavaScriptでは、if文の条件は基本的に2つの値を比較することで実現します。比較には比較演算子と呼ばれる記号を使います。

		if( a == 2 ) { 変数aと2が等しいとき } else { それ以外 } ;
		if( a == '月' ) { 変数aと月が等しいとき } else { それ以外 } ;
		if( a != 2 ) { 変数aと2が等しくないとき } else { それ以外 } ;
		if( a != '火' ) { 変数aと火が等しくないとき } else { それ以外 } ;
		if( a <  2 ) { 変数aが2未満のとき } else { それ以外 } ;
		if( a >  2 ) { 変数aが2超過のとき } else { それ以外 } ;
		if( a <= 2 ) { 変数aが2以下のとき } else { それ以外 } ;
		if( a >= 2 ) { 変数aが2以上のとき } else { それ以外 } ;

プログラミングにおいて条件が合うことを真(true)といい、合わないことを偽(false)といいます。例えば、比較式2==3は偽を返し、2!=3は真を返すといいます。


if文はふつう、何が入っているのか決まっていないデータを比較することになります。このif文という技法によって、プログラミングの時点では例えばユーザが男性か女性かわからなくても、if文を使って両方に対する処理を用意しておくことで、性別が判明した時に適した処理を行うことができるのです。


似たような技術にswitch文がありますが、入門ページなので割愛します。

for文で何度も何度も

for文は同じ処理を繰り返すプログラミングの技法です。入門者には難しいと思いますが、順を追って考えると簡単なことがわかります。

		console.log(0);
		console.log(1);
		console.log(2);
		console.log(3);

上のコードをfor文を使って書くとこうなります。

		for(var i=0;i<4;i++){
			console.log(i);
		};

これがfor文の基本形です。forの後の(括弧の中)は3節あり「;」で区切られ、続いて{ブロックの中}に処理が書かれています。


最初の節はforの最初に実行される領域で、主にfor内で使う変数を宣言します。サンプルコードではカウンタとして使う変数を宣言しています。カウンタというのは処理される度に変化する変数です。iと名付けた変数に0を代入しています。


2つ目の節は{ブロックの中}の処理の前に評価される領域です。この節の評価が真であれば処理を行い、偽であればforを終了します。サンプルコードは「i<4」なので、iが4未満の間は処理を繰り返します。


最後の節は{ブロックの中}の処理の後に実行される領域です。サンプルコードでは変数iを「++」しています。これはインクリメントといって「i=i+1」と同じ意味なので、処理が終わるごとにiを+1します。


つまり、このfor文は「console.log(i);」の処理を4回繰り返すことになります。iが0から始まり、処理をするごとに+1されて、4以上になると繰り返しを終えるのです。

for文の図解

同じような処理は関数に

関数は処理を再利用するプログラミングの技法です。

あちこちに同じ処理がある場合に、同じ処理を一回だけ書いて名前を付けて関数にすると、この名前だけでその処理を実行できるようになります。関数を使うとコードが短くなりわかりやすくなります。

「プロシージャ」や「サブルーチン」とも呼ばれます。

関数の図解

関数は一度定義をして、それから呼び出します。

		// 関数の定義
		function 関数名(引数){
			〜引数を使った処理〜
			return 戻り値;
		}

		// 関数の利用
		受け取り変数=関数名(8);

関数定義の基本形は次のようになります。

function 関数名(){ }

関数名はほぼ自由に命名できます。(括弧内)の値は引数といって、呼び出し元から受け取った値が代入され、関数内で使い捨て変数のように使えます。引数は不要なら無くてもOKです。


処理は{ブロック内}に書きます。関数内でも変数を定義したり関数を定義したり、ふつうのプログラミングができます。{}内で定義したものは{}内でしか使えません。この変数などの使える範囲をスコープといいます。


returnがあると関数はそこで終了します。呼び出し元に返したい値(戻り値)があるときは「return 値;」とします。


定義した関数を呼び出したいときは関数名の直後に()を付けます。

関数名();

この()の中に値を入れると関数の(引数)に渡されます。

「関数名()」の部分は関数が戻り値を返す場合はその値に置き換えられます。


具体的なプログラムをみてみましょう。

	// 関数の定義
	function a(d){
		var e=d+'f'; // 「+」を文字に使うと合わさる
		return e;
	}

	// 関数の利用
	var b=a('c');

	console.log(b); // 'cf'
	

まず8行目で変数bの値として、関数aを実行しています。このとき'c'を引数として渡しています。

関数aではdに'c'が代入されます。変数eが定義され、dの値である'c'と、そして'f'とが連結されたデータが代入されます。

returnで関数は終了し、戻り値であるeの値が呼び出し元へと返され、変数bに代入されます。