GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の、製品のTIPSや発売などに関する最新情報をお届けします。

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

本記事では、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.csOnConfiguringをコメントアウトします。

f:id:GrapeCity_dev:20190109135925p:plain:w500

appsettings.jsonに接続文字列を追加します。

{
  "ConnectionStrings": {
    "Connection": "作成したAzure SQL Databaseの接続文字列"
  },
}

Startup.csappsettings.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.jsonlaunchUrlapi/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.jsondevDependenciesは以下のように構成されます。

"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.jsonscriptに以下のコードを追加します。

"scripts": {
    "build": "webpack"
  },

WijmoFlexGridフォルダにsrcフォルダを作成してindex.htmlindex.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のポート番号はCRUDWebApiApplaunchSettings.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処理を実行することができました。

  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉ではエンジニア経験者を幅広く募集しています。
  • グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の製品のデモアプリケーションをお試しください。