JavaScriptの関数を使いこなす

ローカル変数とグローバル変数

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
変数には関数の外で宣言されたグローバル変数と中で宣言されたローカル変数があります。
講師:
06:56

字幕

このレッスンでは ローカル変数とグローバル変数の 違いについてご説明します 今開いている HTML ドキュメント script 要素に- 簡単な JavaScript コードが 書いてあります 変数 count が宣言されていて 初期値として 0 関数が定められています countUp 変数 count を 1加算しなさい ということですね そして その関数を呼び出しています 呼び出した結果 変数 count の値がどうなったか console.log で見てみますので- 確認してみましょう ブラウザでプレビューします JavaScript コンソールで 値を確認しましょう 1 と出てますね 初期値 0 だったものに 1 加算してますから 1 何の問題ありません では HTML ドキュメントのほうに 戻りましょう コンソールはクリアしておきます では 関数の中にも変数の宣言を加えます var で count 同じ名前 ダブってしまってエラーにならないのか と 思うかもしれませんが エラーにはなりません ではこの中でも ちょっとコンソールで確認しておきましょう これをコピーしてしまえばいいですね コピーをして ここにペーストします 関数の中に宣言した count こちらも countUp する ということであれば 初期値が必要ですね 初期値は― 違う値を入れておきます 0 ではなくて 分かり易いように 10 と入れておきます そして 保存をして― ブラウザで確かめてみましょう ブラウザのウィンドウをリロードします 11 0 11 というのは関数の中で呼び出した console.log の値です ですから 関数の中にあった― count という変数が カウントアップされています けれども 外で console.log で試すと 0 ということのようですね もう1回ちょっと HTML ドキュメントのほうを見てみましょう コンソールはクリアしておきます もう1度確認しますが― こちらの console.log で 11 が出たんですね 11 と そして こちらでは 0 と出た と ということは こちらの count で 表示されたのは 関数の中で宣言した 10 の cont を countUp した ということですね ですから この count++ カウントアップは― こちらの変数の数値が変わって― この外の count 変数の数値は 変わらなかった と ですから 外で確認すると 0 ということになったわけです このように 関数の外と中と 別々のメモリで変数が管理されている― ということなんですね 外側では グローバルな領域 ということになります グローバルな領域に この変数の値がメモリされます 具体的には 今ブラウザで処理していますので ブラウザの場合には― window オブジェクトが グローバルな領域になります そして 関数の場合には 関数を実行する際に― 一時的にメモリ空間が割り当てられます その中に この count という変数は― グローバルな変数とは別に管理されるんですね そして 関数の中でカウントアップをしますと この変数がなければ グローバルな領域の変数にさかのぼって― 探してカウントアップするのですけれども この関数の中に宣言があった場合― 関数の中で宣言した変数の事を ローカル変数といいますが ローカル変数が優先して参照されて 処理される ということになります そして この console.log も― 関数の中で count を参照していますので ローカル変数が― 取り出された ということになります 関数の処理が実行されると 実行が終わると この一時的なメモリというのはクリアされます ですから関数の外では もはやこの関数の中の変数を参照する― もうきっかけがないんですね なくなっています ですから 仕方がないからというわけではないですが グローバルな領域で count を参照して その値を見て 0 のままだなということで 確認しているわけです では 関数の中でグローバルな領域の変数を 処理することはできないか と 名前を変えればいい といえば それまでなんですが 名前を変えたくない場合― グローバルな領域を参照する方法があります この関数は― オブジェクトにメソッドとして 定められているのではなくて グローバルな領域に名前を付けて 定義されています そのため この中で― this という風に参照すると this というキーワードを使うと― グローバルな領域が参照されます そして .count という風に打てば これは グローバルな領域に定義されている count という変数 という意味になります そこで ++ という風にすると グローバルな変数の値が加算されます 確認しましょう ファイルを保存して ブラウザで見てみます ブラウザのウィンドウをリロードしましょう 今度は 11 は変わりません ローカルな変数のカウントアップを 1回しましたので― 11 になっていますけど 更に 関数の中で this. で グローバルな変数 count も― カウントアップしました ですから 外側で確認したとき グローバルな変数の値が― 0 から 1 に加算された ということになるんです ローカルに宣言された変数というのは 先ほど言いました通り― 関数の実行が終われば メモリに残りません 消えてしまいます ですから 関数の実行している最中だけ 必要な変数― 終わったら もう覚えておく必要がない値の場合には― 関数の中にローカル変数としたほうが エコ 経済的ということですね メモリを節約できます 逆に 関数の実行が終わっても ちゃんと覚えておきたいものについては グローバルな領域で 変数宣言する必要があります このレッスンでは 変数にはグローバル変数と ローカル変数がある― グローバル変数はグローバルな領域に メモリされて ローカル変数は それとはまた別管理 関数の実行している間の 暫定的なメモリに入る と そして関数の実行が終われば それはクリアされる― ということを説明しました

JavaScriptの関数を使いこなす

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

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

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

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

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