for文とif文の解説 ～Javascript超初心者入門

Javascriptのfor文とif文とは

Javascriptのfor文は繰り返し(ループ)処理（ソースコードの同じ箇所が何度も実行される）を記述することが出来る構文です。
if文は条件による分岐処理です。

for文の基本構文

for( 初期値 ; 繰り返す条件; ループ処理が１回実行完了する毎に実行される増加値 )
{
　　繰り返し実行したい処理を書く;
　　・・・;
}
forループ処理の開始で「初期値」に記述された処理を実行します。
繰り返す「条件」が成り立っている間は「{」から「}」までを実行します。
ループが１回実行完了する毎に「増加値」の処理を行います。

for文の例

例えば以下のソースコードはfor文を使って繰り返し同じ処理を行っています。
「i++」と記述されている箇所は「i=i+1」の事で「変数 i に1を足した値を、変数 i に代入する」という意味になります。
変数iの値が1だったら変数iの値は2になり、変数iの値が2だったら変数iの値が3になるということです。

<script>
function test1(){
  // for(初期値 変数iを1にする; 変数iが2以下の時は{～}内の処理を行う
  for(
    let i = 1; //初期値  変数「i」を宣言して1を代入する
    i <= 2;    //条件    変数「i」が2以下の間はループする
    i++        //増加値  変数「i」に1を足した値を、変数「i」に代入する
  )
  {
    //1回目は変数「i」が「1」で通過し、2回目は変数「i」が「2」で通過する
    alert( "変数iの値＝" + i );  //変数「i」の値が表示される
  }
}
</script>
<button onclick="test1()">test1(for文の最初の例)</button>

上記ソースコードは以下のような流れで動作します。

1. ボタン「test1(for文の最初の例)」が押されたら「test1」関数の実行が開始されます
2. for文の「初期値」処理： let i=1
   　　変数「i」が宣言され、変数「i」の値に 1 を入れます。
   　　この時点で変数「i」の値は 1 になります。
   
