投稿者: 無漏路

様々なオブジェクト(Objectオブジェクト)について知ろう6

投稿者作成者: 無漏路
投稿日 2015年5月22日

この章ではObjectオブジェクトについて説明します。
Object オブジェクトはすべてのオブジェクトの基本オブジェクトです。
Object オブジェクトのメソッドとプロパティはすべてのオブジェクトで使用できます。
つまり、JavaScriptのすべてのオブジェクトは自身のプロパティとメソッドと同時にObject オブジェクトのメソッドとプロパティも使うことが出来ます。
例えばtoStringメソッドはNumberクラスやStringクラスにもありましたが、これは元々、Objectオブジェクトのメソッドです。
ではObject オブジェクトの説明を始めます。
Object オブジェクトはという形式で書きます。
以下の例はオブジェクトの箇所で説明しましたが、
とオブジェクトを作成してから、データを入れていきます。
次はObjectオブジェクトのプロパティやメソッドについて説明します。 constructorプロパティにはオブジェクトを生成したコンストラクタへの参照が入っています。
typeof演算子は基本形を判別するために使われますが、これだけではObjectオブジェクトも配列も結果はobjectになってしまいますので、そこでconstructorプロパティを使うことでこれらの区別を付けることが出来ます。
では説明をします。 =>配列オブジェクトを作成します。

=> typeofで型の確認すると配列はobjectになります。
指定したデータがどのデータ型に当てはまるかを確認するにはtypeof演算子を使います。
=> Dateオブジェクトを作成します。

=> typeofで型の確認すると配列はobjectになります。
配列オブジェクトとDateオブジェクトは共にオブジェクトなのでtypeofでは区別がつきません。例にはありませんが、以下の例の出力もobjectです。このような時にconstructorプロパティを使うと区別が出来ます。

=> s.constructorにはオブジェクトを生成したコンストラクタへの参照が入っているので結果はです。
これで配列オブジェクトであることが解ります。
で確認するとtrueが出力されます。

=> now.constructorにはオブジェクトを生成したコンストラクタへの参照が入っているので結果はです。
ここでDateオブジェクトであることが解ります。
で確認するとtrueが出力されます。

次はtoStringメソッドについて説明します。
このメソッドはオブジェクトを文字列に変換します。 toStringメソッドはNumberクラスやStringクラスにもありました。
ObjectオブジェクトのtoStringメソッドはを返します。
ObjectオブジェクトのtoStringメソッドを単体で使用しても意味ある値は得られません。
実はNumberクラスやStringクラスのtoStringメソッドはObjectオブジェクトのtoStringメソッドを上書きして使っています。
つまり配列の toString メソッドはObjectオブジェクトのtoStringメソッドの機能を借りて、「配列をコンマ区切りでつないで1 つの文字列にする機能」を新たに作成しています。

次はvalueOfメソッドについて説明します。
このメソッドはオブジェクトに関連した基本型の値を返します。 ObjectオブジェクトのvalueOfメソッドを単体で使用するとを返しますので、意味ある値は得られません。
NumberオブジェクトやDateオブジェクトなどでもvalueOfメソッドを使用できます。NumberオブジェクトやDateオブジェクトのvalueOf メソッドはObjectオブジェクトのvalueOfメソッドを上書きして使っています。
例えばDateオブジェクトのvalueOfメソッドはObjectオブジェクトのvalueOfメソッドの機能を借りて、以下の機能を持つことが出来ているわけです。

タグ constructor, Number, Objectオブジェクト, toString, valueOf

JavaScript

様々なオブジェクト(Dateオブジェクト)について知ろう5

投稿者作成者: 無漏路
投稿日 2015年5月22日

