前回の続きです。
タスク管理ツールの機能を作る前に、開発用の環境が動く状態まで、ソリューション・プロジェクトの整備をしていこうと思います。
index
構築の基本的な流れ
.netフレームワークを使用する場合、あらかじめ用途に合わせたテンプレートを選択していくことになります。
その中にasp.net + reactのテンプレートもあるのですが、Reactと関連するフレームワークのバージョンが古かったり、typescriptが選択できなかったり、完全なSPAになっていなくて認証時は認証用のRazorページに飛んでログイン後に戻ってくるなど、若干癖があるつくりになっているので、今回はサーバーサイドはasp.net coreのwebapiのプロジェクト、クライアントサイドはCreate React Appで作り、連携させて動かすという構成で構築していきます。
サーバーサイドのプロジェクト構築
ではサーバーサイド用ソリューションとプロジェクトを作っていきます。
補足ですがOSはWindows11、エディタはVS Codeを使用しています。
作業フォルダを作ってからVS Codeでフォルダを開き、ターミナルからコマンドを実行します
> cd [作りたい場所]
> dotnet new sln
ソリューション名は指定していないので、フォルダ名が自動で設定されます。
今回は「Tasket」(Task + Basketでtasket)という名前のフォルダにしたので、その名前で生成されています。
ソリューションが生成されたら次にサーバーサイド用のプロジェクトを作ります。
以下のコマンドで、webapi用のひな型が .NET5のバージョンで生成されます。
> dotnet new webapi -n server-app -f net5.0
生成したプロジェクトをソリューションに追加します。こうすることで、Visual Studio(VS Codeではなく2019や2022等)でソリューションを開いたときにプロジェクト込みで開いたり、ソリューションフォルダで「dotnet build」コマンドを実行することで「server-app」のビルドも併せて実行などが行われるようになりなります。
> dotnet sln add server-app/server-app.csproj
動作確認もしておきましょう。
サーバーサイドのプロジェクトがおかれたフォルダに移動して、実行コマンドを入力するとビルドが行われて環境が実行されます。
> cd server-app
> dotnet run
生成したのはwebapiなので、web画面などは出ませんが、サンプルで含まれているapiにアクセスするとデータを出力することができます
サーバーサイドのプロジェクト構築はこれで一通りです
クライアントサイドのプロジェクトの構築
次は、クライアントサイドのプロジェクトを生成します。
①Create React Appを使用してテンプレートを生成する
Create React AppはFacebookが提供するReactフロントエンドのひな型を生成してくれるツールです。煩雑な環境設定や関連するパッケージ類のインポートなどの手間を省略して、初心者でも簡単にひな型を作ることができます。
今回は、Create React Appを使用して、ソリューションフォルダの直下に、「client-app」という名称で、TypeScript有りでひな型を作ります。
ソリューションがおかれているフォルダに移動してから、以下のコマンドを入力します。
> npx create-react-app client-app --use-npm --template typescript
生成が成功すると、成功メッセージが表示され、以下のようにclient-appが生成されます
成功した段階で、以下のコマンドを実行すればトップ画面を表示させることが可能になります。
> cd client-app
> npm start
実行結果です。
今回は以上です
続きは次回です
初期段階
初期段階：カラ
