はじめに (対象読者・この記事でわかること)

この記事は、C#でのバックエンド開発経験があり、JavaScriptを用いたフロントエンドとのデータ連携に関心のある開発者、またはJavaScriptでC#が提供するAPIからのデータ利用方法を知りたい方を対象としています。

Webアプリケーション開発において、バックエンド（サーバーサイド）とフロントエンド（クライアントサイド）間のスムーズなデータ連携は不可欠です。この記事を読むことで、C#で生成したJSONデータをJavaScript側でどのように取得し、利用するのか、その一連の流れを具体的に理解し、実装できるようになります。特に、一般的なWeb APIを通じた連携方法と、遭遇しやすい問題（CORSなど）への対処法についても学ぶことができます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - C#の基本的な文法とクラスの概念 - JavaScriptの基本的な文法と非同期処理（Promise, async/await）の概念 - JSONの基本的な構造とデータの表現方法

JSONを活用したC#とJavaScriptのデータ連携の重要性

現代のWebアプリケーション、特にシングルページアプリケーション（SPA）やモバイルアプリでは、バックエンドとフロントエンドが明確に分離されていることが一般的です。このようなアーキテクチャでは、両者間のデータ通信が頻繁に発生します。ここで中心的な役割を果たすのがJSON（JavaScript Object Notation）です。

JSONは、人間にとっても読みやすく、機械にとっても解析しやすい軽量なデータ交換フォーマットです。そのシンプルさ、高い可読性、そしてほぼ全てのプログラミング言語でサポートされている汎用性から、Web APIのデータ形式として広く採用されています。C#でビジネスロジックを実行し、データベースから取得したデータをJSON形式で整形してJavaScript（ブラウザ）に提供することで、柔軟で拡張性の高いアプリケーション構築が可能になります。JSONを使うことで、言語間のデータの受け渡しにおける互換性の問題を最小限に抑え、開発効率を大幅に向上させることができます。

C#でJSONデータを生成し、JavaScriptで利用する具体的な手順

このセクションでは、C#（ASP.NET Core Web API）でJSONデータを生成し、それをJavaScript（ブラウザ）から取得して利用する具体的な手順を解説します。

ステップ1: C# (ASP.NET Core) でJSONデータを生成する

まず、C#側でJSONデータを生成し、Web APIとして公開します。ここではASP.NET Core Web APIを使用します。

1. データモデルの定義

APIで返すデータの構造をC#のクラスとして定義します。

Csharp

// Models/Product.cs
namespace CSharpJsonApi.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Price { get; set; }
        public string Description { get; set; }
    }
}

2. APIコントローラーの作成

このデータモデルのリストをJSON形式で返すAPIエンドポイントを作成します。ASP.NET Coreでは、コントローラーのアクションメソッドがIActionResult型（または直接オブジェクト型）を返す場合、デフォルトでJSONにシリアライズされてレスポンスされます。

Csharp

// Controllers/ProductsController.cs
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using CSharpJsonApi.Models; // 定義したProductモデルのnamespace

namespace CSharpJsonApi.Controllers
{
    [ApiController] // APIコントローラーであることを示すアトリビュート
    [Route("api/[controller]")] // エンドポイントのパスを定義 (例: /api/products)
    public class ProductsController : ControllerBase
    {
        // GET api/products
        [HttpGet]
        public IActionResult Get()
        {
            // サンプルデータを作成
            var products = new List<Product>
            {
                new Product { Id = 1, Name = "モダンノートPC", Price = 1200.00m, Description = "高性能で軽量なノートパソコンです。" },
                new Product { Id = 2, Name = "ワイヤレスマウス", Price = 25.00m, Description = "手にフィットする人間工学デザインのマウス。" },
                new Product { Id = 3, Name = "メカニカルキーボード", Price = 80.00m, Description = "タイピングが楽しい高耐久性キーボード。" }
            };

            // オブジェクトをJSON形式で返す (ASP.NET Coreが自動的にシリアライズ)
            return Ok(products); 
        }

        // 必要であれば、POST, PUT, DELETEなどのメソッドも追加します
    }
}

これで、C#側で http://localhost:[ポート番号]/api/products のようなURLにアクセスすると、JSONデータが返されるAPIが完成しました。プロジェクトを起動し、ブラウザやPostmanなどでアクセスしてJSONレスポンスを確認してみてください。

ステップ2: JavaScriptからC#のJSONデータを取得・利用する

次に、HTMLファイルとJavaScriptファイルを作成し、C#で公開したAPIからJSONデータを取得してウェブページに表示します。

1. HTMLファイルの作成

データを表示するための基本的なHTML構造を作成します。

