18/30

入門編『グローバル変数』

「グローバル変数？」

エイダは半《なか》ば自棄気味《やけぎみ》に聞き返した。

「グローバルは英語で『世界的』『全体的』と言う意味」

「全体的に使える変数？」

「術式のどこでも使えるのがグローバル変数。これを理解するには『ローカル変数』とセットで覚えるのがわかりやすい」

「ローカル変数……」

新しい単語の出現に、ブツブツ呟くエイダ。

「全体的な変数があると言うことは、反対に局地的にしか使えない変数もある。例えばこの例の場合、変数localがローカル変数。変数globalがグローバル変数になる」

var global=123;

function a(){

　var local=456;

　alert(global);//123が表示される

　alert(local);//456が表示される

}

a();

alert(global);//123が表示される

alert(local);//エラーの為、何も表示されない

</script>

術式を書き上げ、魔導書は説明に入る。

「変数globalは術式のどこでも参照ができる。変数localは関数a()の中だけでしか存在しない。関数の外で参照しようとすると、見つからない為、参照(Reference)エラーで止まってしまう。ここまではＯＫ？」

『123』『456』『123』までは表示されたが、最後の『456』は表示されなかった。それをみて止まったのだろうと理解し、エイダは頷く。

「ただし変数宣言の『var』を忘れてしまうと、変数localもグローバル変数になり、参照エラーは起きない」

var global=123;

function a(){

　local=456;

　alert(global);//123が表示される

　alert(local);//456が表示される

}

a();

alert(global);//123が表示される

alert(local);//456が表示される

</script>

『123』『456』『123』『456』と表示される。エイダは魔導書に尋ねる。

「だったら、全ての変数をグローバル変数にした方がいいんじゃないの？エラー起きないし」

「エラーは起きないが、人為的過誤《ヒューマンエラー》が起きやすくなる。前回の関数名と同様に、変数名が重複してしまうと『うっかり』上書きされてしまう可能性が高くなる。後々大変になるので、できたらグローバル変数は使わない方がいい」

「そうなんだ」

エイダは前回と同様に、一応納得する。

「このことを踏まえて、次はどうなるか考えてみよう」

var hoge=123;

function a(){

　hoge=456;

　alert(hoge);

}

a();

alert(hoge);

</script>

エイダは至極《しごく》真っ当な質問を、魔導書に聞く。

「hogeってなに？」

「特に意味はないので、気にしない」

エイダは気にしないで回答する事にした。

「a()関数が呼び出されてるから、最初は『456』が表示されると思う。hogeに456が代入されてるから、外でもまた『456』が表示される」

「その通り。これはもうエイダには簡単だったかな？　では本題に入る。グローバル変数と同じ名前で、ローカル変数が作られた場合どうなると思う？」

var hoge=123;

function a(){

　var hoge=456;

　alert(hoge);

}

a();

alert(hoge);

</script>

エイダは腕を組んで考える。

「魔導書さんが意味のない例題を出すはずがないし、何も変わらないと全然面白くないから『456』は違うと思う。答えが『123』の方が面白いかな？」

魔導書は苦笑しながら説明する。

「答えの面白さで決めるのはどうかと思うが、『123』で合っている。変数名が同じだったとしても、全く新しい変数とし局地的に扱われる。その為、手付かずの外のhoge変数は『123』のままになる」

術式が実行され『456』が表示された後『123』が表示された。

「説明がかなり長くなってしまったけど、『document』と『master』はどこでも使えるグローバル変数。事前に用意されているので『var』で宣言する必要もなく使用できるという事で」

「本当に長かった」

何度も頷《うなず》くエイダ。ページに術式が書かれていく。

master.onthrow=function(event){

var stone=event.projectile;

var ax=100*stone.vx;

var ay=100*stone.vy;

var az=100*stone.vz;

stone.accelerate(ax,ay,az);

}

</SCRIPT>

「さて、本来の目的の加速の術式に戻ろう。もうエイダにも理解できると思うんだが、どう？」

