「[[マイクロソフト系技術情報 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]]テンプレートの下調べを行った。

*[[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

*カスタム・テンプレート [#e4ffac31]

**[[Visual Studio]]を使用する。 [#i84dfc4b]
前述の[[Visual Studio標準テンプレート>#gb8d805d]]をカスタマイズすれば良い。

**[[Visual Studio]]を使用しない。 [#h84eb730]
色々検討した結果、

-[[SPA>Single-page application]](フロントエンド)を、
-[[ASP.NET Core]](バックエンド)の

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

***理由 [#ha123aaa]
-この理由は、例えば、[[create-react-app>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?React#s2cc9cf9]]で、生成した場合、~
依存関係(Webpack、Babel、ESLintなど)が隠蔽されイイ感じになるため。

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

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

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

--([[Cordova+React>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29#f1551b14]]など)フロントエンドに限定すれば、~
組み合わせの情報は、割と見つかることがあるがバックエンドは...。

***移行 [#o6a42b95]
-[[Visual Studio標準テンプレート>#gb8d805d]]がなかなか良くできている。

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

-これを、[[create-react-app>https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?React#s2cc9cf9]]で生成したprojectに組み込んだらイイ感じになる。~
ただし、JSXの部分が、React.createElementに変換されるので、ここは元コードを使用する。

***組合せ [#b3fe4e95]
SPAのMV*とCordova (PhoneGap)を組み合わせる。

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

*[[JavaScript Services]] [#m46043c7]

*参考 [#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]]
Tags: [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP.NET Web API]], [[:ASP.NET SPA]], [[:JavaScript]]

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS