jquery arrayで配列をつくってみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

arrayで配列をつくってみよう

jQuery|2018年11月02日

2018年11月02日
  • このエントリーをはてなブックマークに追加

配列は、特につまずきやすい概念の1つです。
ただ、プログラミングをする上で、絶対に必要な書き方です。

配列はarrayと書きます。
では配列とは何を意味するのでしょう。
単純に言えば、変数の拡張版です。

変数は「1つの変数につき1つ」しかデータを格納できません。
しかし配列は「いくつも」格納できます。

例えると変数は箱で、配列は引き出しのある棚です。
引き出し1つ1つにデータを格納して、好きな時に引き出すことができます。

では、どのように使えば良いのでしょうか。
基本的な用途は、1つのグループでまとめたいデータが複数ある時などです。

例えば「バナナ、りんご、パイナップル」のデータがあったとします。
この3つをフルーツという括りでまとめて管理したい時に配列が使えます。
夕食という括りで「肉、野菜、魚」のデータがあるときもそうです。

このように、様々なデータをグループで管理しやすくなります。

ユーザー情報の出力や管理などでもよく使う処理です。
今回で、しっかり覚えておきましょう。

ミッションの内容

夕飯の内容を配列に格納し、出力します。

サンプルファイルを見ると、ただ料理名が書かれています。
しかし、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はこれから何度も使っていきますので、理解できるまで練習していきましょう。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら