「条件分岐」「繰り返し」をJavaScriptで行う方法を理解しよう！

【iOSショートカットで学ぶ！プログラミング教室】の第8回となった今回は、

JavaScriptで「条件分岐」「繰り返し」を行う方法を学習していきます。

プログラミングの基本3要素は「順次」「条件分岐」「繰り返し」でしたね。

もし、それぞれの意味を忘れてしまった方は、第2回の記事で復習してみてください！

そして第4回、第5回では、ショートカットで「条件分岐」「繰り返し」をショートカットで使いこなす方法を理解しました。

すでに、皆さんはその本質を理解していると言って良いと思います。

今回はこれまでに習得してきた知識をフル活用して、
ショートカットとJavaScriptとで一致している点と異なっている点を意識しながら学習していきましょう！

きっと理解が深まっていくのを感じるはずです。

それでは、Let`s プログラミング！

JavaScriptで条件分岐をする方法

まずは条件分岐から学習していきましょう。

ショートカットで条件分岐をするとき、何のアクションを使っていたか覚えていますか？

「if文」でしたよね。

この「if文」はJavaScriptで条件分岐をする時も使います。

実はJavaScriptで条件分岐をする方法は「if文」以外にも多々あるのですが、最もよく使用されるのはif文です。

そのため、今回は「if文」に焦点を当てて解説していきます。

if文の書き方

まずは、if文をJavaScriptでどのように書くのかを見てみましょう。

if (条件) {
なんらかの処理
}

上のように記述すると、「条件」が正しい時に{ }内に書かれた処理をおこなうように設定できます。

「ショートカットだったら、”その他の場合”みたいなのなかった？」
と思われた方もいると思います。

「その他の場合」というのは設定した条件に合致しない時におこなうアクションを決めたい時に使いましたね。

ショートカットで言う「その他の場合」は、JavaScriptで言うと「else」になります。

実際に見た方が分かりやすいと思いますので、以下のコードを見てみましょう。

if (条件式) {
処理A
} else {
処理B
}

ショートカットのif文の画像と見比べてみると、構造が一緒だということが分かるでしょう。

なんとなくJavaScriptでif文を使うイメージが掴めたのではないでしょうか？

if文を複数使う

ショートカットでは「ネスト」するなどして、if文を複数使い条件分岐することができましたね。

以上のようにショートカットでif文をネストさせた時は、

このようになります。

JavaScriptでも「ネスト」は可能です。

先ほどの状態を、JavaScriptで「ネスト」したif文で再現すると以下のようになります。

if (条件A) {
処理A
} else {
if(条件B) {
処理B
} else {
処理C
}
}

※「アクション」を処理と言い換えています。

しかし、上のような記述は少し読みにくいですよね。

実はJavaScriptのif文には、複数の条件を設定した時も読みやすくなるような書き方が用意されています。

先ほどの記述を分かりやすい書き方に直すと、以下のようになります。

if (条件A) {
処理A
} else if (条件B) {
処理B
} else {
処理C
}

非常に分かりやすくなりました。

ポイントは、「else if (条件B)」の箇所でしょう。

「else if」で、ショートカットで言う”その他の場合”に細かい条件をプラスできたイメージです。

このように記述によって、

条件Aに合致する
→処理Aを実行

条件Aに合致せず、条件Bに当てはまる
→処理Bを実行

条件Aに合致せず、条件Bにも当てはまらない
→処理Cを実行

という複雑な条件分岐が簡単に記述することができました。

条件の設定方法

JavaScriptのif文では、条件を( )内に記述します。

if (条件) {
処理
}

条件部分にどんなことを書くかを具体例で見てみましょう。

var number = 10;

if (number >= 5) {
処理A
} else if (number == 2){
処理B
} else {
処理C
}

上のプログラムを解読すると、以下のようになります。

最初に「number」という変数（箱）に、10というデータを入れました。
そして、その「number」が5以上の時は、処理Aを実行します。
もし、「number」が5以上ではなく、2だった場合は処理Bを実行します。
もし、「number」が5以上ではなく、2でない場合は処理Cを実行します。

条件部分に「>=」や「==」などの記号が使われていますよね。

これを「比較演算子」と言います。

if文の条件の設定方法は様々ですが、「比較演算子」が最もよく使われます。

比較演算子を使うことで、左の値と比べて右の値が大きいのか、小さいのか、同じなのかを判断してくれます。

比較演算子の一覧と、使用例を図にしてみました。

注意すべきは最初の２つです。

“10”というのは、文字列として認識されます。

“山田”や”鈴木”などと同じです。

しかし、中身の数字としては10ですよね。

これは、10と同じと言えるのか、違うのか。

このように「文字としての数値」を判別するために、「==」「===」の2種類のイコールが用意されています。

「==」は”10”という文字列であっても中身の10という数字を見て判定してくれます。
なので、10 == “10” は条件として正しいと判断されます。

「===」では”10”という文字列は、あくまでも文字として扱われるので数字として認識されません。
それゆえ、10 === “10”は条件として誤りだと判断されるわけです。

比較演算子を使った条件設定の方法をだいたい理解できましたでしょうか？

これで、if文における条件設定の基礎はとりあえずOKです。

JavaScriptで繰り返しをする方法

条件分岐に続いて、JavaScriptで”繰り返し”をする方法について解説していきます。

ショートカットでは、「繰り返し」「各項目を繰り返す」などのアクションを使って”繰り返し”を行い、「リスト」が”繰り返し”において重要な役割を果たしていました。

ショートカットの「繰り返し」「各項目を繰り返す」などのアクションは、JavaScriptの「for文」に対応します。

そして、前回でも説明したようにショートカットの「リスト」は、JavaScriptの「配列」に相当します。

つまり、JavaScriptでは「for文」と「配列」を上手く使えれば、”繰り返し”をすることができるというわけです。

シンプルな繰り返し

まずは、「決められた回数同じ処理をおこなう」方法を知りましょう。

ショートカットでいうと、「繰り返し」アクションを使うものですね。

JavaScriptでは「for文」を使って、以下のように記述します。

for (var number = 0; number < 3; number++) {
繰り返したい処理
}

最初は何をしているのかよく分からないと思います。

特に、 (var number = 0; number < 3; number++) の部分ですね。

for文の( )内には３つ設定すべき項目があります。

「初期化式」「条件式」「増減式」です。

初期化式では、数字をデータとした変数を設定します。
上の例で言う、「var number = 0;」の部分です。

条件式では、初期化式で設定した変数の数字がどういった状態になるまで繰り返すかを設定します。
上の例で言うと、「number < 3」の箇所です。

増減式では、for文の{ }内で繰り返したい処理が1回終わるごとに、初期化式で設定した変数の数字にどれほどの増減をもたらすか、ということを設定します。
上の例で言うと、「number++」の部分になります。

number++というのは、変数numberの数字に1をプラスするという意味です。

「何だか、よく分からなくなってきた…」
と思っている方も多いと思います。

for (var number = 0; number < 3; number++) {
繰り返したい処理
}

ここで、こちらのプログラムを実行すると、どのような動きとなるか詳しく見てみましょう。

1. 「number」という名前で中身のデータが0の変数が定義されます。
2. 今、numberの値は0なので、条件式「number < 3」を満たします。
3. 繰り返したい処理を1回おこないます。
4. 処理が終わったら増減式の通りにnumberの値に1を足します。
5. 今、numberの値は1なので、条件式「number < 3」を満たします。
6. 繰り返したい処理をもう1回おこないます。
7. 処理が終わったら増減式の通りにnumberの値に1を足します。
8. 今、numberの値は2なので、条件式「number < 3」を満たします。
9. 繰り返したい処理をもう1回おこないます。
10. 処理が終わったら増減式の通りにnumberの値に1を足します。
11. 今、numberの値は3なので、条件式「number < 3」を満たしません。
12. 繰り返したい処理はせず、実行を停止します。

大体イメージがついたでしょうか？

for文の( )内に「初期化式」「条件式」「増減式」の3つを設定することで、{ }内の処理を繰り返す回数を決めることができるのです。

自分で1から初期化式や増減式を考えると大変ですが、

基本的に、

「初期化式」には、変数名 = 0;
「条件式」には、変数名 < 繰り返したい回数 – 1;
「増減式」には、変数名++

というように記述すれば、思い通りの回数を指定できます。

一見難しそうなfor文ですが、
このパターンに当てはめて作れば簡単に繰り返しをすることできます！

配列を使った繰り返し

「JavaScriptで繰り返しするのって難しいんだな…」と感じた方に朗報です。

実は初心者にとっては配列を使った繰り返し処理の方が、回数を指定する繰り返しよりも簡単に感じる場合が多いのです。

今回は、最初に書き方のパターンを紹介します。

for (var 変数名 of 配列名) {
処理
}

（var 変数名 of 配列名) という部分では、

ある配列から1つ1つデータを取り出し、それを新しい変数に入れているイメージです。

ショートカットで「リスト」から「各項目を繰り返す」アクションを使い「Rpeat Item（繰り返し項目）」としてリストのデータ1つ1つを取り出しているのと同じです。

ここで具体例を見てみましょう。

var nameList = [“山田”, “佐藤”, “鈴木”]

for (var name of nameList) {
処理
}

最初に3つの名前が入っている「nameList」という配列を定義しています。

そこから「for文」で、nameListの値の1つ1つを「name」という名前の変数に入れ、処理を繰り返しおこなっています。

1回目の処理では、nameに”山田”というデータが入り、
2回目の処理では、nameに”佐藤”というデータが入り、
3回目の処理では、nameに”鈴木”というデータが入る。

という流れです。

シンプルに回数を決めて繰り返しをおこなうよりも、はるかに簡単ですよね。

しかも、使う頻度でいうと配列を使った繰り返しの方が多いです。

次回の実践編でも、配列を使った繰り返しを使っていきますので、今回の説明で理解できない部分があれば何度か復習しておいてください！

終わりに

今回の記事では、

JavaScriptで「条件分岐・繰り返し」をする方法を解説しました。

なかなかボリューミーな内容だったと思います。

次回の実践編では、前回の第6回と今回の第7回の内容の総復習として、実際にJavaScriptのコードを書いてSafariで実行していきます！

JavaScript編のクライマックスとなりますので、どうぞお楽しみに！

次回の記事はこちら！

プログラミング教室の記事一覧