Index

HOME > プログラムTOP > JavaScript




JavaScriptの基礎知識(5):構文篇

 JavaScriptの言語仕様の基礎知識をまとめたページです。ここでは、プログラミングの効率化に不可欠な、構文について記述しています。JavaScriptにはいくつかの構文が用意されています。これらの構文を使うことで、記述するコード量が減ったり、多様な処理を実現することができます。

sasaraan programming

Exposition

if...else...

ある条件が"true"の時のみ処理を実行します。以下の関数は、"code"の値が99の時のみ値を0に置き換えています。
 var code, comment;
 if (code == 99) {
   code = 0;
 }

上記の様に()の中に条件、{}の中に処理する内容を記述します。条件に合わない時の処理は、次の様に"else"を使って記述します。条件に合わないものは、すべて"else"以下の処理内容が適用されます。
 if (code == 99) {
   code = 0;
 } else {
   code++;
 }

上記の例では、"code"が99の時は0に置き換え、99以外のときは1を足しています。さらに条件が二つ以上ある時は、"else if"を使います。"else if "は、いくつつなげてもかまいません。
 if (code == 1){
   comment = "おはよう";
 } else if (code == 2){
   comment = "こんばんは";
 } else if (code == 3){
   comment = "こんにちは";
 } else {
   comment = "";
 }

この場合、条件が合った所で構文を抜けることになります。上記の例では"code==1"なら"code==2"以下の処理内容は無視されます。
なお、if文では、{}の中が1プログラム行であれば省略することができます。
 if (code == 99) code = 0;
 else code++;

また、"return..."があれば、その時点で関数自体を抜けることになります。
 function GetCode(code){
   if (code == 99) return 0;
   else return code++;
 }

switch...case...

 "switch"文も"if"文と同じく条件分岐に使われます。分岐の数が多い場合はこちらの方が便利です。
 var code, comment;
 switch (code){
   case "A":
     comment = "Aを選択中";
     break;
   case "B":
     comment = "Bを選択中";
     break;
   case "C":
     comment = "Cを選択中";
     break;
   default:
     comment = "選択なし";
 }

"switch"の後の()内に評価する式を、{}内に分岐ごとに処理を記述します。各分岐は"case"の後に値を添え、実際の処理は":"の後に記述します。分岐の最後の"default"は、条件に合わなかったものを処理するためのものですが、必要なければ省略が可能です。上記でいえば、"code"が"A,B,C"以外の時、"default"文で処理をします。
switch文を途中で抜ける時は、"break"の記述が必要です。したがって、各分岐処理の最後に"break"を付けないと、後の他の条件の処理まで実行してしまいます。ただし、わざと"break"を省くこともあります。
 switch (code){
   case "A":
   case "B":
   case "C":
     comment = "選択中";
     break;
   default:
     comment = "選択なし";
 }

この例では、"code"の値が、"A"でも"B"でも"C"でも同じ処理が実行されます。
また、途中に"return..."があるとその時点で関数自体を抜けることになります。
 function GetStatus(code){
   switch (code){
     case "A": return "Aを選択中";
     case "B": return "Bを選択中";
     case "C": return "Cを選択中";
     return "選択なし";
   }
 }

for...

 "for..."文は、繰り返し処理をするために用意された構文です。
 var i;
 var a = new Array(10)
 for (i=0; i<10; i++){
   a[i] = i;
 }

配列の各要素に"i"の値を代入しています。()の内訳は次のようになっています。
 (変数の初期化; 繰り返し条件; 繰り返し処理)
上の例で言えば、
 @ i=0  変数"i"に0を代入して初期化
 A i<10 "i < 10"がtrueであれば{}内の処理を実行
 B i++  {}内の処理を実行後"i"に1を加える
後はAとBの繰り返しとなります。この時、変数の初期化や繰り返し処理の部分は、","で区切って複数の処理を記述することもできます。
 var i, j;
 for (i=0, j=10; i<10; i++, j--){
   a[i] = i * j;
 }

