- 追加された行はこの色です。
- 削除された行はこの色です。
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-戻る
--[[ASP.NET SPA]]
--[[ASP.NET Core]]
* 目次 [#jbe7fa80]
#contents
*概要 [#v519679c]
-[[Visual Studio]] 2017の.NET Framework側の[[SPA>ASP.NET SPA]]のテンプレートと比べると、~
[[ASP.NET Core]]の[[SPA>ASP.NET SPA]]テンプレートは、[[npm>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?npm]], [[webpack>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?webpack]], [[TypeScript]]などが導入され大きく進化している。
-今後、主流は、「[[Visual Studio Code]]」+「[[npm>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?npm]] ,etc.の[[Node.js>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?JavaScript#q9fc6e24]]系のツール」~
になる可能性があるが、以下の[[ASP.NET Core]]の[[SPA>ASP.NET SPA]]テンプレートの下調べを行った。
*SPA共通 [#a35dc84d]
**適合 [#tb2d2f50]
-ステートレス、サーバーレス
--mBaaS的
--WebAPIマッシュアップ的
-コンポーネント指向~
最近のSPAはコンポーネント指向
--jQueryのように、ページ中のHTMLをDOM処理するような処理は書かない。
--横の繋がりも、縦の繋がりも無い。縦はBindingみたいなことはできる。
--コンポーネントの切り方が重要になってくる(下手に切ると上手く実装できなくなる)。
**不適合 [#c3720d07]
-無限ループが起きるため、Entryで使えそうで使えない(内部でコンポーネントの再描画するため)。
--理由は、[[Reactive Extensions(Rx)]]的なオブザーブ処理。
--AngularはRxJS、Reactは独自オブザーバーを実装している。
**[[Web Essentials]] [#n00fdc27]
特にSPA開発ではインストールすると良い。
*テンプレート [#y82ca277]
**[[Visual Studio]]標準テンプレート [#gb8d805d]
***[[ASP.NET Core Angularテンプレート]] [#e6cc21de]
***[[ASP.NET Core React.jsテンプレート]] [#o7955d75]
***[[ASP.NET Core React+Reduxテンプレート]] [#md706767]
***ASP.NET Core Vue.jsテンプレート [#md706767]
.NET Core SDK 2.0.xであれば、dotnet new vueで生成可能。
-Vue.jsを使用したASP.NET Coreのテンプレートを用意する - つばろぐ~
http://tsubalog.hatenablog.com/entry/2018/01/05/070000
***JavaScriptServices [#m46043c7]
JavaScriptServicesによって実装されている。
テンプレート生成の基盤となっているdotnet new XXXは、JavaScriptServicesによって実装されている。
https://github.com/aspnet/JavaScriptServices/
**カスタム・テンプレート [#e4ffac31]
***VisualStudioを使用する。 [#i84dfc4b]
***[[Visual Studio]]を使用する。 [#i84dfc4b]
・・・
***VisualStudioを使用しない。 [#h84eb730]
***[[Visual Studio]]を使用しない。 [#h84eb730]
色々検討した結果、SPA(フロントエンド)をASP.NET Core(バックエンド)のプロジェクトと結合させない方がイイと言う話になった。
色々検討した結果、SPA(フロントエンド)とASP.NET Core(バックエンド)を結合させない方がイイと言う話になった。
-この理由は、例えば、create-react-appで、生成した場合、~
依存関係(Webpack、Babel、ESLintなど)が隠蔽される。
-この理由は、例えば、create-react-appで、生成した場合、依存関係(Webpack、Babel、ESLintなど)が隠蔽されるため。
-このため、結合する場合は、必要に応じてnpm run ejectでコレらの依存関係を取り出してカスタマイズする必要がある(と思われる)。
-このため、バックエンドのプロジェクトと結合する場合は、必要に応じて、~
npm run ejectでコレらの依存関係を取り出してカスタマイズする必要がある(と思われる)。
--https://github.com/aspnet/JavaScriptServices/issues/997
-しかし、フロントエンドの専門性が高いので、ココはバイリンガルにしない方が最適であると考える。~
([[Cordova+React>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29]]など)フロントエンドに限定すれば、組み合わせの情報は、割と見つかることがある。
-しかし、フロントエンドの専門性が高いので、ココはバイリンガルにしない方が最適であると考える。
--習得コストが高いためバイリンガルは困難。
---フロントエンド・エンジニアがバックエンドを追加で覚える。
---バックエンド・エンジニアがフロントエンドを追加で覚える。
--([[Cordova+React>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29]]など)フロントエンドに限定すれば、組み合わせの情報は、割と見つかることがある。
*参考 [#c0349c91]
**[[Visual Studio CodeによるSPA開発]] [#m3b31091]
**CodeZine(コードジン) [#l911e59f]
***ASP.NET Core 2.0でSPAテンプレートを使おう [#o4ee4eef]
-【前編】 (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]]