第46回：JavaScript講座本編6「配列」
どうも、シノです。
ほんとに前書きで書くことなくなったので、講座外の記事宣伝でも入れておきます（笑）
興味があれば読んでみてください。
さて、今回はJavaScript講座本編第6回です！
今回は、「配列」というものを見ていきます。
「あれ、前回リストやるって言ってなかったっけ？」という方、ご安心ください。
JavaScriptでは、この配列とリストは同じものを指します。
というわけで、ここからは配列と呼ぶことにします。
今回の目次です。
0.前回の復習
前回は、HTMLから情報を持ってきたり、逆に情報を入れてあげたりする方法を解説しました。
あ、前回最後の問題はどうだったでしょうか。
以下に、それぞれの解答例を貼っておきます。
分からなかった人も、これを見て再チャレンジしてみてください。
問題1
<table>
<tbody>
<tr>
<td>数字：</td>
<td><input id="num1" name="num1" type="number" /></td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input id="sumButton" name="sumButton" type="submit" value="計算" onclick="sum()"/></td>
</tr>
<tr>
<td>答え：</td>
<td><input id="result" name="result" type="number" /></td>
</tr>
</tbody>
</table>
<script>
function sum(){
var num1 = document.getElementById("num1").value;
var result = 0;
for(var i = 1; i <= num1; i++){
result = result + i;
}
document.getElementById("result").value = result;
}
</script>
問題2
<table>
<tbody>
<tr>
<td>数字：</td>
<td><input id="num1" name="num1" type="number" /></td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input id="sumButton" name="sumButton" type="submit" value="計算" onclick="sum()"/></td>
</tr>
<tr>
<td>答え：</td>
<td><input id="result" name="result" type="number" /></td>
</tr>
</tbody>
</table>
<script>
function sum(){
var num1 = document.getElementById("num1").value;
var result = 0;
for(var i = 1; i <= num1; i++){
if(i % 2 == 0){
continue;
}
result = result + i;
}
document.getElementById("result").value = result;
}
</script>
1.「配列」って何？
さて、今回の内容に入りましょうか。
まずは、そもそもの配列の説明からです。
配列とは、簡単に言ってしまうと「0個以上の変数を一つにまとめたもの」です。
例えば、数字を100個使いたいとしましょう。
そのとき、100個の変数を別々に定義するのってめちゃくちゃ大変ですよね…
そんなときに、この配列が使えるんです。
2.「配列」の宣言
配列の宣言は以下の2通りです。
- var 変数名 = new Array(配列の中身1, 配列の中身2,...);
- var 変数名 = [配列の中身1, 配列の中身2,...];
どちらでも、同じ結果になります。
が、1つ注意点があります。
数字1つを指定した場合ですね。
- var 変数名 = new Array(3);
- var 変数名 = [3];
としたとき、結果が変わります。
上のnew Array()を使った場合は、中身が入っていない3つの要素を持つ配列が出来上がります。
それに対して、下の大括弧を使った場合は、「3」という要素1つを持つ配列が出来上がります。
この違いに注意しましょう。
3.「配列」の使い方
さて、実際に使ってみましょう。
こちらは、具体例で見ていきます。
var a = [3, 1, 4];
document.write(a[0]);
document.write(a[1]);
document.write(a[2]);
配列を定義して、その要素を表示しています。
このように、配列の要素を1つ持ってくるときは、0から数え始めて何番目か、という指定のしかたをします。
それを、大括弧で囲って、配列が入っている変数の後ろにつけてあげるんですね。
これを実行した結果は以下の通りになります。
これだけだとあまり便利さを感じないですね…
この配列が真価を発揮するのは、繰り返し処理です。
例えば、極端な例ですが、以下の配列の要素全てを足したいとしましょう。
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];円周率を100桁書いてみました。
あ、円周率をある程度覚えておくと、一部分切り取ってパスワードとかに使えるので便利ですよ。
私は一部切り取ったものにさらにちょっと手を加えてよく使ってたりします。
なんて話はどうでもいいです。
で、これを全部足すのって、そのまま書くと相当骨が折れますよね。
なので、for文を使いましょう。
そんなときに、配列には以下の変数が用意されています。
length：その配列の要素数が格納されている。
というわけで、これを使ってfor文を書いてみます。
あ、配列piは上で書いたものを宣言したとしてください。
var result = 0;
for(var i = 0; i < pi.length; i++){
result += pi[i];
}
document.write(result);
これを実行すると…の前に、for文の中身、緑太字の部分がまたおかしなことになってますね。
実はこれ、「result = result + pi[i];」と同じです。変数に値を足し算するときは省略できるんですね。
もちろん、引き算、掛け算、割り算でも同じことができます。
さて、改めて実行結果を見てみましょう。
471ってなったと思います。
これで、配列のすごさがわかっていただけたでしょうか。
まとめ
いかがだったでしょうか。
今回は、「配列」について解説しました。
複数の要素を一気に扱える便利な方法なので、よかったら使ってみてください。
ちなみに、配列の要素としてさらに配列を入れることもできます。
いわゆる二次元配列ってやつですね。
これはちょっと複雑になってくるので、余力のある人は調べてみてください。
さて、次回ですが…何しようかって迷ってます。
というのも、実は私が勉強した内容はこれで全部書き切ってしまったんですよ。
だから、新しい内容を私も勉強しなきゃいけないんですが…どこに進もうか迷っていて。
なにか「これ解説して！」って内容あれば是非教えてください。勉強します。
更新情報はTwitterでも呟いてますので、よかったらどうぞ。
次回：予告編「数独を自動で解くプログラム」(2020/1/21投稿しました！！！)
それでは。
