JavaScriptのクラスを定義する

プロパティをローカル変数で隠す

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ゲッター/セッターメソッドを関数内に定めて、ローカル変数にアクセスすると値を隠すことができます。
講師:
08:26

字幕

このレッスンではゲッターメソッドとセッターメソッドを関数の中に定めてローカル変数にアクセスすることで値を隠すというテクニックについて紹介します。今 HTML ドキュメントで開いている中にはPoint というクラスが定義されています。そして x y というゲッター・セッターを持ったプロパティがdefineProperties でこの prototype に定められています。そして実際にアクセスするのはこのアンダースコアの付いたプロパティです。ということで、名前を変えることで値を隠すという方法をとっています。そしてこの Point のクラスはVector というクラスが継承しています。そこには add という加算のメソッドやscale という乗算のメソッド等があります。そしてテストコードの方ではわざと変な値を設定して特にセッターですね。セッターがちゃんと正しく判定をして例えば文字ははじいてくれるということをしてくれるかという確認をしています。ここでは Vector のコンストラクタからx 座標 0 、y 座標ルート3を設定しlength angle でその原点からの距離と、それからX 軸と成す角度が分かります。 Point.RAD_TO_DEG で度数に直しています。angle そのものはラジアン値です。そして次に add で x には 1 をy にはまた文字列を足しています。そうすると y をちゃんとはじいてくれるかどうか同じ値を console.log で試しています。更に x に対してアクセスして文字列を入れる。そしてここは scale は普通に数字を設定したんですがちゃんと文字ははじいて正しい設定をしているか最後にオブジェクトそのものをconsole.log で表示しています。ではまずは確認してみましょう。「ブラウザでプレビュー」です。そして「表示」>「開発 / 管理」>「JavaScript コンソール」 を開きます。ちゃんと値が全部数値になっていますね。初めは x が 0y がルート3ですからルート3の値で角度は Y 軸方向ですから 90次に x に1が入ると原点からの距離は2角度は度数 60 度になります。2倍にしましたので長さは4角度 60 になりました。x yアンダースコアが付いたのが実は暫定的に隠してあるプロパティなんですがそこには値が付いていてx y はゲッター・セッターなのでこのような表記になっています。 ちゃんと動いていますね。ではここで敢えて意地の悪い悪意のある設定をコードに加えましょう。this._x に文字列を設定してしまいます。保存して確認しましょう。ブラウザーをリロードすると悪意のあるアクセスをした所ですね。x でなく _x に文字列を入れてしまうともうそれは設定が想定しない動きをしてしまいますので_x には文字が入ってしまったということで正しい動作をしなくなりました。ここでどうしたらいいかと言うとthis. でプロパティに設定した限りオブジェクトに対して直接その名前を正しく認識して設定してしまえば設定参照ができてしまうんですね。できなくするには、もしこれができればいいんですけどもthis. でなくて関数内でのvar 宣言です。関数内での var 宣言というのはローカル変数になりますからローカル変数はその関数の中でしかアクセスできません。これが使えればいいわけですね。ところがゲッター、セッターx y です。関数の外にありますのでアクセスができないと。ではこれを関数の中に入れてしまえばいいというのが1つのやり方です。ここに行を加えてObject.definePropertiesそして ) のセミコロンと。 どこに設定するかと言うとthis に設定するんですね。このオブジェクト自身にゲッターセッターを設定します。そして { } の中にこの x と y のゲッター・セッターメソッドを移動してしまいます。こういうことですね。インデントを加えましょう。そしてこちらのカンマは要らないので今度ここですね。 this._xthis._yこれを普通にローカル変数ですからthis. は付けません。変えてしまえばいいということですね。ここはちょっと無精させていただいてthis._コピーしてDreamweaver の「検索 / 置換」を使わせてもらいます。this._ をただの _ に変えればいいので「次を検索」で「置換」 「置換」「置換」 「置換」 「置換」これが最後ですね。「置換」ということで「完了」となりましたので保存をして確認してみたいと思いますがコードの方を少し変えましょうね。_x というプロパティは無くなりましたのでここでは、では x に設定してみることにします。これもちゃんとセッターのプロパティが中で判定してはじいてくれる筈です。最後の所ですね。obj と一緒にobj の _x というプロパティが無いことを確認しておきましょう。 ここで保存をします。ブラウザーをリロードしますけれども先程この3行目で NaN という値になってしまいましたね。それが正しく2倍されて2が4ですね。60 度は x y 両方とも伸縮しましたので角度は変わりません。そしてオブジェクトが出てきてその後オブジェクトには _x というプロパティはありません。そしてローカル変数はアクセスができないのでundefined という表記になっています。そして ( ) の中にはプロパティが見えませんね。特にローカル変数は全く見えません。x y と書いてありますがこれはゲッター・セッターの設定ができていますよということです。ということで、無事にゲッター・セッターが参照する値、ローカル変数なんですけどもローカル変数で隠すことができたということです。ローカル変数を使うと関数の外からはアクセスできないというテクニックを使ったわけなんですが1つ注意点があります。defineProperties でプロパティとしてx y をコンストラクタの中で加えています。ということは普通のプロパティと同じようにコンストラクタを呼び出されてオブジェクトを作るたびにこのゲッター・セッターの関数は作られてしまうんですね。 微々たるメモリでしょうけれどもオブジェクトの数に応じてゲッター・セッターが作られるということでメモリの点では若干不利な所があります。ですからメモリを若干無駄にしても隠したいか、それとも_x _y にアクセスする人なんかいないという風に信用してその辺はメモリの方を優先するかというのはプロジェクト毎に判断すれば良いでしょう。このレッスンでは関数の中のローカル変数にゲッター・セッターでアクセスすることによってその値を隠すという方法について説明しました。

JavaScriptのクラスを定義する

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

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

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

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

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