2013/08/27

基礎から学べるJavaScript!イベント処理とフォームを使ってユーザーの入力を最適化する方法

イベント処理とフォームを使ってユーザーの入力を最適化する方法 JavaScript初級編

これまでJavaScriptを利用してプログラムを作成するための基本を学んできました。

しかし巷にあふれるWebページでは、ボタンをクリックした際にダイアログが表示されたり、ページが遷移したり、画像が変化したりと様々な動きをしますよね?

今回はそんな実用的なWebアプリを作成するための第一歩として、「ユーザの操作によって処理を行わせる」基本を説明していきます。

目次

イベント処理とは?

まず「ユーザの操作によって」という部分について、プログラム上の仕組みを説明します。

「クリックした」(ユーザの操作)
 = イベント(event)

そのイベントが発生した要素
 = ソース(source)

イベントが発生した際に行う処理
 = イベントリスナ(event listener)、イベントハンドラ(event handler)

と呼びます。

プログラムを記述する場合には、

  • ①イベントリスナをまとめる
  • ②イベントリスナをソースに登録

といった手順となります。

ボタンをクリックした際にダイアログが表示される動作を例に取ると、

  • ①ダイアログを表示させる処理をイベントリスナとしてまとめる
  • ②イベントリスナをボタン要素に登録する

という手順になります。

実際の動作では、要素にイベントが発生すると、イベントリスナの処理を呼び出し、イベントの処理が行われるといった仕組みになります

イベント処理の利用方法

イベントリスナに処理をまとめて記述するには、前回説明した関数を利用します。
関数を利用すれば、関数名をそのままイベントリスナ名とすることができます。

イベントの登録の仕方は、ソースの要素にイベント名とイベントリスナ名を指定します。

<要素名 onイベント名 = イベントリスナ名()">

と記述するだけです。

イベント処理にはたくさんの種類があります。前述のクリックの他にも様々な種類があるので、これらを組み合わせて利用することで、Webページに様々な動作をさせることが出来るようになります

イベントの種類(主なもの)
load 読み込んだ時
unload ページを遷移した時
resize ウインドウサイズを変更した時
click クリックした時
dbclick ダブルクリックした時
mousedown マウスボタンを押下した時
mouseup マウスボタンを解放した時
mouseover マウスカーソルが乗った時
mouseout マウスカーソルが離れた時
mousemove マウスカーソルが動いた時
keypress キーを押下した時
forcus フォーカスを取得した時
submit フォームから送信した時

※スマホやタブレット端末では、イベント名が違う場合もあるので、注意してください。

フォームとは

Webページを作る際に、ユーザが入力したデータに応じて処理を行いたい場合が出てくる場合もあると思います。そんな時に利用する部品が「フォーム」です。フォームを利用すればユーザにデータを入力、送信してもらう場合など、様々な用途に利用できます。

フォームの作成

フォームはHTML要素の一です。「form」要素で指定します

<form name="" action="">
フォーム部品のタグ
</form>
  • 「name」属性にフォームの名前
  • 「action」属性にデータを送信する場合の宛先となるURL
  • 「form」要素の中にフォーム部品

を指定して使用します。

使用出来る部品は以下の表の通りです。

フォーム部品
種類 記述方法
フォーム <form name="" action="" url="" method=""></form>
テキストボックス <input type="text" name="名前" value="値"/>
テキストエリア <textarea name="名前" cols="一行文字" rows="行数"></textarea>
チェックボックス <input type="checkbox" name="名前" value="値"/>表示</input>
ラジオボタン <input type="radio" name="名前" value="値"/>表示</input>
ドロップダウンメニュー <select name="名前"> <option value="値">表示 </option> </select>
リストボックス <select name="名前" size="値"> <option value="値">表示 </option> </select>
ボタン <input type="button" value="値"/>
送信 <input type="submit" value="値"/>
リセット <input type="reset" value="値"/>
ファイル <input type="file" value="値"/>
隠し属性 <input type="hidden" value="値"/>

フォームの利用

では、フォーム作成の方法がわかったところで、JavaScriptを使って実際に使用する方法について説明します。

