JavaScriptの関数を使いこなす

即時関数とその使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
即時関数をクラス定義に使うと、外から参照させないものとさせるものをコントロールできます。
講師:
08:08

字幕

このレッスンでは 名前のない関数を定めて その場で実行する― 即時関数 というテクニックについて ご紹介します 今 Dreamweaver で開いている HTML ドキュメント― script 要素には クラスが定義されています Point というクラスで x y 座標を扱います そして メソッド クラスに定義するメソッドは クラスの prototype のオブジェクトに 定めますが 一旦変数に取っておいて そこに順次 3つのメソッドを定義しています Distance は距離を定めて その距離を返すというもので add というのは 引数に受け取った x y 座標を― 自分のプロパティの x y 座標に 足しこみます Scale は伸び縮みさせる ということなんですが x y 座標に引数の値を掛け算しています そして テスト用のスクリプトが 書いてありますけれども まずは 2 と 5 を x y 座標に与えて インスタンスを作り― そこに 3 - 2 を足しこみます それから 4 伸ばして console.log で3つ point オブジェクト自体と― getDistance の戻り値 距離ですね それから 最後に p とありますのは― prototype を収めた変数ですね このテスト結果を一旦確認しておきましょう 「ファイル」から 「ブラウザでプレビュー」します JavaScript コンソールを出しましょう そうすると まず point インスタンスですね それから 距離が出ています そして最後の Point とあるのは― これは prototype オブジェクトが 表示されている ということなんです 簡単に中身のほうも確認しておきましょうか こちらがインスタンスのほうです x y 座標が最終的に 加算されて 4倍されて この値になっています こちらも同じ Point と表示なんですが 開いてみると― add というメソッド getDistance scale というのが出てくるのは これは prototype だからです では コンソールは一旦クリアして HTML ドキュメントに戻りましょう 今回 問題にしたいのは この最後の console.log です p 変数 p には prototype オブジェクトが入っていますが それが グローバルに残ってしまっている ということですね それはそうですね グローバル変数として宣言していますから 残るのは当然です でも こうしたクラスの定義などを どんどん大きくして ライブラリを作った という時などを 他のクラスでも― やっぱり ありがちな変数 p を 使っていったりすると― 上書きされてしまいます それで 直ちにどうこうなる というわけではないんですけれども でも グローバルの空間に あまり余分なもの― いらないものを残しておくのは あまり望ましくありません そういう時に使うテクニックが― 名前のない関数をその場で実行する 即時関数 というやり方です では いきなり名前のない関数を定義します function 名前がないですから いきなり丸括弧丸括弧で 中括弧始まり― 何を定義するかというと この関数の定義をすっぽり囲んでしまいます つまり point という クラスの定義ですね それを 全部この名前のない関数の中で 行ってしまいます では この定義は― 関数を実行しないと 行われないんですね ではどうやって関数を実行しようか というと 外から実行しようとしても 名前がないですから 呼び出し用がありません そこでどうするか というと― 畳んでしまいますけど 今 こういう状態ですね 名前のない function が 定義されています 実行しなければ この中括弧の中の処理が 行われません では この場で 実行してしまえばいいでしょう と そうすると この名前のない関数は 定義というよりは― 実行文ということになりますので セミコロンを付けます ただ この書き方はちょっと― コンパイラのほうで認めてもらえません 確認しましょう ファイルを保存して― ブラウザのほうに切り替えます そして ブラウザのウィンドウを リロードしましょう 2行目は これは point というクラスが 定義されていないので 定義されていませんよ と出てきますが この1行目です 文法的にちょっとおかしいですよ ということなので あの書き方を少し書き換えてあげないと いけません では一旦 コンソールはクリアして HTML ドキュメントに また戻ります これはもう書き方の決まりなんですけれども こういう処理を行いたいときは function ― 丸括弧丸括弧 中括弧閉じ つまり 名前のない関数の定義の部分ですね そこを丸括弧でくくってあげる必要があります その上で 丸括弧丸括弧 ちょっと格好が悪いですけど― その定義したものを実行する という形になります ではもう一度保存します そして ブラウザで確認しましょう ブラウザのウィンドウをリロードします エラーが一個減りましたね 先程の文法エラーはクリアしたということです 後 本場はこちらです point のクラスの定義が できていませんよ と 名前のない関数の中で処理してますから 外からは参照ができないんですね そこを解決しましょう 一旦コンソールはクリアしておきます 畳んだものを もう一度表示しましょう 関数の中で定義したもの― 例えば 変数はローカル変数として 外から参照できません これは 実は関数 function についても同様です function point と 定義していますが― function の中で定義したものは 外から参照することはできないんですね p の参照ができなくなることは とても都合がいいです この p の参照を消したいわけですから ところが point も 参照できないというのはまずい どうしたらいいかというと point という変数を― グローバルに― 宣言してしまいます 勿論 まだ最初は空っぽです どうするかというと 最後に グローバルな point ですね こうすると グローバル変数として宣言した point が参照されますので そこに ローカルな point つまりこのコンストラクタです コンストラクタを入れる というと― p は外から参照できないままですけれども point はグローバルに入りますので 参照できます そして point の prototype に 定義されているメソッドも 当然 オブジェクトを作れば アクセスできる ということになるんです とても都合がいいですね では 本当にそうなったかどうか 確認したいと思います ファイルを保存して ブラウザで見ましょう ブラウザウィンドウを またリロードします 最後のエラー これは望んでいたエラーです p ありません p が外から参照できない でもちゃんと動いてますね ちゃんと動いてますので 距離まできちんと求められています このレッスンでは 名前のない関数を定義して その場で実行する― 即時関数というテクニックを使って クラスの定義を行いました そうすると このクラス定義は ローカルな空間で行われるため― 外から 原則として参照することはできません 今回は この prototype を入れた 変数 p を― 参照させたくなかったんですけれども 参照できない ということになります けれども 参照させたいコンストラクタ クラス定義ですね これは グローバルに変数を宣言しておいて― そこに代入する ということで 結果として 外からアクセスできないものと できるものを― 切り分ける ということができる ということです

JavaScriptの関数を使いこなす

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

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

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

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

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