この章ではDateオブジェクトについて説明します。
Dateオブジェクトは、日付や時間などを扱うためのオブジェクトです(以下の表はクリックすると大きくなります)。
Dateオブジェクトはオブジェクトを生成する時にはコンストラクタを使う必要があります。
コンストラクタについては説明済みですが、オブジェクトを作成する際に値を初期化する機能のことです。
以下にオブジェクトを作成する際の例を示します。 =>コンストラクタの中身がカラの場合は現在の時刻と日付になります。 => コンストラクタに1970年1月1日0時0分0秒からの経過をミリ秒で指定する方法です。
この例の意味は1970年1月1日0時0分0秒から12664939ミリ秒経過したと言う意味です。 =>コンストラクタにダブルクォートで囲んだ日付文字列で指定する方法です。 =>日付と時間に関する項目を「,」で区切って指定する方法です。
この形式の場合、月は0から11で指定します。 =>末尾に999とありますが、ここの項目はミリ秒です。ミリ秒も加えることが出来ます。
では例を見てみましょう。結果はと今現在のデータが出力されます。
では内容を詳しく見てみましょう。 =>Dateのコンストラクタはカラにして、オブジェクトを作成します。

=> getFullYearメソッドで年のデータを西暦で取得します。

=>getMonthメソッドの戻り値は0から11で返されるので（1から12が返されるのではありません）、今現在の月を取得しようと思えばその返された値に1を足してください。
つまり返される値はなので、1を足せば現在の月になります

=>getDateメソッドは現在の日を1～31の数で取得できます。

=>getDayメソッドは今日の曜日を0から6の数値で返します。
日曜日の0から始まって土曜日が6と言う範囲です。
ですので、このまま返されても、数字が返されるだけなので何曜日か解りません。
そこで下のように配列を作ります。 =>添え字0は日で、添え字６が土というように配列を作って、getDayメソッドの返される値に対応させます。
返される値は日曜日が0から始まって土曜日が6でしたね。

=>getDayメソッドで返された数値がweekに入っているので、それを配列の添え字にセットすれば曜日を取得出来ます。

=>getHoursメソッドは今現在の時を0から23の数値で取得します。

=>getMinutesメソッドは今現在の分を0から59で取得します。

=>getSecondsメソッドは今現在の秒を0から59で取得します。

=>getMillisecondsメソッドは今現在のミリ秒を0から999で取得します。
後は以下のように出力すると今現在の日付や時間が表示されます。次は世界協定時で現在のデータを取得します。世界協定時とは「世界で時刻を記録する時に使われている標準の時刻」です。
日本との時差は9時間です。
世界協定時の場合はUTCという文字が入っているメソッドを使います。
結果は以下の通りです。次はgetTimeメソッドとgetTimezoneOffsetメソッドの例を説明します。
では例をみてみましょう。

=>getTimeメソッドは1970年1月1日の午前0時から現在の時刻までをミリ秒数で返す。

=>getTimezoneOffsetメソッドはグリニッジ標準時とローカル時間の差を分で返す。
差は9時間なので-540分を返します。
結果は上から以下の通り出力されます。
次はUTC メソッドとparseメソッドについて説明します。
では例をみてみましょう。 UTCメソッドは1970年1月1日午前0時から「指定の年、月、日、時、分、秒、ミリ秒の値」までを、ミリ秒に変換します。 parseメソッドは日付文字列を1970年1月1日の午前0時からのミリ秒数で返します。
結果は上から以下の通り出力します。
次の例ではsetメソッドでデータをセットしています。 a.setFullYear(1999);
=>西暦を設定します。

a.setMonth(3);
=>月を設定します。

a.setDate(21);
=>日を設定します。

a.setHours(20);
=>時を設定します。

a.setMinutes(22);
=>分を設定します。

a.setSeconds(2);
=>秒を設定します。

a.setMilliseconds(345);
=>ミリ秒を設定します。

=>世界協定時を文字列に変換します。
=>Wed, 21 Apr 1999 11:22:02 GMT

=>ローカル時間を文字列に変換します。
=> 1999/4/21 20:22:02
=>ローカルの日付部分を文字列として返します。
=> 1999/4/21

=>ローカルの時刻部分を文字列に変換します。
=>20:22:02

=>グリニッジ標準時を文字列に変換します。

=>時刻部分を文字列に変換します。

