JavaScriptのクラスを定義する

サブクラスにメソッドを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
サブクラスへのメソッドの定め方は、通常のクラスと同じです。
講師:
06:09

字幕

このレッスンではサブクラスにメソッドを定めてみます。サブクラスへのメソッドの定め方は普通のクラスと同じです。ここではポイントのクラス、constructor を定めてそれを継承する Vector というクラスを定めてあります。Vector ということなのでベクトル演算をしようと思います。と言っても四則演算です。クラスを定めるにはクラスのプロトタイプに設定すればいいですね。Vector と。そして prototype。まずは足し算です。add というメソッド名にしました。function で...i が余計ですね。x 座標と y 座標を渡します。ここは好みの問題ですけれど、スぺースを詰めておきましょうか。そして中括弧始まり、中括弧閉じと。セミコロンですね。これは自分の x 座標 y 座標にそれぞれ引数の x y を足せばいいので、this.x+=引数の x ですね。同様に this.y加算ですから += y ということにします。ちょっとスクロールしましょう。引き算とかもあってもいいんですが、引き算でしたら xy をマイナスにすればいいのでここはちょっと無精しておきます。その代わり掛け算を加えましょう。 Vector の prototype の scale ということにします。結局掛け算というのはベクトルを伸ばしたり縮めたりということになりますので、scale と。そして function ですね。こちらは数字は一つです。1を基準にして大きくすると拡大する、1より小さいと縮小するということにして、引数は scale というふうにします。中括弧閉じのセミコロン。こちらも x y それぞれに同じ scale という引数を掛け算すればいいです。コピーを持ってきましょう。セミコロン。そして this.y も *= もコピーしちゃいましょう。ここからコピーを持ってきます。さてそれではテスト用のコードを書きます。まずはオブジェクトを作ります。new の Vector ですね。そして 0.5 と。x 座標のみ渡します。そうすると、親クラスに引数をcall メソッドで渡しているんですが、親クラスの方では引数がないとデフォルト値として 0(ゼロ)を渡すという設定になっていますので、y は 0 に定められます。そうしたら結果をまず確認するためにconsole.log そしてここではゲッターメソッドを使って、長さとそれから角度を求めたいと思います。 長さは length と。角度は angle。こちらはゲッターメソッドにしていますので、プロパティのようにアクセスできる訳ですね。ここです。そうしたら今度は足し算です。せっかく足すメソッドを定義しましたので、obj の add ということでx に 0.5 を足してy に Math.sqrt。ルート 3 を足すことにします。そうすると x が1になってy がルート 3、ということは三角定規の細長い方になりますので、長さは 2、角度は度数で 60 度になります。ですから角度、度数にしましょうね。掛けることの、と。度数にするための定数をここで定めてあります。あ、こちらですね、すみません。コピーを持ってきましょう。そしてこれをまた、まんまコピーします。今度は scale の方ですね。obj の scale、2 倍にしましょう、分かりやすく。そうするとまた console.log ですね。長さは 2 倍になります。角度は x y 同じ比率で伸ばしていますので、角度は変わらないということになるはずです。では保存をして確認しましょう。ブラウザーでプレビューをします。そして「表示」の「開発管理」、「JavaScript コンソール」。 ということで確認をしますと、最初は x に 0.5、y は 0 ですから角度はというと、x 軸にくっついた形になりますね。ですから角度は 0 です。次に、x に 0.5 を足してx は 1 になります。そして y はルート 3 ですから、距離は 2 になってそして角度は 60 度。それを 2 倍しましたので距離が 2 倍に伸びています。角度は変わらないということで、ちゃんと予想通りの結果になっています。このレッスンでは、サブクラスにメソッドを定めました。その場合も普通のクラスと同様に、prototype にメソッド名を付けてfunction でその処理を定義すれば良いということでした。

JavaScriptのクラスを定義する

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

2時間21分 (22 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
プラン加入者限定
発売日:2016年07月11日

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

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

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