【プログラミング入門の入門】配列を使ってデータをまとめて処理する
こんにちは。継続の錬金術士なおキーヌです。
ブログ毎日更新は204日目になります。
第2回目は変数と条件分岐を学び、文字列の中から文字列が含まれるか判定するプログラムを作りました。
今回は文字列や数字をまとめて管理できる配列という概念を学びます。
リキくんのやりたい大量のテキスト処理にはもってこいのプログラムの基本機能です。
覚えるとプログラミングの幅が格段に広がるのでリキくんと一緒にしっかり学びましょう。
それではプログラミングの入門の入門第３回目始めましょう。
配列という概念を学ぼう
変数と条件分岐を実際にプログラミングしながら覚えてもらったけど、
今回は配列について学んでいくよ。
リキくんがやりたいことに最も必要なことなんだ。
配列？なんだそりゃ
噛み砕いて言うと、入れ物の入れ物かな。
入れ物？ってことは変数か！
変数の変数……？
変数の変数というよりも、変数をまとめて入れておける箱みたいなものだと思ってくれればいいかな。
変数をまとめる箱か……さっぱり使い方がわからねぇや
確かに使ってみないとわかり辛い概念かもしれないね。
それじゃあ早速使ってみようか。次のコードを打ってみてね。
<!doctype html>
<html lang="ja">
<body>
<h1 id="title">プログラミング入門の入門</h1>
</body>
<script>
var texts = [];
</script>
</html>これだけか？変数にカッコを入れている？なにしてるんだこれは
これはtextsという名前の配列を作っているんだよ。
見たまま、何も入っていない空の配列なんだ。
さっぱりわからねぇ！結局のところこれをどうやってつかうんだ？ってか何に使えるんだ？
それじゃあこうしたらどうかな？
<!doctype html>
<html lang="ja">
<body>
<h1 id="title">プログラミング入門の入門</h1>
</body>
<script>
var texts = ["あ","い","う","え","お"];
</script>
</html>文字列……じゃなくて1つだから文字だな！それを５つも……？
その認識で合っているよ。じゃあ「う」だけ表示したい場合どうしたらいいと思う？
「う」だけか……「console.log(texts)」をやると全部表示されそうだもんなぁ……
「texts2」とか……じゃないよな？
惜しい！でも凄い良い線行ってるよ！流石リキくんだ。
そしてプログラミングでは数字は０から始まるってこと覚えててくれたね。
おう！暗記は苦手なんだけど記憶力だけは無駄に良いんだ！
プログラミングにおいて暗記力よりも記憶力の方が大切だからますますプログラマ向きだね。
それじゃあ答えを書くと次のようなコードになるよ。
<!doctype html>
<html lang="ja">
<body>
<h1 id="title">プログラミング入門の入門</h1>
</body>
<script>
var texts = ["あ","い","う","え","お"];
console.log(texts[2]);
</script>
</html>めちゃくちゃ惜しいじゃねえぁか！なんか悔しいいい！
いや、十分凄いと思うよ。普通は変数に[]なんて付けるなんてわからないからね。
データを配列にまとめてみる
で、これは俺のやりたいことにどういった関係があるんだ？
今は文字しか入れてないから確かに役に立つか微妙なところではあるね。
じゃあこうしたらどうかな？
<!doctype html>
<html lang="ja">
<body>
<h1 id="title">プログラミング入門の入門</h1>
</body>
<script>
var texts = ["あいうえお","かきくけこ","さしすせそ","たちつてと","なにぬねの"];
console.log(texts[2]);
</script>
</html>文字列も入れられるのか！
JavaScriptは配列に対しての制限がすごく緩くて基本的に何でも入れられるんだ。
C言語とかキッチリと型を指定する言語では最初にいくつ入るか、数値型なのか文字列型なのかを決めなきゃいけないんだけど、JavaScriptだと数字でも文字列でもお構いなしに入れられちゃうんだよ。
確かに配列は変数を入れてまとめる箱だな。点と点がつながった感じがしたぜ。
なぜこれがリキくんのやりたいことに必要だったのかわかったかな？
文字列を入れられる……そうか、10万行の中から必要なやつだけを配列にいれていけばいいのか！
ご名答！だいぶ先の話になるけどその必要な文字列をまとめた配列の内容をテキストに書き出せば、リキくんのやりたいことが完了するってわけさ。
前回やった文字列の中に文字列が含まれる「indexOf」とこの配列を使ったらもうほとんど出来上がりじゃないか！？
そうだよ。最後にテキストに保存するって言うのがちょっと曲者なんだけど
前にも言ったように凄い人が保存するプログラムを組んでライブラリ化しているから、
それを使えば簡単にテキストファイルとして書き出せるんだ。
おぉ……正直1年ぐらいは覚悟していたんだがもう明日にでもできそうな勢いだな……
思ったよりも簡単でしょ？JavaScriptっていう言語の恩恵も結構あるんだけどね。
次は配列の中身をテキストに書き込むために必要なループ処理を学んでいくよ。
繰り返し命令を使って配列を処理してみよう
ループ処理ってことは処理を繰り返すってことか？
そう。そのまんまの意味だね。
無限ループにしちゃうとプログラムは同じことを繰り返す壊れた機械みたいになっちゃうから、かならずループを抜けるための条件をつけなきゃいけないんだ。
条件ってことはifを使うってことか？
ifは使わないんだけど、ifの後の比較する条件の部分が必要になるね。
＝＝とか＞＝とか！＝＝とか左右を比較する比較演算子。
なるほど、条件に一致したらループを抜けるとかその逆とかってことか。
プログラミングは条件に一致すると「真」、一致しないと「偽」を返すんだ。
真の場合はループを続ける。偽の場合はループを抜ける。その逆もいけるよ。
で、配列とループの関係はどうあるんだ？
まずは繰り返し命令を使ってみよう。そうするとよくわかると思うよ。
<!doctype html>
<html lang="ja">
<body>
<h1 id="title">プログラミング入門の入門</h1>
</body>
<script>
var texts = ["あいうえお","かきくけこ","さしすせそ","たちつてと","なにぬねの"];
for(i=0; i<=texts.length; i++) {
console.log(texts[i]);
}
</script>
</html>また呪文みたいなのが出てきたな……
1つずつ見ていこうか。
まずは「for」これは繰り返し命令の1つで初期値から指定した数値まで繰り返すんだ。
このi=0ってなにしてるんだ？一見変数に数字の「0」を入れているようにみえるが。
これは繰り返し用に使う変数の初期化だよ。最初の数値を何にするかを決めているんだ。
0を入れているので0から開始するという意味だね。
次のは……条件式か？不等号みたいなのがあるがこれは小なりイコール？？
プログラミングでは左と右の比較になるから、この不等号は左は右以下かどうか。で真偽を判定するという意味になるんだ。
その次はi++、これ何してんだ？足し算か？
これはインクリメントといって、iという変数の数字を1つプラスするって意味なんだ。ちなみに1つ減らすときはi–って感じだね。
変数って足し算できるのか……
そういえば教えていなかったね。数字が入った変数の場合は数字同士だと加減乗除が出来るんだ。文字列同士の場合は文字列を結合するって感じだね。
ちなみに数字と文字列を足そうとするとエラーがでるよ。違う型同士は計算できないんだ。
計算か……頭が痛くなりそうだぜ。
算数レベルができれば十分だよ。そして「i++」っていうのは「i=i+1」と同義なんだ。
言語によってはi++っていう書き方が出来ないのもあるんだけどJavaScriptは使えるので積極的に使っていくよ。
確かに短く書けてスッキリしていいな！
後はtextsの後ろにある「length」ってメソッドだね。これは配列の中にデータが何個入っているか返してくれるメソッドなんだ。
ここで気を付けてほしいのは個数だから、配列の数が1個だったとしたら1が返ってくるよ。0からじゃないから気を付けてね。
さて、話をforにもどそうか。まとめると以下のような処理になるよ。
- １．iを0で初期化しておく
- ２．iが配列の長さと同じになるまで繰り返す
- ３．繰り返すたびにiの数値を１足していく
- ４．繰り返される度に「textsのi番目」にアクセスして表示する
- ５．iが配列の長さと同じになるとループを抜けて処理が終了する
ってな感じで繰り返し処理が可能になるよ。
そうか、このループの中で更にindexOfを使って含まれてるかどうかをすれば仕分けすることができるんだな！
そうだね。この配列をループで処理するっていうのはプログラミングにおいてかなり重要になってくるんだ。
文字列は配列だってこと気付いてた？
リキくん。文字列は配列ってことに気付いているかな？
文字列が配列？確かに名前は似ているが……
論より証拠。以下のコードを見て何が表示されるかわかるかな？
<!doctype html>
<html lang="ja">
<body>
<h1 id="title">プログラミング入門の入門</h1>
</body>
<script>
var text = "あいうえお";
console.log(text[3]);
</script>
</html>配列じゃないのに配列のようにしている？？
文字列、つまり文字の列ってことだから内部的には配列扱いになっているんだ。
JavaScriptはそれを意識させないような作りになっていて自然に文字列を使えるようになっているだけなんだよ。
indexOfってどういった動きになってたかな？
文字列を先頭から調べて一致したところを……ハッ！？1文字ずつ調べているし、文字列の何個めかが分かっている！そういうことか！
文字列が文字の配列であるってわかってもらえたかな？
……これが分かったからどうなんだ？
うーん……細かいことをやらない限りあまり意識しなくてもいいんだけどね(笑)
1つあげるとしたら、桃鉄でプレイヤーの名前を変更するマスがあるじゃない
あぁ、折角決めた名前の1文字目をスロットみたいに決めて変更するやつだな。
そう、ああいう感じに特定の1文字を変更したかったりするときに使うかな。
応用はいくらでも聞くと思うよ。例えばリキくんの処理したいテキストの中に全角の＠マークと半角の@マークがあったとき、
全部同じじゃないと気持ち悪いしそもそも半角じゃないとメールは送れないしその時に文字としてアクセスして変更するといった感じだね。
た、確かにありえそうな感じがする……
この概念は覚えておいて損はないよ。
今回は配列について学びました。
連番でアクセスができるようになるのでループでまとめて何か処理をしたいときとかによく使われます。
これでリキくんのやりたいコトは一通り学びました。
後はテキストの読み書きですね。
これはnode.jsを使わないと結構面倒くさいので次回はnode.jsの体験をしてみましょう。
それでは。
