関数，変数のスコープJavaScript入門

関数の記述方法

最初に、関数を記述する方法について掲載しておきます。

function 関数名(引数){処理}

functionを使って関数を定義します。

関数名は任意に付けることができますが、 一般の命名規則では先頭は小文字にすることになっています。

引数は、次のページで解説します。

中括弧{}で囲った中に、一連の命令を記述していきます。

functionの後に半角スペースを入れて、関数名を記述します。

関数名の後に括弧()を付けます。 この中には引数というものが入りますが、この説明は次のページで行います。 引数を使わない場合は空のままにしておきます。

次に半角中括弧を付け、その中に一連の処理を記述します。 よくこの中括弧を閉じ忘れてエラーになることがあるので、 気を付けましょう。

関数の呼び出し

関数を呼び出すには、scriptタグの中か、イベントを使って、 関数名(引数)と記述します。

関数を使ったサンプル

では、関数を使ったサンプルを見ておきましょう。

<script>
function fncCall()
{
  var mes = "関数が呼び出されました！";
  alert( mes );
}
</script>

<button type="button" onclick="fncCall()">ボタン１</button>
<button type="button" onclick="fncCall()">ボタン２</button>
<button type="button" onclick="fncCall()">ボタン３</button>

サンプル（別窓）

３つのボタンのどれを押しても、同じメッセージが表示されたと思います。 関数に命令を記述しておけば、同じ処理を何度でも呼び出すことができます。

グローバル変数とローカル変数

変数の宣言を関数の中でした場合と、外でした場合では、 変数のスコープ（有効範囲）に違いが出ます。

グローバル変数

関数の外で変数を宣言した場合、その変数はプログラム全体で共有できる変数になります。 これをグローバル変数と呼びます。

ローカル変数

関数の中で変数を宣言した場合、その変数は関数内でしか使えません。 関数の外、あるいは他の関数で使おうとするとエラーになります。 これをローカル変数と呼びます。

簡単なサンプルで確認しておきましょう。

<script>
var num1 = 1;  //関数の外で宣言したグローバル変数

function fnc1()
{
  var num2 = 1;  //関数内で宣言したローカル変数
  num1++;
  alert( "num1は" + num1 );
  alert( "num2は" + num2 );
}

function fnc2()
{
  alert( "num1は" + num1 );
  alert( "num2は" + num2 ); //エラーになり表示されない
}
</script>

<button type="button" onclick="fnc1()">fnc1</button>
<button type="button" onclick="fnc2()">fnc2</button>

サンプル（別窓）

上記のスクリプトで、num1がグローバル変数です。 複数の関数で使用できます。fnc1ボタンを押すたびに数が増えていきます。

一方num2はローカル変数で、宣言した関数内でしか使用できません。 関数fnc2()ではnum2が使えないのでエラーになり、 アラートが表示されません。

関数内でもvarを使わずに変数を記述すると、グローバル変数になります。 しかし見た目にも判りにくく、思わぬエラーを出しやすいので、避けるべきです。 変数は必ずvarを使って宣言してから使うようにしましょう。