【2025年】Webアプリは自動生成する時代！DB接続とAPI開発は Data API Builder、フロントエンドは App Builder で、BtoB業務アプリを高速構築！

こんにちは！ソリューションコンサルタントの田上です。

Webアプリ開発の最前線で活躍されているエンジニアの皆さん、そしてプロジェクトを成功に導くために日々ご尽力されているプロジェクトマネージャーの皆さんへ。

「フロントエンドはモダンで開発しやすくなったけれど、バックエンドのAPI構築がボトルネックになってしまい、なかなか開発が進まない…」「複数のデータベースを使っていることで、データ連携が複雑化し、結果的にコストばかりかかっている…」

そんなお悩みを感じたことはありませんか？

Webアプリ開発では、フロントエンド技術の進化が著しく、React、Vue.js、Angularといったフレームワークにより、開発効率は大きく向上しました。UIライブラリの洗練もあり、ユーザー体験の質はかつてないほど高まっています。

その一方で、バックエンドのAPI開発が開発全体の足かせになっているという声も少なくありません。特に、異なるデータベースの統合やレガシーシステムとの接続が求められる場面では、多くの時間と労力が費やされているのが実情です。

こうした課題を解消する糸口として、注目されているのが、Microsoftが提供する Data API Builder と、Infragisticsのローコードツール App Builder の組み合わせです。

本記事では、Webアプリ開発における「バックエンド＆フロントエンドの両面を解決」できるソリューションをご紹介します。

1. バックエンドAPI開発が“つらい”と感じる理由とは？
2. Data API Builderがバックエンド開発を「自動化」する
3. Data API Builder でバックエンドを構築する
4. App Builder によるバックエンドとフロントエンドの連携
5. 導入ストーリー
6. Webアプリ開発に、新たな革命を起こしましょう
- 無料トライアルのご案内
- 無料相談会のご案内

1. バックエンドAPI開発が“つらい”と感じる理由とは？

バックエンドのAPI構築は、目立ちにくいながらも非常に重要な作業です。しかし、次のような理由で多くの開発者を悩ませています。

繰り返されるCRUD実装: 各データベースへのCRUD (Create, Read, Update, Delete) 処理は、どのシステムでも必要でありながら、毎回同じようなコードを書く必要があります。
認証・認可の複雑さ: セキュリティを確保するためには、ユーザー認証やアクセス権限の管理が必須ですが、これもまた手間がかかります。
マルチデータベース対応の困難さ: SQL Server、PostgreSQL、MySQL、Azure Cosmos DBなど、異なる種類のデータベースを使用する場合、それぞれに合わせたAPIを開発・管理するのは非常に骨が折れます。
REST/GraphQLの選択: どちらのAPI形式を選ぶか、どちらの形式にも利点があり、クライアント側の要求に応じた設計が必要です。

これらはすべて、フロントエンド開発者が最高のUI/UXを追求するために必要な「基盤」を築くための作業であり、ここに多くのリソースを費やすことは、プロジェクトのコストアップ要因となります。

2. Data API Builderがバックエンド開発を「自動化」する

Microsoft の Data API Builder（APIコード自動生成）

そこで登場するのが、MicrosoftのData API Builderです。これは、RDB（リレーショナルデータベース）やNoSQLデータベースから、自動的にRESTまたはGraphQLのエンドポイントを生成してくれるオープンソースツールです。

このツールを使えば、以下のようなメリットが得られます。

複数データベース対応: SQL Server、PostgreSQL、MySQL、Azure Cosmos DB、Azure SQL Databaseなど、主要なデータベースに対応。異なるDBを横断的に扱うAPIを簡単に構築できます。
瞬時のAPI生成: 設定ファイル（JSON）を記述するだけで、数分で安全で高速なAPIエンドポイントを生成します。煩雑なCRUD処理の実装が不要になります。
REST/GraphQL対応: 両方のAPI形式をサポートしており、クライアント側のニーズに合わせて選択・提供が可能です。
認証・認可の統合: Azure ADやGitHub、独自の認証プロバイダーとの統合も容易で、セキュリティを確保したAPIを構築できます。

これにより、バックエンドエンジニアは、定型的なAPI構築作業から解放され、より複雑なビジネスロジックの実装や、システムの全体設計といった高付加価値な業務に集中できるようになります。

www.appbuilder.dev

3. Data API Builder でバックエンドを構築する

Data API Builder を使用する理由

MicrosoftのDABは、バックエンドを書かずにRESTまたはGraphQLを介してデータベースを公開するための高速で柔軟な方法を提供します。得られるメリットは次のとおりです。

REST エンドポイント: GET, POST, PUT, PATCH, DELETE
フィルタリング、ソート、ページネーション
OpenAPI (Swagger) サポート
テーブル、ビュー、ストアドプロシージャに対応
インメモリキャッシング
オープンソースで無料

ステップ 1: Data API Builder CLI のインストール

.NET を使用して DAB CLI をグローバルにインストールします。

dotnet tool install -g Microsoft.DataApiBuilder

すでにインストールされている場合:

dotnet tool update -g Microsoft.DataApiBuilder

詳細については、公式ドキュメントのDAB インストールドキュメントを参照してください。

