csharp web application入門：C#でWebアプリを作る手順・必要な知識・開発環境を初心者向けに解説
はじめに
「csharp web application」と検索している人の中には、C#を使ってWebアプリケーションを作りたいものの、何から始めればよいかわからない人も多いでしょう。
C#によるWebアプリ開発では、主にASP.NET Coreというフレームワークを使用します。ASP.NET Coreを利用すれば、Webサイト、業務システム、予約サービス、会員管理システム、Web APIなど、幅広いアプリケーションを開発できます。
一方で、初心者にとっては、C#の文法だけでなく、HTMLやCSS、HTTP、データベース、サーバーなどの知識も必要になるため、学習範囲が広く感じられるかもしれません。
この記事では、C#でWebアプリを作るために必要な知識や開発環境、ASP.NET Coreの特徴、基本的な開発手順を初心者向けに解説します。簡単なサンプルアプリの構成や、公開方法、よくある疑問についても紹介します。
1. csharp web applicationとは？C#で作るWebアプリの基本
1-1. C# Webアプリケーションの概要
C# Webアプリケーションとは、C#を主なプログラミング言語として開発する、Webブラウザ上で利用できるアプリケーションです。
一般的には、Microsoftが提供するASP.NET Coreを使って開発します。ASP.NET Coreには、画面を表示する機能、URLと処理を結び付けるルーティング、データベース連携、ログイン認証、API作成など、Webアプリ開発に必要な仕組みが用意されています。
C# Webアプリの例としては、次のようなものがあります。
商品を販売するECサイト
社内で利用する勤怠管理システム
顧客情報を管理する業務システム
ホテルや飲食店の予約システム
掲示板やブログ
スマートフォンアプリ向けのWeb API
データを集計・表示する管理画面
利用者はChrome、Edge、SafariなどのブラウザからWebアプリにアクセスします。サーバー側ではC#で書かれたプログラムがリクエストを処理し、HTMLやJSONなどのデータを返します。
1-2. C#でWebアプリを作るメリット
C#でWebアプリを作る大きなメリットは、言語機能と開発環境が充実していることです。
C#は型を明確に扱う静的型付け言語です。変数やメソッドが扱うデータの種類をコンパイラが確認するため、実行前に多くのミスを発見できます。入力補完やリファクタリングなど、開発ツールの支援を受けやすい点も特徴です。
また、ASP.NET Coreには、次のような機能が標準または公式ライブラリとして用意されています。
URLに応じて処理を切り替えるルーティング
フォーム入力の受け取り
入力値の検証
ログイン・認証・権限管理
データベース操作
Web APIの作成
ログ出力
エラーハンドリング
依存性注入
セキュリティ対策
C#は大規模なシステムにも対応しやすく、ソースコードを整理しながら開発できます。そのため、個人開発だけでなく、企業の業務システムや長期間運用されるサービスにも採用されています。
1-3. C# Webアプリが使われる主な開発シーン
C# Webアプリは、特に企業向けのシステム開発で広く利用されています。
代表的な開発シーンは、在庫管理、販売管理、顧客管理、勤怠管理、申請・承認システムなどです。WindowsやMicrosoft製品を利用している企業では、SQL Server、Microsoft Entra ID、Azureなどのサービスと組み合わせやすい点もメリットになります。
ASP.NET CoreはWeb API開発にも使用できます。Web APIを作成すれば、スマートフォンアプリ、JavaScriptで作られた画面、外部サービスなどにデータや機能を提供できます。
小規模なブログや予約サイトから、複数の部署が利用する大規模な業務システムまで、幅広い規模の開発に対応可能です。
1-4. デスクトップアプリ・スマホアプリとの違い
Webアプリは、基本的にブラウザから利用します。利用者の端末に専用アプリをインストールしなくても、URLへアクセスするだけで利用できる点が特徴です。
デスクトップアプリは、WindowsやmacOSなどのパソコンにインストールして使用します。C#では、Windows Forms、WPF、.NET MAUIなどを利用してデスクトップアプリを開発できます。
スマホアプリは、AndroidやiOSにインストールして使用するアプリです。端末のカメラ、位置情報、通知などを活用しやすい一方、OSごとの対応やアプリストアへの公開作業が必要です。
Webアプリはサーバー側のプログラムを更新すれば、利用者全員に新しい機能を提供できます。ただし、インターネット接続やブラウザの制約を考慮する必要があります。
2. C#でWebアプリを作る前に知っておきたい基礎知識
2-1. Webアプリの仕組み
Webアプリは、主にクライアントとサーバーによって構成されます。
クライアントは、利用者が操作するブラウザです。利用者がリンクをクリックしたり、フォームを送信したりすると、ブラウザからサーバーへリクエストが送信されます。
サーバーはリクエストを受け取ると、C#で書かれたプログラムを実行します。必要に応じてデータベースから情報を取得し、処理結果をHTMLやJSONとしてブラウザへ返します。
基本的な流れは次のとおりです。
利用者がブラウザでURLへアクセスする
ブラウザがサーバーへリクエストを送る
サーバー上のC#プログラムが処理を行う
必要に応じてデータベースを参照・更新する
サーバーがレスポンスを返す
ブラウザが受け取った画面やデータを表示する
C#は、主にサーバー側の処理を担当します。
2-2. フロントエンドとバックエンドの役割
Webアプリ開発は、フロントエンドとバックエンドに分けて考えると理解しやすくなります。
フロントエンドは、利用者がブラウザ上で見たり操作したりする部分です。主に次の技術を使用します。
HTML：画面の構造を作る
CSS：色、サイズ、配置などのデザインを設定する
JavaScript：画面に動きや対話的な処理を追加する
バックエンドは、サーバー上で動作する部分です。C#とASP.NET Coreを使い、次のような処理を実装します。
フォームから送られたデータを受け取る
データベースから情報を取得する
入力されたメールアドレスやパスワードを確認する
業務上の計算や判定を行う
HTMLやJSONを返す
ASP.NET Core MVCやRazor Pagesでは、C#によるバックエンド処理とHTMLによる画面を同じプロジェクト内で管理できます。
2-3. HTTP・URL・リクエスト・レスポンスの基本
HTTPは、ブラウザとWebサーバーが情報をやり取りするための通信ルールです。
利用者がWebページへアクセスすると、ブラウザからHTTPリクエストが送られます。サーバーは処理結果をHTTPレスポンスとして返します。
HTTPリクエストでは、主に次のメソッドが使用されます。
GET：データや画面を取得する
POST：新しいデータを送信・登録する
PUT：既存データを更新する
PATCH：既存データの一部を更新する
DELETE：データを削除する
通常の画面表示ではGET、フォームの登録処理ではPOSTがよく使われます。
URLは、Web上の場所を表す文字列です。例えば、次のURLがあるとします。
https://example.com/products/10httpsは通信方式、example.comはホスト名、/products/10はサーバー内のリソースや処理を表します。
ASP.NET Coreでは、ルーティングによってURLとC#の処理を結び付けます。
2-4. データベースとの連携の考え方
Webアプリでは、登録された情報を継続的に保存するためにデータベースを使用します。
例えば、ToDoアプリでは、タスク名、完了状態、登録日時などをデータベースに保存します。商品管理アプリであれば、商品名、価格、在庫数などを保存します。
C#では、Entity Framework Coreという仕組みを使ってデータベースを操作する方法が一般的です。Entity Framework Coreを使うと、SQLを直接記述する代わりに、C#のオブジェクトやメソッドを使ってデータを登録・取得できます。
var products = await context.Products.Where(product => product.Price >= 1000).ToListAsync();このコードでは、価格が1,000円以上の商品をデータベースから取得しています。
データベースを扱う際には、テーブル、行、列、主キー、外部キー、インデックスなどの基本概念も学ぶ必要があります。
2-5. C#初心者が先に学ぶべき文法
C# Webアプリを作る前に、最低限のC#文法を理解しておくと学習がスムーズです。
優先的に学びたい項目は次のとおりです。
変数とデータ型
ifによる条件分岐forやforeachによる繰り返しメソッド
クラスとインスタンス
プロパティ
コンストラクター
継承とインターフェース
例外処理
コレクション
LINQ
非同期処理
nullの扱い
Webアプリでは、データベースや外部サービスとの通信を待つ処理が多いため、asyncとawaitを利用した非同期処理も重要です。
すべてを完全に理解してからWeb開発へ進む必要はありません。変数、条件分岐、繰り返し、メソッド、クラスの基本を学んだ後、小さなWebアプリを作りながら理解を深める方法が効果的です。
3. C# Webアプリ開発で使う主なフレームワーク
3-1. ASP.NET Coreとは
ASP.NET Coreは、C#や.NETを使ってWebアプリケーションを開発するためのフレームワークです。
Web画面を表示するアプリだけでなく、Web API、リアルタイム通信を利用するアプリ、クラウド上で動作するサービスなども開発できます。
ASP.NET Coreの主な特徴は次のとおりです。
Windows、macOS、Linuxで開発・実行できる
高性能なWebアプリを構築できる
MVC、Razor Pages、Blazor、Web APIに対応する
依存性注入や設定管理の仕組みが標準で用意されている
Dockerやクラウド環境で運用しやすい
オープンソースで開発されている
「ASP.NET」と「ASP.NET Core」は名前が似ていますが、新しく学ぶ場合は、基本的にASP.NET Coreを対象にするとよいでしょう。
3-2. ASP.NET Core MVCとは
ASP.NET Core MVCは、アプリケーションをModel、View、Controllerの3つの役割に分けて開発する方法です。
Modelは、データや業務上のルールを表します。例えば、商品、利用者、注文などのクラスがModelに該当します。
Viewは、利用者に表示するHTML画面を担当します。ASP.NET Core MVCでは、C#とHTMLを組み合わせて記述できるRazor構文が使われます。
Controllerは、ブラウザからのリクエストを受け取り、必要な処理を実行してViewやデータを返します。
役割を分けることで、大規模なアプリでもコードを整理しやすくなります。一方、初心者には各ファイルの関係が複雑に感じられることがあります。
3-3. Razor Pagesとは
Razor Pagesは、ページ単位で画面と処理を管理する開発方式です。
一般的には、次の2つのファイルを組み合わせます。
Index.cshtmlIndex.cshtml.csIndex.cshtmlにはHTMLを中心とした画面を記述し、Index.cshtml.csには画面表示やフォーム送信時のC#処理を記述します。
MVCよりもファイル同士の関係がわかりやすく、入力フォーム、一覧画面、管理画面などを作る初心者に適しています。
小規模から中規模のWebアプリや、画面中心の業務システムでは、Razor Pagesを選択するとシンプルに開発できます。
3-4. Blazorとは
Blazorは、C#を使って対話的なWeb画面を作るための仕組みです。
一般的なWeb開発では、ブラウザ上の動的な処理にJavaScriptを使います。Blazorでは、画面の部品やイベント処理をC#で記述できます。
Blazorには複数の実行方式があり、サーバー側で処理する構成や、WebAssemblyを利用してブラウザ側で動作させる構成などがあります。
C#の知識をフロントエンドにも活用できる点がメリットです。ただし、Web開発の基礎を理解するには、HTML、CSS、HTTP、JavaScriptの基本知識も役立ちます。
3-5. Web APIとは
Web APIは、HTML画面ではなく、主にJSON形式のデータを返すWebサービスです。
例えば、商品情報を返すAPIでは、次のようなJSONを返します。
{"id": 1,"name": "ノートパソコン","price": 120000}Web APIは、次のような場面で利用されます。
スマートフォンアプリへデータを提供する
ReactやVueなどで作られた画面と通信する
外部システムと情報を連携する
複数のサービス間でデータをやり取りする
ASP.NET Coreでは、Controllerを使う方法やMinimal APIを使う方法でWeb APIを作成できます。
3-6. 初心者はどのフレームワークから始めるべきか
Web開発が初めてで、画面とフォームを持つアプリを作りたい場合は、Razor Pagesから始める方法がおすすめです。
Razor Pagesはページ単位で構成されるため、利用者の操作とC#の処理を対応させやすいからです。簡単なToDoアプリや顧客管理アプリを作ることで、フォーム入力、データベース保存、一覧表示などの基本を学べます。
企業で使われる一般的な設計方法を学びたい場合や、ある程度規模の大きいWebアプリを作りたい場合は、ASP.NET Core MVCが候補になります。
C#だけで対話的な画面を作りたい場合はBlazor、スマホアプリや別のフロントエンドへデータを提供したい場合はWeb APIが適しています。
最初からすべての方式を学ぶ必要はありません。Razor PagesまたはMVCを一つ選び、Webアプリの基本的な流れを理解してから、BlazorやWeb APIへ進むとよいでしょう。
4. C# Webアプリ開発に必要な環境
4-1. .NET SDK
.NET SDKは、C#のプログラムを作成、ビルド、実行するための開発ツールです。
.NET SDKをインストールすると、dotnetコマンドを利用できるようになります。インストール後は、ターミナルやコマンドプロンプトで次のコマンドを実行して確認できます。
dotnet --versionバージョン番号が表示されれば、基本的な準備は完了です。
新しく学習を始める場合は、サポート期間の長いLTS版を選ぶと環境を安定させやすくなります。教材を利用するときは、教材が対象としている.NETのバージョンも確認しましょう。
4-2. Visual Studio
Visual Studioは、Microsoftが提供する統合開発環境です。
C#の入力補完、エラー表示、デバッグ、プロジェクト作成、パッケージ管理、データベース操作、Azureへの公開など、多くの機能が用意されています。
WindowsでC# Webアプリを学ぶ場合は、Visual Studioを利用すると環境構築を進めやすいでしょう。インストール時には、ASP.NETとWeb開発に必要なワークロードを選択します。
個人開発や学習では、利用条件を確認したうえでCommunityエディションを使用できます。
4-3. Visual Studio Code
Visual Studio Codeは、Windows、macOS、Linuxで利用できる軽量なコードエディターです。
.NET SDKとC#関連の拡張機能を組み合わせることで、ASP.NET Coreアプリを開発できます。プロジェクト作成や実行は、主にdotnetコマンドで行います。
Visual Studioよりも構成がシンプルで動作が軽い一方、必要な拡張機能やコマンド操作を自分で理解する場面が増えます。
macOSやLinuxで開発する場合や、ターミナル操作にも慣れたい場合に適しています。
4-4. SQL Server・SQLiteなどのデータベース
Webアプリでデータを保存するには、データベースを用意します。
C# Webアプリでよく使われるデータベースには、次のようなものがあります。
SQL Server
SQLite
PostgreSQL
MySQL
Azure SQL Database
SQLiteは、データを一つのファイルとして保存でき、専用のデータベースサーバーを用意する必要がありません。そのため、初心者の学習や小規模なサンプルアプリに適しています。
SQL Serverは企業向けシステムで使われることが多く、Visual StudioやAzureとの連携にも向いています。
まずはSQLiteでデータベース連携の基本を学び、必要に応じてSQL ServerやPostgreSQLへ進むとよいでしょう。
4-5. Git・GitHub
Gitは、ソースコードの変更履歴を管理するためのツールです。GitHubは、Gitで管理したコードをオンライン上に保存・共有できるサービスです。
Gitを使うと、変更前の状態に戻したり、機能ごとに作業を分けたりできます。複数人で開発する場合にも欠かせません。
初心者は、まず次の操作を覚えましょう。
git initgit add .git commit -m "Initial commit"GitHubへコードを公開すると、自分の学習記録や制作実績として活用できます。ただし、データベースのパスワード、APIキー、接続文字列などの機密情報を公開しないよう注意が必要です。
4-6. Windows・Mac・Linuxでの開発環境の違い
ASP.NET Coreは、Windows、macOS、Linuxで開発できます。
WindowsではVisual Studioを利用でき、C#向けの機能やGUIによる設定が充実しています。SQL ServerやIISを使った開発とも相性がよいため、初心者が取り組みやすい環境です。
macOSでは、.NET SDKとVisual Studio Codeなどを組み合わせて開発します。SQLite、PostgreSQL、Dockerなどを利用すれば、データベースを含む開発環境も構築できます。
Linuxでも、.NET SDKとVisual Studio Code、または好みのエディターを使って開発できます。本番サーバーとしてLinuxを利用するケースも多いため、コマンド操作やサーバー運用を学びたい人に向いています。
OSによって利用できるツールは異なりますが、ASP.NET Coreの基本的なコードは共通です。
5. C#でWebアプリを作る基本手順
5-1. 開発環境をインストールする
最初に.NET SDKと開発用エディターをインストールします。
WindowsでVisual Studioを使う場合は、インストーラーからASP.NETとWeb開発のワークロードを選択します。Visual Studio Codeを使う場合は、別途.NET SDKとC#関連の拡張機能を導入します。
インストール後、次のコマンドで.NET SDKが認識されていることを確認します。
dotnet --infoSDKの情報が表示されない場合は、インストール状況や環境変数を確認してください。
5-2. ASP.NET Coreプロジェクトを作成する
Razor Pages形式のプロジェクトは、次のコマンドで作成できます。
dotnet new webapp -n SampleWebAppcd SampleWebAppwebappはRazor Pagesプロジェクトのテンプレート、-n SampleWebAppはプロジェクト名の指定です。
MVCプロジェクトを作る場合は、次のコマンドを使用します。
dotnet new mvc -n SampleMvcAppWeb APIを作る場合は、次のように実行します。
dotnet new webapi -n SampleApi作成後にプロジェクトフォルダーをエディターで開きます。
5-3. 画面を作成する
Razor Pagesでは、通常Pagesフォルダー内に画面を作成します。
例えば、Pages/Hello.cshtmlを作成し、次のように記述します。
@page@model HelloModel<h1>C# Webアプリへようこそ</h1><p>@Model.Message</p>
続いて、Pages/Hello.cshtml.csを作成します。
using Microsoft.AspNetCore.Mvc.RazorPages;public class HelloModel : PageModel{public string Message { get; private set; } = string.Empty;
public void OnGet(){Message = "ASP.NET Coreで作成したページです。";}
}
アプリを実行して/Helloへアクセスすると、作成した画面が表示されます。
5-4. ルーティングを設定する
ルーティングは、URLと処理を結び付ける仕組みです。
Razor Pagesでは、.cshtmlファイルの先頭に@pageを記述することで、そのページへアクセスできるようになります。
@pagePages/Products/Index.cshtmlを作成した場合、一般的には/Productsまたは/Products/Indexでアクセスできます。
URLにIDを含めたい場合は、次のように指定できます。
@page "{id:int}"C#側では、URLから受け取った値を引数として使用します。
public void OnGet(int id){// idを使ってデータを取得する}MVCでは、Controller名、Action名、IDなどを使ったルーティングを設定します。
5-5. フォーム入力を受け取る
Razor Pagesでは、asp-forを使ってフォーム入力とC#のプロパティを結び付けられます。
<form method="post"><label asp-for="Name"></label><input asp-for="Name" /><button type="submit">送信</button></form>@if (!string.IsNullOrEmpty(Model.Message)){<p>@Model.Message</p>}
C#側では、BindProperty属性を付けて入力値を受け取ります。
using Microsoft.AspNetCore.Mvc;using Microsoft.AspNetCore.Mvc.RazorPages;public class ContactModel : PageModel{[BindProperty]public string Name { get; set; } = string.Empty;
public string Message { get; private set; } = string.Empty;public void OnPost(){Message = $"{Name}さん、送信ありがとうございます。";}
}
GETリクエストではOnGet、POSTリクエストではOnPostが呼び出されます。
5-6. データベースに保存する
データベースへの保存には、Entity Framework Coreを使用できます。
最初に、利用するデータベースに対応したパッケージを追加します。SQLiteを使う場合の例は次のとおりです。
dotnet add package Microsoft.EntityFrameworkCore.Sqlitedotnet add package Microsoft.EntityFrameworkCore.Design次に、データを表すModelと、データベース操作を担当するDbContextを作成します。
public class TodoItem{public int Id { get; set; }public string Title { get; set; } = string.Empty;public bool IsCompleted { get; set; }
}
using Microsoft.EntityFrameworkCore;public class AppDbContext : DbContext{public AppDbContext(DbContextOptions<AppDbContext> options): base(options){}
public DbSet<TodoItem> TodoItems => Set<TodoItem>();
}
Program.csでデータベースを登録します。
builder.Services.AddDbContext<AppDbContext>(options =>options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection")));データを保存するときは、AddとSaveChangesAsyncを使用します。
_context.TodoItems.Add(todoItem);await _context.SaveChangesAsync();5-7. 作成したWebアプリを実行して確認する
プロジェクトのフォルダーで次のコマンドを実行します。
dotnet runターミナルにアクセス先のURLが表示されるため、ブラウザで開きます。
コードの変更を自動的に検知しながら開発する場合は、次のコマンドが便利です。
dotnet watch run画面が表示されない場合は、ターミナルのエラーメッセージ、アクセスしているURL、ポート番号を確認します。HTTPS証明書に関する警告が出る場合は、開発用証明書の設定も確認しましょう。
6. 初心者向け：簡単なC# Webアプリの作成例
6-1. 作成するサンプルアプリの概要
ここでは、タスクを登録して一覧表示する簡単なToDoアプリを想定します。
実装する機能は次の2つです。
タスク名を入力して登録する
登録済みのタスクを一覧表示する
Razor Pages、Entity Framework Core、SQLiteを使用します。ログイン機能や編集・削除機能は追加せず、Webアプリの基本的な流れに集中します。
6-2. プロジェクト作成
ターミナルで次のコマンドを実行します。
dotnet new webapp -n TodoWebAppcd TodoWebApp続いて、Entity Framework CoreのSQLite用パッケージを追加します。
dotnet add package Microsoft.EntityFrameworkCore.Sqlitedotnet add package Microsoft.EntityFrameworkCore.Designマイグレーション用コマンドを利用できない場合は、Entity Framework CoreのCLIツールを導入します。
dotnet tool install --global dotnet-efすでにインストール済みの場合は、必要に応じて更新します。
6-3. 画面とモデルの作成
Models/TodoItem.csを作成します。
using System.ComponentModel.DataAnnotations;namespace TodoWebApp.Models;
public class TodoItem{public int Id { get; set; }
<span data-placeholder-token="true" class="text-token-text-primary cursor-text rounded-sm" style="background-color: color-mix(in srgb, var(--theme-user-selection-bg, var(--selection)) 30%, transparent); padding-top: 4px; padding-bottom: 4px;">[Required(ErrorMessage = "タスク名を入力してください。")]</span><span data-placeholder-token="true" class="text-token-text-primary cursor-text rounded-sm" style="background-color: color-mix(in srgb, var(--theme-user-selection-bg, var(--selection)) 30%, transparent); padding-top: 4px; padding-bottom: 4px;">[StringLength(100, ErrorMessage = "タスク名は100文字以内で入力してください。")]</span><span data-placeholder-token="true" class="text-token-text-primary cursor-text rounded-sm" style="background-color: color-mix(in srgb, var(--theme-user-selection-bg, var(--selection)) 30%, transparent); padding-top: 4px; padding-bottom: 4px;">[Display(Name = "タスク名")]</span>public string Title { get; set; } = string.Empty;public bool IsCompleted { get; set; }
}
次に、Data/AppDbContext.csを作成します。
using Microsoft.EntityFrameworkCore;using TodoWebApp.Models;namespace TodoWebApp.Data;
public class AppDbContext : DbContext{public AppDbContext(DbContextOptions<AppDbContext> options): base(options){}
public DbSet<TodoItem> TodoItems => Set<TodoItem>();
}
appsettings.jsonに接続文字列を追加します。
{"ConnectionStrings": {"DefaultConnection": "Data Source=todo.db"}}実際のappsettings.jsonにはログ設定なども含まれるため、既存の内容を削除せず、ConnectionStringsを追加してください。
Program.csにデータベースの設定を追加します。
using Microsoft.EntityFrameworkCore;using TodoWebApp.Data;var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddDbContext<AppDbContext>(options =>options.UseSqlite(builder.Configuration.GetConnectionString("DefaultConnection")));
var app = builder.Build();
if (!app.Environment.IsDevelopment()){app.UseExceptionHandler("/Error");app.UseHsts();}
app.UseHttpsRedirection();app.UseRouting();app.UseAuthorization();app.MapStaticAssets();app.MapRazorPages();
app.Run();
テンプレートや.NETのバージョンによって、Program.csの初期コードは異なる場合があります。既存の処理を残しながら、AddDbContextの設定を追加することが重要です。
6-4. データ登録・一覧表示の実装
Pages/Todos/Index.cshtml.csを作成します。
using Microsoft.AspNetCore.Mvc;using Microsoft.AspNetCore.Mvc.RazorPages;using Microsoft.EntityFrameworkCore;using TodoWebApp.Data;using TodoWebApp.Models;namespace TodoWebApp.Pages.Todos;
public class IndexModel : PageModel{private readonly AppDbContext _context;
public IndexModel(AppDbContext context){_context = context;}public List<TodoItem> TodoItems { get; private set; } = [];<span data-placeholder-token="true" class="text-token-text-primary cursor-text rounded-sm" style="background-color: color-mix(in srgb, var(--theme-user-selection-bg, var(--selection)) 30%, transparent); padding-top: 4px; padding-bottom: 4px;">[BindProperty]</span>public TodoItem Input { get; set; } = new();public async Task OnGetAsync(){TodoItems = await _context.TodoItems.OrderByDescending(item => item.Id).ToListAsync();}public async Task<IActionResult> OnPostAsync(){if (!ModelState.IsValid){TodoItems = await _context.TodoItems.OrderByDescending(item => item.Id).ToListAsync();return Page();}_context.TodoItems.Add(Input);await _context.SaveChangesAsync();return RedirectToPage();}
}
続いて、Pages/Todos/Index.cshtmlを作成します。
@page@model TodoWebApp.Pages.Todos.IndexModel<h1>ToDoリスト</h1>
<form method="post"><div asp-validation-summary="ModelOnly"></div>
<div><label asp-for="Input.Title"></label><input asp-for="Input.Title" /><span asp-validation-for="Input.Title"></span></div><button type="submit">登録</button>
</form>
<hr />
@if (Model.TodoItems.Count == 0){<p>登録されたタスクはありません。</p>}else{<ul>@foreach (var item in Model.TodoItems){<li>@item.Title</li>}</ul>}
@section Scripts {<partial name="_ValidationScriptsPartial" />}
データベースを作成するため、マイグレーションを実行します。
dotnet ef migrations add InitialCreatedotnet ef database updateアプリを起動します。
dotnet watch runブラウザで/Todosへアクセスし、タスクを入力して登録できれば完成です。
登録後にRedirectToPageを実行しているのは、ブラウザの再読み込みによる二重送信を防ぎやすくするためです。このような処理の流れは、Post-Redirect-Getパターンと呼ばれます。
6-5. エラーが出たときの確認ポイント
サンプルどおりに作成しても、環境やバージョンによってエラーが発生することがあります。
最初に確認したいのは、ターミナルに表示されるエラーメッセージです。エラー番号や、問題が発生したファイル名、行番号を確認します。
よくある原因には次のものがあります。
名前空間が実際のプロジェクト名と一致していない
必要な
usingが記述されていないNuGetパッケージが追加されていない
接続文字列のJSON構文が間違っている
AddDbContextの設定を追加していないマイグレーションを実行していない
ファイル名やフォルダー名が間違っている
プロジェクトとは別のフォルダーでコマンドを実行している
複数のエラーが表示された場合は、最初に表示されているエラーから確認しましょう。一つの記述ミスによって、後続のエラーが連続して発生している場合があるためです。
7. C# Webアプリ開発でよく使う機能
7-1. ログイン・認証機能
会員向けサイトや社内システムでは、利用者を識別するためのログイン機能が必要です。
ASP.NET Coreには、ユーザー登録、ログイン、ログアウト、パスワード管理、権限管理などを実装するためのASP.NET Core Identityがあります。
認証は「誰がアクセスしているか」を確認する仕組みです。認可は「その利用者が特定の画面や機能を利用できるか」を判断する仕組みです。
例えば、一般利用者は商品を閲覧でき、管理者だけが商品を登録・削除できるようにする場合、認可による制御を行います。
パスワードをそのままデータベースへ保存してはいけません。自作の簡易的な認証処理ではなく、実績のある認証ライブラリや外部の認証サービスを利用することが重要です。
7-2. CRUD機能
CRUDは、データ操作の基本となる4つの機能を表します。
Create：データを新規登録する
Read：データを取得・表示する
Update：データを更新する
Delete：データを削除する
顧客管理アプリであれば、顧客の登録、一覧・詳細表示、編集、削除がCRUDに該当します。
ASP.NET CoreとEntity Framework Coreを組み合わせることで、CRUD機能を実装できます。最初の練習アプリとして、商品管理、書籍管理、ToDo管理などのCRUDアプリを作ると、Web開発の基本を一通り学べます。
7-3. バリデーション
バリデーションは、利用者が入力した値が条件を満たしているか確認する処理です。
例えば、次のような入力チェックを行います。
必須項目が入力されているか
文字数が上限を超えていないか
数値が指定範囲内か
メールアドレスの形式になっているか
日付の前後関係が正しいか
C#では、ModelのプロパティにData Annotationsを付ける方法があります。
[Required][StringLength(50)]public string Name { get; set; } = string.Empty;[Range(0, 1000000)]public decimal Price { get; set; }
画面側のチェックだけでは不十分です。利用者はブラウザの機能や外部ツールを使って不正な値を送信できるため、サーバー側でも必ず検証します。
7-4. データベース操作
Entity Framework Coreでは、C#のコードを使ってデータベースを操作できます。
データの追加は次のように行います。
_context.Products.Add(product);await _context.SaveChangesAsync();一覧取得の例は次のとおりです。
var products = await _context.Products.OrderBy(product => product.Name).ToListAsync();更新では対象のデータを取得して、プロパティを変更します。
var product = await _context.Products.FindAsync(id);if (product is not null){product.Price = newPrice;await _context.SaveChangesAsync();}
削除では、対象を取得してRemoveを実行します。
var product = await _context.Products.FindAsync(id);if (product is not null){_context.Products.Remove(product);await _context.SaveChangesAsync();}
実務では、検索条件、ページ分割、トランザクション、同時更新、インデックス、処理速度なども考慮します。
7-5. API連携
Webアプリでは、外部のAPIから天気、地図、決済、配送状況などの情報を取得することがあります。
C#では、HttpClientを使ってHTTPリクエストを送信できます。
var response = await httpClient.GetAsync("https://api.example.com/products");response.EnsureSuccessStatusCode();var json = await response.Content.ReadAsStringAsync();
実際の開発では、IHttpClientFactoryを利用してHttpClientを管理する方法が一般的です。
API連携を実装する際は、通信失敗、タイムアウト、レスポンス形式の変更、利用回数制限、認証情報の管理などを考慮します。APIキーはソースコードへ直接書かず、環境変数や安全な設定管理サービスを利用しましょう。
7-6. エラーハンドリング
Webアプリでは、データベース接続の失敗、存在しないデータへのアクセス、外部APIの停止など、さまざまなエラーが発生します。
想定できる問題については、条件分岐や例外処理を使って対応します。
try{await _context.SaveChangesAsync();}catch (DbUpdateException){ModelState.AddModelError(string.Empty,"データを保存できませんでした。時間をおいて再度お試しください。");}利用者に例外の詳細やスタックトレースをそのまま表示すると、セキュリティ上の問題につながる可能性があります。本番環境では利用者向けのエラーページを表示し、詳しい情報はサーバーのログへ記録します。
7-7. セキュリティ対策
Webアプリを公開する場合、セキュリティ対策は必須です。
特に注意したい項目は次のとおりです。
HTTPSを使用する
入力値をサーバー側で検証する
SQLインジェクションを防ぐ
クロスサイトスクリプティングを防ぐ
CSRF対策を行う
認証情報を安全に保存する
利用者ごとの権限を確認する
機密情報をソースコードへ書かない
エラーメッセージに内部情報を含めない
.NETや利用パッケージを適切に更新する
ログへパスワードや個人情報を出力しない
Entity Framework Coreのパラメーター化されたクエリや、Razorの標準的なエンコード機能は、代表的な攻撃への対策に役立ちます。ただし、フレームワークを使うだけですべて安全になるわけではありません。認証、入力検証、設定管理、運用監視を含めて対策する必要があります。
8. C# Webアプリを公開する方法
8-1. ローカル環境と本番環境の違い
開発中に自分のパソコンで動かしている状態をローカル環境と呼びます。利用者がインターネットや社内ネットワークからアクセスする環境が本番環境です。
ローカル環境では、開発用のログや詳しいエラー情報を表示できます。一方、本番環境では、セキュリティと安定性を優先しなければなりません。
本番環境では、次のような準備が必要です。
本番用データベース
HTTPS証明書
ドメイン
本番用の接続文字列
ログの保存先
バックアップ
監視と障害通知
アクセス権限
機密情報の管理
開発用の設定をそのまま本番環境へ持ち込まないようにしましょう。
8-2. Azure App Serviceで公開する
Azure App Serviceは、Webアプリをクラウド上で実行するためのサービスです。
サーバーOSの細かな管理を減らしながら、ASP.NET Coreアプリを公開できます。Visual StudioやGitHub Actionsなどを利用したデプロイにも対応しています。
基本的な公開の流れは次のとおりです。
Azure上にApp Serviceを作成する
実行する.NET環境を選択する
データベースや環境変数を設定する
アプリをビルドしてデプロイする
発行されたURLへアクセスして確認する
Azure SQL Databaseやストレージ、監視サービスなど、ほかのAzureサービスとも組み合わせられます。
利用するプランやデータベースによって料金が発生するため、学習目的でも課金条件と使用量を確認することが大切です。
8-3. IISで公開する
IISは、Windows Serverなどで利用できるWebサーバーです。
社内システムやWindowsを中心とした環境では、ASP.NET CoreアプリをIISへ公開する方法が使われます。
アプリを発行するには、次のようなコマンドを実行します。
dotnet publish -c Release -o ./publish生成されたファイルをサーバーへ配置し、IISのWebサイトやアプリケーションプールを設定します。
サーバー側には、ASP.NET CoreアプリをIISで実行するためのHosting Bundleが必要になる場合があります。公開後は、アプリケーションプールの権限、ログ、接続文字列、ファイアウォールなども確認します。
8-4. Dockerを使って公開する
Dockerを使うと、アプリと実行に必要な環境をコンテナとしてまとめられます。
開発環境と本番環境の差を小さくしやすく、Linuxサーバーやクラウド、コンテナ管理サービスなどへ展開できます。
ASP.NET Coreアプリでは、複数段階のビルドを行うDockerfileがよく使われます。
FROM mcr.microsoft.com/dotnet/sdk AS buildWORKDIR /srcCOPY . .RUN dotnet publish -c Release -o /app/publish
FROM mcr.microsoft.com/dotnet/aspnetWORKDIR /app
COPY --from=build /app/publish .ENTRYPOINT ["dotnet", "TodoWebApp.dll"]
実際には、利用する.NETのバージョンに対応したイメージタグを指定します。また、ポート、環境変数、HTTPS、データの永続化なども設定する必要があります。
8-5. 公開前に確認すべきポイント
Webアプリを公開する前に、最低限次の項目を確認しましょう。
Release構成でビルドできるか
本番用データベースへ接続できるか
データベースのマイグレーションを適用したか
HTTPSが有効になっているか
接続文字列やAPIキーが公開されていないか
開発用の詳細なエラー画面が無効になっているか
ログインしていない利用者が管理画面へ入れないか
入力値の検証が行われているか
404や500エラー用の画面があるか
ログを確認できるか
バックアップと復旧方法が決まっているか
スマートフォンを含む複数の画面サイズで確認したか
公開は開発の終了ではなく、運用の開始です。障害対応、セキュリティ更新、データのバックアップまで考えておく必要があります。
9. C# Webアプリ開発で初心者がつまずきやすいポイント
9-1. .NETとASP.NET Coreの違いがわからない
.NETは、C#などでアプリケーションを開発・実行するための広いプラットフォームです。
ASP.NET Coreは、その.NET上でWebアプリやWeb APIを開発するためのフレームワークです。
簡単に整理すると、C#がプログラミング言語、.NETがアプリを開発・実行するための基盤、ASP.NET CoreがWeb開発用の仕組みです。
C#で作れるのはWebアプリだけではありません。.NETを使えば、コンソールアプリ、デスクトップアプリ、クラウドサービスなども開発できます。
9-2. MVCの役割が理解しにくい
MVCでは複数のファイルが関係するため、初心者は処理の流れを見失いやすくなります。
まずは、次の流れを順番に追いましょう。
ブラウザがURLへアクセスする
ルーティングが対象のControllerを選ぶ
ControllerのActionが実行される
必要に応じてModelやデータベースを利用する
ControllerがViewへデータを渡す
ViewがHTMLを生成する
ブラウザへHTMLが返される
最初は処理を複雑に分割しすぎず、一覧表示や登録など、一つの機能がどのファイルを通るか確認すると理解しやすくなります。
9-3. データベース接続でエラーになる
データベース接続エラーでは、接続文字列、サーバー名、データベース名、認証情報などを確認します。
SQL Serverを使用している場合は、データベースサービスが起動しているか、ログイン方法が正しいか、ネットワーク接続が許可されているかも確認が必要です。
SQLiteの場合は、データベースファイルを作成するフォルダーへの書き込み権限や、マイグレーションの適用状況を確認します。
Entity Framework Coreを利用している場合は、次の点も確認してください。
データベース用のProviderが追加されているか
DbContextがサービスへ登録されているか接続文字列の名前が一致しているか
マイグレーションが作成されているか
データベース更新コマンドを実行したか
9-4. 画面表示と処理の流れがわからない
画面を表示するGET処理と、フォームを送信するPOST処理を分けて考えると理解しやすくなります。
Razor Pagesでは、一般的に次のように対応します。
public void OnGet(){// 画面を表示する前の処理}public IActionResult OnPost(){// フォーム送信後の処理return Page();}
MVCでは、HttpGetとHttpPostを付けたActionを用意することがあります。
ブラウザの開発者ツールにあるNetwork機能を使うと、どのURLへどのHTTPメソッドで通信しているか確認できます。コードだけでなく、実際のHTTP通信を確認すると理解が進みます。
9-5. パッケージやバージョン管理で混乱する
.NETでは、外部ライブラリをNuGetパッケージとして追加します。
パッケージには対応する.NETのバージョンがあるため、教材と自分の環境でバージョンが異なると、コードがそのまま動かない場合があります。
問題が発生したときは、次の項目を確認します。
dotnet --versiondotnet list packageプロジェクトファイルのTargetFrameworkも確認しましょう。
<TargetFramework>netX.0</TargetFramework>学習中は、理由なくパッケージを最新のメジャーバージョンへ変更しないほうが安全です。教材の対象バージョンに合わせ、変更する場合は公式の移行情報を確認します。
10. C# Webアプリ開発を効率よく学ぶ方法
10-1. C#の基礎文法を学ぶ
最初に、変数、条件分岐、繰り返し、メソッド、クラスの基本を学びます。
文法を読んだだけでは定着しにくいため、簡単なコンソールアプリを作りながら練習しましょう。数値の合計、文字列の検索、商品データの並べ替えなど、小さな課題で十分です。
次に、Webアプリでよく使うコレクション、LINQ、例外処理、非同期処理へ進みます。
すべてを暗記する必要はありません。コードを読んだときに意味を理解でき、必要な書き方を調べられる状態を目指しましょう。
10-2. ASP.NET Coreの基本を学ぶ
C#の基本を学んだら、ASP.NET Coreのプロジェクトを作成します。
最初に理解したい項目は次のとおりです。
プロジェクトのフォルダー構成
Program.csの役割ルーティング
GETとPOST
Razor構文
フォーム入力
Model Binding
バリデーション
依存性注入
設定ファイル
ログ出力
最初から高度なアーキテクチャを採用するより、リクエストを受け取り、C#で処理し、画面を返す基本的な流れを理解することが重要です。
10-3. 小さなWebアプリを作って理解する
学習内容を定着させるには、実際に動くWebアプリを完成させる必要があります。
初心者向けの題材には、次のようなものがあります。
ToDo管理
メモ管理
書籍管理
商品管理
支出記録
日報管理
簡単な掲示板
最初は、登録と一覧表示だけでも構いません。その後、詳細表示、編集、削除、検索、並べ替えなどを追加します。
一つのアプリに機能を追加していくことで、CRUD、ルーティング、バリデーション、データベース操作の関係を理解できます。
10-4. データベース連携を実装する
Webアプリの基本画面を作れるようになったら、Entity Framework Coreを使ったデータベース連携を学びます。
学習の順番は次のようにすると進めやすいでしょう。
Modelを作る
DbContextを作る接続文字列を設定する
マイグレーションを作成する
データベースへ反映する
データを登録する
データを一覧表示する
更新・削除を追加する
複数テーブルの関連を学ぶ
慣れてきたら、SQLの基本も学びましょう。Entity Framework Coreを使用する場合でも、発行されるSQLやデータベースの仕組みを理解していると、エラーや性能問題に対応しやすくなります。
10-5. GitHubにコードを公開する
作成したアプリはGitで履歴を管理し、GitHubへ公開すると学習記録になります。
READMEには、次の内容を記載するとプロジェクトが伝わりやすくなります。
アプリの概要
作成した目的
主な機能
使用技術
実行方法
画面の画像
工夫した点
今後追加したい機能
コミットメッセージには、変更内容がわかる言葉を使用します。
Add todo creation formImplement validation for titleAdd edit and delete features公開前には、接続文字列、パスワード、APIキー、個人情報が含まれていないか必ず確認してください。
10-6. 実務レベルに近づくために学ぶべきこと
基本的なCRUDアプリを作れるようになったら、次の内容を学ぶと実務レベルに近づけます。
オブジェクト指向と設計原則
依存性注入
レイヤー分割
認証・認可
単体テストと結合テスト
Web API
JavaScriptやフロントエンド技術
SQLとデータベース設計
Gitを使ったチーム開発
Docker
CI/CD
クラウドへの公開
ログ、監視、障害対応
Webセキュリティ
パフォーマンス改善
実務では、コードを書く力だけでなく、要件を整理する力、エラーを調査する力、既存コードを読む力、チーム内で説明する力も重要です。
11. csharp web applicationに関するよくある質問
11-1. C#はWebアプリ開発に向いている？
C#はWebアプリ開発に向いている言語です。
ASP.NET Coreには、ルーティング、入力検証、認証、データベース連携、API作成など、Web開発に必要な機能がそろっています。静的型付けによって間違いを見つけやすく、開発ツールの支援も充実しています。
特に、業務システム、大規模なサービス、Microsoft製品やAzureを利用する環境との相性に優れています。
一方で、画面側ではHTMLやCSSの知識も必要です。アプリの構成によってはJavaScriptも学ぶ必要があります。
11-2. C# Webアプリ開発は初心者でもできる？
初心者でもC# Webアプリを作れます。
ただし、最初からログイン、決済、複雑なデータベース設計などを含むサービスを作ろうとすると、学習範囲が広くなりすぎます。
最初は、次のような順番で進めるとよいでしょう。
C#の基本文法を学ぶ
Razor Pagesで文字を表示する
フォームから値を受け取る
SQLiteへデータを保存する
登録データを一覧表示する
編集・削除を追加する
バリデーションを追加する
小さな成功を積み重ねることで、Webアプリ全体の仕組みを理解できます。
11-3. ASP.NET CoreとBlazorはどちらを選ぶべき？
ASP.NET Coreは、C#によるWeb開発全体を支えるフレームワークです。BlazorはASP.NET Coreと組み合わせて利用できる、対話的なWeb UIを構築するための仕組みです。
そのため、両者は完全に別の選択肢ではありません。
一般的なフォーム中心のWebサイトや管理画面を作りたい場合は、Razor PagesまたはMVCから始めると理解しやすいでしょう。
画面上で頻繁に状態が変化するアプリをC#中心で作りたい場合は、Blazorが候補になります。
初心者は、まずHTTP、ルーティング、フォーム送信、データベース連携などの基本を学び、その後Blazorへ進む方法が適しています。
11-4. C# Webアプリ開発に必要な学習時間は？
必要な学習時間は、プログラミング経験、作りたいアプリの規模、1日に確保できる時間によって異なります。
未経験者の場合、C#の基本文法を学んだ後、簡単なCRUDアプリを完成させるまでには、継続的な学習と実装練習が必要です。
学習期間だけを目標にするより、次のような到達点を設定すると進捗を確認しやすくなります。
C#のクラスとメソッドを理解する
Razor PagesまたはMVCで画面を表示する
フォーム入力を受け取る
データベースへ登録する
CRUD機能を作る
ログイン機能を追加する
Webアプリを外部へ公開する
短期間で教材を読むだけではなく、自分でエラーを調査しながらアプリを完成させることが重要です。
11-5. 無料でC# Webアプリを作れる？
開発環境については、無料で用意できます。
.NET SDK、Visual Studio Code、Git、SQLiteなどを使えば、費用をかけずにC# Webアプリを開発できます。条件を満たす場合は、Visual Studio Communityも利用できます。
自分のパソコン上で開発・実行するだけであれば、通常はサーバー料金も必要ありません。
インターネット上へ公開する場合は、利用するクラウド、サーバー、独自ドメイン、データベースなどによって費用が発生することがあります。無料枠が用意されているサービスでも、利用量や期間の条件を確認しましょう。
11-6. C# Webアプリ開発で就職・転職は目指せる？
C#とASP.NET Coreを学ぶことで、Webエンジニアや業務システム開発者を目指せます。
就職・転職を目指す場合は、文法を知っているだけでなく、実際に動くアプリを作れることが重要です。
制作物には、次の機能を含めると学習内容を示しやすくなります。
ログイン・ログアウト
CRUD
入力値の検証
検索・並べ替え
ページ分割
権限管理
複数テーブルの関連
エラーハンドリング
テスト
クラウドへの公開
GitHubでソースコードとREADMEを公開し、設計理由や工夫した点を説明できるようにしましょう。
また、C#だけでなく、HTML、CSS、JavaScript、SQL、HTTP、Gitの基本も求められます。求人によって使用技術は異なるため、応募先で使われている.NETやフレームワーク、データベース、クラウド環境を確認することが大切です。
まとめ
csharp web applicationを開発する場合は、C#とASP.NET Coreを中心に学習します。
ASP.NET Coreでは、Razor Pages、MVC、Blazor、Web APIなど、目的に応じた開発方式を選択できます。Web開発が初めての場合は、Razor Pagesを使って簡単なCRUDアプリを作ると、画面表示、フォーム送信、ルーティング、データベース連携の基本を理解しやすいでしょう。
開発環境には.NET SDK、Visual StudioまたはVisual Studio Codeを使用します。データベースは、学習段階では扱いやすいSQLiteから始め、必要に応じてSQL ServerやPostgreSQLへ進む方法があります。
C# Webアプリ開発では、C#の文法だけでなく、HTML、CSS、HTTP、データベース、Git、セキュリティなどの知識も必要です。一度にすべてを覚えようとせず、小さなアプリへ機能を追加しながら学びましょう。
最初の目標として、データの登録・一覧表示・編集・削除ができるWebアプリを完成させることをおすすめします。その後、ログイン、API連携、テスト、Docker、クラウド公開などを学ぶことで、実務に近いC# Webアプリを開発できるようになります。