=>日付を文字列に変換します。
=>Wed Apr 21 1999 20:22:02 GMT+0900 (東京 (標準時))
では次の例を見てみましょう。 toUTCStringメソッドは世界協定時を文字列に変換します。
=>何も日付をセットしていない状態でtoUTCStringメソッドを出力しています。
結果はです。

次は世界協定時の日時をセットするメソッドについて説明します。以下が主要なメソッドです。日付や時刻をセットしたのが以下の箇所です。
引数には上の表にある数値の範囲で設定します。出力結果は以下の通りです。

次はsetTimeメソッドについて説明します。
では例をみてみましょう。 setTimeメソッドは1970年1月1日午前0時からの経過ミリ秒を設定するメソッドです。
のようにカッコの中にミリ秒形式で書きます。
このセットしたミリ秒を出力するにはtoStringメソッドを使います。
結果は以下の通りです。
次はvalueOfメソッドについて説明します。 valueOfメソッドは1970年1月1日午前0時からの経過をミリ秒形式で返します。
結果は以下の通りです。今現在は1970年1月1日午前0時から1378179514776ミリ秒経っていると言うことです。

次は日付や時間のデータを操作する方法について説明します。
例えば2時間進める、4年戻すなどの操作を行います。
では例をみてみましょう。結果は以下の通りです。 =>今の年から4年引きたい場合は「-4」と記述します。

=>時間を2時間進めたい場合は「+2」と記述します。
このように加算減算して日付や時間のデータを操作することが出来ます。

タグ date, Dateオブジェクト, getdate, getDay, getFullYear, getMilliseconds, getMonth, getTimezoneOffset, parse

JavaScript

様々なオブジェクト(Mathオブジェクト)について知ろう4

投稿者作成者: 無漏路
投稿日 2015年5月22日

この章ではMathオブジェクトについて説明します。
Mathオブジェクトのプロパティとメソッドはすべて静的プロパティと静的メソッドです。
Mathオブジェクトはコサインやタンジェントなどの計算を行うオブジェクトです。このプロパティを使うにはもちろん数学の知識が必要です。
では例をみてみましょう。では例をみてみましょう。例えばアークコサインを得たい場合にはという形式で書きます。
結果は上から以下の通り出力します。
次はmaxメソッドとminメソッドについて説明します。

次はMath.maxとMath.minについて説明します。

=>大きい方を返すので10を返します。

=>大きい方を返すので90を返します。

=>引数の中に数値ではないものがあれば、NaNが返されます。

=>小さい方を返すので8を返します。

=>引数の中に数値ではないものがあれば、NaNが返されます。
では例をみてみましょう。結果は以下の通りまでの範囲でランダムに出力されます。

次はMath.roundメソッドについて説明します。Math.roundメソッドは数値の小数点以下を四捨五入します。

では例をみてみましょう。注目点はマイナスの数値で例のように-3.5など終わりが「.5」
の場合は「.5」以下が切り捨てになりますので気をつけてください。
のようにの場合は-4と正確に表示されます。
結果は上から以下の通り出力されます。

次はMath.ceilメソッドについて説明します。Math.ceilメソッドは小数点以下の値を切り上げした整数を返します。
必ず引数より大きい整数を返します。
では例をみてみましょう。結果は上から以下の通り出力されます。次はMath.floorメソッドについて説明します。Math.floorメソッドは小数点以下の値を切り下げした整数を返します。
必ず引数より小さい整数を返します。
では例をみてみましょう。結果は以下の通りです。

タグ Math.ceil, Math.floor, Math.max, Math.min, Math.round, max, min

JavaScript

様々なオブジェクト(Arrayオブジェクト)について知ろう3

投稿者作成者: 無漏路
投稿日 2015年5月22日

この章ではArrayオブジェクトについて説明します。
Arrayオブジェクのプロパティやメソッドで配列に対して様々な操作を行うことが出来ます。
配列の要素の順番を変えたりするプロパティやメソッドについて説明します。 length プロパティは配列の最後の添え字に1を足した数を返します。
では例をみてみましょう。 =>添え字に1を足した数を返すと書きましたが、簡単に言いますと要素の数です。
要素の数は5個なので、5を返します。

