Contosoは様々なアウトドア活動用製品を販売する会社です。Contosoのマーケティング部門は、既存顧客と潜在顧客に向けて製品をプロモートするためのマイクロソーシャルメディアWebサイトを立ち上げたいと考えています。
彼らはすでにJavaScript、特にReactで書かれたフロントエンドアプリを持っています。しかし、突然、.NET、特にBlazorを使用してフロントエンドアプリを再開発するという新しい要件を送ってきました。
.NET開発者として、既存のReactアプリをBlazorに移行する必要があります。ちなみに、JavaScriptとReactの知識はほとんどありません。
準備のためにREADME文書を参照してください。
- GitHub Copilot エージェントモードを確認
- カスタム指示を準備
- Blazor Webアプリプロジェクトを準備
- Spring Boot バックエンドアプリを実行
- React Webアプリを移行
- Blazor フロントエンドアプリを検証
-
GitHub Codespace または VS Code の上部にある GitHub Copilot アイコンをクリックして、GitHub Copilot ウィンドウを開きます。
-
ログインまたはサインアップを求められた場合は、実行してください。無料です。
-
GitHub Copilot エージェントモードを使用していることを確認します。
-
モデルを
GPT-4.1またはClaude Sonnet 4のいずれかに選択します。 -
MCP サーバーを設定していることを確認します。
-
$REPOSITORY_ROOT環境変数を設定します。# bash/zsh REPOSITORY_ROOT=$(git rev-parse --show-toplevel)
# PowerShell $REPOSITORY_ROOT = git rev-parse --show-toplevel
-
カスタム指示をコピーします。
# bash/zsh cp -r $REPOSITORY_ROOT/docs/custom-instructions/dotnet/. \ $REPOSITORY_ROOT/.github/
# PowerShell Copy-Item -Path $REPOSITORY_ROOT/docs/custom-instructions/dotnet/* ` -Destination $REPOSITORY_ROOT/.github/ -Recurse -Force
-
Claude Sonnet 4またはGPT-4.1のモデルでGitHub Copilot エージェントモードを使用していることを確認します。 -
context7MCP サーバーが起動して実行されていることを確認します。 -
Blazor Webアプリプロジェクトのスキャフォールドを作成するために、以下のようなプロンプトを使用します。
Blazor Webアプリのスキャフォールドを作成したいと思います。以下の指示に従ってください。 - context7を使用してください。 - 作業ディレクトリは `dotnet` です。 - まず実行するすべてのステップを特定してください。 - Blazorに関連する.NETプロジェクトのリストを表示して、選択するよう求めてください。 - Blazorプロジェクトを生成してください。 - プロジェクト名として `Contoso.BlazorApp` を使用してください。 - `launchSettings.json` を更新して、HTTPのポート番号を `3031`、HTTPSのポート番号を `43031` に変更してください。 - `ContosoWebApp` というソリューションを作成し、Blazorプロジェクトをこのソリューションに追加してください。 - Blazorアプリを構築して、アプリが適切に構築されているかどうかを確認してください。 - このBlazorアプリを実行して、アプリが適切に実行されているかどうかを確認してください。 - アプリの構築または実行が失敗した場合は、問題を分析して修正してください。 -
GitHub Copilot の
ボタンをクリックして変更を適用します。
-
Spring Boot バックエンドアプリが起動して実行されていることを確認します。
`java` ディレクトリにあるSpring Boot バックエンドAPIを実行してください。注意: 代わりに
complete/javaサンプルアプリを使用することもできます。 -
GitHub Codespaces を使用している場合は、ポート番号
8080がprivateではなくpublicに設定されていることを確認してください。そうでないと、フロントエンドアプリからアクセスする際に401エラーが発生します。
-
Claude Sonnet 4またはGPT-4.1のモデルでGitHub Copilot エージェントモードを使用していることを確認します。 -
context7MCP サーバーが起動して実行されていることを確認します。 -
React を Blazor に移行するために、以下のようなプロンプトを使用します。
既存のReactベースのWebアプリをBlazor Webアプリに移行します。移行のために以下の指示に従ってください。 - context7を使用してください。 - 既存のReactアプリケーションは `javascript` にあります。 - 作業ディレクトリは `dotnet/Contoso.BlazorApp` です。 - まず実行するすべてのステップを特定してください。 - `http://localhost:8080` で実行されているバックエンドAPIアプリがあります。 - 既存のReactアプリのアプリケーション構造を分析してください。 - すべてのReactコンポーネントをBlazorコンポーネントに移行してください。対応する両方のコンポーネントは可能な限り互いに正確に近いものである必要があります。 - ReactからBlazorに必要なすべてのCSS要素を移行してください。 - ReactからBlazorにJavaScript要素を移行する際は、Blazorのネイティブ機能を可能な限り最大限に活用してください。JavaScriptを使用する必要がある場合は、BlazorのJSInterop機能を使用してください。 - 必要に応じて、.NET 9と互換性のあるNuGetパッケージを追加してください。 -
移行が完了したら、移行結果を確認するために以下のようなプロンプトを使用します。
Blazorアプリを構築したいと思います。指示に従ってください。 - context7を使用してください。 - Blazorアプリを構築して、アプリが適切に構築されているかどうかを確認してください。 - アプリの構築が失敗した場合は、問題を分析して修正してください。注意:
- 構築が成功するまで、このステップを繰り返してください。
- 構築が失敗し続ける場合は、エラーメッセージを確認してGitHub Copilot エージェントに問い合わせて解決してください。
-
GitHub Copilot の
-
構築が成功したら、移行結果を確認するために以下のようなプロンプトを使用します。
Blazorアプリを実行したいと思います。指示に従ってください。 - context7を使用してください。 - このBlazorアプリを実行して、アプリが適切に実行されているかどうかを確認してください。 - この段階では、バックエンドAPIアプリの接続エラーは無視してください。 - アプリの実行が失敗した場合は、問題を分析して修正してください。
-
Spring Boot バックエンドアプリが起動して実行されていることを確認します。
`java` ディレクトリにあるSpring Boot バックエンドAPIを実行してください。 -
GitHub Copilot の
-
適切に構築されているかどうかを確認します。
Blazorアプリを実行して、アプリが適切に実行されているかどうかを確認してください。 アプリの実行が失敗した場合は、問題を分析して修正してください。 -
ウェブブラウザを開いて
http://localhost:3031に移動します。 -
フロントエンドとバックエンドの両方のアプリが適切に実行されているかどうかを確認します。
-
GitHub Copilot の
よくできました。「.NET」ステップを完了しました。STEP 05: コンテナ化に移りましょう。
免責事項: この文書はGitHub Copilotによってローカライズされています。そのため、間違いを含む可能性があります。不適切または間違った翻訳を見つけた場合は、issueを作成してください。