Html

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>C# JSONデータをJavaScriptで利用</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        .product-item { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; border-radius: 5px; }
        .product-name { font-weight: bold; color: #333; }
        .product-price { color: #007bff; }
        .error-message { color: red; }
    </style>
</head>
<body>
    <h1>商品リスト</h1>
    <div id="products-container">
        <!-- JavaScriptでここに商品データが挿入されます -->
        <p>商品データを読み込み中...</p>
    </div>
    <script src="app.js"></script>
</body>
</html>

2. JavaScriptファイルの作成

fetch APIを使用してC#のAPIからデータを取得し、HTMLに表示します。

Javascript

// app.js
const productsContainer = document.getElementById('products-container');

async function fetchProducts() {
    try {
        // C# APIのエンドポイントURL (ASP.NET Coreのポート番号に合わせて変更してください)
        // 例: http://localhost:5000/api/products または http://localhost:7000/api/products
        const apiUrl = 'http://localhost:5000/api/products'; 

        const response = await fetch(apiUrl);

        // レスポンスが正常か確認 (HTTPステータスコードが200番台か)
        if (!response.ok) {
            throw new Error(`HTTPエラー！ステータス: ${response.status}`);
        }

        // レスポンスボディをJSONとしてパース
        const products = await response.json();

        // 既存の読み込み中メッセージをクリア
        productsContainer.innerHTML = ''; 

        if (products.length === 0) {
            productsContainer.textContent = '利用可能な商品がありません。';
            return;
        }

        // 取得した商品データをHTMLに表示
        products.forEach(product => {
            const productDiv = document.createElement('div');
            productDiv.className = 'product-item';
            productDiv.innerHTML = `
                <div class="product-name">${product.Name}</div>
                <div>ID: ${product.Id}</div>
                <div class="product-price">価格: $${product.Price.toFixed(2)}</div>
                <div>${product.Description}</div>
            `;
            productsContainer.appendChild(productDiv);
        });

    } catch (error) {
        console.error('商品データの取得中にエラーが発生しました:', error);
        productsContainer.innerHTML = '<p class="error-message">商品データの読み込みに失敗しました。</p>';
    }
}

// ページロード時に商品をフェッチ
fetchProducts();

このindex.htmlとapp.jsを同じディレクトリに置き、index.htmlをブラウザで開きます（Live Serverなどの拡張機能を使うと便利です）。C#のASP.NET Coreアプリケーションが起動していれば、商品リストが表示されるはずです。

ハマった点やエラー解決：CORS (Cross-Origin Resource Sharing)

上記の実装で、C#とJavaScriptをそれぞれ別のサーバー（例えばC#はポート5000、JavaScriptはLive Serverのポート5500など）で実行している場合、ブラウザのコンソールに以下のようなエラーが表示されることがあります。

Access to fetch at 'http://localhost:5000/api/products' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

これはCORS (Cross-Origin Resource Sharing) ポリシーによるものです。セキュリティのため、ブラウザは異なるオリジン（プロトコル、ドメイン、ポートのいずれかが異なるURL）からのリソース要求をデフォルトでブロックします。

解決策

CORS問題を解決するには、C#のASP.NET Coreアプリケーション側で、JavaScriptアプリケーションが動作しているオリジンからのアクセスを許可するように設定する必要があります。

ASP.NET Coreでは、Microsoft.AspNetCore.Corsパッケージを使用してCORSポリシーを設定します。

1. NuGetパッケージのインストール (通常はデフォルトで含まれていますが、もしなければ)

Bash

dotnet add package Microsoft.AspNetCore.Cors

2. Program.cs または Startup.cs でCORSポリシーを設定

.NET 6以降のMinimal APIテンプレートの場合（Program.cs）：

Csharp

// Program.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.DependencyInjection;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllers(); // APIコントローラーを使用する場合

// CORSサービスを追加
builder.Services.AddCors(options =>
{
    options.AddDefaultPolicy(
        policy =>
        {
            // JavaScriptアプリが動作するオリジンを正確に指定
            // 例: Live Serverを使用している場合 'http://127.0.0.1:5500' または 'http://localhost:5500'
            // 開発環境では複数のオリジンを許可することもあります
            policy.WithOrigins("http://127.0.0.1:5500", "http://localhost:5500") 
                  .AllowAnyHeader() // 任意のHTTPヘッダーを許可
                  .AllowAnyMethod(); // 任意のHTTPメソッド (GET, POSTなど) を許可
        });
});

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseDeveloperExceptionPage(); // 開発中のエラー表示
}

// CORSミドルウェアを使用
app.UseCors(); // UseCorsはUseRoutingとUseAuthorizationの前に配置する必要があります

app.UseRouting();
app.UseAuthorization();

app.MapControllers(); // APIコントローラーのマッピング

app.Run();

これにより、指定したオリジンからのリクエストがC#のAPIに到達できるようになり、JavaScript側でJSONデータを正常に取得できるようになります。本番環境では、WithOriginsで許可するオリジンを厳密に設定し、AllowAnyHeader()やAllowAnyMethod()は必要に応じて制限することをお勧めします。

まとめ

本記事では、C#で生成したJSONデータをJavaScriptで取得し、利用する一連の流れ を解説しました。

  • C#でのJSON生成: ASP.NET Core Web APIを使用し、C#オブジェクトをJSON形式でシリアライズしてクライアントに提供する方法を学びました。
  • JavaScriptでのJSON利用: fetch APIを使ってC#のAPIからJSONデータを非同期に取得し、それをJavaScriptオブジェクトとしてパース、利用する方法を実践しました。
  • CORS問題の解決: クロスオリジンリクエストにおける一般的なエラーであるCORSの発生原因と、ASP.NET CoreでCORSポリシーを設定して解決する方法を理解しました。

この記事を通して、バックエンド（C#）とフロントエンド（JavaScript）間のデータ連携の基本を習得し、Webアプリケーション開発におけるJSONの重要性を再認識できたことと思います。

今後は、認証・認可を伴うセキュアなAPI連携、複雑なデータ構造の扱い、データの送受信（POST/PUTリクエスト）など、より発展的な内容についても記事にする予定です。

参考資料