JavaScriptのクラスを定義する

クラスの定義を整理する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クラスを別ファイルにして管理するやり方についてご説明します。
講師:
04:56

字幕

このレッスンではクラスを別ファイルにして管理するやり方について説明します。今、この HTML ドキュメントの中にはPoint というクラスが定められています。xy 座標を管理するクラスです。そして下にスクロールするとこんどは Vector というクラスベクトル演算をするクラスなんですがPoint クラスを継承しています。そして、加算とか乗算ですねそうしたメソッドが収められています。そして、最後ここはテスト用のコードです。まずは、二つのクラスを別ファイルにしましょう。では、Point クラス定めですね。ここから、このダブルスタンスまでここがポイントになりますのでPoint クラスの定義になりますのでここをカットします。そして、ファイルの新規ということでJavaScript のファイルを作成します。先に保存しておきましょう。「保存」で空っぽのフォルダJS という名前で作ってありますのでここにクラスと同じ名前で作ります。Point ですね。Point.js で保存します。そして、今カットしたコードをペーストして改めて保存します。次は Vector の方ですねVector の方はPoint よりも短いんですけれどもテストコードまでです。 これをカットしてここを消してしまいましょう。そしてまた新規JavaScript のファイルを再び作成してすぐに保存します。今度はファイル名は、Vector です。同じ js フォルダの中です。そこに保存をしてコピーしたものをペーストします。改めて保存しておきましょう。さて、ではこのあたりでテストコードの結果を見ておきましょうか。Vector のクラスにxy 座標を渡しています。ここは、Point クラスを継承した親クラスに渡されるんですけれどもx が 1 、y がルート3そして、これをまたPoint クラスにあるんですがgetter で原点からの距離が求められます。底辺が1で、高さルート3ですと距離は2と斜辺は2となりますね。三角形の三角定規。それから、angle これは底角が 60 度になります。但し、単位がラジアンですのでラジアンを度数に直す定数が定めてあるのでそれを掛け算してみます。そしてオブジェクト自身も一応console.log で確認してみるということですね。後二つの JavaScript ファイルを読み込むスクリプト要素を書かなければなりません。テストコードよりも前ですね。ここに Point クラスをVector は継承しますのでPoint の方が先です。 script で src source を参照にしてそして、これが正しいですね。Point クラスを開きます。閉じて、閉じタグです。同様にここは script のsource で参照Vector のクラスのJavaScript ファイルを読み込んでタグを閉じます。では、保存をしてブラウザでプレビューしましょう。表示の開発管理でJavaScript コンソールを開きます。そうすると、距離は2角度は度数で 60 度と出てきました。それから、オブジェクトはVector のオブジェクトだよという事が表示されています。正しく動いていますね。このレッスンでは、クラスをそれぞれクラスごとに別ファイルに分けて管理するやり方について説明をしました。クラスのコードを JavaScript のファイル内にカット&ペーストで移してそして、HTML ドキュメントの方ではスクリプト要素でその必要な JavaScript ファイルを順番に注意して読み込めばよいという事です。

JavaScriptのクラスを定義する

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

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

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

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

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