ASP.NET Core SPAテンプレートのバックアップ(No.12) - マイクロソフト系技術情報 Wiki

[ トップ ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

「マイクロソフト系技術情報 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

戻る
- ASP.NET SPA
- ASP.NET Core

目次 †

目次
概要
Visual Studio標準テンプレート
カスタム・テンプレート
- Visual Studioを使用する。
- Visual Studioを使用しない。
  - 理由
  - 移行
  - 組合せ
JavaScriptServices
参考
- Visual Studio CodeによるSPA開発
- CodeZine（コードジン）
  - ASP.NET Core 2.0でSPAテンプレートを使おう

概要 †

Visual Studio 2017の.NET Framework側のSPAのテンプレートと比べると、
ASP.NET CoreのSPAテンプレートは、npm, webpack, TypeScriptなどが導入され大きく進化している。

今後、主流は、「Visual Studio Code」+「npm ,etc.のNode.js系のツール」
になる可能性があるが、以下のASP.NET CoreのSPAテンプレートの下調べを行った。

Visual Studio標準テンプレート †

ASP.NET Core Angularテンプレート †

ASP.NET Core React.jsテンプレート †

ASP.NET Core React+Reduxテンプレート †

ASP.NET Core Vue.jsテンプレート †

.NET Core SDK 2.0.xであれば、dotnet new vueで生成可能。

Vue.jsを使用したASP.NET Coreのテンプレートを用意する - つばろぐ
http://tsubalog.hatenablog.com/entry/2018/01/05/070000

カスタム・テンプレート †

Visual Studioを使用する。 †

前述のVisual Studio標準テンプレートをカスタマイズすれば良い。

Visual Studioを使用しない。 †

色々検討した結果、

SPA（フロントエンド）を、
ASP.NET Core（バックエンド）の

プロジェクトと結合させない方がイイと言う結論に至った。

理由 †

この理由は、例えば、create-react-appで、生成した場合、
依存関係（Webpack、Babel、ESLintなど）が隠蔽されイイ感じになるため。

これ（フロントエンド）を、バックエンドのプロジェクトと結合する場合は、必要に応じて、
npm run ejectでコレらの依存関係を取り出してカスタマイズする必要がある（と思われる）。
- aspnet/JavaScriptServices > Issue #997
  New Create React App-based template
  https://github.com/aspnet/JavaScriptServices/issues/997

しかし、フロントエンドの専門性が高いので、
ココはバイリンガルにしない方が最適であると考える。

習得コストが高いためバイリンガルは困難。
- フロントエンド・エンジニアがバックエンドを追加で覚える。
- バックエンド・エンジニアがフロントエンドを追加で覚える。

（Cordova＋Reactなど）フロントエンドに限定すれば、
組み合わせの情報は、割と見つかることがあるがバックエンドは...。

移行 †

Visual Studio標準テンプレートがなかなか良くできている。

こちらは、TypeScriptを使用しているため、必要に応じて移行が必要になる。
- コチラを参考にして任意のECMAScriptバージョンにコンパイル可能。
- 以下のコマンドでイイ感じにコンパイルで変換できた。
```
tsc --noImplicitUseStrict --target es2015
```

これを、create-react-appで生成したprojectに組み込んだらイイ感じになる（ハズ）。

組合せ †

SPAのMV*とCordova (PhoneGap?)を組み合わせる。

Cordova (PhoneGap?) - .NET 開発基盤部会 Wiki
https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29#mdb0c942

JavaScriptServices? †

Visual Studio標準テンプレート生成の基盤となっている、
dotnet new XXX（SPA系引数）は、コレによって実装されている。

https://github.com/aspnet/JavaScriptServices/

参考 †

Visual Studio CodeによるSPA開発 †

CodeZine?（コードジン） †

ASP.NET Core 2.0でSPAテンプレートを使おう †

【前編】 (1/2)
https://codezine.jp/article/detail/10599
【後編】 (1/2)
https://codezine.jp/article/detail/10618

Tags: :.NET開発, :.NET Core, :ASP.NET, :ASP.NET Web API, :ASP.NET SPA