=>「配列.length =数;」と言う形式で記述すると配列の要素を増やしたり、減らしたりすることが出来ます。
この例の場合は配列の要素を2つ増やして、7にしています。
追加した残りの要素には何も入っていないので、
と、出力すると結果は
undefined
undefined
です（未定義値）。
逆にperson1.length=2;と、要素数を減らすと残りの要素は無くなってしまいますので、for文で取り出すと
結果は
kondou
shimizu
です。 toStringメソッドはArrayオブジェクトを文字列に変換します。
配列の要素を「,」で繋げた形で出力されます。
では例をみてみましょう。結果は以下の通りです。 joinは配列の要素を指定した区切り文字で区切って繋げてくれます。
例の場合は「@」で区切っています。
では例をみてみましょう。結果は以下の通りです。以下のようにjoinのカッコの中をカラにしますと、「,」で連結されます。
person1.toString()と同じ結果になります。結果は2つとも以下の通りです。 sortメソッドはArrayオブジェクトをアルファベットの順番に変えます。
では例をみてみましょう。結果は上から以下のように出力します。アルファベットを使った配列の場合はアルファべット順に変えてくれるので問題ないですが、
のように要素が数字の場合は数字の順番に並べてくれるわけではないので、気を付けてください。 reverseメソッドはArrayオブジェクトを現在の要素と逆順に変えます。
では例をみてみましょう。結果は上から以下のように出力します。 sliceメソッドは配列の要素を取り出します。
では例をみてみましょう。以下に開始位置、終了位置の数え方を書きます。
終了位置は指定した位置の一つ前までになります。
0番目　kondou　
1番目　shimizu　
2番目　honda
3番目　doumoto
4番目　inukai
結果は上から以下の通り出力します。 =>spliceは開始位置から数えて何個置換するか決めて、それを置換文字列で置き換えます。
=>開始位置から何個削除するか指定すると、その要素が削除されます。
では例をみてみましょう。では説明を始めます。切り取った要素はこの例のｓのように受け取ることが出来ます。 3個切り取ったのに、2個しか代わりに入れなかった場合には要素数が1つ減ることになります。
逆に3個切り取って、代わりに4個入れた場合は要素数が1つ増えることになります。
結果は上から以下の通り出力します。 popメソッドは、配列の一番後ろの要素を削除します（要素の数は1つ減る）。
では例をみてみましょう。結果は上から以下の通り出力します。削除したものを受け取りたい場合はのように変数で受け取ります。
最後にと、出力すると末尾のinukaiが削除された状態で出力されているのが解ると思います(元の配列も実際に削除されます)。 pushメソッドは、配列の末尾に要素を追加します（追加した分、要素数は増えます）。
カンマで区切れば、いくらでも要素を追加することが出来ます。
では例をみてみましょう。結果は上から以下の通り出力します。要素数を受け取りたい場合はのように変数で受け取ります。
この例の場合は4です。
つまり、pushメソッドの戻り値は要素数です。
を出力するとkonno,hiroが追加されているのがわかります。 shiftメソッドは、配列の一番前の要素を削除します（要素の数は1つ減ります）。
では例をみてみましょう。削除した要素を受け取りたい場合はのように変数で受け取ります。
で出力すると実際にkondouが削除されて出力されているのが解ります。
結果は上から以下の通り出力します。 unshiftメソッドは、配列の一番前に要素を追加します（追加した分、要素数は増えます）。
カンマで区切れば、いくらでも追加することが出来ます。
では例をみてみましょう。要素数を受け取りたい場合はのように変数で受け取ります。この例の場合は7です。
つまり、unshiftメソッドの戻り値は要素数です。
で出力するとyumenoとnakataが追加されているのがわかります。例えば以下のsliceメソッドは文字を取り出していますが、これは元の配列には影響しませんが、上のpopメソッドなどは実際の配列まで変化します。上から出力すると以下の通りに出力しますが、途中で取り出しても最初と最後の配列の要素が変わっていないことが分かります。

