![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -戻る（[[ASP.NET SPA]]、[[ASP.NET Core]]） --[[Web Essentials]] --ASP.NET Core SPAテンプレート --[[.esproj（JavaScript・TypeScriptプロジェクトシステム）]] * 目次 [#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]]と統合させないほうが良さそうではある。 *テンプレート [#sb2a9292] **[[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]]（バックエンド）の プロジェクトと結合させない方がイイと言う結論に至った。~ （案の定、[[JavaScript Services>#m46043c7]]も、廃止になったもよう。） -理由 --この理由は、例えば、[[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]]など）フロントエンドに限定すれば、~ 組み合わせの情報は、割と見つかることがあるがバックエンドは...。 -移行 --[[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に変換されるので、ここは元コードを使用する。 -組合せ~ SPAのMV*とCordova (PhoneGap)を組み合わせる。 --Cordova (PhoneGap) - .NET 開発基盤部会 Wiki~ https://dotnetdevelopmentinfrastructure.osscons.jp/index.php?Cordova%20%28PhoneGap%29#mdb0c942 *参考 [#c0349c91] **[[JavaScript Services]] [#m46043c7] 案の定、廃止とのこと。 **[[Visual Studio CodeによるSPA開発]] [#m3b31091] コレからMS界隈でもデファクト化していく見込み。 **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]], [[:JavaScript]]
