Canvasを使うためのJavaScript入門

ローカル変数とは

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
変数は代入した値をメモリします。そして、var宣言を関数本体の中に置くか、関数の外に書くかによってメモリされる場所が違うのです。
講師:
09:13

字幕

変数にはローカル変数という 特別な種類の変数があります その意義と使い方について ご説明します html ドキュメントの script 要素には 関数が定義されています 関数が呼びだされると 1から6までのランダムな整数が求められ 変数に代入されます その変数は alert メソッドに 渡されていますので 警告ダイアログが表示されて そこに1から6までの いずれかのランダムな整数が表示されます この関数は button 要素の onclick 属性に定められています 従ってドキュメントのボタンをクリックすると 警告ダイアログが表示され 1から6までのランダムな整数が 表示されるということになります 念のためブラウザで確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」します ドキュメントにはボタンが 表示されていますので これをクリックします すると 警告ダイアログが表示されて 1から6までのランダムな整数 ここでは5が表示されました クリックするたびに 違う整数が表示されます 今回取り上げるのは この var 宣言された変数です 変数は宣言すると同時に このように等号「=」 これは代入記号ということなのですけど ランダムな1から6までの 整数を代入しています これは2つに分けることもできます つまり var 宣言をして その後改めて その変数に ランダムな整数を代入します これでも動作は変わりません ブラウザで確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です ブラウザに表示されたボタンをクリックすると 先程と同じように1から6までの ランダムな整数が表示されます さて ここからが本題です この var 宣言を function の外に出します インデントはとりましょう これでも特に動作は変わりません くどいようですが ブラウザで確認してみます 「ファイル」メニューから 「ブラウザでプレビュー」です ブラウザのウィンドウに表示された ボタンをクリックすると 1から6までのランダムな整数がでてきます var 宣言を書く場所が function の中か外かによって違うのか と言いますと 結論から言うと違うのですが 今の所まだその差がわかりません そこでちょっと手を加えてみます まずここに this. というふうに入れます this. で変数名ですね this というのは この function が 定義されている場所 これは script 要素の中に 定義されていますので script 要素を取り仕切る オブジェクトを指すことになります そして この var 宣言も 同じく script 要素の中にありますので 同じ場所にメモリされています ですから これでも 全く同じように動きます 更にもう少しだけ手を加えて ここに 例えば 10 と入れましょう 6から1の間の数字ではありませんね でも一回 10 を入れてから ランダムな数字が上書きされますから 同じように1から6までの ランダムな整数がでてくるはずです またブラウザで確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です ブラウザのウィンドウに表示された ボタンを押すと 1から6までのランダムな整数がでてきます 10は絶対にでてきません 何度やっても同じ結果なので もう飽きたと言われるかもしれません けれど ここから結果が変わります この function の中の変数に もう1度 var 宣言をしてしまいます これでブラウザを確認してみましょう 「ブラウザでプレビュー」です ブラウザに表示された ボタンをクリックしてみます すると 10がでました OK を押します もう1度クリックします 今度は何度押しても 10しかでません var 宣言を2つ書いたので 2つ目が無視されたと思われるかもしれません けれど無視などはされていません alert をもう1つ加えます そして今度は this なしの変数を入れます alert メソッド 2つ書きましたので 1回実行すると この2つの警告ダイアログがでます ではブラウザで試してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」します ブラウザウィンドウのボタンを クリックして確かめてみましょう クリックすると まず1つ目の alert メソッドが実行されます 引数には this なしの 変数が渡されていました すると1から6までの数字がでてきます OK を押すと 2つ目の alert メソッドが実行されます そこには引数として this ありの変数が渡されていましたので this ありの変数の値は10です では閉じましょう もう1度確かめます ボタンをクリックすると 1つ目の alert メソッド this なしの変数値は 1から6までの整数のようです そして2つ目 OK を押すと 2つ目の alert メソッドが実行され this ありの変数値が表示されます これは10 つまり this のある変数と ない変数と 2つ 2種類メモリされているようです 今の実験から var 宣言を function 関数の中で行った場合と 外で行った場合とでは 変数の値のメモリされている場所が 違うらしいということがわかります 実は function の中で宣言された 変数のことをローカル変数と呼ぶのです 関数の中で変数にアクセスした時 this なしですね その時にはローカル変数があれば その値が取り出されます けれど もしローカル変数がない場合 関数の外を探して その名前の変数があれば その変数にメモリされた値が取り出されます ですから この場合は 関数の外にあった場合でも 値が取り出された ということになります けれども this を付けた場合には 既に述べた通り script 要素を司るオブジェクトを 指すことになります そして script 要素の書かれている場所 というのは関数の外になりますので この関数の外で変数宣言された値を 常に取り出すことになります ローカル変数があると 何が良いのか その意義について 2つだけご紹介しておきます 第一はローカル変数というのは var 宣言をした その関数の中からのみ アクセスできます 別の関数や あるいは script 要素に 直接書き込んだステートメントから 変数の値を見ることはできません 第二にローカル変数は 関数の実行が終わると メモリから消えてしまいます 関数が実行されると 特別なオブジェクトが暫定的に作られて ローカル変数というのは その中にメモリされます ですから関数が実行し終わると そのオブジェクトとともに 消えてします というわけです ローカル変数の この2つの意義を聞いても まだプログラミングに慣れてない方は ピンと来ないかもしれません ですからイメージ的に 少しだけ補足をしておきます 第一は例えば SNS で 日記を書いた時に 誰でもアクセスできてしまうと ちょっと不安がありますよね そういう時に友人だけに公開するとか 自分しか見られない という アクセスの制限があるかと思います このローカル変数で 関数内からのみアクセス可能というのは そういったプログラマーにとっての 安心感を与えることになるのです 第二の関数の実行が終わると メモリから消える というのは 一言で言えば エコだということです 勿論コンピューターの持つメモリというのは 非常に膨大で変数に入れた値1つで どうこうなるものではありません けれども 3D でぐりぐり動かすような 膨大なプログラムを組んだ時は このメモリに残された値があるために 処理が落ちてしまうということがあります ですから塵も積もれば ということで 要らないメモリは使わない ということが安心なのです ローカル変数とは何か どのように使うのか そしてローカル変数の意義について ご説明しました

Canvasを使うためのJavaScript入門

このコースでは幅広いJavaScriptの技術の中からCanvasを使うときに知っておかなければならない基本を手短に解説します。変数や関数といったプログラミングの基礎を学ぶところから、実際にCanvasへ簡単な描画を行うまでを説明します。

1時間25分 (12 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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