先生と生徒の会話形式で理解しよう

生徒

「ASP.NET MVCでスマホアプリやJavaScriptからデータを取得したいときって、どうすればいいんですか？」

先生

「その場合は、ASP.NET MVCで《JSONデータを返すAPI》を作ると便利です。ページを返すのではなくデータだけ送れる仕組みです。」

生徒

「APIって難しそうですが、どういうものなんですか？」

先生

「APIは『アプリケーション同士が会話するための窓口』のようなものです。今回はデータを返すだけのシンプルなAPIを作ってみましょう。」

1. JSONとは？APIで使うデータ形式

JSON（ジェイソン）は、Web開発やアプリ開発で最もよく使われるデータ形式のひとつで、JavaScript Object Notationという名前の通り「JavaScriptの表記ルール」をベースに作られています。文字で書かれていますが、パソコンが処理しやすい構造になっており、初心者でも感覚的に理解しやすい点が大きな特徴です。

例えば、ユーザーの名前と年齢を表すデータは次のようになります。


{"name": "太郎", "age": 20}

このように、JSONでは「キー（項目名）」と「値」がセットになっており、辞書のような形でデータを整理できます。Webページ、スマホアプリ、JavaScriptの処理など、さまざまな場面で利用されているため、最初に覚えておきたい基本形式です。

さらに、複数のデータをまとめたい場合はリスト（配列）として扱うこともできます。


[
  {"name": "太郎", "age": 20},
  {"name": "花子", "age": 25}
]

このように、JSONは単純な書き方で複雑な情報も表現できるため、APIとの相性が非常によく、世界中で標準的に使われています。ASP.NET MVCでも、JSON形式でデータを返すことで、ページを表示せずに必要な情報だけを柔軟に提供できるのが大きな魅力です。

たとえば、以下のようにASP.NET MVC側でJSONデータをそのまま返すこともできます。


// JSONデータの基本例（ASP.NET MVC）
public JsonResult SampleData()
{
    var data = new { message = "JSONの基本サンプルです", number = 123 };
    return Json(data, JsonRequestBehavior.AllowGet);
}

実行すると、次のようなデータが返ってきます。画面を表示せず、データだけ取得できるため、JavaScriptとの連携やアプリへの組み込みがとてもスムーズになります。


{"message":"JSONの基本サンプルです","number":123}

まずは「JSONはシンプルな書き方で情報を整理するための形式」と覚えておくと、このあとのAPI開発がぐっと理解しやすくなります。

2. JSONを返すAPIを作る基本のコントローラ

ここでは、JSON APIの一番基本となる「ただデータを返すだけのAPI」を作ってみましょう。まずは仕組みをつかみやすいように、現在時刻を返すだけのとてもシンプルなサンプルから始めます。画面のHTMLを返すのではなく、必要なデータだけを返すのがAPIの大きな特徴です。


public class ApiController : Controller
{
    public JsonResult GetTime()
    {
        var result = new
        {
            message = "現在時刻を取得しました",
            time = DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss")
        };

        return Json(result, JsonRequestBehavior.AllowGet);
    }
}

このAPIにアクセスすると、ブラウザには画面ではなく次のようなJSONデータだけが返ってきます。


{"message":"現在時刻を取得しました","time":"2025/11/20 12:00:00"}

Json()メソッドにオブジェクトを渡すだけで、このようなデータ通信が実現できます。特に、JavaScriptやスマホアプリとの連携では画面を返さずデータのみ扱えるため、軽量で扱いやすい通信方式として非常によく使われます。

まずはこのシンプルな例から、「APIとはデータだけを返す仕組み」という感覚をつかんでおくと、次に紹介するモデルを使ったAPI作りやAjaxとの組み合わせも理解しやすくなります。

3. モデルを使ったJSON APIの作成

次に、ユーザー情報を一覧として返すAPIを作ります。

まずモデルを作成します：


public class User
{
    public string Name { get; set; }
    public int Age { get; set; }
}

コントローラ：


public JsonResult GetUsers()
{
    var users = new List<User>
    {
        new User { Name = "佐藤", Age = 22 },
        new User { Name = "田中", Age = 30 },
        new User { Name = "山田", Age = 27 }
    };

    return Json(users, JsonRequestBehavior.AllowGet);
}

アクセス結果：


[
  {"Name":"佐藤","Age":22},
  {"Name":"田中","Age":30},
  {"Name":"山田","Age":27}
]

これだけで「APIからユーザー一覧取得」が実現できます。

4. JavaScript（Ajax）でAPIを呼び出す

作成したAPIをブラウザから利用してみましょう。


<button id="load" class="btn btn-primary">ユーザー一覧取得</button>
<ul id="result"></ul>

<script>
$("#load").click(function () {
    $.ajax({
        url: "/Api/GetUsers",
        type: "GET",
        success: function (data) {
            $("#result").empty();
            data.forEach(function (u) {
                $("#result").append("<li>" + u.Name + "：" + u.Age + "歳</li>");
            });
        }
    });
});
</script>

