Javascriptの構文について

繰り返し処理whileとは

while内の式を指定回数分繰り返し実行してくれます。これにより、自分で数えて回数分式を記載しなくても、回数分の処理が自動で実行できるようになります。

また、回数を代える際にも、条件式だけ変えれば良いので、式を回数分変更するより楽で、ミスも減るメリットがあります。尚、繰り返し処理は慣習上iから始まり、j,k,lと複数ある場合は変数名を変えていきます。一説によるとiから始まるのはindexのiであると言われています。

ただし、whileやfor文以外の繰り返し処理の場合、iでは何の繰り返し処理かわかりにくいケースがあり、その場合はcountNowstageなどcount~という変数名を使って、何を繰り返し処理して変数に代入しているかわかるような変数名を付けることもあります。


var i = 0;
while(i <= 5) {
    console.log("うまく動いています。");
    i++ ;
}
	

実行結果

うまく動いています。が5回表記されます。

また、下記ソースコード例のように、配列を定義し、そのインデックス数分(library.lengthの部分、こちらはlibraryの要素数を取得している。下記例の場合要素数は、'react','vue','jquery','riot'と4つなので4という数値を取得できます。結果的に、while(i < 4 )となります。
つまり4以下の時に繰り返すことになり、4回繰り返し処理が行われることになります。)

ここで、勘のいい人は、なぜ4回繰り返すのに、while(i <= 4 )としないのかと考えると思います。実はプログラミングの世界では常に数値は0から始まるという慣習があります。
つまり0から始まり4回繰り返す場合は、0,1,2,3で4回となるので数値的にはiが3になった時に終了するとちょうど4回繰り返したことになります。

かなりややこしい話ですが、プログラミングの世界では4回繰り返したいなら、4-1(0があるので1引く必要がある。)つまり3が4回繰り返すという意味になると覚えておきましょう。

それでは、話を戻します。つまり、while(i < library.length )と、要素数で繰り返し処理をさせることにより、配列の要素数がいくつに変更されても数値を変更せずに、自動的に繰り返し処理の回数が変更されるようにすることが可能になったという事です。

尚、lengthは本来、文字列の長さなどを取得しますが、配列に使った場合は、要素数を取得します。また、要素とは、大カッコ[]、の中にある値の事です。つまり、['react'、'vue'、'jquery'、'riot']のライブラリ名一つ一つの事です。

インデックス番号は、要素に自動的に付与される左からかつ0から始まる数値番号の事です。つまり、 ['react'がインデックス番号0、'vue'がインデックス番号1、'jquery'がインデックス番号2、'riot'がインデックス番号3]となります。

0から始まるという事はとても分かりずらく私も個人的にあまり好きになれませんが、ITの世界は二進数なので0から始まるという噂を聞くので、そのように覚えてしまうのが一番良いと思っています。


var library = ['react','vue','jquery','riot'];

var i = 0;
while(i < library.length) {
    console.log(library[i]);
    i++ ;
}
	

感の鋭い人は、forでも同じことが出来ることに気づくと思います。 実はその通りで、while、forはどちらでも繰り返し処理は出来るので基本的にその考えで良いそうです。 ただし、iの初期値を0からではなく好きな数値から始めたい場合はforの方が、条件式内でiの初期化が出来るので、好きな数値から始められるので良いと思います。

ただし、極論どちらでも、不可能なわけではないようなので、好みで使い分ければ良いという結論になります。 個人的には推奨通り使い分けるといいかなと思っています。

こちらは、転職、就職を保証するサービスのようです。

switch文について

条件に一致するものを実行する為に使います。以上以下などはifと違い使えないことに注意が必要です。このような場合はifのネストを使います。

switchは、ifほど複雑になりにくく、defaultを使って両方ともあてはまらなかった場合に式を実行することもできます。


var yen = 100;
switch (yen) {
     case 120:
          console.log('ジュース')
          break
     case 110:
          console.log('アイス')
          break
     default:
     console.log('両方購入できませんでした')
}
	

実行結果

両方購入できませんでした

console.logついて

インスペクタ上で、Javascriptがどのように動いているかを確認したり、変数の中身が途中で変わってないか確認する為に使います。

注意点としては、bodyタグ内の内容が表記される、ブラウザ上のメイン画面には、console.logの内容は表記されません。consoleタブに表記されます。

私はインスペクタ上でやることが多いのであまり使いませんが、必須知識なので、覚えておくべきと思います。

CONTACT