エイダは術式をじーっと直視し答える。

「『vx』『vy』『vz』プロパティとaccelerate()の三つの引数が何かわからないけど、それ以外は理解できる」

「ふむ」

魔導書はエイダに説明を促す。

「術式は、私(master)が投げ(throw)たら発生する『onthrow』イベントの処理を設定してる。event引数に石(projectile)の情報が入っていて、石の何らかの情報《プロパティ》に100を掛けて、加速(accelerate)関数に渡してる」

「その通り」

エイダが理解しているのが確認でき、嬉しそうにする魔導書。エイダは質問する。

「『vx』『vy』『vz』とか何？」

「エイダの疑問に答えるには、『速度』と『加速度』の説明をする必要がある」

「はぁ」

まだまだ説明が続くのだと理解し、肩を落とすエイダであった。

ーーーーーーーー　ログ　ーーーーーーーーーー

エイダは『グローバル変数《へんすう》』を理解した。

エイダは『ローカル変数《へんすう》』を理解した。

『変数《へんすう》』スキルがLV2になった。

エイダは『throw』イベントを覚えた。

ーーーーーーーーーーーーーーーーーーーーーー

登場人物

エイダ・ラブレス

冒険者に憧れている９歳の普通の女の子。

説明ばかりでだいぶ疲れてきた。

職業：術者《プログラマ》 LV1

称号：初心者

スキル：『関数《かんすう》 LV4』『構文《こうぶん》 LV1』『文字列《もじれつ》 LV1』『コメント LV1』『算術《さんじゅつ》演算子《えんざんし》 LV1』『文字列《もじれつ》演算子《えんざんし》 LV2』『変数《へんすう》 LV2 up』『代入《だいにゅう》演算子《えんざんし》 LV1』『オブジェクト指向《しこう》 LV1』『イベント処理《しょり》 lv1』

関数：『alert()』

HTMLタグ：『<script>』

イベント：『mousedown』【throw】

（【】は魔法に関連し、従来のjavascriptにはない）

喋る魔導書

エイダが森の奥で出会った喋る魔導書。

説明が楽しすぎて、まだまだいける感じ。

作者より

『みてみん』に投稿したお気に入りの挿絵を、目次ページの下に貼ってみました。方法は『投稿済み小説-管理ページ』→『ランキングタグ設定』→『設置場所：目次ページ下部』のテキストエリアに<IMG SRC="画像のURL">を入力しただけです。説明に『ランキングの他にも、ウェブリングやご自分の個人サイトへのリンクを貼るなど、様々な用途にご利用いただけます』と書いてますので、多分イラストを置くのも大丈夫なはず。ちゃんとした目次ページ用のイラストを描いて置き換えようかな？

グローバル変数の説明はあまり面白くない割に説明が難しく、苦労しました。さらに現段階ではそこまで必要はないが、後々知ってないと面倒事なのが厄介です。エイダも説明ばかりで疲れていると思いますが、今回は作者も流石に疲れました。

そろそろ入門編を終わらせて、応用編に進みたいですね。読者の方も説明ばかりで飽きてきてるんじゃないかと、ヒヤヒヤしながら書いてます。加速の術式の説明が終われば、色々な事に応用可能なので、もうしばらくお付き合いお願いします。

参考にしたページ

中上級者になるためのJavaScript【知識編】

https://qiita.com/kenju/items/c7fad62a12cc2809b507

JavaScriptでのグローバル変数の宣言方法

http://uxmilk.jp/11598

悲報：プログラムサンプルの「hoge」が通じない時代が来た

http://nlab.itmedia.co.jp/nl/articles/1506/19/news043.html

jsfiddle

レファレンスエラー

https://jsfiddle.net/AkiraMeru/uh518wqw/

レファレンスエラー無し

https://jsfiddle.net/AkiraMeru/uh518wqw/1/

hoge

https://jsfiddle.net/AkiraMeru/uh518wqw/2/

hogehoge

https://jsfiddle.net/AkiraMeru/uh518wqw/3/