タグ join, length, pop, push, reverse, shift, slice, sort, splice, toString, unshift

JavaScript

様々なオブジェクト(Stringオブジェクト)について知ろう2

投稿者作成者: 無漏路
投稿日 2015年5月22日

この章ではStringオブジェクトについて説明します。これも組み込みオブジェクトなので、簡単に文字列に関しての機能を使うことが出来ます。初めにオブジェクトを作成してから、様々なメソッドなどを実行します。 lengthは文字列の長さを取得します。
では例をみてみましょう。全角文字、半角文字ともに1と、数えます。
結果は「8」です。 charAtは文字列の一部を取り出します。
ここでの注意は「取り出す文字の位置」は0から数えてください。 1から数えるのではないので注意してください。
a.charAt(30)のように指定した数が文字数を超えているような場合はカラが返されます（何も表示されない）
では例をみてみましょう。指定位置の数え方は以下のようになります。
0番目=>a
1番目=>b
2番目=>c
結果は「b」です。 substringメソッドは指定した範囲の文字列を取り出します。
引数で「取り出す文字列の範囲」を指定して、その個所を取り出します。
例えばa.substring(0,3)は0番目の文字から3番目の文字の一つ前までを取り出すと言う意味です。終了位置の一つ前までなので気を付けてください。
では例をみてみましょう。 substring(0,2)
=>0番目から2番目の手前までなので、答えはabです。
substring(2,0)
=>開始位置のほうが終了位置より大きい場合は後ろから前へ数えます。つまり2番目のひとつ前（つまりb）から、先頭まで取り出しますので、答えはabです。
substring(4,7)
=> 4番目から7番目の手前までなので、答えはefgです。

substring(4)
=>終了位置を省略した場合はその位置から末尾まですべて取り出すので、結果はefghiです。 sliceメソッドは指定した範囲の文字列を取り出します。
引数で「取り出す文字列の範囲」を指定して、その範囲を取り出します。
例えばa.slice (0,3)は0番目の文字から3番目の文字の一つ手前までを取り出すと言う意味です。
では例をみてみましょう。 slice (0,3)
=>0番目から3番目の手前まで。
答えはabc です。

slice (4,7)
=> 4番目から7番目の手前まで。
答えはdef です。

slice (2,0)
=>開始位置の番号のほうが終了位置の番号より大きい場合は何も返されません。

slice(4)
=>終了位置を省略した場合はその位置から末尾まですべて取り出します。
結果はdef ghiです。

slice(-11,-8)
=>sliceでは開始位置、終了位置ともにマイナスの指定も出来ます。マイナス指定の場合は末尾からと、数えます。
結果はabcです。

slice(-11,7)
=>このように開始位置がマイナス指定で、終了位置がプラス指定と言う組み合わせも可能です。
結果はabc defです。

slice(4,-2)
=>このように開始位置がプラス指定で、終了位置がマイナス指定と言う組み合わせも可能です。結果はdef gです。 => concatメソッドは文字列と文字列を結合する機能を持っています。
文字列1,文字列2….を結びつけます。
文字列は「,」で区切れば何個でも書けます。
以下のようにconcatと同じ結果が「+」を使用しても実現できます。
では例をみてみましょう。 substrメソッドは指定した範囲の文字列を取り出します。
では例をみてみましょう。 substr (0,3)
=>0番目から3つ切り取ります。
結果はabc です。

substr (4,7)
=> 4番目から7つ切り取ります。
結果はdef ghiです。

substr (2,0)
=> 2番目から0個なので何も返されません。

substr (4)
=>個数を省略した場合はその位置から末尾まですべて取り出します。
結果はdef ghiです。

substr (-11,-8)
=>個数のマイナスの指定はできません。ですので、何も表示されません。

