ASP.NET Core におけるフロントエンド開発

15
ASP.NET Core にににに ににににににににに 2016/03/29 Sansan にににに にににに

Transcript of ASP.NET Core におけるフロントエンド開発

Page 1: ASP.NET Core におけるフロントエンド開発

ASP.NET Core におけるフロントエンド開発2016/03/29

Sansan 株式会社 千田智己

Page 2: ASP.NET Core におけるフロントエンド開発

自己紹介• 千田智己• Sansan 事業部 開発部• 2013 年 6 月 入社• フロントエンドに限らずいろいろやっています• 趣味

• ボルダリング• 週に 2 ~ 3 回、会社の近所にあるジムで登っています

Page 3: ASP.NET Core におけるフロントエンド開発

ASP.NET Core とは• ASP.NET vNext と呼ばれていたもの• ASP.NET 5 と呼ばれていたもの

3

Page 4: ASP.NET Core におけるフロントエンド開発

ASP.NET Core 迷走の歴史の変遷• 2014/05 ASP.NET vNext 発表

• KRuntime, KVM, Core CLR やら ...• 2014/11 ASP.NET vNext と呼ばれていたものが ASP.NET 5

Preview 版として公開• 2015/03 KRuntime → .NET Execution Environment

(DNX)• 2015/11 長い beta 期間 (beta8) を経て RC 版が公開

• このタイミングで実際に触ってみる人たちが増えてきた

Page 5: ASP.NET Core におけるフロントエンド開発

2016/01 ASP.NET 5 is dead

• http://www.hanselman.com/blog/ASPNET5IsDeadIntroducingASPNETCore10AndNETCore10.aspx• .NET Core 1.0• ASP.NET Core 1.0• DNX -> .NET Command Line Interface (.NET CLI)

Page 6: ASP.NET Core におけるフロントエンド開発

独断と偏見によるASP.NET Core 注目のポイント

Page 7: ASP.NET Core におけるフロントエンド開発

.NET Core

• project.json• https://github.com/aspnet/Home/wiki/Project.json-file• npm の package.json と似た記述• glob によるファイル管理

• プロジェクトに含める 操作が不要に (Visual Studio)• プロジェクトにファイルを追加し忘れて Publish のときに配備されないという事故がなくなる• Bower でコンポーネントを追加したけどリソースをプロジェクトに追加し忘れ• less ファイルを追加したけど css をプロジェクトに追加し忘れ• etc...

• 膨大な csproj ファイルとコンフリト地獄がなくなる

Page 8: ASP.NET Core におけるフロントエンド開発

.NET Core

• IDE (Visual Studio) の依存排除• Visual Studio 用の設定は *.xproj に分離• 好きな開発環境を使用できる

• Visual Studio Code / Project Rider / Sublime Text / Atom / etc...

Page 9: ASP.NET Core におけるフロントエンド開発

.NET Core

• Event hook で任意のコマンドを実行可能• prepare, {pre|post}{restore|compile|publish}• 外部コマンドを簡単に挟み込める

• 以前 (MSBuild) でもできるが、手を出してはいけない雰囲気を強く醸し出していた• 流行に置いていかれない (Visual Studio に依存しない ) 柔軟な技術選択が可能に

• Gulp / Grunt / Bower / TypeScript / CoffeeScript / Browserify / LESS / Sass / Scss / etc...

• AngularJS / React.js / Bootstrap / Semantic UI / Foundation / etc...

Page 10: ASP.NET Core におけるフロントエンド開発

ASP.NET Core

• フロントエンドのライブラリは node.js のパッケージマネージャを使用• NuGet にライブラリが上がってなくて泣く泣くダウンロードしてコードリポジトリに突っ込む必要がなくなる

• HtmlHelper から TagHelper• Razor が AngularJS を意識した書き方に

• @Html.ActionLink("Home", "Index", "Controller")↓<a asp-controller="Home" asp-action="Index">Home</a>

• 詳しいことは @miso_soup3 のブログで!• ASP.NET MVC 6 Tag Helper について

http://miso-soup3.hateblo.jp/entry/2015/12/02/231512

Page 11: ASP.NET Core におけるフロントエンド開発

ASP.NET Core

• WebGrease (System.Web.Optimization) から Gulp(Grunt) + EnvironmentTagHelper へ• Microsoft 謹製のライブラリとおさらば

• HtmlHelper がなくなるわけではないので、これまでどおり WebGrease も使えるかもしれない• 最近は SourceMap にとりまく環境も良くなったので、開発用と本番用でリソースを使い分けることも減ってくるのでは

Page 12: ASP.NET Core におけるフロントエンド開発

ちょっと関係ないけど• 脱 Web.config

• JSON でアプリケーションの設定を記述するように• Web.config 変換構文が不要に ( プロジェクト作成時に

Web.Debug.config とか Web.Release.config ってなるやつ ) • 配備時に MS Deploy コマンドで環境ごとの設定を差し込む必要がなくなる

Page 13: ASP.NET Core におけるフロントエンド開発

まとめ• これまでの独自のエコシステムを構築しようというスタンスかが、既存エコシステムに寄り添うように変わっている• NET 4 以前にあったフロントエンド開発のイライラはほぼ解消• 触るのは時期尚早

• ASP. .NET Core を取り巻く環境はまだまだ落ち着いていない• .NET Core の正式リリースを待ち、無理に情報を追わないほうが懸命

Page 14: ASP.NET Core におけるフロントエンド開発

Copyright © Sansan, Inc. All rights reserved.

14

Sansan は一緒に新しい価値を作っていく壁に登る仲間をさがしています。

Ruby, Ruby on Rails(Webアプリケーション)

C#, ASP.NET MVC(Webアプリケーション)

iOS / Android アプリ

- 個人向け名刺管理アプリ「 Eight」- 名刺データ化分散処理システム

- 法人向け名刺管理サービス「 Sansan」

- 法人向け名刺管理サービス「 Sansan」

- 個人向け名刺管理アプリ「 Eight」

エンジニア募集中

Sansan 採用 検索

[email protected] までお気軽にご連絡ください。

興味のある方は

Page 15: ASP.NET Core におけるフロントエンド開発

ご清聴ありがとうございました