zukucode
主にWEB関連の情報を技術メモとして発信しています。
ASP.NET

WebFormからの脱却 ASP.NET Core + React + TypeScriptで作るWebアプリ

ASP.NET Core + React + TypeScriptでWebアプリを作成する方法を数回に分けて説明していきます。

また、Dockerを使った開発環境の構築も説明します。

このページは概要と目次のページです。

概要

.NET Frameworkから.NET Core(.NET5 〜)に移行することになり、今までのVB.NET + WebFormのようなレガシーな環境から、C# + WebAPI + フロントエンド（React、Vueなど）へ作り変えることが多くなってきました。

レガシーなASP.NET WebFormのWebアプリからの脱却を図るため、新しい環境でのプロジェクト構成を検討している人に読んでいただきたい記事になります。

言語、環境

開発環境や言語は以下を使用しています。

  • Docker
  • VSCode
  • .NET6 ASP.NET(C#)
  • PostgreSQL
  • React
  • TypeScript

ASP.NET Core

レガシー環境でよく見られる3層アーキテクチャではなく、DIコンテナを使ったDependency Injectionを使用し、クリーンアーキテクチャで実装します。

3層アーキテクチャ

プレゼンテーション層

↓

アプリケーション層

↓

データアクセス層

クリーンアーキテクチャ

プレゼンテーション層

↓

アプリケーション層（ドメイン層）

↑(依存関係の逆転)

インフラストラクチャ層

フロントエンド

React + TypeScriptのプロジェクトで実装します。

TypeScriptを導入することにより、事前に型チェックなどが行えるためビルドエラーを検出できるようになるため、実装効率も上がり、実行時エラーが発生する可能性も格段に減ります。

eslintやprettierを使用して、コーディング規約のチェックやコードフォーマットなどの設定も自動で出来るようにします。

目次

各記事へのリンク一覧です。随時更新中です。

開発環境の構築

プロジェクトの作成

データベースの構築

クリーンアーキテクチャ

ASP.NET

関連記事