JavaScriptとWeb APIでデータベース処理を行うWebアプリを作成する

※2019年1月時点における最新の技術と弊社製品で更新した内容はこちらです。

この記事では、JavaScriptとWeb APIを用いてデータベースのCRUD処理を行う方法を紹介します。

f:id:ComponentOne_JP:20160623093535p:plain

ビューはJavaScriptとHTMLで開発します。また、操作性と生産性を高めるために、Wijmo（ウィジモ）のFlexGrid（データグリッドコントロール）とCollectionView（変更データを管理するためのユーティリティクラス）を使用します。

サーバーは次のフレームワークおよび製品を使用して開発します。

ASP.NET Web API
SQL Server
Entity Framework
Visual Studio 2015

Web APIはCRUD処理を提供し、JavaScriptからHTTP要求を送信することで、データベース処理を行います。

CRUDとは、データベース処理に必要な、生成（Create）、読み込み（Read）、更新（Update）、削除（Delete）の機能を示しています。

ビューとサーバー間のデータの受け渡しには、JavaScriptで扱いやすいJSONデータを使用します。

1. Web APIを作成する

まず、データベースのCRUD処理を提供するWeb APIを作成します。

Visual Studioで新しいASP.NET Web Applicationプロジェクトを作成します。

f:id:ComponentOne_JP:20160623093713p:plain

空のテンプレートを使用してプロジェクトを作成します。

f:id:ComponentOne_JP:20160623093722p:plain

プロジェクトにApp_Dataフォルダーを追加します。

f:id:ComponentOne_JP:20160623093730p:plain

App_DataフォルダーにSQL Serverのデータベースファイルを追加します。ここでは、ComponentOne Studioトライアル版に収録されている、NORTHWND.MDFファイルを使用します。

f:id:ComponentOne_JP:20160623093738p:plain

プロジェクトにADO.NET Entity Data Modelを追加します。

f:id:ComponentOne_JP:20160623093749p:plain

Entity Data Modelウィザード画面のモデルのコンテンツの選択ページで、データベースからEF Designerを選択します。

f:id:ComponentOne_JP:20160623093756p:plain

データ接続の選択ページで、MDFファイルが自動的に選択されていることを確認します。

f:id:ComponentOne_JP:20160623093811p:plain

バージョンの選択ページで、使用するEntity Frameworkのバージョンを選択します。

f:id:ComponentOne_JP:20160623093819p:plain

データベースオブジェクトと設定の選択ページで、使用するデータベースオブジェクトを選択します。ここでは、Productsテーブルだけを選択します。

f:id:ComponentOne_JP:20160623093827p:plain

モデルが作成されて、デザイナーが表示されます。

f:id:ComponentOne_JP:20160623093835p:plain

モデルの設定を反映するために、デザイナーを閉じてプロジェクトをビルドします。

プロジェクトにスキャフォールディングアイテムを追加します。

f:id:ComponentOne_JP:20160623093841p:plain

スキャフォールディングを追加画面で、Entity Frameworkを使用したアクションがあるWeb API 2コントローラーを選択します。

f:id:ComponentOne_JP:20160623093849p:plain

コントローラーの追加画面で、モデルクラスとデータコンテキストクラスをドロップダウンから選択します。

f:id:ComponentOne_JP:20160623093859p:plain

以上で、CRUD処理を提供するWeb APIが作成されました。

ASP.NET Web APIとEntity Frameworkを使用したWebアプリケーションを作成する方法の詳細は、ASP.NET公式サイトのチュートリアルでも紹介されています。

Using Web API 2 with Entity Framework 6 | The ASP.NET Site

2. ビューを作成する

続いて、エンドユーザーがデータベース処理を行うためのビューを作成します。

ここでは、Web APIアプリケーションプロジェクトのインデックスページでビューを作成します。

Web APIプロジェクトにHTMLページを追加して、ファイル名をindex.htmlに変更します。

f:id:ComponentOne_JP:20160623093926p:plain

index.htmlの<head>に、Wijmoの参照情報を追加します。

<!-- Wijmo -->
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css" />
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>

index.htmlの <body>に、更新ボタンとFlexGridコントロールをホストする要素を追加します。

<button onclick="update()">更新</button>
<div id="flexGrid" style="height: 300px;"></div>

index.htmlの <body> の末尾に次のJavaScriptコードを追加します。CollectionViewとFlexGridコントロールを生成します。

<script>
var cv = new wijmo.collections.CollectionView();
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid');
flexGrid.itemsSource = cv;
</script>

プロジェクトを実行すると、インデックスページに更新ボタンと空のFlexGridコントロールが表示されます。

f:id:ComponentOne_JP:20160623093946p:plain

3. 読み込み処理を行う

次に、データベースからデータを読み込んで、FlexGridに表示します。

