本記事では、JavaScriptとWeb APIを用いてデータベースのCRUD処理を行う方法を紹介します。2016年6月27日に投稿した記事「JavaScriptとWeb APIでデータベース処理を行うWebアプリを作成する」を、2019年1月時点における最新の技術と弊社製品で更新した内容です。
元記事では以下を使用してWeb APIを作成していました。
- ASP.NET Web API
- SQL Server
- Entity Framework
- Visual Studio 2015
本記事では以下を使用して作成します。.NET Coreは2019年1月時点で最新の2.2を使用します。
- ASP.NET Core Web API
- Azure SQL Database
- Entity Framework Core
- Visual Studio 2017
だいぶ長い記事となりましたので目次を用意しました。必要に応じて各項目を参照してください。
サーバーサイド
サーバーサイドのWeb APIはデータベースのCRUD処理を実装します。クライアントサイドとサーバーサイド間のデータの受け渡しにはJSONを使用します。
データベースを作成する
SQL Server Management Studio(以下SSMS)を利用してローカルにデータベースを作成します。ここではGitHubで公開されているinstnwnd.sql
をダウンロードしてNorthwind
を作成します。
SSMSを起動します。メニューから[ファイル]-[開く]-[ファイル]をクリックしてダウンロードしたinstnwnd.sql
を開きます。
[実行]をクリックしてinstnwnd.sql
のクエリを実行するとデータベースNorthwind
が作成されます。
Azure SQL Serverを追加
AzureポータルからSQL Serverを追加しておきます。本記事ではgrapecitytestdbsrv
としています。
ローカルから接続するので[クライアント IP アドレス]にローカルのIPアドレスを追加しておきます。
Azure SQL Databaseへの配置
SSMSを使用してローカルに作成したデータベースNorthwind
をAzure SQL Databaseへ配置します。Northwind
を右クリックし、コンテキストメニューから[タスク]-[Microsoft Azure SQL データベースへのデータベースの配置]を選択します。
配置ウィザードが表示されるので、接続先に追加したgrapecitytestdbsrv
を設定して配置します。
これでデータベースの準備は完了です。
Web APIを作成する
Visual Studio 2017でASP.NET Core Web APIアプリケーションを作成します。プロジェクトテンプレートから[ASP.NET Core Web アプリケーション]-[API]を選択します。本記事ではCRUDWebApiApp
としています。
モデルの作成(リバース エンジニアリング)
Scaffold-DbContext
を利用してAzure SQL DatabaseのNORTHWND
からモデルをリバースエンジニアリングします。Visual Studioから[ツール]-[NuGet パッケージ マネージャー]-[パッケージ マネージャー コンソール]を選択し以下のコマンドを入力します。
Scaffold-DbContext "作成したAzure SQL Databaseの接続文字列" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models
成功すると以下のようにModels
フォルダに各テーブル用のモデルが作成されます。
接続文字列の設定
接続文字列をappsettings.json
で管理するためにNORTHWNDContext.cs
のOnConfiguring
をコメントアウトします。
appsettings.json
に接続文字列を追加します。
{ "ConnectionStrings": { "Connection": "作成したAzure SQL Databaseの接続文字列" }, }
Startup.cs
でappsettings.json
から接続文字列を使用するコードをConfigureServices
に追加します。
services.AddDbContext<NorthwindContext>(options => options.UseSqlServer(Configuration.GetConnectionString("Connection")));
コントローラーの作成
ソリューション エクスプローラーの Controllers フォルダーを右クリックし、[追加]-[コントローラー]を選択します。
[Entity Framework を使用したアクションがある API コントローラー]を選択し、[追加]をクリックします。
[モデル クラス]にProducts
、[データ コンテキスト クラス]に NorthwindContext
を設定します。[コントローラー名]はProductsController
として[追加]をクリックします。
クロスオリジン要求(CORS)の設定
クライアントサイドからWeb APIを利用するためにCORSを有効にしておきます。以下のコードをConfigureServices
に追加します。
services.AddCors(options =>
{
options.AddPolicy("AllowAll",
builder =>
{
builder
.AllowAnyOrigin()
.AllowAnyMethod()
.AllowAnyHeader()
.AllowCredentials();
});
});
以下のコードをConfigure
に追加します。app.UseMvc();
より前に追加しておきます。
app.UseCors("AllowAll");
:
app.UseMvc();
launchSettings.jsonの修正
Web APIのデフォルトURLはlaunchSettings.json
のlaunchUrl
でapi/values
に設定されています。これをapi/products
に変更します。
"IIS Express": { "commandName": "IISExpress", "launchBrowser": true, "launchUrl": "api/products", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } }, "CRUDWebApiApp": { "commandName": "Project", "launchBrowser": true, "launchUrl": "api/products", "applicationUrl": "https://localhost:5001;http://localhost:5000", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } }
クライアントサイド
クライアントサイドはVisual Studio Codeを使用してJavaScriptとHTMLで開発します。データの表示と操作にはWijmo(ウィジモ)のFlexGrid(データグリッドコントロール)とCollectionView(変更データを管理するためのユーティリティクラス)を使用します。
プロジェクトを作成する
当ブログの記事「Wijmoクイックスタート with npm !」をベースに作成していきます。
まず、ターミナルでプロジェクトのフォルダWijmoFlexGrid
を作成してWijmoFlexGrid
フォルダに移動します。
mkdir WijmoFlexGrid cd WijmoFlexGrid
npm init
コマンドを実行して、package.json
ファイルを作成します。途中、プロジェクトの設定についていくつか質問されますが、すべてEnterを押して既定値を選択して問題ありません。
npm init
次にnpm install
コマンドを実行して各パッケージをインストールします。今回インストールするパッケージは以下です。
- webpack
- webpack-cli
- style-loader
- css-loader
- sass-loader
- node-sass
- html-webpack-plugin
npm install --save-dev webpack webpack-cli style-loader css-loader sass-loader node-sass html-webpack-plugin
webpack
を利用してWijmoのSassをバンドルし、htmlファイルも生成するために必要なパッケージをインストールしています。全てインストールするとpackage.json
のdevDependencies
は以下のように構成されます。
"devDependencies": { "css-loader": "^2.0.2", "html-webpack-plugin": "^3.2.0", "node-sass": "^4.11.0", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "webpack": "^4.28.2", "webpack-cli": "^3.1.2" }
WijmoFlexGrid
フォルダにwebpackの設定ファイルwebpack.config.js
を作成して、下記のコードを追加します。
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', module: { rules: [ { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }, ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] };
package.json
のscript
に以下のコードを追加します。
"scripts": { "build": "webpack" },
WijmoFlexGrid
フォルダにsrc
フォルダを作成してindex.html
とindex.js
を作成します。
WijmoのFlexGridとCollectionViewを使う
まず、npm
でWijmoをインストールします。
npm install --save wijmo
index.html
ファイルに、FlexGridを表示するためのdiv
要素を追加します。
<head> <meta charset="utf-8"> <title> Wijmo FlexGridサンプル </title> </head> <body> <div class="container"> <button id="update">更新</button> <div id="flexGrid" style="height: 600px;"></div> </div> </body>
index.js
に下記のコードを追加します。CollectionViewとFlexGridを生成します。
import 'wijmo/styles/wijmo-core.scss'; import 'wijmo/cultures/wijmo.culture.ja'; import * as wjGrid from 'wijmo/wijmo.grid'; import * as wjCore from 'wijmo/wijmo'; var cv = new wjCore.CollectionView(); cv.trackChanges = true; var flexGrid = new wjGrid.FlexGrid('#flexGrid',{ itemsSource: cv, allowAddNew: true, allowDelete: true });
Visual Studio Codeのターミナルでnpm run build
を実行してdist
フォルダに生成されたindex.html
をブラウザで確認すると空のFlexGridと更新ボタンが表示されます。
CRUD処理を作成する
前置きがだいぶ長くなってしまいましたが、ここからようやくCRUD処理を実装していきます。Visual Studioからあらかじめ作成したWeb APIを実行しておきます。
データの読み込み(READ)を行う
以下のコードをindex.js
に追加します。Web APIにGET要求を送信して、要求が成功したときに読み込んだJSONデータをJavaScript配列オブジェクトに変換してCollectionViewに設定してFlexGridに表示します。Wijmoのwijmo.httpRequest
メソッドに設定するWeb APIのポート番号はCRUDWebApiApp
のlaunchSettings.json
にあるsslPort
の値を使用します。
var url = 'https://localhost:44362/api/Products'; //GET wjCore.httpRequest(url, { success: function (xhr) { cv.sourceCollection = JSON.parse(xhr.response); } });
Visual Studio Codeのターミナルでnpm run build
を実行してdist
フォルダに生成されたindex.html
をブラウザで確認するとデータベースから読み込んだデータがFlexGridに表示されます。
データの更新(UPDATE)を行う
以下のコードをindex.js
に追加します。更新されたデータの一覧(CollectionView.itemsEdited
プロパティ)を取得してWeb APIにPUT要求を送信します。PUT要求ではURLに更新データのIDcv.itemsEdited[i].productId
を指定してdata
に更新データcv.itemsEdited[i]
を指定します。
var url = 'https://localhost:44362/api/Products'; : document.getElementById('update').addEventListener('click', function () { //PUT for (var i = 0; i < cv.itemsEdited.length; i++) { wjCore.httpRequest(url + cv.itemsEdited[i].productId, { method: 'PUT', data: cv.itemsEdited[i] }); } });
Visual Studio Codeのターミナルでnpm run build
を実行してdist
フォルダに生成されたindex.html
をブラウザで確認します。複数のデータを更新してから[更新]ボタンを押します。ページをリロードするとデータベースに更新が反映されていることが確認できます。
データの生成(CREATE)を行う
以下のコードをindex.js
に追加します。追加されたデータの一覧(CollectionView.itemsAdded
プロパティ)を取得して、Web APIにPOST要求を送信します。POST要求ではdata
に追加データcv.itemsAdded[i]
を指定します。
var url = 'https://localhost:44362/api/Products'; : document.getElementById('update').addEventListener('click', function () { : //POST for (var i = 0; i < cv.itemsAdded.length; i++) { wjCore.httpRequest(url, { method: 'POST', data: cv.itemsAdded[i] }); } });
Visual Studio Codeのターミナルでnpm run build
を実行してdist
フォルダに生成されたindex.html
をブラウザで確認します。FlexGridの一番下に新しい行が表示されているので、Product Name
のセルに適当な商品名を入力してデータを追加します。複数のデータを追加してから[更新]ボタンを押します。ページをリロードすると、データベースのデータが追加されていることが確認できます。
データの削除(DELETE)を行う
以下のコードをindex.js
に追加します。削除されたデータの一覧(CollectionView.itemsRemoved
プロパティ)を取得して、Web APIにDELETE要求を送信します。DELETE要求では、URLに削除データのIDcv.itemsRemoved[i].productId
を指定します。
var url = 'https://localhost:44362/api/Products'; : document.getElementById('update').addEventListener('click', function () { : //DELETE for (var i = 0; i < cv.itemsRemoved.length; i++) { wijmo.httpRequest(url + cv.itemsRemoved[i].productId, { method: 'DELETE' }); } });
FlexGridでは行を選択してDeleteキーを押すと行が削除されます。複数行をまとめて選択して削除することも可能です。
Visual Studio Codeのターミナルでnpm run build
を実行してdist
フォルダに生成されたindex.html
をブラウザで確認します。「データの生成(CREATE)」で追加したデータを削除してから[更新]ボタンを押します。ページをリロードすると、データベースのデータが削除されていることが確認できます。
以上で、JavaScriptとWeb APIを用いたWebアプリケーションで、データベースのCRUD処理を実行することができました。