とっとこ駆け出しエンジニアぶろぐ: JavaScript strictモードで堅実なコードを書く

2014年2月22日土曜日

JavaScript strictモードで堅実なコードを書く

JavaScript(以下JS)といえば以前の記事JavaScript 変数宣言でvarを使用しないとグローバルスコープになるでも触れてますが、仕様が良くも悪くも緩くJS初心者～中級者は思いもよらぬエラーに出くわしたりします。

そこでstrict(厳格)モードというエラーになる原因を排除するモードで、コードィングすることで堅実なコードを書くことができます。

#####strictモードとは？
* 'use strict';をプログラムの先頭で宣言するか関数内で宣言することでstrictモードが有効となる
* 変数宣言でvarを使用しないとエラーになる
* with文を使用するとエラーになる
* delete演算子で削除できない変数を指定した場合、falseではなくエラーになる

などなど。こちらに分かりやすくまとまっています。<a href="http://msdn.microsoft.com/ja-jp/library/br230269(v=vs.94).aspx">http://msdn.microsoft.com/ja-jp/library/br230269(v=vs.94).aspx</a> 
with文は、使ったこと無いので詳しいことは知りませんが実行速度が遅くなるらしいです。 
strictモードは、推奨されているというかstrictモードでも動作することが推奨されているのでwith文は使用しないほうがいいかもしれません。 
 
古いブラウザはstrictモードに対応していませんが、use strictを記述していてもただの文字列として認識されるので古いブラウザとの互換性は問題ありません。 
ちなみに最近の主要なブラウザはstrictモードに対応してきています!!! 
確認したブラウザのバージョン

* IE 11
* Chrome 32
* Firefox 27

#####strictモードを使ってみる
scriptタグの直下に'use strict';を記述するだけです。

<pre class='brush: javascript'>
 'use strict';
 (function() {
 var hoge = 'hoge';
 alert(hoge);
 })();
</pre>

ここで、hogeの変数宣言でvarを使用しない場合、エラーとなります。

<pre class='brush: javascript'>
 'use strict';
 (function() {
 // hoge is not defined 
 hoge = 'hoge';
 alert(hoge);
 })();
</pre>

注意しないといけないのが、strictモードを宣言する前に変数宣言などしてしまうとstrictモードが有効となりません。

<pre class='brush: javascript'>
 var a = 'a';
 'use strict';
 (function() {
 hoge = 'hoge';
 // hogeがアラートされてしまう
 alert(hoge);
 })();
</pre>

strictモードはグローバルではなく関数内だけという局所化した使い方もできます。

<pre class='brush: javascript'>
 (function() {
 'use strict';
 hoge = 'hoge';
 alert(hoge);
 })();
</pre>

#####まとめ
strictモードは古いブラウザと互換性があるので気にせず使用して問題ない。 
最近の主要ブラウザは、strictモードに対応してきている。 
strictモードで動作するJSが推奨されているので特別な理由がない限りstrictモードを使用する。 
strictモードでデバッグすることでバグをある程度減らし、堅実なコードとなる。 
 
#####最近読んだ本