以下の例ではボタン要素のクリックイベントにイベントリスナを登録しておき、イベントリスナを関数としてまとめてあります。フォームの使い方と同時に参考にしてみてください。
まずは入力したデータを取得して、表示するという簡単な例を挙げてみます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample1</title>
<script type="text/javascript">
	function Sample1(){
		var hoge = Sample1_form.textbox.value;	//テキストエリアの値を取得
		
		alert(""+ hoge +"が入力されました。");
	}
</script>
</head>

<body>
<form name="Sample1_form" action="Sample1.html">
<input type="text" name="textbox">
<input type="button" value="Sample1" onclick="Sample1()">
</form>
</body>
</html>

実行してみると、テキストボックスと、Sample1と書かれたボタンが出てきますね。

テキストボックスに文字を入力し、ボタンを押してみると、テキストボックスに入力された文字が表示されると思います。
ボタンには前述の通りイベントリスナをクリックイベントに登録してあり、イベントリスナとしてテキストボックスの中身を出力するという処理を関数にまとめてあります。

フォーム部品の値を取得する場合には次のような構文を使用します。

フォーム名.フォーム部品名.value

それぞれname属性に指定した任意の値です。

今回の例では、フォーム名がSample1_form、フォーム部品であるテキストボックスの名前がtextboxですので

Sample1.textbox.value

と記述します。

フォーム部品の使用例

ではそれぞれのフォーム部品の設置方法と使用方法を見ていきましょう。

チェックボックス

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample2</title>
<script type="text/javascript">
	function Sample2(){
		var hoge = Sample2_form.check.checked;
		if(hoge == true){
			alert("チェックが入っています");
		}else{
			alert("チェックが入っていません");
		}
	}
</script>
</head>

<body>
	<form name="Sample2_form" action="Sample2.html">
		<input type="checkbox" name="check"/>チェックボックス
		<input type="button" value="Sample2" onclick="Sample2()">
	</form>
</body>
</html>

チェックボックス

チェックボックスはYesかNoかを選択する場合に使用します。
チェックされているかどうかを取得するには

フォーム名.フォーム部品名.checked

と記述します。

取得した値はチェックされていればtrue、チェックされていなければfalseとなります。
サンプルではif文を使用し、チェックされているかを判定して処理を分岐しています。

ラジオボタン

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample3</title>
<script type="text/javascript">
	function Sample3(){
		for(var i=0;i<Sample3_form.radio.length;i++){
			if(Sample3_form.radio[i].checked == true){
				var hoge = Sample3_form.radio[i].value;
				alert(hoge+"が選択されています");
			}
		}
	}
</script>
</head>

<body>
	<form name="Sample3_form" action="Sample3.html">
		<input type="radio" name="radio" value="ラジオ1"/>ラジオ1<br>
		<input type="radio" name="radio" value="ラジオ2"/>ラジオ2<br>
		<input type="radio" name="radio" value="ラジオ3"/>ラジオ3<br>
		<input type="button" value="Sample3" onclick="Sample3()">
	</form>
</body>
</html>

ラジオ1
ラジオ2
ラジオ3

ラジオボタンを使用すると、複数の項目から一つだけ項目を選択し、値を取得することが出来ます。 項目には同じ名前を指定するようにしてください。
同じ名前を指定すると値を取得する際に配列を利用できます。

フォーム名.フォーム部品名[番号].checked

i番目のラジオボタンがチェックされているかどうかを真偽値で取得

フォーム名.フォーム部品名[番号].value

i番目のラジオボタンの値を取得

ドロップダウンメニュー

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample4</title>
<script type="text/javascript">
	function Sample4(){
	
				var hoge = Sample4_form.drop.value;
				alert(hoge+"が選択されています");
	}
</script>
</head>

<body>
	<form name="Sample4_form" action="Sample4.html">
		<select name="drop">
			<option value="ドロップ1"/>ドロップ1</option>
			<option value="ドロップ2"/>ドロップ2</option>
			<option value="ドロップ3"/>ドロップ3</option>
			<input type="button" value="Sample4" onclick="Sample4()">
		</select>
	</form>
</body>
</html>

size属性を追加することで、ドロップダウンリストではなくリストボックスで表示されるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Sample5</title>
<script type="text/javascript">
	function Sample5(){
	
				var hoge = Sample5_form.drop.value;
				alert(hoge+"が選択されています");
	}
</script>
</head>