3. for文の「条件」処理： i<=2
   　　この時点で変数「i」の値は 1 です。
   　　変数「i」が 2 以下なので forループ内の処理（{内）に入ります。
   
4. for文の「ループ内」処理： alert( "変数iの値＝" + i )
   　　この時点で変数「i」の値は 1 です。
   　　「変数iの値＝1」と表示されます。
5. for文の「増加値」処理： i=++
   　　この時点で変数「i」の値は 1 です。
   　　変数「 i 」に1を足した値を変数「 i 」にいれます。
   　　この時点で変数「i」の値は 2 になります。
   
6. for文の「条件」処理： i<=2
   　　この時点で変数「i」の値は 2 です。
   　　変数「i」が 2 以下なので forループ内の処理（{内）に入ります。
   
7. for文の「ループ内」処理： alert( "変数iの値＝" + i )
   　　この時点で変数「i」の値は 2 です。
   　　「変数iの値＝2」と表示されます。
8. for文の「増加値」処理： i=++
   　　この時点で変数「i」の値は 2 です。
   　　変数「 i 」に1を足した値を変数「 i 」にいれます。 　　この時点で変数「i」の値は 3 になります。
   
9. for文の「条件」処理： i<=2
   　　この時点で変数「i」の値は 3 です。
   　　変数「i」が 2 以下では無いので forループを抜けます。つまり、下にある「}」の後に実行を移します。
10. 関数「test1」を抜けて終了です。

以下のソースコードは条件が常に正しい（1は2より小さい）ので永遠にループし変数「i」の値は無限大に大きくなってしまいます

  for(let i=0; 1<2; i++){
    //何らかの処理
  }

以下のソースコードは変数「i」が常に0なので、条件が常に正しくなり（iは2より小さい）永遠にループします。

  for(let i=0; i<2; i=0 ){
    //何らかの処理
  }

以下のソースコードは条件が常に正しくない（1は2より大きくない）ので一度もループしません。

  for(let i=0; 1>2; i++){
    //何らかの処理
  }

for文の中にfor文を入れる例（ループのネスト）

for文の中にfor文を入れることもできます。これをネストといいます。
外側のfor文では変数「i」を用いて2回ループし、
内側のfor文で変数「j」を用いて2回ループしているので、
　　「//何らかの処理」
は、２×２＝　４回通過することになります。

  for(i=0; i<2; i++ ){
    for(j=0; j<2; j++ ){
      //何らかの処理
    }
  }

for文を2回ネストして九九の表を作成してみたいと思います。
「document.querySelector("CSSセレクタ")」を使用してHTML要素を取得します。
また、「取得した要素.innerHTML」プロパティを使用してHTMLをJavasctiptから書き込みます。
ソースコードに「+=」がありますが、例えば
html += "a" は html = html + "a" のことで、変数「html」の後ろに文字"a"を連結して、変数「html」に代入しています。
ダブルクォートで括られた文字列は青字にしています。

<button onclick="kuku()" >九九の表を作成</button>
<div id="kuku">ここに九九の表が作成されます</div>
<script>
function kuku(){
  //id属性が"kuku"の要素を取得し変数elmに入れる
  let elm = document.querySelector("#kuku");
  let html = "<table style='border-collapse:collapse;'>";
  for(y=1; y<=9; y++){
    html += "<tr>";
    for(x=1; x<=9; x++){
      html += "<td style='border:1px solid #000;width:1.5em;'>" + x*y + "</td>";
    }
    html += "</tr>";
  }
  html += "</table>";
  elm.innerHTML = html;
}
</script>

if文の基本構文

条件が1つの場合は以下となります。
if( 条件 )
{
　　条件が正しい場合に実行したい処理;
　　・・・;
}

条件が1つの場合で、条件が正しくない場合には別の処理を行いたい場合は以下となります。
if( 条件 )
{
　　条件が正しい場合に実行したい処理;
　　・・・;
}
else
{
　　条件が正しくない場合に実行したい処理;
　　・・・;
}

条件が複数の場合は以下となります。
if( 条件1 )
{
　　条件1が正しい場合に実行したい処理;
　　・・・;
}
else if( 条件2 )
{
　　条件2が正しい場合に実行したい処理;
　　・・・;
}

条件が複数の場合で、全ての条件に当てはまらない場合には別の処理を行いたい場合は以下となります。
if( 条件1 )
{
　　条件1が正しい場合に実行したい処理;
　　・・・;
}
else if( 条件2 )
{
　　条件2が正しい場合に実行したい処理;
　　・・・;
}
else
{
　　全ての条件に当てはまらない場合に実行したい処理;
　　・・・;
}
以下ソースコードは<input type="text">への入力値の値が0なら「入力値は 0 です」と表示しそうなければ「入力値は 0 ではありません」と表示されます。
ソースコード中のif文の条件
「左辺 == 右辺」
は左辺と右辺が等しいことを検査します。
ちなみに「左辺 <= 右辺」は左辺が右辺以下であることを検査し、「左辺 >= 右辺」は左辺が右辺以上であることを検査します。
また、「左辺 < 右辺」は左辺が右辺未満であることを検査し、「左辺 > 右辺」は左辺が右辺より大きいことを検査します。

<input type="text" id="test2" maxlength="5" value="0" placeholder="数値を入力">
<button onclick="test2()" >test2</button>
<script>
function test2(){
  //id="test2"の要素のvalue値を取得する
  let v=document.querySelector("#test2").value;
  if( v == "0" ){
    alert("入力値は 0 です");
  }else{
    alert("入力値は 0 ではありません");
  }
}
</script>

以下のソースコードはselectタグで選択した値に応じてif文で分岐して文字を表示します。

言語を選択：<select id="test3" onchange="test3()">
  <option value="javascript">Javascript</option>
  <option value="php">PHP</option>
  <option value="delphi">Delphi</option>
  <option value="etc" selected>その他</option>
</select>

<script>
function test3(){
  //id="test3"の要素を取得する(selectタグが取得できる)
  let select = document.querySelector("#test3");

  //選択されているインデックス(optionの1つ目を選択していると0、2つ目は1)を取り出す
  let idx = select.selectedIndex;

  //選択されているoptionのvalue属性を取り出す
  let v = select.options[idx].value;

  if( v == "javascript" ){
    alert("本サイトで説明中の"+ select.options[idx].innerHTML +"を選択");
  }else if( idx  == 1 ){
    alert(select.options[idx].innerHTML +"を選択しましたね");
  }else if( select.options[idx].innerHTML  == "Delphi" ){
    alert("Delphiを選択、すばらしい");
  }else{
    alert("その他を選択");
  }
}
</script>

Javascript超初心者入門目次

• Javascriptとは
• Javascriptの変数、配列、連想配列
• Javascriptのfor文とif文とは
• Javascriptで要素(タグ)を追加削除
• イベント処理(ボタンが押されたら実行等)について解説
• タイマー(setTimeoutとsetInterval)を使って指定秒数後に処理を行ったり定期的に処理を行う方法について解説
• canvasに描画する方法について解説
• Javascriptで要素を取得する方法