JavaScriptのオブジェクトとは

JavaScriptはオブジェクト指向の言語で、扱うデータとしてもオブジェクトが多いです。

そもそもオブジェクト指向というものを僕はJavaで勉強したのですが、頭が悪いせいか最初は全然理解出来ませんでした。

(僕にとっては)かなり難しい概念なので忘れたらまた読み直してください。

オブジェクトとは何か。よく使うオブジェクトはどういうものか。について解説します。

オブジェクトとは

“Object”とは直訳すると”物”になります。

オブジェクト指向のオブジェクトとは、データと処理を1つの物として捉えたものです。

JavaScriptでは数値や配列、文字列もオブジェクトとして扱います。

他にもwindowやDateなどのオブジェクトがあります。

オブジェクトの操作

オブジェクトは基本的に new 演算子というものを使って宣言します。

[aside type=”normal”]var today = new Date();[/aside]

Date はクラス名です。Dateと定義されたクラスを new してオブジェクトにし、操作するということです。

操作方法は、オブジェクトを格納した変数に対し、. をつけその後メソッド名を定義します。

例えば、今日が何日かを取得する場合は、

var day = today.getDate();

のように書きます。

getDate というメソッドは Date クラスに定義してあるものです。

配列

JavaScriptに限らず、複数の同様なデータを扱うために配列というものがあります。

配列は変数が何個も連続してあり、それが1つの変数に格納されているイメージです。

配列の宣言

配列はArrayクラスのオブジェクトです。

配列の宣言は以下のように行います。

var array = new Array('りんご', 'みかん', 'バナナ');

ただし、配列はもっと簡易的に宣言をすることが出来ます。

簡易的な方法は以下のように書きます。

var array = ['りんご', 'みかん', 'バナナ'];

配列の取得

配列の取得はインデックスと呼ばれる番号を指定して取得します。

インデックスは0から始まります。

例えば、

var fruit = ['りんご', 'みかん', 'バナナ'];

の1番目にある”りんご”を取得する場合には、

fruit[0];

のように0を指定して取得します。

配列の数を取得

配列にデータが何個格納されているのかを知るためには、length を使います。

実際は配列をループさせて処理させることが多いと思うのでその例を下に記載します。

var fruit = ['りんご', 'みかん', 'バナナ'];
for (var i = 0; i < fruit.length; i++) {
  alert(fruit[i]);
}

こう書くとポップアップで ‘りんご’, ‘みかん’, ‘バナナ’ と順番に表示されます。

 

配列は 0 から始まりますが、配列の数は最大のインデックスでは無く格納されているデータの個数になります。

なのでfor文には var i = 0; と0から始まるカウンターを宣言し、条件に i < fruit.length;  と書くことで全てのデータを取得出来ます。

配列の追加

配列にデータを追加するためには、push() を使います。

データが3つ格納されている場合には、4つ目(インデックス=3)に追加されます。

var fruit = ['りんご', 'みかん', 'バナナ'];
fruit.push('すいか');

もしくは、インデックスを指定して追加する方法もあります。

下のように書くと配列の最後に新たにデータを追加します。

fruit[fruit.length] = 'すいか';

インデックスを指定する場合は、既に保有されているデータに対し上書きをすることも可能です。

var fruit = ['りんご', 'みかん', 'バナナ'];
fruit[1] = 'すいか';

このように書くと’みかん’が’すいか’に上書きされます。

文字列

文字列もオブジェクトです。

文字列は使用する頻度がかなり多く操作方法も多いです。

よく使われる操作を抜粋して説明します。（詳細は別記事にまとめます）

文字列オブジェクトの宣言

文字列はStringクラスのオブジェクトです。

宣言は以下のように書きます。

var str = new String('りんご');

Stringも簡易的に宣言でき、下記のように書くのが一般的です。

var str = 'りんご';

文字列の文字数取得

文字列の文字数取得は length を使い下のように書きます。

var strcount = str.length;

文字数は、全角半角関係なく文字数を返します。

文字列の連結

var a = "りんご" + "みかん"; // "りんごみかん"
var b = "りんご" + 10; // "りんご10"

文字列の連結は + を使い上のコードのように書きます。

数値と結合した場合は、数値を含む文字列になります。

日付(Date)

Dateクラスは日付をコントロールする為のクラスです。

これを使うことで現在の日時や30日後の日時などを取得出来ます。

Dateオブジェクトの宣言

var today = new Date();

Dateオブジェクトは上記のように宣言します。

today をそのまま出力すると現在日時が表示されますが、そのまま使うものではないですね。

現在の年、月、日を取得

var y = today.getFullYear(); // 年を取得
var m = today.getMonth() + 1; // 月を取得
var d = today.getDate(); // 日を取得

2018年8月29日だった場合は、
y = 2018
m = 8
d = 29
になります。

月だけ、1月は0で12月は11となりますので、1を足しています。

Window

windowオブジェクトはブラウザを操作するオブジェクトです。

僕は alert(); をよく使いますが、これは window.alert(); の略です。

このようにポップアップを表示したり、画面のサイズを取得したり、違うページに遷移させたり出来ます。

まとめ

オブジェクトと一言で言っても様々なものがあり、この記事では一部だけの紹介でした。

オブジェクトとはどういうものが分かって頂けたら幸いです。

オブジェクトはデータと処理の塊。

宣言には new 演算子を使う。

操作は、オブジェクトが格納された変数の後ろに . をつけて、lengthなどのプロパティ名を呼び出すか、getFullYear() などのメソッドを呼び出し操作する。