<body>
	<form name="Sample5_form" action="Sample5.html">
		<select name="drop" size="3">
		<option value="リスト1"/>リスト1</option>
		<option value="リスト2"/>リスト2</option>
		<option value="リスト3"/>リスト3</option>
		<input type="button" value="Sample5" onclick="Sample5()">
	</form>
</body>
</html>

送信ボタン

<input type="submit" value="送信" />

ユーザが入力したデータをWebサーバに送信する際に使用します。そのため、form要素にmethod属性を指定できますが、今回は初級者向けにフォームの使用法を説明するため、割愛します。

リセットボタン

<input type="reset" value="リセット" />

リセットボタンは入力した内容を消去します。テキストボックスに入力した後に押してみてください。

ファイルボタン

<input type="file" name="example1" />

ファイル選択ボタンを押すと、ファイル選択ダイアログが開きます。

隠し属性

<input type="hidden" name="example" value="サンプル" />

(画面上には表示されませんが、設置してあります。)

正規表現

これまではフォームの設置方法と簡単な使い方を説明して来ました。ここでは、フォームに入力された内容をチェックする方法について説明します。入力された内容を検証できますので、エラーを未然に防ぐ手立てとなります。

正規表現では、パターンが検索対象の文字列内にあった場合(マッチした場合)、その文字列を返します。なければnullを返します。

RegExp("パターン","オプション") としてパターンを正規表現オブジェクトとします。 オプションには

オプションの例
i 大文字小文字の区別をしない
g 文字列全体に対して検索
n 複数行を検索

の3つが利用できます。

正規表現では、パターンの幅を広げるために、メタ文字という特殊な記号を使用する場合があります。

メタ文字の例
^ ~で始まる文字列
$ ~で終わる文字列
. 任意の一文字

たとえば^styとした場合、styleにはマッチしますがsstyleにはマッチしません。

さらに、パターンを[]でくくった場合には文字クラスとなり[]内の文字があるとマッチします。

文字クラスの例
[012] 0、1、2のいずれか
[0-9] 0~9のいずれか
[A-Z] A~Zのいずれか
[A-Za-z] A~Zとa~zのいずれか
[^012] 012ではない文字
[01][01] 00、01、10、11のいずれか

etc...

文字クラスには簡易表現も存在します。

簡易表現の例
\s 空白
\S 空白ではない
\d 数字
\D 数字ではない
\w 英数字による単語
\W 英数字による単語ではない
\A 文字列の先頭
\Z 文字列の末尾

文字クラスにおいて、繰り返しを表すメタ文字もあります

文字クラスのメタ文字の例
* 0回以上
+ 1回以上
? 0か1
{n} n回
{n,} n回以上
{n,m} n~m回

たとえば、S*とすると、Sの0回以上の繰り返しを表します。

また、あるパターンをグループとする場合には次のような記号を使います。

グループ化の例
| いずれか
() まとめる

さらに、文字をエスケープしたい場合には

エスケープの例
\++ +の1回以上の繰り返しを表す
\. .を表す

を利用します。

これらを組み合わせて利用すると、入力された文字列についてチェックすることができます。

たとえば、電話番号入力欄にメールアドレスを入力し、送信しようとした場合にエラーを表示させることが出来ます。

一例としてメールアドレスの簡単な正規表現の考え方を挙げてみます。

メールアドレスは原則としてユーザ名@ドメイン名で構成されています。
ユーザ名には._-と半角英数字しか使えないものとした場合

^[0-9A-Za-z_-\.]

とすることで、
[0~9の数字、A~Zの文字、a~zの文字、_、-、.]を使用した文字列
といったようにパターンを考えることができます。

ドメイン名を携帯キャリアに限定したい場合には、

(docomo|ezweb|softbank)

などと指定する方法もあります。

正規表現を考える方法はいくつもあります。あくまでも一つの例です。参考程度に思っておいてください。

また、複雑になりすぎてしまう傾向があるので、注意が必要です。

まとめ

イベント処理を行うことで、Webページに様々な動作をさせることが出来るようになります。

フォームはデータの送信や入力、表示に利用できるので、ユーザが入力したデータから、適切な情報を提示するために使用出来ます。また、正規表現を使うことで、入力されたデータについて検証を行うことができます。 これらはWebページに動きを持たせるための基本となる部分ですので、よく理解しておいてください。