JavaScriptのクラスを定義する

プロパティにゲッターとせッターのメソッドを定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プロパティにゲッターとセッターのメソッドを定めると、プロパティ値の読み書きができます。
講師:
09:11

字幕

このレッスンでは、クラスにゲッターメソッドに加えてセッターメソッドを定義し、プロパティの読み書きができるようにします。特にセッターの方では値が適正なものかどうかというチェックも行うようにしましょう。今 html ドキュメントで開いているPoint というクラス、ここはコンストラクターで初期値が設定できるんですけれども、プロパティ xy の値、数値でない変な値だったら0 を設定すると。数値だったらその値を代入するということになっています。けれどもその後で直接 this.x this.y、オブジェクトの xy にアクセスして設定してしまうと、やはり数値以外の値も設定できてしまいます。そこで set というメソッドを用意して、その set メソッドに渡した引数ですね、これをチェックして xy に設定するようにしたわけです。そしてこの Point クラスを継承するクラスがあって、Vector なんですけれども、そこには xy 座標の値を加算したりあるいは数倍すると、拡大する縮小する、そういったメソッドも含んでいます。そしてテストコードはこれなんですけれどもサブクラスの Vector の方でxy 座標の数値を渡しました。 0 とルート 3 です。そしてその結果、この 0、ルート 3 の原点からの座標の距離とそれから角度、角度はこれはラジアン値なので度数値に変換する定数を掛けて度数を確認してみます。そうしたらその上でset のメソッドを呼んで、x は 1、y は test という文字です。これは適正な値ではありません。でも set のメソッドを呼んでいますから、設定する前に値が数値になければはじきます。それで結果どう変わったかと。ですからルート 3 は変わらずに0 が 1 になれば良いわけですね。そして最後にオブジェクトも直接 console.log で出して確認するようにしています。ではこの結果を見てみましょう。「ファイル」から「ブラウザーでプレビュー」をします。「表示」の「開発/管理」で「JavaScript コンソール」。そうすると原点からの距離は、x 座標は 0 で y 座標がルート 3 ですから、1.73 いくつになりますね。それで y 座標のみ設定されていますから、角度は 90 度ということになります。今度は x に 1 を加えました。そうすると 1 対 ルート 3、底辺が 1、高さがルート 3 の直角三角形、そうすると原点からの距離は 2 になり、角度 60 度ということですね。 xy 座標も確認しましょうか。ちゃんと数値で入っています。正しく動作していますね。ではテスト用のコード、少し意地悪く書き換えます。set を add にしてしまいます。そうすると add メソッドが呼ばれるわけですね。その上で確認します。さらにここでは y に文字を加えていますけれども、x を直接設定してしまいます。これはもうアウトですね。そして、あまり意味はありませんけれども一応 scale も試しておきましょうか。scale は正しい数値を入れてみます。時すでに遅しなんですけれども、その上で同じように長さと角度を調べてコピーします。ちょっとコピー位置がずれましたね。これで大丈夫でしょうか。最後にオブジェクトを確認するというふうにしてみます。保存して確認しましょう。ブラウザーをリロードします。そうするともう add でアウトですね。NaN というのは数値 Enter ができないということになってしまいますから、その後を文字を入れたりあるいは scale で数値演算しようとしてもだめです。xy 座標は NaN ということになってしまいました。そこでどうしたら良いかなんですが、ゲッターというメソッドがありますね。 プロパティの上にアクセスできます。それからここでは使っていませんけれども、セッターを使えばプロパティの読み書きができます。セッターの定義を使っても、ゲッターと一緒で set というキーを使ってfunction を値とします。ここで xy を設定すればいいだろうと。やってみましょう。x、まず x で試します。中括弧始まりで中括弧閉じ。カンマですね。そしてまずは get です。そして function を定めて中括弧閉じ。そしてセッターも同じようにset というキーを使って function。セッターは値を受け取りますので、1つだけ。引数を入れます。ここで問題なんですが、ここでゲッターというのは普通最後に...普通というか必ずですね、値を返さなければいけません。ここでもし値を this.x としてしまうと問題があります。なぜかというとここでまたゲッターが呼ばれてしまうんですね。そうすると循環してしまって正しく動作しません。どうしたら良いかというと、一つの方法としてちょっと名前の違う、_x(アンダースコア x )例えばですね、今回これを使うことにしますけれども、こうしてあげると。y も使うので今のうちに用意しておきますけれどもそしてここはゲッターセッターを使いますのでコメントにして普通に this.x = x、this.y = y で構いません。 そしてここを this_x としてしまえばいいですね。セッターの方は今度は値の確認をするわけですけれども、この set ですね。set の仕組みが使えるので、ここをちょっとコピーさせてもらって、ここですね、そして設定するのは内緒の _x ですからthis_x を設定します。見るのは引数ですね。ここで this_ の値をそのまま使う数値でない場合、数値があったらそれを設定するということで今度は y も同様にですので、コピー使いましょう。コピーをして、ペーストをします。記入違いのないように慎重に x を y に変えていきます。ここと、あと3...4か所ですか。y のここは変えてはいけないですね。アンダースコアの所だけ変えますので2か所ですね。4か所変えたら動作しないところでした。そしてここはカンマは要りませんね。get カンマ set ですからね。これで大丈夫でしょうか。ここはカンマが入っていて構いません。ここもカンマが入っていて構いません。確認してみましょう。ファイルを一旦保存します。あ、直し漏れですね。アンダースコアはそうなんですが、x は y に変えないといけませんね。y と。では 保存しましょう。 ブラウザーをリロードしましょう。先程はもう2行目ですぐに NaN になってしまって後はもう x も y も NaN ということだったんですが、これが修正されれば OK です。大丈夫ですね。ルート 3 の 90 度、距離が 2 の 60 度、2 倍にしましたから距離が 4 の 60 度、x y、ちゃんと数値になっています。このレッスンでは、ゲッターに加えてセッターも定義しました。そして今回の場合、そのプロパティを隠すためにちょっと違う名前のプロパティを設定しておくというのがキーポイントになります。

JavaScriptのクラスを定義する

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

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

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

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

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