JavaScriptのクラスを定義する

即時関数でプライベートな変数をつくる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
変数を関数に入れて即座に呼び出すと、外からのアクセスが防げます。
講師:
07:46

字幕

このレッスンでは変数を関数に入れて即座に呼び出す即時関数という定義をして変数への外からのアクセスを防ぐ方法について説明します。今 HTML ドキュメントには2つのJavaScript ファイルが読み込まれています。Point というクラスとVector というクラスです。こちらはテストコードになりまして後で説明をします。さて、まず Point から見ていきましょう。ここでは prototypeオブジェクトですね。クラスのコンストラクタ関数の prototypeプロパティのオブジェクトそれを変数に入れてその変数にメソッドなどを定義することによって短く見やすくしているわけですね。但し、そのままでは変数にオブジェクトが残ってしまうのでproto を最後に null にするという処理をしています。これを今回は無くしてしまいます。そうすると、残っちゃうんですね。それを残さないようにするテクニックをこれから紹介しようというわけです。では一回保存します。Vector の方もとりあえずnull にしている所をコメントアウトしてしまいます。そして Vector の方でconsole.log でproto に何が入っているかというのを確認するわけなんですがPoint クラスを Vector は継承していますのでVector の方が後から読み込まれます。 そうするとここでPoint クラスの prototype が表示されます。Point は特に継承していないのでオブジェクトになる筈です。その後、Vector が継承する為にPoint の prototype を自分の prototype に入れていますのでここでは今度は Point の prototype が表示される筈です。では保存します。そして HTML の方のテストコードは特に書き換えません。サブクラスの Vector のコンストラクタにX 座標、Y 座標 1とルート3を入れます。そうすると length と angle というプロパティにアクセスできて原点からの座標の距離それからその座標と原点を結んだ線が X 軸と成す角度をラジアンで返します。それを度数に直す比率を掛けています。その値が出てくるので距離と角度が出てきて次に x y 座標が出てくるということです。では、このまま特に変更はありませんので「ファイル」>「ブラウザでプレビュー」してみましょう。「表示」>「開発 / 管理」>「JavaScript コンソール」 です。そうすると、こちらがテストコードなんですがテストコードより先に JavaScript のPoint と Vector のクラスの読み込みが行われますのでこの2つが Vector クラスの中に書いたコンソールの結果ですね。 先程言いました通り、Point が継承しているデフォルトで継承しているオブジェクトと次に Vector に設定した Point クラスのオブジェクトが表示されています。これは残っていますので例えば proto と打つとPoint がまだ残っていますね。こちらがテストコードの結果なんですがX 座標1、そして Y 座標はルート3ですから距離は2の、角度は度数で60 度ということになります。x y 座標は1とルート3ということで正しい結果が出ています。まず Point のクラスから行きましょう。ここで、ちょっと長いのでDreamweaver の機能を使ってここまで畳んでしまいます。さて、畳む前を確認しましょうか。ここで proto という変数を宣言しているわけですね。これが見えないようにしたい外からアクセスできないようにしたい、という場合には、ローカル変数にしてしまえばいいんですね。ということは、この全体をfunction の中に包んでしまえばいいということになります。function 名前を付けません。{ そして最後に }でもこれでは呼び出さないといけませんよね。呼び出す為に名前を付けてしまうと今度は function の名前の付いたものが残っちゃいます。 どうしたらいいかと言うとこのまま呼び出しをしてしまうんですね。尤も、この書き方は構文の関係でエラーになるのでこの function 定義の部分を( ) で囲みます。さて、これでもまだちょっと足りません。そうすると、この function の中にあるfunction、入れ子ですね。これもローカルの扱いになってしまって今度は Point クラスが外からアクセスできなくなっちゃうんですね。これはまずいです。じゃどうするかと言うと最後に、アクセスしたい Point クラスを関数から返します。そして返した値を Point のコンストラクタですね。Point という名前で変数に入れればPoint にはアクセスできるようになるわけですね。ではこれを保存しましょう。Vector も同様です。Vector の方は短いのでこのまま特に畳まずにいきましょう。Vector という変数にfunction ( ) { 最後に }呼び出す前に ( ) で囲まないといけません。そして呼び出します。このままでは Vector にアクセスできないのでreturn と Vector ですね。これで大体 OK です。ではファイルを保存します。 テストコードをもう一度確認してみましょう。ブラウザーをリロードします。エラーになっちゃいましたね。これは、消さないといけないコードがあったのでそれを消しましょう。何かと言うと、Vector のクラスの中で確認用に入れた console.log です。proto もうアクセスできなくなっちゃいました。ということなので、アクセスしようとするとそんなのありませんよ、というエラーになるんですね。ですからこの2つをコメントアウトしちゃいます。そして保存をしましょう。もう一度テストコードを確認します。ブラウザーをリロードするとちゃんと動きましたね。そしてここで proto と。もうこれ、ローカル変数ですからEnter と押すとそんなものはありません、とエラーが出てきます。正しいエラーですね。proto にアクセスできなくなりました。ですからいちいち proto にnull を代入するという必要もないということです。このレッスンでは関数定義全体を関数の中に入れて即座に呼び出す即時関数と呼ばれるテクニックについて紹介しました。そうするとその中で変数宣言をしたものがローカル変数として外からアクセスできなくなります。 但し、全てアクセスできなくなるので必要なものは return で返して今度は関数の外の変数に代入をすればいいです。そうすると、中のローカル変数に今回設定していた proto はアクセスしようとするとエラーになるということで不要なアクセスが防げるということです。

JavaScriptのクラスを定義する

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

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

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

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

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