ボタンを押すとデータだけ取得し、画面に一覧として表示されます。


佐藤：22歳
田中：30歳
山田：27歳

5. APIにデータを送信して処理する（POST通信）

APIはデータ取得だけでなく、サーバー側へ送信する時にも利用できます。

JavaScript側：


<input type="text" id="name" placeholder="名前" class="form-control mb-2">
<button id="send" class="btn btn-success">送信</button>
<p id="msg"></p>

<script>
$("#send").click(function () {
    $.ajax({
        url: "/Api/AddUser",
        type: "POST",
        data: { name: $("#name").val() },
        success: function (data) {
            $("#msg").text(data.message);
        }
    });
});
</script>

コントローラ側：


[HttpPost]
public JsonResult AddUser(string name)
{
    return Json(new { message = name + "さんを登録しました！" });
}

実行例：


太郎さんを登録しました！

6. JSON APIを使うメリットを整理

JSON APIは画面を返さずデータのみ扱うため、以下のメリットがあります。

スマホアプリ・JavaScriptから利用できる
ページをリロードせず処理できる
複数システム間でデータ連携できる

ASP.NET MVCでWebアプリを作る際、AjaxやAPIと組み合わせることで現代的なサービスに近づきます。

まとめ

この記事では、ASP.NET MVCを使ってJSONデータを返すAPIの基本と作り方を、初心者でも理解しやすい流れで整理しました。 JSONとは何か、どのような仕組みでデータを送受信できるのか、そして実際にどのようなコードを書けばAPIを作れるのかを段階的に確認することで、Webアプリケーション開発に必要な基礎を自然に身につけられたはずです。 JSONデータの構造は非常にシンプルで、名前と値の組み合わせを読みやすく整えた形式です。この形式はスマホアプリ、JavaScript、サーバー間通信など、さまざまな場面で利用されているため、Web開発をするうえで避けて通れない重要な知識です。 ASP.NET MVCではJsonResultを利用することで画面を返さずデータだけを返せるため、少しのコードでAPIを構築できます。こうした柔軟なデータ処理ができるようになると、より高度なWebアプリケーションや外部サービスと連携する機能も実現しやすくなります。

また、モデルを使って複数のデータをまとめて返す方法や、JavaScript（jQuery）を使ってAPIを呼び出す方法など、実践的な操作も体験しました。これらの流れを理解しておくと、フロントエンドとサーバーの間でスムーズにデータをやり取りできるため、近代的なWebアプリの開発がぐっと身近になります。特にAjax通信は画面をリロードせずにデータだけ更新できるため、ユーザーにとって快適な操作性を実現する際に欠かせない技術です。

APIは「データを返す仕組み」というイメージだけでなく、外部のアプリケーションやサービスと結びつくための重要な窓口でもあります。 JSON APIを自分で作成し、実際にJavaScriptから呼び出す経験を積むことで、「データ通信」の理解が深まり、より幅広い開発に応用する力が養われます。今後APIを使ってデータを更新したり削除したりする機能を追加することで、より複雑なアプリケーションにも挑戦できるようになるでしょう。

コードで振り返るJSON APIの基本

JSON APIがどのように働くのかを短いコードで確認してみましょう。下記は、簡単なメッセージを返すAPIとそれを呼び出すJavaScriptの例です。


public class SummaryApiController : Controller
{
    public JsonResult HelloJson()
    {
        return Json(new { message = "JSONでデータを返す仕組みを復習しています。" }, JsonRequestBehavior.AllowGet);
    }
}


<button id="hello" class="btn btn-info">メッセージ取得</button>
<p id="jsonMsg"></p>

<script>
$("#hello").click(function () {
    $.ajax({
        url: "/SummaryApi/HelloJson",
        type: "GET",
        success: function (data) {
            $("#jsonMsg").text(data.message);
        }
    });
});
</script>

このサンプルでは、ボタンを押したときにAPIへリクエストを送り、返ってきたJSONのメッセージを画面に表示しています。この動きの中に「リクエスト → データ取得 → 表示」という基本的な流れが詰まっており、JSON APIの理解を深める良い復習になります。

今回取り上げたように、ASP.NET MVCとJSON APIの組み合わせは、柔軟で扱いやすいデータ通信を実現する強力な手段です。ぜひこの記事をきっかけに、カスタムAPIの作成や外部連携など、さらに一歩進んだ開発にも挑戦してみてください。

先生と生徒の振り返り会話

生徒

「JSON APIって最初は難しそうに思っていたけれど、Controllerでデータを返すだけなら意外と簡単でした！」

先生

「そのとおりですよ。シンプルなAPIを動かしてみることで、データ通信の仕組みがすっと理解しやすくなるんです。大事なのは少しずつ実際に手を動かしてみることですね。」

生徒

「JavaScriptでAPIを呼び出して画面に表示されるのを見たとき、『こうやってスマホアプリやWebサービスが動いているんだ！』と実感できました。」

先生

「その気づきはとても大切です。JSONはWeb全体で使われているデータ形式なので、今回の理解は必ず今後の開発に役立ちますよ。」

生徒