「[[マイクロソフト系技術情報 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 *JavaScriptServices [#m46043c7] [[Visual Studio標準テンプレート>#gb8d805d]]生成の基盤となっている、~ dotnet new XXX(SPA系引数)は、コレによって実装されている。 https://github.com/aspnet/JavaScriptServices/ *参考 [#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]]