今更聞けないJavaScript講座第3回「繰り返し処理と配列」

どうも、シノだ。

裏で、あることをやるための準備をしている。まあそんなに大したものではないが。

準備ができたら公開するので、そちらもよかったら見て欲しい。公開したらこちらにもリンクを貼る。

2020/2/21 追記
昨日公開した。ローマ数字についての解説と、変換アルゴリズムの紹介だ。
今回の内容までで、処理部分は実装できる。また、次回の内容で値の受け渡しも可能になるので、よかったら是非挑戦してみて欲しい。

さて、今回はJavaScript講座、内容は繰り返し処理だ。

これができると、一気に大量のものを扱えるようになる。また、相性の良い配列についても扱おう。

まだまだ基礎の部分なので、ここもマスターしていこう。

前回の復習

前回は、条件によって処理を分ける、条件分岐、if文を解説した。また、その条件にあたる真偽値、それに関する演算子も解説した。

今回も、この条件分岐の考え方をガンガン使っていく。不安な方は、先にそちらを使えるようにしておいて欲しい。

繰り返し処理

まあ、名前そのままなのだが…一応言葉で説明しておこう。

繰り返し処理とは、ある条件が成り立つ場合に、特定の処理を繰り返し実行するものだ。

で、これには2つの文が用意されている。一つずつ見ていこう。

while文

まず、while文というものについて。先に書き方から見ていこう。

while(真偽値){
    真偽値がtrueの場合に、繰り返し行う処理
}

なんか、似たようなものを見たことがあるだろう。

そう、前回のif文のifの部分をwhileに変えただけだ。これで、while文が完成する。

で、肝心の処理だが、以下のような流れになる。

• まず、真偽値を見る。
• 真偽値がtrueなら、中括弧内の処理を行う。
• 中括弧の処理が終了したら、再度真偽値を見る。
• 真偽値がtrueなら、中括弧内の処理を行う。
• 中括弧の処理が終了したら、再度真偽値を見る。
• …
• 真偽値がfalseなら、while文を終了し、中括弧以降の処理にジャンプする。

繰り返し処理という名の通り、真偽値がtrueである間、繰り返し書いた処理を行う。

具体例を見てみよう。数字が格納されたある変数aについて、その数字が10未満である間、aの値を表示した後にaの値を1増やす、という処理を書く。

最初の値は0として、while文が終わったらそのことを示すために文字列も表示してみる。

var a = 0;
while(a < 10){
    console.log(a);
    a++;
}
console.log("while文終了");

さあ、前回の内容もふんだんに盛り込まれている。

この処理を文章で書くと、以下のようになる。

• 1行目：変数aを定義し、0を代入する
• 2行目、while文の条件判定：0 < 10より、trueなので処理に入る
• 中括弧内1行目：aの値(0)を表示する
• 中括弧内2行目：aの値をインクリメントする(0→1)
• 中括弧終了、2行目に戻る
• 2行目、while文の条件判定：1 < 10より、trueなので処理に入る
• 中括弧内1行目：aの値(1)を表示する
• 中括弧内2行目：aの値をインクリメントする(1→2)
• 中括弧終了、2行目に戻る
• 2行目、while文の条件判定：2 < 10より、trueなので処理に入る
• (中略)
• 2行目、while文の条件判定：9 < 10より、trueなので処理に入る
• 中括弧内1行目：aの値(9)を表示する
• 中括弧内2行目：aの値をインクリメントする(9→10)
• 中括弧終了、2行目に戻る
• 2行目、while文の条件判定：10 < 10より、falseなのでwhile文を終了する
• 6行目、「while文終了」と表示する

かなり細かく書いてみたが、イメージついただろうか。

表示例としては、0から9までの数字が一つずつと、最後に「while文終了」という文字列がコンソールに表示される。

わりと、直感的に動いてくれていると思う。

for文

次に、for文を見ていこう。書き方は以下の通りだ。

for(初期化式; 真偽値; 再初期化式){
    真偽値がtrueの場合に、繰り返し行う処理
}

…while文と比べて二つほど増えてる。処理の流れとともに見てみよう。

まず、初期化式というもの。これは、for文に入ったとき、最初に一度だけ実行されるものだ。

次に、真偽値を見る。ここはwhile文と同じく、trueなら処理に入る。falseならfor文終了だ。

真偽値がtrueなら、中括弧内の処理を行う。これもwhile文と同じ。

で、その処理が終わったときはwhile文と異なる。ここで、もう一個処理を挟むのだ。それが、再初期化式というもの。