Web APIを呼び出す（HTTP要求を送信する）には、jQueryのajax関数やXMLHttpRequestを使用する方法がありますが、ここではWijmoのwijmo.httpRequestメソッドを使用します。このメソッドを使用すると、jQueryを使用しなくても、XMLHttpRequestよりもシンプルなコードでHTTP要求を送信することができます。

次のJavaScriptコードを追加します。Web APIにGET要求を送信して、要求が成功したときに、読み込んだJSONデータをJavaScript配列オブジェクトに変換してCollectionViewに設定します。

wijmo.httpRequest('/api/Products', {
success: function (xhr) {
cv.sourceCollection = JSON.parse(xhr.response);
}
});

Web APIのURLとHTTPメソッドは、自動生成されたコントローラー（ProductsController.cs ）のコメントに記載されています。

プロジェクトを実行すると、データベースから読み込んだデータがFlexGridに表示されます。

f:id:ComponentOne_JP:20160623093956p:plain

4. 更新処理を行う

次に、FlexGridで更新したデータをデータベースに反映します。

ここでは、逐次更新処理（データを1件更新するたびにデータベースに反映する）ではなく、バッチ更新処理（複数のデータを更新した後で一括してデータベースに反映する）を行います。

バッチ更新処理を行うには、どのデータを変更したのかを追跡して、変更データの一覧を管理する必要があります。CollectionViewではこれらの処理を自動的に行うため、複雑な処理を実装しなくても、簡単にバッチ更新処理を行うことができます。

次のJavaScriptコードを追加します。CollectionViewで変更データの追跡を有効にします。次に、更新されたデータの一覧（CollectionView.itemsEditedプロパティ）を取得して、Web APIにPUT要求を送信します。PUT要求では、URLに更新データのIDを指定して、データに更新データを指定します。

cv.trackChanges = true;
function update() {
for (var i = 0; i < cv.itemsEdited.length; i++) {
wijmo.httpRequest('/api/Products/' + cv.itemsEdited[i].ProductID, {
method: 'PUT',
data: cv.itemsEdited[i]
});
}
}

この方法で作成したWeb APIでは、一度に1件のデータしか更新できないため、更新されたデータ件数だけWeb APIを呼び出します。逐次更新処理と比べると、Web APIの呼び出し回数は変わりませんが、任意のタイミングで更新を行えるという利点があります。

プロジェクトを実行して、複数のデータを更新してから更新ボタンを押します。ページをリロードすると、データベースに更新が反映されていることが確認できます。

f:id:ComponentOne_JP:20160623094005p:plain

5. 生成処理を行う

次に、FlexGridで追加したデータをデータベースに反映します。

次のJavaScriptコードを追加します。FlexGridで行の追加を有効にします。次に、追加されたデータの一覧（CollectionView.itemsAddedプロパティ）を取得して、Web APIにPOST要求を送信します。POST要求では、データに追加データを指定します。

flexGrid.allowAddNew = true;
function update()
：
for (var i = 0; i < cv.itemsAdded.length; i++) {
wijmo.httpRequest('/api/Products/', {
method: 'POST',
data: cv.itemsAdded[i]
});
}
}

FlexGridの一番下に新しい行が表示され、セルを入力すると新しいデータが追加されます。

f:id:ComponentOne_JP:20160623094014p:plain

プロジェクトを実行して、複数のデータを追加してから更新ボタンを押します。ページをリロードすると、データベースのデータが追加されていることが確認できます。

f:id:ComponentOne_JP:20160623094021p:plain

6. 削除処理を行う

次に、FlexGridで削除したデータをデータベースに反映します。

次のJavaScriptコードを追加します。FlexGridで行の削除を有効にします。次に、削除されたデータの一覧（CollectionView.itemsRemovedプロパティ）を取得して、Web APIにDELETE要求を送信します。DELETE要求では、URLに削除データのIDを指定します。

flexGrid.allowDelete = true;
function update()
：
for (var i = 0; i < cv.itemsRemoved.length; i++) {
wijmo.httpRequest('/api/Products/' + cv.itemsRemoved[i].ProductID, {
method: 'DELETE'
});
}
}

FlexGridでは、行を選択してDeleteキーを押すと、行が削除されます。複数行をまとめて選択して削除することも可能です。

プロジェクトを実行して、5.で追加したデータを削除してから更新ボタンを押します。ページをリロードすると、データベースのデータが削除されていることが確認できます。

NORTHWND.MDFデータベースでは、既存のデータには他のテーブルとのリレーションシップが設定されているため、削除することはできません。

f:id:ComponentOne_JP:20160623094037p:plain

以上で、JavaScriptとWeb APIを用いたWebアプリケーションで、データベースのCRUD処理を実行することができました。

さいごに

製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼この記事をシェアする／