JavaScriptのstrict(厳格)モードと非strictモードで関数の実行結果を試してみる【use strict】｜DAD UNION

JavaScriptのuse strict（厳格モード）とは、コードの品質を向上させ、エラーを未然に防ぐために使用するオプションです。
このモードを使うと、コードの不適切な記述が許されず、厳格なチェックが行われます。例えば、変数を宣言せずに使用するとエラーが発生し、JavaScriptの実行を妨げます。
今回は、「strictモード」と「非strictモード」の違いを、いくつかの具体例を通して説明します。

Contents

use strictとは？
JavaScript処理を実行するボタンのスタイルとHTML記述
- CSS記述
- HTML記述
JavaScriptによる関数の実行とエラーハンドリング
- 関数定義と実行
【use strict】strict(厳格)モードと非strictモードで関数の実行結果を試すデページ
まとめ

use strictとは？

use strictはECMAScript 5で導入されたオプションで、JavaScriptの柔軟さが時に引き起こすバグを回避するための仕組みです。このモードを使うことで、以下のような不具合を防ぐことができます。

変数宣言の強制：
varやletを使わない変数宣言がエラーになる。
重複プロパティの禁止：
同じ名前のプロパティを持つオブジェクトがエラーになる。
予約語の使用制限：
将来のバージョンで予約語として使われる単語（classやenumなど）を変数名に使えない。

これにより、コードがより予測可能で、エラーが発見しやすくなります。

JavaScript処理を実行するボタンのスタイルとHTML記述

CSS記述

まずは、クリックボタンのCSSスタイルを見てみましょう。このボタンはクリックされると、JavaScriptのstrictモードまたは非strictモードで関数が実行されます。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.4em;
}
.clk{
  width: 500px;
  margin: 0 auto 20px auto;
  background-color: #cccccc;
  font-weight: bold;
  text-align: center;
  line-height: 1.7em;
  cursor: pointer;
  font-size:14px;
  padding:8px;
}
.clk span{
  font-size: 20px;
  font-weight: bold;
}
</style>

HTML記述

以下は、ボタンのHTMLコードです。各ボタンはクリックされると、それぞれ異なる関数を実行します。
クリックボタン（class=”clk”）はonclickでfunc1()、func2()、func3()関数を実行します。

<h1>以下をクリックするとstrict(厳格)モードと非strictモードでエラーとなって関数の実行できない場合と、<br>エラーにならず関数の実行可能な場合を試せます。</h1>
<br>

<div class="clk" onclick="func1()"><span>ここをクリック</span><br>関数func1(strictモード:変数宣言無し)を実行=変数宣言無しのため実行されず、JavaScriptエラーになる</div>

<div class="clk" onclick="func2()"><span>ここをクリック</span><br>関数func2(非strictモード:変数宣言無し)を実行=変数宣言無しだが、非strictモードのため実行される</div>

<div class="clk" onclick="func3()"><span>ここをクリック</span><br>関数func3(strictモード:変数宣言有り)を実行=変数宣言有りなので、strictモードで実行される</div>

JavaScriptによる関数の実行とエラーハンドリング

関数定義と実行

次に、それぞれの関数でstrictモードが適用された場合とされない場合の動作を確認します。

<script type="text/javascript">
function func1(){
"use strict";
  x1 = 5;
  y1 = 7
  alert(x1 + y1);
}

function func2(){
  x2 = 5;
  y2 = 7;
  alert(x2 + y2);
}

function func3(){
"use strict";
  var x3 = 5;
  var y3 = 7
  alert(x3 + y3);
}
</script>