Web Developers Antenna 〜ウェブ開発者アンテナ〜 [W'ANEB]

Web Developers Antennaでは、開発ノウハウ、便利ツール、Web運用に関する情報を蓄積していきます。

*

JavaScriptの変数、配列、オブジェクトとは

      2015/08/25

スポンサードリンク

JavaScriptでとても便利に使える変数と配列とオブジェクト

ここではデータを扱うのにとても重要な「変数」と「配列」と「オブジェクト」について説明します。
変数は英語で”Variable”といい、一時的に値を格納する箱のようなものです。配列は英語で”Array”といいます。一つに並んだ列のひとかたまりのことを指して配列と呼びます。

変数

一時的にデータを格納しておくものを変数といい、簡単なデータを一時的に入れておくには変数が便利です。

例えば、商品の価格管理をする場合

0001:Apple:120
0002:Banana:100
0003:Orange:110
0004:Strawberry:140
0005:Pineapple:200

[例1-1]商品の価格管理を変数で平均価格を表示するJavaScript例。

<script type=”text/javascript”>
var apple=120;
var banana=100;
var orange=110;
var strawberry=140;
var pineapple=200;
var total = apple + banana + orange + strawberry + pineapple;
var average = total/5;
window.onload = function() {
document.getElementById(“average”).innerHTML = average;
}
</script>
<div>平均価格:<span id=”average”></span></div>

実行結果は「平均価格:134」になりますね。

配列

1つの変数には1つの値しか入れることができないので、同じような内容のデータをまとめるとき、変数をその内容分用意することになり、プログラムが煩雑になってしまいます。
そこで、データをまとめて扱う配列が便利に利用できます。

[例1-2]商品の価格管理を配列を用いて平均価格を表示するJavaScript例。

<script type=”text/javascript”>
var price=[120,100,110,140,200];
var total=0;
for (var i=0;i<price.length;i++) {
total+=price[i];
}
var average = total/price.length;
window.onload = function() {
document.getElementById(“average”).innerHTML = average;
}
</script>
<div>平均価格:<span id=”average”></span></div>

実行結果は「平均価格:134」になりますね。

[例1-1]より[例1-2]の方がスマートになりました。
このように配列を利用することで、プログラム自体を軽く、そして見た目もすっきり整理することができて便利に使えます。

オブジェクト

オブジェクトとは、変数や配列と同じようにデータ管理で利用します。
オブジェクトも簡単に言うとデータを扱うのに便利なもので、特長としては名称でデータを管理できることでしょうか。
(補足:配列変数もオブジェクトの一種です。)

[例1-3]商品の価格管理をオブジェクトを用いて平均価格を表示するJavaScript例。

<script type=”text/javascript”>
function Item(_product, _price) {
this.product = _product;
this.price = _price;
}
var fruit=[];
fruit[0]=new Item(“Apple”,120);
fruit[1]=new Item(“Banana”,100);
fruit[2]=new Item(“Orange”,110);
fruit[3]=new Item(“Strawberry”,140);
fruit[4]=new Item(“Pineapple”,200);
var total=0;
for(i=0;i<fruit.length;i++){
document.write(fruit[i].product+”:”+fruit[i].price+”<br />”);
total+=fruit[i].price;
}
var average = total/fruit.length;
window.onload = function() {
document.getElementById(“average”).innerHTML = average;
}
</script>
<div>平均価格:<span id=”average”></span></div>

実行結果は「各商品の価格と平均価格:134」になりますね。

[例1-1][例1-2][例1-3]とより汎用的になってきましたね。

本内容を深堀りいただければ色々と応用できると思います。
ここまでご覧いただき有難うございました。
いかがでしたでしょうか。イメージできましたでしょうか。
どんどん活用していきましょう。

 - JavaScript, Web Development ,