ステップ 2: データベースを設定する

SQL Server、MySQL、PostgreSQLのいずれかのデータベースが必要です。SQL Server Management Studio、MySQL Workbench、またはお好みのDBツールを使用して、1つをスピンアップします。

この例では、MSSQL データベースを使用します。

ステップ 3: DAB 構成を初期化する

接続文字列を使用してベースライン設定ファイルを作成します。

dab init --database-type "mssql" --host-mode "Development" --connection-string "Server=YOUR_SERVER;Database=YOUR_DB;Integrated Security=True;"

次に、エンティティを追加します。

dab add Products --source "Products" --permissions "anonymous:*"

これにより、Products table の REST エンドポイントが追加されます。これで、/api/Productsを介して操作できます。

必要に応じて CORS を有効にします。

jsonCopyEdit"origins": ["*"]

基本的なdab-config.jsonは次のようになります(わかりやすくするために簡略化されています)。

{
  "data-source": {
    "database-type": "mssql",
    "connection-string": "Server=YOUR_SERVER;Database=NorthwindCRUD;Integrated Security=True;"
  },
  "runtime": {
    "rest": {
      "enabled": true,
      "path": "/api"
    },
    "host": {
      "cors": {
        "origins": ["*"]
      },
      "authentication": {
        "provider": "StaticWebApps"
      },
      "mode": "development"
    }
  },
  "entities": {
    "Products": {
      "source": {
        "object": "Products",
        "type": "table"
      },
      "rest": { "enabled": true },
      "permissions": [
        {
          "role": "anonymous",
          "actions": [{ "action": "*" }]
        }
      ]
    }
  }
}

ステップ 4: API を実行してテストする

次のようにして API を起動します。

dab start

次のような出力が表示されます。

Now listening on: http://localhost:5000

Swagger UI でエンドポイントをテストしましょう。

ステップ 5: App Builderに接続する

API が公開され、Swagger が有効になったので、簡単にApp Builderに取り込むことができます。App Builder でAPIと接続する方法を確認してください。

www.appbuilder.dev

トラブルシューティングのヒント

問題	解決
🔄 CORS の問題	`your host.cors` セクションに `"origins": ["*"]` を追加
❌ DELETE が機能しない	`"permissions": "anonymous:*"` に DELETE が含まれているか確認
🔐 認証の問題	接続文字列が正しい認証方法を使用していることを確認
🧩 フォーム CRUD がありません	フォームコンポーネントには OpenAPI からさらに多くの情報が必要
🔑 OIDCが必要ですか?	OpenID Connect に関する GitHub の issue を追跡

4. App Builder によるバックエンドとフロントエンドの連携

Data API BuilderでバックエンドのAPI構築が効率化されたら、次に考えるのは「そのAPIをどうフロントエンドのUIコンポーネントと連携するか」です。ここで、InfragisticsのローコードツールApp Builderが真価を発揮します。

App Builderは、豊富なUIコンポーネントと、デザインからコードを自動生成する機能が魅力のツールです。Figmaからのインポート機能が有名ですが、その真の力は、バックエンドのデータソースとフロントエンドのUIをシームレスに結合し、エンドツーエンドのWebアプリ開発を加速する点にあります。

5. 導入ストーリー

とある企業様のチームに、Data API Builder と App Builder を導入したとしましょう。

Microsoft の Data API Builder を活用することで手早くバックエンドAPIが構築できるようになりました。しかし、次に課題となるのは、そのAPIを叩いてデータを表示・操作するフロントエンドのUI開発です。

特に、BtoBアプリケーション特有の複雑なデータグリッド、多様な入力フォーム、リアルタイムグラフなどをスクラッチで開発するのは、相応の工数とスキルが必要になります。

そこでApp Builder の導入を検討することが重要です。App Builderは、Data API Builderで公開されたAPIエンドポイントを直接データソースとして接続することができます。

複雑なデータグリッドも瞬時に構築： ドラッグ＆ドロップで、Data API Builderから取得したデータを表示する高機能なデータグリッドを、まるでExcelを操作する感覚でレイアウトできます。フィルタリング、ソート、ページング、編集機能まで、すべて数クリックで実現。
フォーム生成も自動化： フォームビルダー機能を活用することで、データベースのスキーマ情報を基に、入力フォームの項目を自動生成し、デザイン調整も簡単に行えます。
高品質なコードの自動生成： App Builderで構築したUIは、Angular、React、Web Componentsといったモダンなフレームワークの高品質なコードとして自動生成されます。生成されるコードは、手書きで書くのと遜色ないほど洗練されており、そのまま本番環境にデプロイできるレベルです。

これにより、フロントエンドエンジニアは、UIのレイアウトやデータバインディングの煩雑なコーディングから解放され、システムのコアであるビジネスロジックの開発に集中できるようになりました。

バックエンドとフロントエンドの両面から効率化され、さらにApp Builderがその間の橋渡しをシームレスに行うことで、開発チーム生産性は、バックエンドおよびフロントエンドの両面において、驚異的なスピードでWebアプリを開発できるようになります。

結果的に、プロジェクト全体コストの大きな削減が実現できるとともに、エンドユーザーからのビジネス要求への対応速度が飛躍的に向上します。