substr (-11,7)
=>このように開始位置がマイナス指定で、個数がプラス指定と言う組み合わせも可能です。
結果はabc defです。 indexOfは指定した文字列を先頭から右側に向かって検索します。
検索した結果、その文字がなかった場合は-1が返りますし、文字が見つかった場合はその文字の先頭位置を返します。
検索開始位置を省略した場合は0が指定されたとみなされます。
では例をみてみましょう。結果は「8」と「9」です。検索開始位置の2(cの部分)はここから右方向に検索が始まるというだけで、返される番号は先頭から数えた数になるので注意してください。
つまり,cの部分から数えた数が返されるのではありません。 lastIndexOfは指定した文字列を後ろから先頭に向かって検索します。
検索した結果、その文字がなかった場合は-1が返りますし、文字が見つかった場合はその文字の先頭位置を返します。
検索開始位置を省略した場合は末尾が指定されたとみなされます。
以下の例はlastIndexとindexOfを較べています。 =>末尾から検索しているので、gchiのcが該当します
=>先頭から数えているので、abcのcが該当します
=>前から数えて6番目の文字(この例ではdです)から先頭に向かって検索します。hiは4番目にあるので4が返されます(ヒットした位置は先頭から数えます)。
=>前から数えて6番目の文字(この例ではdです)から末尾に向かって検索します。hiは12番目にあるので12が返されます。
toLowerCaseメソッドは文字列を小文字に変換します。
toUpperCaseメソッドは文字列を大文字に変換します。
では例をみてみましょう。結果は
「abcdefg」
と
「ABCDEFG」
です。 charCodeAtメソッドは引数で指定した箇所にある文字のUnicode の値を返します。
Unicodeは「世界中の文字を共通した方法で符号化」して、コンピュータ上で扱えるように作られた文字コードです。
では例をみてみましょう。 Cの文字コードは67なので
結果は「67」です。
charCodeAt で返されるUnicodeの値は65.536より小さい値を返します。

タグ charAt, charCodeAt, concat, indexOf, lastIndexOf, length, slice, Stringオブジェクト, substr, substring, toLowerCase, toUpperCase

JavaScript

様々なオブジェクト(Numberオブジェクト)について知ろう1

投稿者作成者: 無漏路
投稿日 2015年5月22日

JavaScriptには初めから定義されているオブジェクトが多数あります。これらを「組み込みオブジェクト」と言います。
つまり、自分でメソッドやプロパティを作らなくても、JavaScriptが初めから作ってくれているオブジェクトです。
ではNumberオブジェクトから説明します。
以下がNumberオブジェクトのメソッドとプロパティです。では例を見てみましょう。初めにオブジェクトを作成してから、様々なメソッドを実行します。この例では引数である10をtoStringメソッドで8進数や16進数に変換します。何も指定しなかった場合は10進数になります。
結果は上から
「10」と「12」と「a」
です。このメソッドは「指定した数で四捨五入」します。つまり1を指定した場合は小数点第1位で四捨五入します。指定する数は0 ～ 20までとなります。
では例をみてみましょう。結果は上から
「15」「15.4」「15.36790」
です。 toExponentialメソッドは数値オブジェクトを指数表記に変換します。
では例をみてみましょう。 toPrecisionメソッドは数値をで表した文字列を返します。
指定可能な数は1から21 までです。
では例をみてみましょう。 a.toPrecision(3)は有効桁数が3桁ですので、小数点以下が四捨五入されて「68.2」になります。
a.toPrecision(2)のように有効桁数がオブジェクトの整数部分と同じ場合は小数点以下が四捨五入された数値を返します。
この例では「68」になりますが、例えばaが68.7534であれば「69」になります。
a.toPrecision(1)のように有効桁数がオブジェクトの整数部分より小さい場合には指数表記になります。
a.toPrecision()のように有効桁数を指定しない場合にはtoString メソッドが代わりに呼び出されます。
次はNumberオブジェクトのプロパティに進みます。
以下のプロパティは静的プロパティなので、オブジェクトを作成しなくても使用できます。では例をみてみましょう。

タグ Number, toExponential, toPrecision, 静的プロパティ

JavaScript

静的メソッド、静的プロパティについて知ろう

投稿者作成者: 無漏路
投稿日 2015年5月22日

