Turn what you know into an opportunity and reach millions around the world.

Your cart is empty.

【初心者向け】C#+ASP.NET+TypeScript+HTMXで作るSPAアプリケーション

C#で作るWEBアプリケーション。初心者でも簡単に作れます。

Created by樋口昭太郎樋口

Last updated 2/2025

Japanese

Japanese [Auto],

What you'll learn

C#、ASP.NET、Azure、HTMXの基礎について学べます。
C#の基本的な構文とその使い方について学べます。
ASP.NETの基本的な機能について学べます。URLルーティング、Razorビュー、Minimal API、フィルタなどについて学べます。
ASP.NETでTypeScriptを適切に管理する手法を学べます。大規模プロジェクトで適切に機能ごとにファイルを分離して管理する方法を解説します。
HTMXの基本的な機能について学べます。
実際にWEBアプリをインターネットに公開するまでの方法を紹介します。
Azureへのデプロイ方法を学べます。

Course content

5 sections • 36 lectures • 1h 12m total length

環境の準備。必要なツールは3つだけ！0:13
Visual Studioの基本操作。ウィンドウ位置を調整しよう！1:21
初めてのWEBプロジェクトの作成0:19
デバッグの仕方。ブレイクポイントとウォッチウィンドウがあればだいたい大丈夫！0:34
GitHubへプッシュしてソースコードの変更履歴を管理しよう。0:45

最初のページの作成。Mapメソッドによるルーティングについて1:40
Nugetパッケージについて。HigLabo.Webを参照設定する0:24
Razorビューを使ってHTMLのレスポンスを生成する2:51
Devツールを活用し正しいHTMLを生成するように修正する2:54
Layout.cshtmlファイルの追加1:50
TODOの追加画面を作成する6:06

データベースを作成する0:27
テーブルを作成する0:14
接続文字列を保持する設定ファイルを作成する1:08
クエリを生成してテーブルにレコードを追加する3:23
DIで設定ファイルの取得部分をリファクタリングする1:36
ストアドプロシージャについて解説。C#から呼び出す。1:32
SqlCommandの生成処理をコマンドパターンでクラスにする2:58
DbSharpApplicationの紹介5:17
タスク一覧画面でモデルクラスを使ってデータベースから取得したTODOを表示する。4:12
HTMXのレスポンスヘッダーを活用してナビゲーションを改良する1:04
TODOの編集画面を作成しTODOの編集と削除ができるようにする5:53

TODOの追加画面と編集画面を統合する2:38
削除機能を実装する1:08
入力値の検証をしてその結果をhx-swapでセットする。1:54
_ViewImports.cshtmlファイルを追加する0:23
TodoRecordクラスを作成する0:44
TodoListPanel.cshtmlで画面の一部を部品化する1:25
ロードボタンで部品化したTodoListPanel.cshtmlを表示させる1:18
HTMXのロードイベントを活用する0:34
締切日でのデータのフィルタ機能を実装する2:38
TagHelperを作成し入力部分を部品する3:14

Requirements

プログラミング経験は不要。ゼロから全て解説。最後には自分の作成したアプリをクラウドで公開します。

Description

C#で作るWEBアプリケーション。データベースと連携するTODOアプリを作ります。

ASP.NETのMinimal APIを活用し、フロントはTypeScriptとHTMXでSPAアプリケーションを構築する方法を解説します。

Who this course is for:

C#でWEBアプリを作ってみたい開発者
ASP.NETでHTMXを活用したSPAを作ってみたい開発者
データベース連携をするWEBアプリを作ってみたい開発者