【初心者向け】C#忘れそうなので、TODOアプリでASP.NET Coreを復習してみた【画面起動編】

Last updated at 2025-07-31Posted at 2025-07-28

こんにちは！！
本当はもっと早めに続きを投稿する予定だった🍞焼きたてパン（@kitchen-craft）です。

前回の記事では「開発環境構築編」ということで、統合開発環境についてやフレームワークについての内容にも簡単に触れながら、「🔵Visual Studio 2022」🔵をインストールするところまで進めました！

前回の記事をまだお読みでない方は、以下のリンクからぜひ読み始めてもらえたらうれしいです！　👇👇👇👇👇👇👇👇👇

🧭 目次

🎯 この記事の対象
✅ STEP 1：Visual Studio 2022を起動してみよう！
✅ STEP 2：テンプレートを選択しよう！
✅ STEP 3：作業を行うフォルダを選択しよう
- 🧠 補足：「ソリューション」って何？
✅ STEP 4：ターゲットフレームワークや認証方式などを設定しよう！
✅ STEP 5：プロジェクトを作成！準備は完了！
- 🛠 このシリーズでは、以下の流れでTODOアプリを作っていきます：

🎯 この記事の対象

「Visual Studio」って聞いたことあるけど、どうやって使うの？

HTMLで文字を画面に出すとか、「画面を作る」って何をどうすれば？

帰ってきたら眠くなっちゃって作業も記事も作られへん...

そんなあなた（＝未来の私）に向けて、Visual Studioを使ってASP.NET Core MVCの画面を立ち上げて、 画面に文字を表示するところまでを丁寧に解説していきます！

とくに今回では...

📄 標準で作られる初期ページを動かしてみてみよう！
という流れで、一歩ずつ一緒にTODOアプリを作っていきましょう！

💬 途中で「ここよく分からん！」ってなったら、ぜひコメントしてください！
私が焼きたてのかぎり返信していきます🍞🔥

✅ STEP 1：Visual Studio 2022を起動してみよう！

Visual Studio 2022をインストールして起動すると、まずこんな画面が表示されます👇

今回は 「新しいプロジェクトの作成（N)」 を選択するんだけど、ほかの項目はこんな感じ👇

選択肢	説明
リポジトリのクローン	バージョン管理と呼ばれるツールから作成するもの。今回はまだ使わないけど現場では必須の内容なのでまた後で説明します。
プロジェクトやソリューションを開く	以前に作ったアプリを再編集するときに使います。今はまだ何も作ってないのでスルーでOK！
ローカルフォルダーを開く	ソリューション形式ではないコードフォルダーを開くときに使います。初心者の方は基本使わないです。
新しいプロジェクトの作成	ここからC#で新しいTODOアプリを作る準備を始められます！今回はこれを選択します！

それでは 「新しいプロジェクトの作成（N)」 を選択してみましょう！！

✅ STEP 2：テンプレートを選択しよう！

🔽 「新しいプロジェクトの作成」をクリックすると、
以下のようにプロジェクトテンプレートを選択する画面が表示されます。

プログラムを１から作るとなるとかな～り時間がかかるため、ここであらかじめ必要な機能がまとまった「テンプレート」を選択することで、作業の開始を早めることができますm(__)m

項目	説明
🔎 上部の検索欄	作りたいアプリのキーワードを入力してテンプレートを絞り込むことができます。例：「ASP.NET Core」「MVC」など
📁 一覧	検索または左側のフィルターに基づいて、使用可能なテンプレートがずらっと表示されます。

✅ 今回使うテンプレートはこれ！
🎯 今回は「ASP.NET Core Web アプリ（Model-View-Controller）」を選びます！
検索欄に以下を入力してフィルターをかけましょう：

ASP.NET Core Web アプリ（Model-View-Controller）

🖱️ 見つけたらテンプレートをクリックし、右下の「次へ」を押します！

✅ STEP 3：作業を行うフォルダ📁を選択しよう！

🖊️ テンプレートを選んで「次へ」を押すと、
以下のようなプロジェクトの構成を設定する画面が表示されます。

🧾 入力する3つの項目

