JavaScriptの関数を使いこなす

名前空間を定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
クラス名の重複を避けるための方法として、名前空間をご紹介します。
講師:
06:23

字幕

このレッスンでは クラスに名前を定める 名前空間― 英語ですと namespace といいますが その方法についてご説明をします 今開いている HTML ドキュメントですが クラスが定められています それを 名前のない関数で すぐに実行する 即時関数という方法で定義していますが 座標を扱う point というクラスです そして メソッドを定義するために― コンストラクタの prototype を ローカル変数に入れて それらに対して― 距離を求めるメソッド 座標を加えるメソッド それから 座標に掛け算をするメソッドが 定められ それを グローバルな変数 結局これがクラスになるわけですが クラス point に定められて クラスの定めが― 実行できるようになっているわけです クラスがある程度まとまってくると― これを 外部ファイルにする ということが行われます やってみましょう この定義全てを― カットします そして 新規のファイルを作りましょう JavaScript のファイルです 作成し― ペーストします ファイルを保存しましょう 「ファイル」の「保存」で― HTML ドキュメントと同じ階層に― script としましょうか script として 保存します そうすると HTML ドキュメントのほうには なくなってしまいましたので― この script 要素の src source ですね source の属性で― 今保存した script のファイル script という名前ですけれども これを開きます 閉じタグはくっつけてしまいましょう こうすれば― 元と同じようにテストすることができます テスト用のコードが書いてありますので 試してみましょう 内容というと― 座標 2 5 で point インスタンスを作り― 3 と -2 を足しこみ 4倍して― point のオブジェクトを それから getDistance で距離を― それぞれコンソールで確認してみます では ファイルを保存して ブラウザでプレビューしましょう JavaScript コンソールを表示します そうすると point のオブジェクトが コンソールで出力され― 座標は最終的に 20 12 になったようです 距離は― 計算 ちょっと検算難しいですが 多分あっているでしょう 一旦 コンソールはクリアしておきます さてこれで 基本としては 特に問題はないですけれども 実際上 不都合が起こる場合があります 何か といいますと― point というクラス ありがちです 他に たとえばライブラリ読み込んで― そのライブラリの中に point というクラスがあると 後から読み込んだら― 後から読み込んだもので 上書きされてしまいます そうならないようにするには ユニークな名前にしたほうがいいんですが あまりユニークにすると 何のクラスだか分からないですね そういう時に このクラスの前に ユニークな名前を付けくわえることができます それを 名前空間 namespace と呼んでいます その namespace を 加えてみることにしましょう では script のほうに切り替えます 名前空間なんですが 変数として宣言します この point というのを やめてしまいます ユニークだったらなんでもいいので 自分の名前でも構わないですが ちょっとぐらいそれらしい名前として― ぶつかる可能性がない とも言えませんが myLib ということにしましょう ここに point というクラスを .point という形で加えるわけです そのためにはどうするか というと ここで― 空っぽのオブジェクトを入れてしまいます そうすると オブジェクトのプロパティとして point というクラスを 宣言すればいいですね point のクラス コンストラクタを変数に入れている この記述ですね this. 付けてもいいですし myLib というのは この中にありませんので 無ければグローバルが参照されますから― myLib ということで このグローバルな― オブジェクトですね myLib という変数に入れた オブジェクトのプロパティの point に― point というクラスが定められる ということになります では 保存しますね そうしたら 今度は point を参照する方― HTML ドキュメントの このテスト用のコードのほうも― 一か所変わってきます new Point では― point というのは グローバルでは見つかりません ですから ここで― myLib.point と ですから myLib の プロパティですけれども 役割としては これがクラスだと 思ってしまっていいですね myLib.point これがクラス名だという風に 扱ってしまえばいいことなので 後は 先程通り同じように動作します 確認しましょう ファイルを保存して― ブラウザで見てみましょう ブラウザのウィンドウをリロードします 先程と同じように ちょっと表示が違って来たりしてますけれども これはコンソールの仕様ですので― 結果として 23.3 幾つというのは 先程と同じ形の数字です 結果は変わっていません このレッスンでは クラス名をユニークにするための方法として 名前空間 というものをご説明しました これは― 関数の宣言の外ですね グローバルに― オブジェクトとして名前空間となる変数を定め 関数を定義した後に 最後にその関数を定める時に― プロパティとして関数名を与えればよい ということです

JavaScriptの関数を使いこなす

関数はJavaScriptの基本です。また関数を知ることはスクリプトの組み立て方を理解することでもあります。このコースではJavaScriptの基礎を学んだ方を対象に、関数の定義から順を追って説明します。さまざまな機能やその呼び出し方、クラス定義で使われる応用テクニックまで実際にスクリプトを書きながら具体的に解説します。

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

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

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

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