C#で始めるWebアプリケーション開発:ASP.NET Core

C#の基本を学んだ次は、Webの世界に飛び込んでみましょう! ASP.NET Coreは、Microsoftが提供するモダンで高性能なWebアプリケーション開発フレームワークです。Webサイト、Web API、マイクロサービスなど、様々なWebアプリケーションをC#で開発できます。

1. Webアプリケーションとは?

Webアプリケーションは、Webブラウザを通じてアクセス・利用されるアプリケーションのことです。皆さんが普段見ているウェブサイトの多くは、裏側でWebアプリケーションが動いています。

基本的な仕組み

  1. クライアント(Webブラウザ): ユーザーが操作する部分。HTML, CSS, JavaScriptで表示され、Webサーバーにリクエストを送ります。
  2. Webサーバー: クライアントからのリクエストを受け付け、処理し、結果(HTMLなど)を返すコンピューター。
  3. データベース: データを保存・管理する場所。Webアプリケーションは、データベースからデータを取得したり、保存したりします。

Webアプリケーションは、クライアントとサーバーが通信し合うことで機能します。ASP.NET Coreは、主にこの「Webサーバー」側(サーバーサイド)の処理をC#で記述するためのフレームワークです。

2. ASP.NET Coreとは?

ASP.NET Coreは、従来のASP.NET (.NET Framework) を大幅に刷新した、最新のWeb開発フレームワークです。

特徴

ASP.NET Coreは、新しいWebアプリケーション開発のデファクトスタンダードとして広く採用されています。これからC#でWeb開発を始めるなら、ASP.NET Coreを学ぶのが最適です。

3. ASP.NET Coreの主要な開発モデル

ASP.NET Coreには、開発するWebアプリケーションの種類に応じていくつかのモデルがあります。ここでは代表的な2つを紹介します。

3.1. ASP.NET Core MVC / Razor Pages

主にWebサイトやWebアプリケーションのユーザーインターフェース(UI)を構築するためのモデルです。

3.2. ASP.NET Core Web API

Webサイトのユーザーインターフェースを持たず、データを提供するAPI(Application Programming Interface)を構築するためのモデルです。モバイルアプリや他のWebサービスなど、様々なクライアントからデータを取得・更新する際に利用されます。

4. ASP.NET Core Webアプリケーション開発の基本ステップ (MVC/Razor Pagesの例)

Visual Studioを使って簡単なWebアプリケーションを作成する手順を見ていきましょう。

4.1. プロジェクトの作成

  1. Visual Studioを開き、「新しいプロジェクトの作成」を選択します。
  2. 検索ボックスに「ASP.NET Core Web アプリ」と入力し、C#言語のテンプレートを選択して「次へ」をクリックします。
  3. プロジェクト名(例: MyWebApp)と場所を指定し、「次へ」をクリックします。
  4. 「追加情報」画面で、以下の設定を選択します。
    • フレームワーク: 最新の.NET (例: .NET 8.0) を選択
    • 認証の種類: 「なし」を選択(最初はシンプルに)
    • Web アプリケーション モデル: 「Razor Pages」または「Model-View-Controller (MVC)」を選択(ここではRazor Pagesがおすすめです)
    • HTTPS の構成: チェックを外しても良いですが、セキュリティのためにはチェックを推奨します。
  5. 「作成」をクリックします。

プロジェクトが作成されると、基本的なWebサイトの構造が生成されます。

4.2. Webページの作成と表示 (Razor Pagesの例)

Razor Pagesでは、.cshtmlファイル(UI)と.cshtml.csファイル(コードビハインド)のペアでページを構成します。

  1. ソリューションエクスプローラーのPagesフォルダを右クリックし、「追加」>「Razor Page...」を選択します。
  2. 「空」テンプレートを選択し、ファイル名(例: Greeting.cshtml)を指定して「追加」をクリックします。

Greeting.cshtmlにはHTMLとRazor構文を、Greeting.cshtml.csにはC#コードを記述します。

<!-- Pages/Greeting.cshtml -->
@page
@model MyWebApp.Pages.GreetingModel
@{
    ViewData["Title"] = "ご挨拶ページ";
}

<h1>@ViewData["Title"]</h1>

<p>あなたの名前を入力してください:</p>

<form method="post">
    <input type="text" asp-for="Name" />
    <button type="submit">送信</button>
</form>

@if (!string.IsNullOrEmpty(Model.Message))
{
    <h2>@Model.Message</h2>
}
            
// Pages/Greeting.cshtml.cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace MyWebApp.Pages
{
    public class GreetingModel : PageModel
    {
        // ユーザーから入力された名前を保持するプロパティ
        [BindProperty] // このプロパティにフォームの値をバインドする
        public string Name { get; set; }

        // 表示するメッセージを保持するプロパティ
        public string Message { get; set; }

        // GETリクエスト(ページが最初に表示されるとき)
        public void OnGet()
        {
            // 初回表示時の処理(ここでは何もしない)
        }

        // POSTリクエスト(フォームが送信されたとき)
        public void OnPost()
        {
            if (string.IsNullOrEmpty(Name))
            {
                Message = "名前を入力してください!";
            }
            else
            {
                Message = $"こんにちは、{Name}さん!";
            }
        }
    }
}
            

4.3. アプリケーションの実行

Visual Studioのツールバーにある「デバッグ開始」(緑色の再生ボタン)をクリックするか、F5キーを押すと、Webアプリケーションが起動し、ブラウザで表示されます。

URLの最後に/Greetingを追加して、作成したページにアクセスしてみてください。

https://localhost:ポート番号/Greeting

5. 次のステップへ

ASP.NET Coreの基本的なWebアプリケーション開発の入り口に触れました。このフレームワークは非常に多機能であり、さらに学ぶべきことがたくさんあります。

Webアプリケーション開発は、日々進化する技術のスピードが速い分野です。しかし、C#とASP.NET Coreの堅牢な基盤があれば、様々なWebサービスを作り出すことが可能です。ぜひ、自分のアイデアをWebの世界で形にしてみてください。

参考資料

目次へ戻る