Zenn
👋

【令和三年版】ASP.NET CoreでReact開発を行う

2021/03/08に公開
C#
JavaScript
React
VS Code
tech

はじめに

ASP.NET CoreではReactプロジェクトのテンプレートが用意されているのですが
ASP.NET界隈ではあまりフロントエンドに関心がないのか、
ググっても記事が少なくて、いまいち利用されていないように見受けられます。
私達のチームではASP.NET CoreでフロントエンドにReactを採用して
開発を行っており、それなりにノウハウを得ましたので
開発を通じて得た知見を共有したいと思います。

環境構築

開発の前に環境構築なのですが、Visual Studioを使用されている方には注意があります。
開発を行う前にNode.jsの最新バージョンをインストールしておいてください

Node.js

インストールせずに進めると以下のエラーに遭遇することがあります。
The npm script 'start' exited without indicating that the create-react-app server was listening for requests

普段Visual Studioで開発を行っている方はVisual Studio Codeをインストールすることをオススメします。
Visual Studioは最強のIDEだと思いますが、Reactはいまいち苦手なようで、
React書く際はVSCを使ったほうがいい体験が得られます。

Visual Studioを使用せずVisual Studio Codeのみで開発を行うことも可能です。
その場合、.NET Core SDKを別途インストールしておく必要があります。

.NET Core SDK

ちなみに私はVSとVSC両方使っています。

プロジェクト作成

Visual Studio 2019を使用している方は
Visual Studioで「新しいプロジェクトの作成」を選択
「ASP.NET Core Webアプリケーション」を選択して、次へ
プロジェクト名やパスを設定して、作成
プロジェクトテンプレートはReact.jsを選択する
必要に応じて認証方法を変更して、作成をクリック
これでフロントエンドがReactのASP.NET Coreのプロジェクトが出来上がります

Visual Studio Codeを使用している方は
ターミナルから以下のコマンドを実行します

dotnet new react -o <任意のフォルダのパス> -au Individual

アプリ内で認証が必要な場合は -au Individualを付けます。
認証が不要な場合は付けないでください

実行

何も考えずにF5で実行してもいいのですが、
その前に念の為Reactの各種パッケージをインストールしておきます
ターミナルを開いて以下のコマンドを実行します

cd .\ClientApp\
npm install

これで不足しているパッケージがあればインストールされます

いよいよ実行ですが、
Visual Studioを使用している方はF5で実行できます。

Visual Studio Codeを使用している場合は、ターミナルから
.csprojファイルが存在するディレクトリに移動して以下のコマンドを実行します

vscode
dotnet run

dotnet runしたらブラウザで https://localhost:5001/ にアクセスします

フォルダ構成

大体はASP.NET Core MVCのプロジェクトとほぼ同じ構成なのですが
大きく違う点はClientAppフォルダです
ここにReact関係のファイルが入っています。
ReactではViewのファイルはcshtmlではなくClientApp/src内のjsファイルとなります。
簡単に各ファイルの説明をしておきます。

ファイル 説明
/ClientApp/public/index.html トップページ。実行すると、まずこのファイルが読み込まれる
/ClientApp/src/index.js Reactのエントリポイント
/ClientApp/src/App.js index.jsから呼び出されるアプリケーションを表すコンポーネント
/ClientApp/src/Layout.js App.jsから呼び出される(以下略
/ClientApp/component 各画面で使用されるコンポーネントを格納するフォルダ
/ClientApp/package.json javascriptのパッケージマネージャnpmでインストールするパッケージの一覧

スキャフォールディングされたIdentity関係のcshtmlファイル以外は基本的にはcshtmlファイルを使用せず、
jsファイルで画面を作成していくことになります。
もちろんTypeScriptも可能です。好きな方を使うと良いでしょう。

弊社では各画面のページを表すjsファイルは/ClientApp/pages/というフォルダを作成して
その中に機能ごとにフォルダを作って配置しています。
各画面で使用するコンポーネントは/ClientApp/component/内にコンポーネントの種類ごとにフォルダを作って格納しています。
この辺は好みに応じて好きに構成すれば良いかと思います。

サーバーサイド (ASP.NET Core)

サーバーサイド、ASP.NET Core側はほぼ全ての機能をWebApiとして開発することになると思います。
最初はWebApiってどう作るか良くわからなかったのですが、
ASP.NET Core MVCのコントローラとほぼ同じで良いようです。
弊社ではコントローラをREST APIっぽく実装しています。
あくまでゆるくRESTっぽく作ってます

コントローラはVisual Studioの場合はControllersフォルダを右クリックして「追加」を選択
「コントローラ」もしくは「新しい項目」をクリックしてAPIコントローラを追加すると作成できます

ログインしているユーザーのみにAPIの実行を許可する場合は、
MVCの時と同じく[Authorize]属性を付ければ自動的に401を返してくれます
正常に実行した場合は200 Okを返してやります

TestController.cs
    [Route("api/[controller]")]
    [ApiController]
    public class TestController : ControllerBase
    {
        // GET: api/<TestController>
        //[Authorize] この属性を付けると認証されたユーザーのみ実行可能とする
        [HttpGet]
        public IActionResult Get()
        {
            return Ok("Hello React!!!!"); //HTTPステータスコード200を返す
        }
    }

ReactからAPIを叩く

APIの実装が出来たら、いよいよReact側からAPIを叩きます。
ReactではMVCやRazorPagesのようにFormをSubmitしてPostすることは通常ありません。
JavascriptのFetch APIやaxiosを用いて、サーバーサイドとの通信のほぼ全てを非同期通信で行います。
axiosを使う場合はターミナルで以下のコマンドを実行しておきます

npm install axios

実際にAPIを叩くには以下のようにします。

home.js
import axios from 'axios';

export class Home extends Component {
  static displayName = Home.name;

   handleButtonClick(){
    axios.get('api/test')
    .then((response) => {
      if(response.status === 200)
      {
        alert(response.data);
      }
    }).catch(()=>{
      alert("エラー");
    })
  }

  render () {
    return (
      <div>
        <h1>Hello, world!</h1>
        <button onClick={this.handleButtonClick}>APIテスト</button>
        ....以下略

ボタンをクリックして以下のようになれば成功です

おわりに

今回はここまでです。
なんだかチュートリアルな内容になりましたが、
Reactプロジェクトの構築、実行、ちょっとした実装はこんな感じで割と簡単に出来ますので
ぜひ皆さんもASP.NET CoreでReactライフを楽しんでください！

需要があれば、次回は認証周りやStartup周りの設定に関して書こうと思いますので
良ければいいねしてくださいね！

Discussion