
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
JavaScript
2017.10.17
配列では、変数名にインデックス番号が付いて各データを格納しますが、インデックス番号の代わりにデータと関連性のあるキーを用いて、データとキーを紐付けて各データを格納する方法もあり、これを連想配列といいます。
今回は、連想配列と、連想配列のデータをループさせる際に使用するfor..in文について紹介します。
連想配列は、インデックス番号の代わりにデータと関連性のあるワードを用いて、変数名とワードを組み合わせて各データを格納する配列です。
インデックス番号の代わりとなるワードのことを「キー」と呼びます。
果物の値段を格納する配列変数を考えてみます。
りんご | みかん | ぶどう | もも |
---|---|---|---|
350 | 380 | 580 | 490 |
このようなデータを、配列変数に格納すると、通常は次のようになります。
var fruitPrice = [350, 380, 580, 490];
そして、みかんの値段を使いたい時は、「 fruitPrice[1] 」と記述してデータを取得します。
インデックス番号の「 1 」とみかんとは関連性がないため、「 fruitPrice[1] 」を見ただけでは、何の値段なのかわかりません。
これを、キーと値段とを紐付けて次のようなデータとしてイメージしてみます。
キー | りんご | みかん | ぶどう | もも |
---|---|---|---|---|
データ | 350 | 380 | 580 | 490 |
次のように記述すると、キーとデータを連想配列変数に格納することができます。
var fruitPrice = {"りんご" : 350, "みかん" : 380, "ぶどう" : 580, "もも" : 490};
そして、みかんの値段を使いたい時は、次のように記述してデータを取得します。
alert("みかんの値段は" + fruitPrice["みかん"] + "円です。");
「 fruitPrice[“みかん”] 」を見ただけで、みかんの値段であることが予想できます。
このように、連想配列は、キーとデータが紐付いた配列で、次のように記述します。
// 宣言と代入
var 配列変数名 = {“キー1” : 値1, “キー2” : 値2, “キー3” : 値3};// データの取得
var 変数名 = 配列変数名[“キー2”];
配列変数の中の全てのデータを表示するようなプログラムを作る場合、通常の配列を使うと、次のようにfor文が使えます。
var fruitPrice = [350, 380, 580, 490]; for (var i = 0; i < fruitPrice.length; i++) { document.getElementById("id_name").innerHTML += fruitPrice[i] + "円"; } } }
しかし、連想配列の場合は、インデックス番号を使用しないため、for文のカウントを利用することができません。
このような場合に便利に使用できるのが、for..in文です。
for..in文は特別な使い方をする構文で、オブジェクトに含まれるプロパティを順に取得する際に使用します。
オブジェクトは、プロパティをまとめて管理するためのもので、プロパティは、値と名前とをセットにして管理します。
(連想配列はオブジェクト、中身のキーはプロパティの関係にあるといえます。)
先ほどのサンプルを、連想配列とfor..in文を使用して記述すると、次のようになります。
var fruitPrice = {"りんご" : 350, "みかん" : 380, "ぶどう" : 580, "もも" : 490}; for (var fName in fruitPrice) { document.getElementById("id_name").innerHTML += fName + " : " + fruitPrice[fName] + "円"; } } }
for..in文は、オブジェクトに含まれるプロパティの数だけ繰り返しを行うように組み込まれた構文です。
そのため、条件式や増減式のようなものを設定する必要がありません。
上のサンプルでは、ループの度に、連想配列fruitPriceに格納されたキーを、変数fNameに代入し、fruitPrice[fName]としてそのキーに紐付いたデータを取得しています。
キー自身も意味のあるデータであれば、このように出力テキストに加えることもできます。
上のソースコードを使って、実際にプログラムを作ってみました。
表示ボタンをクリックしてみて下さい。
ソースコードは次の通りです。
<script type="text/javascript"> <!-- function dispAry() { var fruitPrice = {"りんご":350, "みかん":380, "ぶどう":580, "もも ":490}; document.getElementById("dat").innerHTML = ""; for (var fName in fruitPrice) { document.getElementById("dat").innerHTML += fName + " : " + fruitPrice[fName] + "円" + "<br>"; document.getElementById("dat").innerHTML +="<br>"; } } //--> </script> <div style="background-color : #CCC; padding : 20px 20px 0px;"> <form> <div style="display:inline-flex;"> 果物の値段を表示します <input type="button" value="表示" onClick="dispAry()"> </div> <div id="dat" style="background-color : #EEE; width : 300px;"></div> </form> </div>
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.