逆に省略することもできます。";"は省略できません。
 var i = 0;
 for ( ; i<10; ) {
   a[i] = i;
   i++;
 }

すべて省略すると「無限ループ」といって、終了しなくなってしまいますので注意してください。
 for ( ; ; ) {
   a[i] = i;
   i++;
 }

ただし、途中に"break"文をつくってループを抜けることができます。
 for ( ; ; ){
   a[i] = i;
   if (++i => 10) break;
 }

"return..."を使うと関数自体から抜けることができます。
 function GetExsists(value){
   var i;
   for (i=0; i<10; i++){
     if (a[i] == value) return true;
   }
   return false;
 }

また、"continue"を使うと、その回のそれ以降の処理をスキップさせることができます。以下の関数では、"i"が5の時に限り、"a[i]=i"の実行を取りやめて次の回へ移ります。
 for (i=0; i<10; i++){
   if (i == 5) continue;
   a[i] = i;
 }

なお、"for..."文は、{}内が1プログラム行の時は{}の省略が可能です。
 for (i=0; i<10; i++) a[i] = i;
さらに{}内に処理すべき内容がなければこれも省略できます。
 for (i=0; i<10; i++) ;
*for...in...
 "for..."文の派生型として、"for...in..."文があります。"for...in..."文を使うと、配列の各要素にさらに簡単にアクセスできます。
 var a = new Array(10,20,30,40);
 var i;
 for (i in a){
   a[i] = 0;
 }

この例では、"a"の要素に順番にアクセスして、0を代入しています。"i"の初期化も増分処理も自動で行われます。ただし、すでに値が入っている要素に対してだけ処理が実行されます。
 var a = new Array(4);
 var i;
 for (i in a){
   a[i] = 0;
 }

この例の様に、配列aの各要素は初期化されていません(数が確保されただけ)ので、エラーにはなりませんが、a[i]に0は代入されません。なお、"break"、"continue"、{}省略の扱いは"for..."文と同じです。

while...

 "while"文も"for"文と同じくループ処理を行います。
 var a = new Array(10);
 var i = 0;
 while (i < 10){
   a[i] = i;
   i++;
 }

()内がtrueの間、{}内のコードを実行します。
{}内の途中に"break"を挿入してループを抜けることができます。また、()内に"1"または"true"を入れて、作為的に無限ループをつくることができます。
 while (1){
   a[i] = i;
   if (++i >= 10) break;
 }

{}内の途中に"continue"を入れて、その回に限り、それ以降の処理をスキップさせることができます。
 while (1){
   if (i == 5) continue;
   a[i] = i;
   i++
 }

この例では、"i"が5の時に限り以降の処理が行われず次の回へ進みます。
また、"return..."を付けると、関数自体を抜けることができます。
 function SetArray(a){
   var i = 0;
   while (i < 10){
     if (a[i] = 0) return;
     a[i++] = 0;
   }
 }

なお、"while"では、{}内が1プログラム行である時は{}を省略することが可能です。
 while (i < 10) a[i++] = 0;
*do...while...
 "while..."文の派生型として、"do...while..."文があります。"while..."文では最初に条件をチェックするので、{}内が一度も実行されないケースがあります。"do...while..."文を使うと、{}内が最低でも1回は実行されます。
 var a = new Array(10);
 var i = 0;
 do {
   a[i] = i;
 } while (i++ <10);

この様に、条件のチェックは一度実行された後に行われます。なお、"break"、"continue"、{}省略の扱いは"while..."文と同じです。

with...

 "with..."文はオブジェクトのプロパティに簡単にアクセスするために用意されました。
 with (document) {
   write("一行目<br>");
   write("二行目<br>");
   write("三行目<br>");
 }

この様に、一行ずつ"document.write ..."を記述する必要がありません。

www.sasaraan.net

(c) morijoh