第6回 ASP.NETによるWebアプリ開発（アプリケーションの開発 3）：連載：ASP.NETによる軽量業務アプリ開発（1/3 ページ）

コマンドラインとエディターのみでWeb開発する方法を説明。今回は前回作成したASPXのWebサービスを利用するクライアント側JavaScriptについて説明する。

[arton， ]

powered by Insider.NET

連載目次

本連載の目的

　本連載では、部門コンピューティング（Excel＋VBAで簡単な業務アプリを開発するようなこと）レベルの開発手法として、ASP.NETを利用した軽量Webアプリ開発を説明する。タブレットを利用した業務アプリのプロトタイプ実装や、Excel＋VBAの業務アプリのWebアプリへの移行などの参考にしていただきたい。

　なお本連載では、最小限のセットアップでWindowsを活用できるよう、可能な限りGUIツールを利用することなくコマンドラインとエディターのみで開発する方法を説明している。また、本連載では個別のファイルの拡張子には小文字の「.aspx」を利用するが、ASP.NETの埋め込みHTMLファイルを示す場合は「ASPX」（ASPXファイル）と大文字で記述する。

はじめに

　今回は、前回示したASPXで記述したサービスの呼び出し側のJavaScriptプログラムについて説明する。

　ここでは主に次の2点について説明する。

• JavaScriptの記述方法：
  　− ここ数年のWebブラウザーの性能向上に伴うJavaScriptの利用促進により、その記述方法についてさまざま知見が生じた。これらの記述方法は、最近になってJavaScriptを利用し始めた開発者にとっては自明であるが、20世紀からJavaScriptを利用している開発者にとってはほとんど別言語に等しいほど異なる。
• XMLHttpRequestの利用：
  　− XMLHttpRequestは、もともとMSXMLに組み込まれていたActiveXコントロールである。しかし21世紀になってからその利用価値が認められWebブラウザー標準の機能となった。ここではMSXMLのXMLHttpRequestではなくWebブラウザー標準の利用方法を示す。

　特に前者について最初に要点を示すと以下である。

• 極力グローバル変数（JavaScriptの場合、windowオブジェクトのプロパティとなる）を利用しない：
  　− 特にサードパーティのJavaScriptライブラリを混合させることが想定される場合は、ネームスペースの汚染を避けることは最重要である。
• 関数、データなどの情報の集約にはオブジェクトノーテーション（オブジェクトリテラル）を利用する：
  　− グローバルな情報を避けることから、当然の帰結として、グローバルに名前を持つ関数や変数を利用するのではなく、関数に対する引数としてそれらの情報を集約したオブジェクトを与える。

　具体的には、以下の記法を利用しないということだ。

function name(...) {   ← nameという名前（正確にはwindow.nameという名前）を持つ関数
  ...
}

グローバルな名前を生成するような記述方法は使用しない

　関数は次に示すいずれかの記法で定義する。

1. 変数に設定した関数

var variable = function (...) { ... };  
// 呼び出し時は「variable(...);」の形式で実行する

関数を変数に設定する
ある関数内で繰り返し実行される処理は、このようにローカル変数に設定した関数とするのが望ましい。例えば、以下で示すmembers.jsファイルのchangeUI関数がこの使い方に該当する。

2. その場で定義し、その場で実行する関数（次の例はa, b, cの3パラメーターを取る関数。ここではそれぞれ1, 2, 3の実引数を与えて呼び出している）

(function (a, b, c) { ... })(1, 2, 3);

無名関数の即時実行
例えば、以下で示すmembers.jsファイルは全体で無名関数を定義して、これをその場で実行するようになっている（その内部でイベントハンドラーの設定などを行う）。

3. オブジェクトに定義した関数（次の例は「name」と「name2」の2つの関数を持つオブジェクトobjを宣言）

var obj = { name: function(...) { ... }, name2: function(...) { ... } }; 
// 呼び出し時は「obj.name(...);」の形式で実行する

オブジェクトのプロパティとして関数を定義
オブジェクト（この場合は「obj」）をネームスペースの代替として使用することで、関連性のある関数を1つのオブジェクトにまとめるとともに、グローバルなネームスペースの汚染を最小限にとどめられる。以下に示すmembers.jsファイルの中では、Dialog.showメソッドに渡す無名オブジェクトでload関数とunload関数を定義している。

　ここで示した無名関数の定義「function (引数リスト) { 本体 }」は、そのまま関数の引数や戻り値に利用できる。以下に例を示す。

// 無名関数を引数に取る関数funcの呼び出し
func(function (...) {
 ...
});

// 無名関数を返す、変数funcに設定した無名関数
var func = function (...) {
  ...
  return function (...) { ... };
}

無名関数は関数の戻り値にも使える

　以上を念頭に置いて、前回説明をしたASPXが提供するサービスを実際に呼び出すJavaScriptコードの実装を見ていこう。