項目名	内容	備考
プロジェクト名	作成するプロジェクトの名前を入力します	例：`TodoApp` など、自由でOK！
場所	ソリューションの保存場所を指定します	保存したいフォルダを選べばOK（デフォルトでも可）
ソリューション名	通常はプロジェクト名と同じでOKです	複数プロジェクトをまとめたいときは別名にすることも

🧠 補足：「ソリューション」って何？

ソリューションとは、プロジェクトの集合体のようなものです。
1つのソリューションに複数のプロジェクト（例：Webアプリ、API、共通ライブラリなど）を含めることができます。
めちゃくちゃ簡単にいうとプロジェクトをまとめるおっきいフォルダ📁

初心者の場合は「とりあえず1つのプロジェクト＝1つのソリューション」でOK！
今後もっと複雑なアプリを作るってなったときに、機能ごとにプロジェクトを分けると、管理がしやすくなったりするので、そのうち説明します！🐡

入力が終わったら「次へ」をクリック！

✅ STEP 4：ターゲットフレームワークや認証方式などを設定しよう！

🧭 ここではプロジェクトの技術的な設定をしていきます。
初心者の方は、基本的に**デフォルトのまま進めてOK！**です！

以下のような画面が表示されます👇
（※テンプレートとして「ASP.NET Core Web アプリ（Model-View-Controller）」を選んでいる前提です）

項目名	内容の説明	焼きたてパン的ポイント🍞
フレームワーク (.NET Framework)	アプリの土台となる.NETのバージョン。新しいほど高速で便利な機能が増えてるよ。最新の安定版（例：.NET 7や8）を選ぼう！	とりあえず最新バージョンでOK！迷ったらデフォルトで！
認証の種類	ログインやユーザー認証をどうするかの設定。今回はパスワードなしのシンプルなアプリなので「認証なし」でOK。	最初は認証なしでサクッと作ろう！
HTTPS用の構成	通信を安全にする仕組み。ローカルでもHTTPSで動かすかどうか。ブラウザの警告回避にもなるから基本ON推奨！	セキュリティ大事。ONのままにしとこ！
コンテナーのサポートを有効にする	Dockerみたいなコンテナー技術でアプリをどこでも同じ環境で動かせるようにする設定。初心者は無理せずOFFでOK。	まずは普通に作ろう。慣れてから挑戦してみてね！
コンテナーOS	コンテナー内で使うOSを選ぶ。Linuxが主流。Windowsは特殊な環境向け。	Linuxが定番。Windowsは必要な時だけ！
コンテナービルドの種類	コンテナーイメージの作り方を選ぶ設定。こだわりなければ触らなくてOK。	デフォルトで問題なし！
最上位レベルのステートメントを使用しない	C#のコードの書き方スタイルの設定。最近の書き方を使うかどうか。慣れてなければONで昔ながらのスタイルを使おう。	最初はONで安心。慣れたらOffでシンプルコードに挑戦！僕も慣れてないからON！！
.NET ASP.NET Core オーケストレーションへの参加	Microsoftの新しいクラウドネイティブ分散アプリ開発支援スタック「.NET Aspire」を使うかどうかの設定。ローカルで複数サービスをまとめて管理可能。	初心者はOFF推奨。慣れてから触ってみよう！
Aspire バージョン	使用する「.NET Aspire」のバージョンを選ぶ項目。オーケストレーションを有効にした場合のみ設定が必要。基本はデフォルトのままでOK。	チェックを入れていなければ無視してOK！

設定が終わったら、いよいよ「作成」ボタンをポチッと押してプロジェクトを作成します。

✅ STEP 5：プロジェクトを作成！準備は完了！

Visual Studio がしばらく頑張ったあと、プロジェクトの構成が読み込まれた画面が表示されます。
まずは「本当に動くのか？」をチェックしてみましょう！

▶️ 実行する手順

Visual Studio の上部メニューを見ると、緑色の ▶ ボタンがあります。その左には「プロジェクト名」や「IIS Express」などが表示されています。
この ▶ ボタン（通称「実行ボタン」）をクリック！
自動でビルド → 開発サーバー（Kestrel）が起動し、ブラウザが開いてアプリの初期画面が表示されます。