JavaScriptのクラスを定義する

Object.defineProperties()メソッドで複数のプロパティを定める

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Object.defineProperties()メソッドを使うと、オブジェクトに複数のプロパティが定められます。
講師:
09:05

字幕

このレッスンではオブジェクトに複数のプロパティを設定できるdefineProperties というメソッドについてご紹介します。今開いているドキュメントにはPoint というクラスが定められています。そしてそれを vector というクラスでプロトタイプにこの point のオブジェクトを作ってobject Create メソッドを呼び出してそこに point のプロトタイプオブジェクトを渡しvector にプロトタイプのプロパティの値として設定しています。これで継承ができているわけですね。そしてオブジェクトにプロパティを1つだけ設定するメソッドというのがあります。それは object defineProperty というメソッドでそこに point のクラスに直接RAD TO DEG というプロパティを設定して値を定めています。そしてこの場合 writable というキーがあるんですがそれが false にデフォルトではなっているので書き換えができない定数という扱いになっています。これが複数になると複数形defineProperties というメソッド名に変わります。ではちょっと引数の指定の仕方がdefineProperty と違うのでリファレンスで確認しておくことにしましょう。 MDN Mozilla Developer Network のObject.defineProperties()のメソッドのページを開きました。さて defineProperties は引数が2つです。1つ目は defineProperty と同じくそのプロパティを設定するオブジェクトになります。そして複数設定できるんですがここにオブジェクトの形で複数のプロパティを与えることができます。引数、オブジェクトはプロパティを定義するオブジェクトですね。そして Props という所なんですがいくつか設定できるキーのプロパティがあります。getter setter も設定できますので今回は getter を設定したいと思います。文法を見てみますと、これですね。definePropertiesプロパティを設定するオブジェクトそして中カッコの中に必要なだけプロパティを設定します。ここはダブルクウォーテーションで文字列にしていますけども普通のオブジェクトのプロパティと同じですからダブルクウォーテーションなくても構いません。そしてコロンの後に値としてはオブジェクトを指定します。そしてそのオブジェクトの中にキーを入れるんですが今回使うのは先程申し上げた通りget ですね。 get をここに設定してコロンで値は function になります。Point クラスの getter をどこで設定しているかと言うとプロトタイプのプロパティに対して中カッコでgetter を2つ設定しているわけですね。length と angle という名前です。これをプロトタイプに先程の defineProperties のメソッドを使って設定し直したいと思います。基本的な動きはこの書き方と変わりません。1カ所だけ違う所があるんですがそれはあとでご紹介しましょう。早速 Object definePropertiesyが ies に変わりますのでご注意ください。そして()でセミコロンですね。そしてこちらはじゃあコメントアウトしてしまいましょう。設定するオブジェクトはpoint.prototypeプロトタイプに設定するわけですね。コピーを持ってきます。そして第二引数は オブジェクトでしたね。複数ありますので改行しておきましょう。そしてこの中に指定をするわけですけれどもlength というプロパティを設定したいと思います。ですからここを移動して持ってきちゃいましょう。移動ですから改行が1個余分ですね。 さてここの設定の仕方が違いましたね。プロパティ名を入れると。そしてコロンです。その後さらにオブジェクトで値を指定するわけでget:key ですね。そしてここがfunction になると。このカンマはやはり必要になりますので同じように2つ目のプロパティangle :ですね。中カッコ始まり、中カッコ閉じ。ここはカンマはいりません。そして get : のfunction と。これでいいですね。ではテスト用のコードを書きましょう。vector クラスが継承してますので継承した vector クラスのオブジェクトを作りたいと思います。変数は Object c new でvector ですね。そして XY 座標を引数に渡すんですけどもX 座標は1。Y 座標はルート3。math.sqrt(3)そして console.log で値を見てみましょう。console.log そしてオブジェクトの getter 設定しましたのでまず length ですね。それから angle。これにはラジアンキーですのでラジアンから度数に変える先程 defineProperty で設定してあったのがまさにその比率なので、それを使いましょう。 point のクラスに直接設定してありました。RAD TO DEG です。ではこれを保存してブラウザでプレビューしましょう。表示の「開発管理」で「JavaScript コンソール」を表示します。そうすると length というのは原点からの距離です。X 座標が1、Y 座標がルート3ですから三角定規の細長い方なので左辺は2になります。そうするとその底角は 60 度ですからちゃんと動いてますね。ということで getter の length とangle が設定されたという事が分かります。じゃあもう1個、先程の方法とは違ってくることについてご説明しましょう。始めの設定ですとプロトタイプをオブジェクトで書き換えました。そうなるとプロトタイプのconstructor プロパティがオブジェクトになってしまうんですね。そこでそうならないようにここで constructor プロパティをpoint という constructor にもう一度書き直しています。これを外してしまうとconstructor がオブジェクトになるんですけども今回の場合はプロトタイプを変えたのではありません。プロパティを追加しました。 ということなのでここをコメントアウトしてもちゃんと constructor がpoint クラスになっています。確認しましょう。console log そしてpoint のプトロタイプの constructor です。では保存をして確認します。ブラウザをリロードしましょう。数字は変わりませんけれどもプロトタイプの constructor 確かめてみると確かに point になっていますね。このレッスンではオブジェクトに複数のプロパティを定めるObject.defineProperties というメソッドとその使い方についてご紹介をしました。

JavaScriptのクラスを定義する

実はJavaScriptのクラスはプロトタイプというオブジェクトに基づいており、JavaやC++などのクラスとは多少異なります。またJavaScriptでクラスを定義することで機能を加えたり用途を広げることができます。このコースではJavaScriptのクラスの仕組みやコンストラクタ関数の定義、プロパティやメソッドの加え方などについて説明します。

2時間21分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年07月11日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。