更新日: 2017年04月04日
公開日: 2015年12月05日

ゼロから始めるJavaScript講座Vol13　グローバル変数

ゼロから始めるJavaScript講座　グローバル変数
スコープ

ゼロから始めるJavaScript講座　グローバル変数

スコープ

変数には有効範囲(スコープ)があり、有効範囲が異なると変数が参照できなくなります。これまで関数外で定義していた変数はグローバル変数と呼ばれ、プログラムのどこからでも参照できます。

ファイル名: scope.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>スコープ</title>
</head>
<body>
    <script>
        var str = 'global'; // 関数外で変数定義(グローバル変数)

        function test_scope() {
            document.write(str);
        }

        test_scope();
    </script>
</body>
</html>

例えば上記プログラムを作成した実行した場合、「global」という文字列が表示されます。

しかし関数内で変数を定義した場合、これまでと有効範囲が異なってきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>スコープ</title>
</head>
<body>
    <script>
        function test_scope() {
            var str = 'local'; // 関数内で変数strを定義(ローカル変数)
        }

        test_scope();
        document.write(str); // グローバル変数を参照
    </script>
</body>
</html>

例えば上記プログラムを作成し実行しても「local」という文字列は表示されません。

作成したtest_scope関数内で「var str = 'local';」と変数strを定義していますが、関数外で「document.write(str);」としても有効範囲が異なるため参照できません。関数内で定義した変数はその関数内のみで参照できます。

このように関数内で定義し、有効範囲が限られた変数をローカル変数と呼びます。

変数のスコープ(有効範囲)についてまとめると、以下のようになります。

スコープ(有効範囲)について

	グローバル変数	ローカル変数
定義	関数の外で宣言した変数	関数の中で宣言した変数(関数の引数含む)
有効範囲	プログラム全体から参照できる	その関数の中でのみ参照できる

スコープの役割は色々とありますが、一番分かりやすいのは「変数名の競合を避けることができる」という利点です。

変数名は可能な限りシンプルで分かりやすいものにするべきですが、プログラムが長くなれば長くなるほど、利用する変数の数は多くなります。この際、スコープが異なると同じ名前の変数でも別物として扱われる仕様を利用することで、シンプルな変数名を多く利用できます。 ※変数の命名は地味ですが「大変」かつ「重要」です

関数を利用する上でスコープの理解は重要です。文章だとなかなか理解が難しいと思いますので、続けて以下に例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>スコープ</title>
</head>
<body>
    <script>
        var num = 3;

        function test_scope(num) {
            num = num + 1;
            document.write(num); // 4
        }

        test_scope(num);
        document.write(num); // 3
    </script>
</body>
</html>

test_socpe関数の中と外で変数numを利用しています。一見同じ変数に見えますが、関数内はローカル変数num、関数外はグローバル変数numとなっており、名前は同じでも別な変数となっています。

課題

税込み価格を計算する関数including_taxを作成してください。作成した関数は以下に示すサンプルに追記し、税込み価格を表示するプログラムを完成させてください。ファイル名: challenge_func.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>関数課題</title>
</head>
<body>
    <script>
        // 税抜き価格を定義
        var price = 100;

        // 税込み価格を計算

        // 税込み価格を書き出し
        document.write('税込み価格は' + price + 'です');

        // 関数including_tax

    </script>
</body>
</html>