【プロゲート復習】Javascriptでループ処理を使ってみよう。

プログラミング
難易度:★☆☆☆☆

この記事では、Javascriptで以下の内容に触れていきます。

  • for文によるループ処理
  • whileによるループ処理

対象読者は、次のような方を対象としています。

Javascriptでループ処理を学びたい!

Progateの復習をしたい!

前回では、if文による条件分岐をしました。今回は、ループ処理に触れていきましょう。

条件分岐とループ処理を覚えたら、プログラミングの世界は大きく広がります。

プログラミングに限らず、普段の業務を効率化するための考え方にもとても役立つでしょう。

前回のおさらい

前回はif文による条件分岐を行いました

var age = 14;

if(age >= 20){
    console.log("お酒が飲めます");
}else if(age < 20 && age >=10){
    console.log("お酒は二十歳になってから!");
}else{
    console.log("10歳未満はミルクでも飲んでてね♪");
}

if文の条件によって、どの命令を実行するか分岐を行えるようになりました。

if文は何となくわかったよ!今日はループ文だね!無限ループ!!

ループ処理とは

早速ですが、1から10の数字を出力する処理を書いてみてください

1から10か、めんどくさいね、、

var number = 1;
console.log(number);
number = number + 1;
console.log(number);
number = number + 1;
console.log(number);

こんな感じで、普通に書いたら、同じようなことを10回分書かないといけませんね、、

そこで『ループ処理』の出番がきます!救世主です!

whileによるループ処理を実装する

ループ処理を実装するには、while文というものを用います。

while文は、『条件式がtrueの間、{}内の処理を繰り返す』ことが可能です。

では実際に、while文を用いて1から10を出力する処理を書いてみましょう!

 

var number = 1;
while(number <= 10){
    console.log(number);
    number = number + 1;
}

すごい簡単になったね!

条件『number <= 10』が成立している間、{}内の処理をし続けます。numberの値が1ずつ足されているので、11回目で、numberが10を超えて条件が成立しなくなります。

ループ処理のすごいところは、条件を変えるだけで、1から1000でも簡単に出力することができます。

下コードのように、条件を『number <= 1000』とすれば、1000までの数字を簡単に出力できます。

var number = 1;
while(number <= 1000){
    console.log(number);
    number = number + 1;
}

こ、、これはすごい便利だね、、、

while文は無限ループにならないように注意しましょう。{}内の『number = number + 1;』がないと、numberが永遠に10を超えません。すると永遠にループ処理から抜け出せなくなります、、

for文によるループ処理を実装する

ループ処理を行う方法は、while意外にもforを使うこともあります。

出来ることはwhileと同じですが、whileよりシンプルに書くことができます。

実際にコードを書いてみましょう!whileの時と同じ結果が表示されるはずです。

for(var number = 1; number <= 10; number++){
    console.log(number);
}

for文の()内を分解してみていくと、、

var number = 1 → 変数の宣言。numberの初期値に1を入れています。

number <= 10 → 条件式。numberが10を超えるまでループします。

number++ → 条件の更新。ループごとにnumberが1増加します。

『number++』は『number = number + 1』と同じ意味を持ちます。                                             他にも『number += 1』という書き方があります。全て1を足すという意味です。

for文の方が、条件を整理できているので、ループ回数が決まっている時はfor文でいいと思います!

ループ処理と条件分岐のコラボレーション

前回と今回で、ループ処理と条件分岐というプログラミングの2大要素に触れてきました。

この2つを使いこなせれば、アイディアを形に出来るようになってきます。

試しに1つ問題を出します。挑戦してみてください!

問題:1から10までの、偶数だけを出力してください。ただし、if文とfor文を必ず使ってください。出力にはconsole.logを使用してください。

上のように出力できれば正解ですね!答えをみる前に、1度考えてみてください!

if文とfor文を両方使うのですね、、

どうでしょう?答えのサンプルコードは以下のようになります。

for(var number = 1; number <= 10; number++){
    if(number % 2 === 0){
        console.log(number);
    }
}

for文で1から10をループさせます。ただし、出力させるのは『number % 2 === 0 』を満たす数字だけです。

%演算子は余りを計算するんでしたね。偶数は2で割った時の余りが0になるので、この条件を満たすのは偶数と言うわけです。

いかがでしたか?if文とfor文を合わせれば、色々なことが出来そうと、何となくわかりますよね!

条件分岐とループ処理はプログラミングの本質

前回と今回の2回で条件分岐とwhile文を学びました。

条件分岐では、if文、if else文、switch文などを学びました。

ループ処理では、while文やfor文を学びました。

実は、これらの内容は、プログラミングの本質と言えるほど超重要な概念です。

これから様々な知識を学んでいくと思いますが、全てはこの条件分岐とループ処理が基礎となってきます。

ですので、この2つは力を入れて繰り返し使っていって慣れていきましょう!

  • 条件によって実行する命令を変える
  • 同じ命令が何度もある時はループさせる。

この2つはプログラミングに限らず、普段の仕事でも生かせる考え方です。

普段の業務で『同じようなことを毎日やってるな、、』と感じる作業はほぼプログラミングで自動化できるということです。

是非プログラミングを学んで、自動化していってください!

Javascriptの体系的な知識を学びたい場合は以下の書籍がおすすめです。

コメント