配列は、特につまずきやすい概念の1つです。
ただ、プログラミングをする上で、絶対に必要な書き方です。
配列はarrayと書きます。
では配列とは何を意味するのでしょう。
単純に言えば、変数の拡張版です。
変数は「1つの変数につき1つ」しかデータを格納できません。
しかし配列は「いくつも」格納できます。
例えると変数は箱で、配列は引き出しのある棚です。
引き出し1つ1つにデータを格納して、好きな時に引き出すことができます。
では、どのように使えば良いのでしょうか。
基本的な用途は、1つのグループでまとめたいデータが複数ある時などです。
例えば「バナナ、りんご、パイナップル」のデータがあったとします。
この３つをフルーツという括りでまとめて管理したい時に配列が使えます。
夕食という括りで「肉、野菜、魚」のデータがあるときもそうです。
このように、様々なデータをグループで管理しやすくなります。
ユーザー情報の出力や管理などでもよく使う処理です。
今回で、しっかり覚えておきましょう。
ミッションの内容
夕飯の内容を配列に格納し、出力します。
サンプルファイルを見ると、ただ料理名が書かれています。
しかし、HTMLに直接書いているわけではありません。
arrayに一旦格納した料理名を、for文で順番に書き出しています。
まず、ページ下部のソースコードの解説をご確認ください。
その後、下記のファイルを再現してみましょう。
どうしても再現できない場合は、下記のファイルを参考にしてください。
ソースコードの解説
まずarrayに夕食のデータを格納してみましょう。
//いくつかのデータを配列にいれます。
var dinnerData = ["ステーキ","すし","さしみ","カレー","シチュー"];
これで、配列dinnerDataの中に、夕食のメニューが入りました。
今度は、配列dinnerDataから1つずつデータを取り出してみます。
配列の中から1つデータを取り出す場合は、下記のようになります。
var dinnerDataContent = dinnerData[0];
このように、配列dinnerDataの尾尻に、データの番号を入れれば、取り出すことができます。
左から順に0〜4まで連番になっており、指定した番号のデータを取り出せます。
では次に、一気にすべて取り出してみましょう。
ここで、前回使ったfor文が役に立ってきます。
//入力したデータの数を調べます。
var todaysDinnerNo = dinnerData.length;
//入力したデータの回数分ループさせます。
//この時、todaysDinnerNoから1引いておいてください。
//理由は後述します。
for(let i = 0;i<=todaysDinnerNo-1;i++){
//配列からデータを呼び出す時はdinnerData[0]のように記述します。
//[0]の中は「何番めのデータを表示するか」を意味します。
//0は今回の場合、ステーキとなります。
//繰り返される回数分iに数字が表示されるので0〜5までループします。
$(".printArea").append(dinnerData[i]+"<br>");
};
//todaysDinnerNoから1引いた理由です。
//配列の表示は「0」から始まりますが、todaysDinnerNoのカウントは「1」から始まります。
//よって、配列を表示する際5回繰り返せば最後は4になります。
//一方、普通にカウントしたtodaysDinnerNoの最後は5になります。
//todaysDinnerNoが5のままだと、配列のデータ表示の際、1回多く表示されます。
//なのでtodaysDinnerNoから1引いて4としています。
まず、配列dinnerDataの中身が何個あるか数えます。
数えた数字は、変数todaysDinnerNoに入ります。
そして、数えた数字をfor文で使います。
「i <= todaysDinnerNo -1 」でループの繰り返し回数として、入力します。
変数iがtodaysDinnerNo ( dinnerDataの個数 ) の値に達するまで、ループが繰り返されます。
こちらのfor文は前回の応用ですので、わからない場合はこちらからご確認ください。
ループの中で、順番に、配列の中身を.printAreaの中に書き出します。
配列の取り出し方はdinnerData[0];でしたね。
ループする度に連番で[0]〜[4]までカウントしていけば良いわけです。
では、どうやってカウントさせれば良いでしょう。
答えは単純。
ループする度に変数「i」がカウントされているので、数字と「i」を入れ替えれば完成です。
これで、for文で配列の中身をすべて出力することができます。
また、今回はHTMLの<br>も一緒に出力されていることにお気づきでしょうか。
dinnerData[i]+”<br>” というソースコードをみてください。
+でつなげて”<br>”と書くことでHTMLも出力できます。
HTMLタグや文字列として出力したい時は””で囲います。
これを<li>などに書き換えれば、<li>のリスト形式などにもできますね。
arrayはこれから何度も使っていきますので、理解できるまで練習していきましょう。