これを処理した後に、やっと次の真偽値判定が行われる。以下、ループだ。

上のwhile文で出した具体例を、for文に直してみよう。以下のようになる。

for(var a = 0; a < 10; a++){
    console.log(a);
}
console.log("for文終了");

ちょっとスッキリした。やってることは、while文とほぼ全く同じで、最後の出力だけforに直した。処理の流れは、上のwhileをforに読み替えてもらえばいいだろう。

この、var a = 0;の部分が初期化式、最初に一度だけ行う。つまり、aという変数を用意して0を代入している。

で、a++の部分が再初期化式。一回目のループ処理が終わったら、aは0なのでインクリメントして1になる。その後、条件判定だ。

前回の条件判定部分が分かっていれば、そんなに難しくないだろう。

注意すること

さて、この2つの文両方に共通しているのだが、必ず気を付けなければいけないことがある。無限ループというやつだ。

例えば、以下のように書いたとしよう。あ、これは絶対に実行しないで欲しい。

var a = 0;
while(a < 10){
    console.log(a);
}
console.log("while文終了");

インクリメントの部分を消してみた。さて、どうなるだろうか。

…そう、条件判定時のaの値が常に0になる。つまり、永遠に条件がtrueとなり続けるのだ。

こうなると、エラーを吐くまでずっと処理を続けてしまう。これが、無限ループだ。

こんな短いコードならそうそうなることはないが、ある程度複雑になってくると、そうなってしまうパターンも出かねない。

どういった条件なら繰り返しを行うか、慎重に決めていこう。

便利なもの

これらのwhile文、for文には、ちょっと便利なものが用意されている。それも紹介していこう。

まず、continue文というもの。

これは、繰り返し処理の中で実行されると、その回の処理が終わったことになり、while文なら条件判定に、for文なら再初期化式の処理に移る。

例を出そう。さっきの具体例(0から9まで表示するやつ)に、奇数なら表示しないよう書き換えてみる。

for(var a = 0; a < 10; a++){
    if(a % 2 == 1){
        continue;
    }
    console.log(a);
}
console.log("for文終了");

for文の中に三行ほど追加した。

ここで、aを2で割った余りが1…つまりaが奇数なら、continue;というものを実行している。

そうすると、これが実行された時点でfor文の最後まで行ったことになり、a++の処理に入る。

このように、「この条件の場合は除外する」といったようなものに使えるだろう。

次に、break文というもの。

こっちは、それが実行された時点で、そのwhile文、あるいはfor文自体を完了させてしまう。つまり、その後ろの処理まで一気にジャンプしてしまうのだ。

こっちも具体例を出そう。今度は、aが5だったらそのfor文を終了してしまおう。

for(var a = 0; a < 10; a++){
    if(a == 5){
        break;
    }
    console.log(a);
}
console.log("for文終了");

こうすると、0から4まで表示された後、aが5の状態でif文が実行される。すると、trueなので中の処理…break;というやつが実行される。

その瞬間、このfor文が終了し、その次のコンソール出力が行われる。

配列

さて、繰り返し処理の相性がいい配列も併せて解説してしまおう。

ここで、いきなりだが、100個の変数を用意して欲しい、と言われたとしよう。

まずvar a1 = 0;と書いて99回コピペして数字を直しても、一応用意はできる。が、そんなもの使いづらすぎてたまったもんじゃない。

というわけで、それを解決するためのものが用意されている。それが、配列だ。

配列は、同じ名前に順番をつけ、その名前と順番の組で指定して使う変数、と思ってもらえればいいだろうか。

イメージは、今まで変数は一つの箱だったが、この配列は大きな箱を用意して、その中に順番を書いた箱をいくつも入れているような感じだ。

で、この定義の方法には2種類ある。一つずつ見ていこう。

まず、中身を直接記載する場合。以下のように定義する。

var a = [要素1, 要素2, ..., 要素n];

こう書くと、n個の要素を持った配列aが定義できる。こちらはわかりやすい。

なお、要素には変数に代入するときの右辺に書くものを書こう。リテラルや、他の変数などだ。

で、二つ目の作り方を見る前に、先に使い方を紹介しておこう。

要素がn個の配列を定義した場合、その配列の名前に添え字を付けてアクセスする。

例えば、以下のような感じだ。

var a = [1, 2, 3, 4, 5];
console.log(a[3]);