この章ではオブジェクトを作成しなくても(newを使わない)、クラスのメソッドやプロパティを呼び出せる静的メソッド、静的プロパティについて説明します。
今まではオブジェクトを作成してから、以下のようにデータを入れていました。しかし、静的メソッド、静的プロパティではオブジェクトを作らなくても、直接データを入れることが出来ます。
では例をみてみましょう。これまではnew を使用したオブジェクトからメソッドやプロパティを呼び出していましたが、オブジェクトを作成しなくても直接メソッドやプロパティを追加したり、呼び出したりすることが出来ます。
つまり、静的メソッド、静的プロパティはクラスに属するメソッドやプロパティと言うことです。
以下の構文をみていただくと分かりますが、クラス名で変数やメソッドに値を入れているのが分かります。これがクラスに属しているという意味です。オブジェクトを作成してからプロパティに値を入れたり、変更する場合には、複数のオブジェクトを作ったとしても変更されるのはそのオブジェクトに属するプロパティだけです。
例えば次の例のshopオブジェクトとshop2オブジェクトはそれぞれプロパティに値を入れていますが、これらのプロパティの間には値の共有はありません。
なぜなら、これらのプロパティはそれぞれのオブジェクトに属しているからです。オブジェクトに属するプロパティと違って静的プロパティはクラスに属するので、プロパティが持つ値は1つです。
例では以下の箇所が静的メソッドと静的プロパティです。静的メソッドを出力する場合にはという構文で書きます。注意点としては静的メソッド内でthis（インスタンス自身）を使うことが出来ないことです。
結果は「消費税は100円です」です。

タグ静的プロパティ, 静的メソッド

JavaScript

prototypeについて知ろう2

投稿者作成者: 無漏路
投稿日 2015年5月22日

この章ではプロトタイプの変数(プロパティ)を作成する方法について説明します。
prototypeプロパティを使えるのはメソッドだけではありません。
では例をみてみましょう。結果は「近藤23清水23」です。この例ではカラのPersonクラスにのようにデータを入れています。
これでa1オブジェクトとa2オブジェクトの両方で変数(プロパティ)を使用できるようになります。
値を変更したい場合はという形式でデータを上書きします。
例ではの箇所です。

タグ prototype

JavaScript

prototypeについて知ろう1

投稿者作成者: 無漏路
投稿日 2015年5月22日

この章ではprototypeプロパティについて説明します。
prototypeプロパティを使うことで特定のオブジェクトに属さないメソッドを作成することが出来ます。
詳しい説明は次の例の後に行います。以下のように特定のオブジェクト名(shop)でメソッドを追加すると他のオブジェクト(shop2)はそのメソッドを使うことが出来ません。下の例では「すべてのオブジェクトで使うことのできる共通のメソッド」をprototypeプロパティを使って設定しています。前の例の以下の箇所をprototypeプロパティを使って書き換えるとshop2オブジェクトでも使えるようになります。以下の箇所がprototypeプロパティで書き換えた例です(スペースの都合で3行で書いていますが１行で書いても結構です)。上記のように書き替えたのでshop2オブジェクトでもgetGoukeiメソッドを使うことが出来ます。オブジェクト間で共通するメソッドなどはprototypeを使用してのように設定するとオブジェクトがたくさん存在しても、同じ機能のメソッドは一つ書くだけで済むのでプログラムでのメモリを無駄に消費しないで済むというメリットがあります。

タグ prototype

JavaScript

オブジェクト指向型プログラミングについて

投稿者作成者: 無漏路
投稿日 2015年5月21日

