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

更新日:2018.06.22
  1. HOME
  2. JavaScript入門
  3. 関数,変数のスコープ

JavaScriptの一連の命令は、関数という形にまとめておくと、繰り返し呼び出して使用することができます。 また、何かの計算をする命令を関数内に記述して、呼び出し元に計算結果を返したりします。 このページでは、関数について見ていきます。

また、関数の中と外で宣言された変数では、その使用できる範囲に違いが生じます。 この点も解説しておきます。

関数の記述方法

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

function 関数名(引数){処理}
functionを使って関数を定義します。
関数名は任意に付けることができますが、 一般の命名規則では先頭は小文字にすることになっています。
引数は、次のページで解説します。
中括弧{}で囲った中に、一連の命令を記述していきます。

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

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

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

関数の呼び出し

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

関数を使ったサンプル

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

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

<button type="button" onclick="fncCall()">ボタン1</button>
<button type="button" onclick="fncCall()">ボタン2</button>
<button type="button" onclick="fncCall()">ボタン3</button>

サンプル(別窓)

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

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

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

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

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

<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を使って宣言してから使うようにしましょう。

楽天booksのJavaScript解説本 JavaScriptワークブック第3版 JavaScript基礎入門 プログラミングTypeScript 作りながら学ぶWebプログラミング実践入門 新しいJavaScriptの教科書 子どもから大人までスラスラ読めるJavaScriptふりがなKidsプログラミン 30時間アカデミック JavaScript入門 確かな力が身につくJavaScript「超」入門 第2版 いちばんやさしいJavaScriptの教本第2版 HTML&CSS JavaScriptプログラミング基礎演習ワークブック

Supported by Rakuten Developers