読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

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

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

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

全体をfunctionで括る理由

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

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

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

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

無名関数の実行

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

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

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

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

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

全ソースはこちら

github.com

関連アプリ・書籍

JavaScript Web開発パーフェクトマスター (Perfect Master)

JavaScript Web開発パーフェクトマスター (Perfect Master)

パーフェクトJavaScript

パーフェクトJavaScript