この章ではオブジェクト指向型プログラミングについて説明します。
「オブジェクトリテラルについて知ろう」で説明したオブジェクトは配列と同じようなデータの集合体として説明しました。
しかし、オブジェクトをデータの集合体として使うだけだと大きなプログラムを作る時に少し不便です。
そこで、これから説明するオブジェクトを使った「オブジェクト指向型プログラミング」が必要になります。
JavaScriptのオブジェクト指向型プログラミングはPHPのような他の言語で使っているクラスの考え方とほぼ同じです。
JavaScriptの場合には関数が他言語でいうクラスの働きを受け持っています。
この本でもJavaScriptのオブジェクト指向型プログラミングをクラスと呼ばせていただきます。
クラスとは何かしらの物を作る設計図に例えられます。
設計図は車や家や鉛筆をつくる場合に必要ですが、この設計図に当たるものがクラスです。
車や家や鉛筆の中には色々な部品が含まれていますが、それらの部品には「状態」や「ふるまい」があります。
例えば、鉛筆であれば「状態」は鉛筆の形、芯、線の濃さなどで、「ふるまい」は線を引く、削るなどの動作です。
その「状態」や「ふるまい」をクラスと言う設計図に書いていきます。
「状態」を変数で書き、「ふるまい」を関数で書くことになります。
その「状態」や「ふるまい」に指示を出すのはオブジェクトです。
例えば「線を消す」など具体的な指示をオブジェクトと言う司令塔から出します。
「状態」は変数で書くと言いましたが、クラスの中の変数のことをプロパティと言います。
「ふるまい」は関数で書くと言いましたが、クラスの中の関数のことをメソッドと言います。
この「状態」や「ふるまい」に対して指示を出すのがオブジェクトの役割です。
このオブジェクトからプロパティにデータを入れたり、メソッドに指示を出すことになります。
例を見てみましょう。 ①関数が他言語でいうクラスの働きを受け持っていますと書きましたが、それが以下の箇所です。つまり、ここが設計図になります。
この関数をに代入しますが、変数名は大文字で記述してください。
この変数名がクラス名になります。

②次はクラスのオブジェクトを作成します。クラスのオブジェクトは「new演算子」を使って生成します。
先ほど「状態」「ふるまい」に対して指示を出すのがオブジェクトの役割ですと言いましたが、このオブジェクトから設計図の中のプロパティにデータを入れたり、メソッドに指示を出すことになります。
カッコの中の引数1000と2はクラスのプロパティを初期化するために存在します。
このようにオブジェクトを作成すると同時にプロパティが初期化される機能をコンストラクタといいます。引数である1000と2がクラスのa,bにそれぞれ代入されます(1000がaに、2がbにそれぞれ代入されます)。
そして、にaが代入され、にbが代入されます。

次はthisについて説明します。
thisとはオブジェクト自身を指します。
this.kingakuはオブジェクト自身のkingakuにaを入れる
this.kazuはオブジェクト自身のkazuにbを入れる
と言う意味です。
つまり、thisを使って、オブジェクトとプロパティの関連付けを行なうと考えていただいて結構です。
次にクラスにメソッドを追加する方法について説明します(スペースの都合でreturn文を２行で書いていますが１行で書いても結構です)。と言う形式でメソッドをクラスに追加します。
メソッドを入れる位置はの記述より後にします。
つまり、オブジェクトの後にメソッドを追加します。
この例ではという形式でメソッドを追加しましたが、最初から以下のようにfunction内に記述することも出来ます。 function内に書くときにはのようにthisを付けます。

では次の例をみてみましょう。変数を追加するにはの形式で書きます。
最初から変数を設定しなくても後からでも追加できることを覚えておいてください。
この例ではの箇所です。
この変数をメソッド内で使用する時にはいつもの通り、thisを付けて使用します。
最後に以下の箇所で結果を出力します(スペースの都合で２行で書いていますが１行で書いても結構です)。 shop.getGoukei()と記述することで、計算結果が出力されます。
結果は「消費税は1000円です」です。

次の例でオブジェクトについての注意点を説明します。ここではオブジェクトを以下のように2つ作成していますが、このようにオブジェクトは複数作成することが出来ることを覚えておいてください。この例ではshopオブジェクトに以下のようにメソッドの追加をしていますが、これはshopオブジェクトに属しているもので、shop2オブジェクトに属しているわけではありません。ですので以下のように記述しても、結果を得ることは出来ませんので注意してください。次の例のように初めからfunction内にgetGoukeiメソッドを記述していれば上の文は問題なく出力できます。

タグ $this, new, オブジェクト指向, クラス