【21：神経衰弱】JavaScriptで神経衰弱

f:id:seintoseiya:20150722223544p:plain
プロジェクトNo.21：神経衰弱

ドットインストールのレッスンを参考にJavaScriptで神経衰弱を作ってみた。
改良点はカード画像と３段階のレベルを用意した。
今回の記事では、前から気になっていた「全体をfunctionで括る理由」や「onclickをHTML内で書いてはいけない理由」について調べた。

全体をfunctionで括る理由

ドットインストールのJavaScriptレッスンを見ていると、
毎回最後に全体をfunctionで括る作業を行っている。

JavaScript

(function() {
    // 処理
})();

百式さんはさらっと飛ばしていたので、理由を調べてみると、
グローバル変数にならない様にするためらしい。
function内はスコープが保たれるので、他からの影響を受けないという事ですね。

ちなみにvarは宣言しないと、結局グローバル変数になってしまうのだとか（知らなんだ。。。）

無名関数の実行

無名関数の実行であれば以下のような形になるのでは？

JavaScript

function() {
    // 処理
}();

どうやらこれではダメらしい。
functionから書き始めると、JavaScriptの実行環境が”式”ではなく”文”としてと理解してしまいます。
この辺は言葉がややこしいですが、すなわち「無名関数を即時実行させるためには先頭に”式”であるという記号を入れてあげる」事が必要です。
実際に、()で括る他に先頭に+や!にしても動くみたい。（一般的には()のようです）

onclickをHTML内で書いてはいけない理由

「文書構造はHTML、スタイルはCSS」という風に「処理はJavaScript」と分離することで、
デバッグのしやすさ、コードの理解しやすさ、保守性が上がる・・・らしい。
こういうのってソースが肥大化した時に初めてありがたさがわかるんですよね。
今はそういうルールだと思って体に染み付かせるしかないか。