Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
C# で Single Page Web アプリが開発できる 「Blazor」
その概要と Web アプリ開発者にもたらす利点
https://youtu.be/JU-6pAxqAa4
2 OSC18Do – "Blazor"
https://twitter.com/bokusama/status/708376621409959936
http://clr-h.jp
3 OSC18Do – "Blazor"
#osc18do
#clrh107
4 OSC18Do – "Blazor"
プロフィール
SPA 開発の経験あり。
• サーバー側 - C# + ASP.NET MVC / ASP.NET Core MVC
• クライアント側 - TypeScript + AnguarJS 1...
5 OSC18Do – "Blazor"
3年前…
オープンソースカン
ファレンス Hokkaido
2015 で、TypeScript は
いいぞー、という話を
させていただきました。
6 OSC18Do – "Blazor"
7 OSC18Do – "Blazor"
Blazorとは
8 OSC18Do – "Blazor"
「Blazor」とは、Single Page Web アプリケーションを、C# 言語で開発可能とする、
実行環境 SPAフレームワーク 開発環境
Blazor とは
これらを提供する、オープンソースなソ...
9 OSC18Do – "Blazor"
Blazor の実行環境
10 OSC18Do – "Blazor"
C#プログラムがブラウザで動作
• Webブラウザの "WebAssembly" 上に
.NET 実行環境を構築
• .NET アセンブリ (.dll) をロード、
IL (中間言語) を解釈して動作...
11 OSC18Do – "Blazor"
WebAssembly ブラウザ サポート状況
https://caniuse.com/#feat=wasm
12 OSC18Do – "Blazor"
SPA フレームワークとしての Blazor
13 OSC18Do – "Blazor"
SPAフレームワークである
• Razor構文による
HTMLテンプレート
• コンポーネント指向
• データバインディング
• 依存性注入 (DI)
• URLルーティング
"WebAssembly...
14 OSC18Do – "Blazor"
Flash などのようなプラグイン技術ではない
• HTML + CSS でプレゼンテーション層を記述。
• JavaScript エンジンに替わって、
WebAssembly エンジンでロジックを実...
15 OSC18Do – "Blazor"
Blazor で作るのは SPA!
• Blazor アプリはブラウザ上で動く SPA。
• サーバー側実装は必須ではありません。
• 検証してないが、原理からして、Firebase などの MBaa...
16 OSC18Do – "Blazor"
Blazor を開発するための環境
17 OSC18Do – "Blazor"
強力な開発支援環境
• Visual Studio IDE 用アドインが提供
• HTMLテンプレート記述中も
下記のIDE支援が得られる
• インテリセンス
• 即時エラーチェック
• Code L...
18 OSC18Do – "Blazor"
.NET Core 2.1 SDK (2.1.300)
"ASP.NET と Web 開発" ワークロードが
選択されていること
Visual Studio 2017 v.15.7+
Visual S...
19 OSC18Do – "Blazor"
Visual Studio のプロジェクト新規作成に現れる
20 OSC18Do – "Blazor"
CLI 環境もある
Linux や macOS では dotnet CLI で開発可能
• .NET Core 2.1 SDK (2.1.300)
$ dotnet new -i Microsoft....
21 OSC18Do – "Blazor"
Blazor はオープンソース
22 OSC18Do – "Blazor"
ソースコードは GitHub でホスト
• Microsoft の ASP.NET Team が主導
• Apache 2.0 ライセンス
23 OSC18Do – "Blazor"
Blazor がもたらすもの
24 OSC18Do – "Blazor"
Blazor は開発者負担を減らす!
C# プログラマに対し
追加の学習コストが
小さい
IDE による開発支援 サーバ~クライアント
間の型と手続きの共有
25 OSC18Do – "Blazor"
1. C# プログラマに対し
追加の学習コストが小さい
26 OSC18Do – "Blazor"
コンポーネント(HTMLテンプレート)は Razor 構文
• ASP.NET MVC のサーバー側ビュー
と同じ構文
• "@" キーワードを起点に C# コード
が書ける、ってノリでいける。
• ...
27 OSC18Do – "Blazor"
C# プロジェクトである
• シンプル。
• JavaScript のパッケージシステム、バンド
ラー、タスクランナーなどの設定ファイル
と格闘しなくてよい。
• パッケージシステムも NuGet
で...
28 OSC18Do – "Blazor"
トランスパイラではない。.NET 実行環境である。
• これまでの C# プログラミングの知識・経験がそのまま通用する。
• 標準クラスライブラリ (BCL)
• 属性 (Attribute)
• リ...
29 OSC18Do – "Blazor"
2. Visual Studio IDE による開発支援
30 OSC18Do – "Blazor"
強力な開発支援環境
• Visual Studio IDE 用アドインが提供
• HTMLテンプレート記述中も
下記のIDE支援が得られる
• インテリセンス
• 即時エラーチェック
• Code L...
31 OSC18Do – "Blazor"
インテリセンス
コンポーネントのHTML部分記述中
も、他のコンポーネント名が候補
に現れる
コンポーネントが公開している
プロパティも候補に現れる
32 OSC18Do – "Blazor"
リファクタリング
HTMLテンプレート編集でも、変数名や型名の変更が実行可能
33 OSC18Do – "Blazor"
参照の検索
モデルを参照しているHTMLテンプレート中の箇所もわかる
34 OSC18Do – "Blazor"
補足 – Chrome Debugger 対応も進行中
35 OSC18Do – "Blazor"
3. サーバー/クライアント間での
型と手続きの共有
36 OSC18Do – "Blazor"
型情報の二重管理
サーバー側を C#、クライアント側を TypeScript で実装だと、XHR/JSON
でやりとりする型情報が二重管理に。
37 OSC18Do – "Blazor"
JSON.parse() の問題
JSON.parse() では Date 型を復元できない
38 OSC18Do – "Blazor"
Blazor はサーバー/クライアントで型情報を共有
• 日時型も問題なくクライアント側でJSONから復元される
• 日時型に限らず、メソッド
や計算プロパティも含めて、
サーバー側と同じオブジェク
...
39 OSC18Do – "Blazor"
Blazor を学ぶには?
40 OSC18Do – "Blazor"
おすすめ動画
NDC Oslo 2017 ASP.NET Community
Standup – April 3
NDC Minnesota 2018
https://youtu.be/JU-6pAx...
41 OSC18Do – "Blazor"
自習用リソース
Blazor 公式サイト
https://blazor.net/
LEARN BLAZOR
https://learn-blazor.com/
Blazor アプリケーションプログラミ...
42 OSC18Do – "Blazor"
Blazor の弱点
43 OSC18Do – "Blazor"
実験段階である
https://twitter.com/danroth27/status/970174117109424128
44 OSC18Do – "Blazor"
Qiita 「2018年の最先端バックエンドエンジニアに必要なスキル
について考えてみました。」
45 OSC18Do – "Blazor"
まとめ
46 OSC18Do – "Blazor"
Blazor が示した未来
• JavaScriptへのトランスパイルでもなく、
WebAssembly へのクロスコンパイルでもない、
実行環境をそのままブラウザ上で走らせること
で SPA を実装...
47 OSC18Do – "Blazor"
Lean, Practice, Share.
48 OSC18Do – "Blazor"
Q
A
Q & A
49 OSC18Do – "Blazor"
Happy Coding :)
© 2018 Junichi Sakamoto All rights reserved.
本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品...
Upcoming SlideShare
Loading in …5
×

