ASP.NET Core SPAテンプレート

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

• 戻る
  • ASP.NET SPA
  • ASP.NET Core

目次 †

概要 †

• 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（バックエンド）の

プロジェクトと結合させない方がイイと言う結論に至った。
（案の定、JavaScript Servicesも、廃止になったもよう。）

• 理由
  • この理由は、例えば、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に組み込んだらイイ感じになる。
  ただし、JSXの部分が、React.createElementに変換されるので、ここは元コードを使用する。

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

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

参考 †

JavaScript Services †

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, :JavaScript