2013/07/30

基礎から学べるJavaScript!【型(Type)】と【オブジェクト】

型(Type)とオブジェクト JavaScript初級編

目次

前回を振り返って

前回は変数と演算子を使用して、文章を表示させる、計算をして表示するといった簡単なプログラムを作りました。

その中で、

  • "文字列型を数値型に変える"
  • "変数に代入する時には文字列をダブルクォーテーションでくくらなければならない"

というようなことを説明しました。

なんで?どうして?と思われた方もいると思いますので、今回はその理由も含めてプログラミングに必要な事を説明をしていきたいと思います。

型(Type)とは?

型(Type)とは、データの種類の事を指します。

型(Type)について
種類
数値 1(整数)、1.4142(浮動小数点)、etc...
文字列 "Hello"、"今日の出来事"、etc...
真偽 True、false
未定義 Undefined、null
配列 配列

上記の表のように、数値と文字列ではデータの種類が違うのです。
数字を変数に代入する際に、ダブルクオーテーションでくくった場合には「これは数値ではなく文字としての数字ですよ!」と言っていることになります。

前回は、この文字列としての数字を数値に変換するという作業を行いました。

では、実際にソースコードを書いて、動作を見てみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample1</title>
<script type="text/javascript">
	function Sample1(){
		var x = 1;						//数値はそのまま代入
		var y = 2;						
		var z = "2";					//数字を""でくくると
										//文字列型として認識される
		alert(x + y + "\n" + x + z );
	}
</script>
</head>

<body>
<input type="button" value="Sample1" onclick="Sample1()">
</body>
</html>

(実際に動作するので押してみよう!)

結果の1行目はちゃんと足し算されているのに、""でくくられた数字を足し算した2行目の結果はおかしいですね。
このように数値はそのまま記述し、文字列は""でくくる必要がおわかりいただけたかと思います。
注意点として、変数に代入した文字列や数値は、利用する際に変数名を記述するだけなので、中身のデータがどんな型なのか解りづらくなります。中身の型をよく意識して利用するように心掛けてください。

オブジェクトとは?

オブジェクトとは、プログラム内で利用するために必要な諸々の状態や機能をまとめたものを指します。
オブジェクトを作成すると、その状態や機能を利用出来るようになっています。
JavaScriptには種々のオブジェクトが用意されているので、よく使われる代表的なオブジェクトを紹介しつつ、基本的な使い方を説明していきます。

代表的なオブジェクト
オブジェクトの種類 利用できる機能
Object オブジェクトに関する機能
Array 配列
Error エラー
Boolean 真偽
Event イベント
Function 関数
Event イベント
Date 日付
String 文字列
Math 数学
Image 画像

たとえばDateオブジェクトは、今の日時を状態、日付を取得・設定するといった機能を持っています。 状態をプロパティ、機能をメソッド、両者を合わせてメンバと呼びます。

オブジェクトの利用方法

まず、オブジェクトを作成してみましょう。

new オブジェクト名();

と記述します。 オブジェクトを作成した場合には変数に格納して取り扱うので、aという変数にDateオブジェクトを作成する場合には

var a = new Date();

と記述します。

プロパティの利用方法

次にプロパティを利用する方法です。

オブジェクトを表す変数名.プロパティ名;

と記述します。 たとえば、数学オブジェクトであるMathオブジェクトには、PIという円周率を表すプロパティがあります。Mathという変数でMathオブジェクトを扱っているとき、これを利用して変数に値を取得する場合には、

var pi = math.PI;

と記述する事で、変数piに円周率の値を取得できます。

メソッドの利用方法

さらにメソッドの利用方法についても覚えておきましょう。

オブジェクトを表す変数名.メソッド名(引数);

と記述します。 たとえばDateオブジェクトには現在の月を返すgetMonth()というメソッドがあるので、dという変数でオブジェクトを扱っているとき、これを利用して現在の月を変数に取得したい場合には、

d.getMonth();

と記述する事で、現在の月を取得できます。 また、月を設定したい場合にはsetMonth()メソッドを利用し、

d.setMonth(7);

と記述する事で、7を引数として渡し、月を設定できます。

ではDateオブジェクトを使用して、実際にメンバを利用してみましょう。
Dateオブジェクトでは、次の表のようなメンバがあります。

Dateオブジェクトのメンバ
メンバ 機能
getFullYear() 年を取得
getMonth() 月を取得
getDate() 日を取得
getDay() 曜日を取得
getHours() 時を取得
setFullYear(引数) 年を設定
setMonth(引数) 月を設定
setDate(引数) 日を設定
setDay(引数) 曜日を設定
setHours(引数) 時を設定
toDateString() 日付文字列を取得
toLocaleDateString() ローカル日付文字列を取得

※月は1月~12月を0~11の数値で扱うため、実際の月より-1された値になるので要注意。

また、Dateオブジェクトのメンバや違うオブジェクトのメンバについても調べてみてください。

では実際にDateオブジェクトのメンバを使ってみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample2</title>
<script type="text/javascript">
	function Sample2(){
		var now = new Date();
		var year = now.getFullYear();
		var month = now.getMonth() + 1;
		var date = now.getDate();
		
		alert("今日は"+year+"/"+month+"/"+date+"です");
		
		var next = new Date();
		next.setFullYear(2014);
		
		var str_next = next.toLocaleDateString();
		alert("来年は" + str_next + "です");
	}
</script>
</head>

<body>
<input type="button" value="Sample2" onclick="Sample2()">
</body>
</html>

(実際に動作するので押してみよう!)

実際の動作を見ると解るように、今日の日付が取得出来る他にも、任意の日付を設定できるなど、様々な機能を持っています。

今回のまとめ

今回は型とオブジェクトについて説明しました。
どちらもJavaScriptを利用してプログラムを作成する上では欠かせないものとなります。
他にもWebブラウザ上で利用できるブラウザオブジェクトなど色々ありますので、是非自分で調べて使って確かめてみてください。
これでアナタはプログラマーへステップアップ!!