JavaScriptでフォームを自由に操る

変数のスコープ

いよいよ最終回となりましたが、今回は、今まで学習した内容を組み合わせて、より実践的なアプリケーションを作成してみたいと思います。いつもの通り、このページの動画を見ながら最終目標を見てみましょう。また、このサンプルファイルはダウンロードできますので、こちらを見ながら勉強していきましょう。今回は、JavaScriptでフォームを自由に操っていきます。

その前に、前回も説明した変数について、もう少し細かく説明していきます。

変数には、スコープというものがあり、宣言した変数がどの範囲で参照できるかを認識しておく必要があります。プログラム全体で参照できる変数を、グローバル変数、関数など、一部でしか参照できない変数をローカル変数と呼びます。

グローバル変数を宣言するには、基本的には、プログラムの先頭で、「var 変数名」で宣言します。関数の中ではなく、必ず、関数の外で宣言してください。グローバル変数として宣言した値は、どの関数からも参照することができます。

一方、ローカル変数は、局所的な領域でしか参照できません。例えば、関数Aで、「var greeting="おはよう"」と代入した場合、関数Bでは、greetingという変数の中身を見ることができません。よって、関数Bで、「var greeting="こんにちは"」として、全く同じ変数名を使っても、関数Bの外部には影響がありません。

本連載で作成しているサンプルも、グローバル変数とローカル変数の両方を扱っていますので、ソースコードを確認する時に注意してみてください。

正規表現

正規表現は、とても便利な道具なので、ここで基礎的な考え方を説明していきます。

正規表現という文字列のパターンを利用すると、文字の検索や文字列のパターンチェックに使えます。

例えば、[0-9]と表現すると、半角数字の0～9までの値を指し示すことができます。[0-9]は、特殊文字を使って、\dと書く時もあります。

例えば、^[0-9]{3}-[0-9]{4}$と書くと、郵便番号を示す正規表現になります。(^)は文字列の先頭を意味し、($)は、文字列の最後を意味します。{3}、{4}はそれぞれ、3文字、4文字を意味します。

そこで、^[0-9]{3}-[0-9]{4}$の部分を日本語に直すと「0～9までで始まる半角数字が3文字続き、次にハイフン(-)が来て、最後に、0～9の半角数字4文字で終わる文字列」という意味になります。

暗号のように見える正規表現の記号も、1つ1つその記号が持つ意味と照らし合わせながら考えていくと自然と慣れてくるものです。

JavaScriptのmatch()という関数を使って、「調べたい文字列.match(/^[0-9]{3}-[0-9]{4}$/)」と記述すると、その調べたい文字列が郵便番号の形式になっているかどうかチェックすることができます。

正規表現で使われる特殊記号の意味については、正規表現の基礎を参照ください。