このように、配列にアクセスするときは配列名[番号]という書き方をする。ここに、定義されてない番号(マイナスも含む)を書くと、未定義だ(undefined)と言われてしまうので注意しよう。

さあ、上の例では何と表示されるだろうか。まあ、こういう質問をしている時点で、3が出力されないということはわかるだろう。

実は、配列の要素を指定する場合、0から数え始める。つまり、a[3]と書くと、0から数えて3番目…つまり、今回の例だと4が表示される。

ちょっと直感とずれているので気を付けて欲しい。

ちなみに、確認用がメインだと思うが、配列自体も表示できる。単に、配列名を表示の中に入れてあげればいいだけだ。

var a = [1, 2, 3, 4, 5];
console.log(a);

こう書くと、結果には[1, 2, 3, 4, 5]と表示される。

次に、new Array()というものを使う場合。これは、括弧の中身によって作られる配列が変わる。

• new Array()だけ書いた場合、要素が0個の配列
• new Array(数字以外)を書いた場合、それを要素とし、その要素一つのみを持つ配列
• new Array(数字)を書いた場合…
  • 数字が0以上の場合、空の要素をその数だけ持つ配列
  • 数字が0未満(マイナスの値)の場合、エラー
• new Array(要素1, 要素2, …, 要素n)を書いた場合、そのn個の要素を持つ配列

さあ、それぞれの定義をして、表示をしてみよう。

var a;

a = new Array();
console.log(a);

a = new Array("ようそ");
console.log(a);

a = new Array(0);
console.log(a);

a = new Array(3);
console.log(a);

a = new Array(-1);
console.log(a);

a = new Array(1, 2, 3, 4, 5);
console.log(a);

6つのパターンで書いてみた。これを一個ずつ実行すると、上から順番に以下のような結果になる。

• [] (一つも要素を持たない配列)
• [“ようそ”]
• [] (一つも要素を持たない配列)
• [empty, empty, empty] (空の要素を三つ持つ配列)
• エラー
• [1, 2, 3, 4, 5]

一つのものだけ書く場合のみしっかり注意すれば、かなり便利なので覚えておこう。あと、一個ずつ実行と書いたが、全部同時に書いても、マイナスの値を括弧に入れた時点でエラーが発生し、その後が実行されなくなる。

ちなみに、配列を定義した後の使い方は、一つ目の定義方法のものと同じだ。

繰り返し処理と配列の組み合わせ

さて、これらを組み合わせた例も一つ見てみよう。

と、その前に組み合わせるときに便利な配列に関する記述を一つ紹介。

配列名.lengthと書くと、その配列の要素数が取得できる。なお、実際の添え字の範囲は0～要素数-1なので気を付けて欲しい。

これを使って…例えば、円周率が100桁入った配列を、10個ごとに改行しながら画面に出したいとする。

そのとき、以下のように書けばいい。あ、円周率は記憶を頼りに書いているので、合っているかは分からない。正確な値はGoogle先生に聞いてくれ。

var pi = [3,1,4,1,5,9,2,6,5,3,5,8,9,7,9,3,2,3,8,4,6,2,6,4,3,3,8,3,2,7,9,5,0,2,8,8,4,1,9,7,1,6,9,3,9,9,3,7,5,1,0,5,8,2,0,9,7,4,9,4,4,5,9,2,3,0,7,8,1,6,4,0,6,2,8,6,2,0,8,9,9,8,6,2,8,0,3,4,8,2,5,3,4,2,1,1,7,0,6,7];
for(var i = 0; i < pi.length; i++){
    document.write(pi[i]);
    if(i % 10 == 9){
        document.write("<br>");
    }
}

こうすれば、表示部分は一瞬で終わってくれる。何もdocument.writeを110個書かなくてもいいのだ。

ここまで理解できている方なら、上の処理は何をしているか分かっていただけると思う。ちょっと考えてみて欲しい。

あと、本筋とは一切関係ないのだが、円周率をある程度覚えておくと、ちょっと細工すればパスワードに使えるので便利だ。

おわりに

いかがだっただろうか。今回は繰り返し処理のwhile文、for文と配列について解説した。

これで、本当に基本の部分だけではあるが、一通りの処理ができるようになった。

次回は、この処理をまとめる関数というものについて解説していく。これがあると、処理を書くのがぐっと楽になる。

また、ちょっと面白いこともできるようになってくる。それも併せて紹介しよう。

更新情報はTwitterでも呟いている。よかったら、ページ下部のアイコンから覗いてみて欲しい。

それでは。