C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点

335 views

Published on

オープンソースカンファレンス 2018 Hokkaido での、CLR/H 第107 回勉強会枠での発表資料です。

https://www.ospn.jp/osc2018-do/modules/eguide/event.php?eid=39

Published in: Technology
  • Be the first to comment

C# で Single Page Web アプリが開発できるフレームワーク&開発環境 「Blazor」 ― その概要と Web アプリ開発者にもたらす利点

  1. 1. C# で Single Page Web アプリが開発できる 「Blazor」 その概要と Web アプリ開発者にもたらす利点 https://youtu.be/JU-6pAxqAa4
  2. 2. 2 OSC18Do – "Blazor" https://twitter.com/bokusama/status/708376621409959936 http://clr-h.jp
  3. 3. 3 OSC18Do – "Blazor" #osc18do #clrh107
  4. 4. 4 OSC18Do – "Blazor" プロフィール SPA 開発の経験あり。 • サーバー側 - C# + ASP.NET MVC / ASP.NET Core MVC • クライアント側 - TypeScript + AnguarJS 1.x / Angular 5 • 開発経験はあるけど、知識は浅い。いつもよくググってる。 React、Vueなど他のSPAフレームワーク経験はゼロ。 JavaScript は嫌いじゃない。 • むしろ好きなほう。(型がないと辛いので TypeScript 使いますが。) @jsakamoto
  5. 5. 5 OSC18Do – "Blazor" 3年前… オープンソースカン ファレンス Hokkaido 2015 で、TypeScript は いいぞー、という話を させていただきました。
  6. 6. 6 OSC18Do – "Blazor"
  7. 7. 7 OSC18Do – "Blazor" Blazorとは
  8. 8. 8 OSC18Do – "Blazor" 「Blazor」とは、Single Page Web アプリケーションを、C# 言語で開発可能とする、 実行環境 SPAフレームワーク 開発環境 Blazor とは これらを提供する、オープンソースなソフトウェアプロダクトです。
  9. 9. 9 OSC18Do – "Blazor" Blazor の実行環境
  10. 10. 10 OSC18Do – "Blazor" C#プログラムがブラウザで動作 • Webブラウザの "WebAssembly" 上に .NET 実行環境を構築 • .NET アセンブリ (.dll) をロード、 IL (中間言語) を解釈して動作 • C# ソースコード ⇒ JavaScript、といった トランスパイラではない • C# ⇒ WebAssembly のクロスコンパイラでもない ※本セッション中では、"C#" ばかり連呼してますが、このような動作原理なので、実は VB や F# は じめ、とにかく .NET アセンブリであれば Blazor アプリ内から参照して実行することができます。 (但しスピーカー自身は未検証)
  11. 11. 11 OSC18Do – "Blazor" WebAssembly ブラウザ サポート状況 https://caniuse.com/#feat=wasm
  12. 12. 12 OSC18Do – "Blazor" SPA フレームワークとしての Blazor
  13. 13. 13 OSC18Do – "Blazor" SPAフレームワークである • Razor構文による HTMLテンプレート • コンポーネント指向 • データバインディング • 依存性注入 (DI) • URLルーティング "WebAssembly で フィボナッチ数 を計算してみた" とかのレベル じゃないよ!
  14. 14. 14 OSC18Do – "Blazor" Flash などのようなプラグイン技術ではない • HTML + CSS でプレゼンテーション層を記述。 • JavaScript エンジンに替わって、 WebAssembly エンジンでロジックを実行し てるだけ、と考えるとよいかも。 • この点では、Angular、React、Vue といった SPA フレームワークと同じ仲間と言えるの では。 ※今日現在はWebAssemblyのコード内からDOMは触れないなどの制約があるため、実のところ、 Blazor のランタイムには、大量の JavaScript コードが含まれています。
  15. 15. 15 OSC18Do – "Blazor" Blazor で作るのは SPA! • Blazor アプリはブラウザ上で動く SPA。 • サーバー側実装は必須ではありません。 • 検証してないが、原理からして、Firebase などの MBaaS をサーバー側実装として 利用することも OK なはず。 • 静的コンテンツをホストできる Web サーバー上であれば配置可能。 • Blazor アプリプロジェクトを "発行" してできあがる、.dll ファイル群を含むコン テンツを配置すればOK!
  16. 16. 16 OSC18Do – "Blazor" Blazor を開発するための環境
  17. 17. 17 OSC18Do – "Blazor" 強力な開発支援環境 • Visual Studio IDE 用アドインが提供 • HTMLテンプレート記述中も 下記のIDE支援が得られる • インテリセンス • 即時エラーチェック • Code Lens • リファクタリング機能
  18. 18. 18 OSC18Do – "Blazor" .NET Core 2.1 SDK (2.1.300) "ASP.NET と Web 開発" ワークロードが 選択されていること Visual Studio 2017 v.15.7+ Visual Studio 拡張 Blazor Language Services Windows OS の場合の推奨開発環境 .NET
  19. 19. 19 OSC18Do – "Blazor" Visual Studio のプロジェクト新規作成に現れる
  20. 20. 20 OSC18Do – "Blazor" CLI 環境もある Linux や macOS では dotnet CLI で開発可能 • .NET Core 2.1 SDK (2.1.300) $ dotnet new -i Microsoft.AspNetCore.Blazor.Templates::* $ dotnet new blazor $ dotnet run
  21. 21. 21 OSC18Do – "Blazor" Blazor はオープンソース
  22. 22. 22 OSC18Do – "Blazor" ソースコードは GitHub でホスト • Microsoft の ASP.NET Team が主導 • Apache 2.0 ライセンス
  23. 23. 23 OSC18Do – "Blazor" Blazor がもたらすもの
  24. 24. 24 OSC18Do – "Blazor" Blazor は開発者負担を減らす! C# プログラマに対し 追加の学習コストが 小さい IDE による開発支援 サーバ~クライアント 間の型と手続きの共有
  25. 25. 25 OSC18Do – "Blazor" 1. C# プログラマに対し 追加の学習コストが小さい
  26. 26. 26 OSC18Do – "Blazor" コンポーネント(HTMLテンプレート)は Razor 構文 • ASP.NET MVC のサーバー側ビュー と同じ構文 • "@" キーワードを起点に C# コード が書ける、ってノリでいける。 • JSX の C# 版みたいな感じ • 独特なマークアップを、さほど覚 えなくて済む。
  27. 27. 27 OSC18Do – "Blazor" C# プロジェクトである • シンプル。 • JavaScript のパッケージシステム、バンド ラー、タスクランナーなどの設定ファイル と格闘しなくてよい。 • パッケージシステムも NuGet である。
  28. 28. 28 OSC18Do – "Blazor" トランスパイラではない。.NET 実行環境である。 • これまでの C# プログラミングの知識・経験がそのまま通用する。 • 標準クラスライブラリ (BCL) • 属性 (Attribute) • リフレクション • 単体テスト • .NET アセンブリバイナリがそのまま動く • 既存の NuGet パッケージも使える
  29. 29. 29 OSC18Do – "Blazor" 2. Visual Studio IDE による開発支援
  30. 30. 30 OSC18Do – "Blazor" 強力な開発支援環境 • Visual Studio IDE 用アドインが提供 • HTMLテンプレート記述中も 下記のIDE支援が得られる • インテリセンス • 即時エラーチェック • Code Lens • リファクタリング機能
  31. 31. 31 OSC18Do – "Blazor" インテリセンス コンポーネントのHTML部分記述中 も、他のコンポーネント名が候補 に現れる コンポーネントが公開している プロパティも候補に現れる
  32. 32. 32 OSC18Do – "Blazor" リファクタリング HTMLテンプレート編集でも、変数名や型名の変更が実行可能
  33. 33. 33 OSC18Do – "Blazor" 参照の検索 モデルを参照しているHTMLテンプレート中の箇所もわかる
  34. 34. 34 OSC18Do – "Blazor" 補足 – Chrome Debugger 対応も進行中
  35. 35. 35 OSC18Do – "Blazor" 3. サーバー/クライアント間での 型と手続きの共有
  36. 36. 36 OSC18Do – "Blazor" 型情報の二重管理 サーバー側を C#、クライアント側を TypeScript で実装だと、XHR/JSON でやりとりする型情報が二重管理に。
  37. 37. 37 OSC18Do – "Blazor" JSON.parse() の問題 JSON.parse() では Date 型を復元できない
  38. 38. 38 OSC18Do – "Blazor" Blazor はサーバー/クライアントで型情報を共有 • 日時型も問題なくクライアント側でJSONから復元される • 日時型に限らず、メソッド や計算プロパティも含めて、 サーバー側と同じオブジェク トが復元
  39. 39. 39 OSC18Do – "Blazor" Blazor を学ぶには?
  40. 40. 40 OSC18Do – "Blazor" おすすめ動画 NDC Oslo 2017 ASP.NET Community Standup – April 3 NDC Minnesota 2018 https://youtu.be/JU-6pAxqAa4https://j.mp/ndc-oslo-blazor https://j.mp/ancs-apr3
  41. 41. 41 OSC18Do – "Blazor" 自習用リソース Blazor 公式サイト https://blazor.net/ LEARN BLAZOR https://learn-blazor.com/ Blazor アプリケーションプログラミング自習書 https://j.mp/selflearn-blazor-jp
  42. 42. 42 OSC18Do – "Blazor" Blazor の弱点
  43. 43. 43 OSC18Do – "Blazor" 実験段階である https://twitter.com/danroth27/status/970174117109424128
  44. 44. 44 OSC18Do – "Blazor" Qiita 「2018年の最先端バックエンドエンジニアに必要なスキル について考えてみました。」
  45. 45. 45 OSC18Do – "Blazor" まとめ
  46. 46. 46 OSC18Do – "Blazor" Blazor が示した未来 • JavaScriptへのトランスパイルでもなく、 WebAssembly へのクロスコンパイルでもない、 実行環境をそのままブラウザ上で走らせること で SPA を実装するアイディアが実証されまし た。 • このような形を含めて WebAssembly の活用の 幅が広がると、その恩恵に預かれるプログラ マやユーザーも増えるのでは、と感じました。 Blazor は SPA 開発者の負担を大幅 に緩和できる • Blazor は、"ブラウザ上で.NETが動く" のその先、 SPAフレームワークと IDE 支援までをも提供す ることで、SPA 開発の開発者体験が大きく改善 することを示してみせました。 • 開発者負担が減ることで、よりよき成果を、 より迅速にユーザーに届けることができるの では、と期待が膨らみます。 JavaScript 以外の言語とランタイ ムが使える可能性
  47. 47. 47 OSC18Do – "Blazor" Lean, Practice, Share.
  48. 48. 48 OSC18Do – "Blazor" Q A Q & A
  49. 49. 49 OSC18Do – "Blazor" Happy Coding :) © 2018 Junichi Sakamoto All rights reserved. 本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属します。 本情報の内容 (添付文書、リンク先などを含む) は、本情報作成時点のものであり、予告なく変更される場合があります

×