Quantcast
Channel: C#タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9364

Blazor 学習のためのサンプルアプリ紹介

$
0
0

はじめに

皆様こんにちは! Elastic PMM/Eva の鈴木章太郎です。
この記事は、求ム!Cloud Nativeアプリケーション開発のTips!【PR】日本マイクロソフト Advent Calendar 2020の18日目の記事です。
※ MS マーケの ◯◯ さん(元同僚でこのアドベントカレンダーのオーナー)、Python に続いて投稿が遅くなり申し訳ないです!w

Blazor に対する市場の期待

Build 2020で、Microsoft は Blazor WebAssembly の公式の最初のリリースを発表しました。僕と同じく長年の.NET デベロッパーであれば、皆がこれを使いたいと思っていると思います。そして、Blazor がアップデートと LTS(長期サポート) ステータスを取得した .NET 5のリリース済の現在、採用しない理由もないでしょう。
Blazor の可能性に興味があり、これを使用することを検討されている方は、今が開始するに絶好の機会です。マイクロソフトも、Microsoft Learnをはじめ、このテーマに関するコースを公開していますので、まずはそれで学習をして、Blazor がどのように機能するかについての基礎を学ぶのが良いと思います。
ただし、長い間、市場から期待されたプロジェクトで、コミュニティの注目度や興奮度が高かったのと、長い公開プレビューのおかげで、Blazor には膨大な数のサンプルプロジェクトがあります。書籍などもプレビューでも書いていた方も何人か知ってますw
そこでまずは、いくつかの Blazor のサンプルプロジェクトをご紹介したいと思います。

サンプルの使用方法:

この2つだけです。

・ 最新の Visual Studio (Windows / Mac)

ここで紹介するサンプルプロジェクトにはソリューションファイルが含まれており、一部のプロジェクトはサーバー側とクライアント側が別々なので、Visual Studio Code より、Visual Studio 2019 の方が少し便利かもしれません。

.NET Core SDK

Awesome Blazor Browser

最初にご紹介するのは、MVP jsakamoto さんの手による超シンプルなAwesome Blazor Browserです。これは素晴らしい本当に便利なプロジェクトで、Blazor の初心者でも、一気に中身を全て見ていくことができるでしょう。

image.png

これは、AdrienTorris の Awesome Blazor ページを見るときに、役立ちます。
image.png

このページは、Code、ドキュメント、ビデオ講義、関連プロジェクト、等々の Blazor 情報の膨大なリストとなっています。かなりボリュームがあり、またリンク切れしていたりします。
そこで、この Awesome Blazor Browser を利用します。Awesome Blazor ページをダウンロードして、論理的な単位に分割して、コンテンツを簡単に参照およびフィルタリングすることができます。しかも Blazor UI に適合しています。

Lupusa Blazor Demos

より細分化された多くの小さな Blazor プロジェクトを概観したい場合は、Lupusa Blazor Demoが目的に合致します。このサイトは、オンラインで試すことができる楽しいデモサイトです。

ここでは20を超えるサンプルから必ず新しいことを学べます。例えば基本的な Snake ゲーム、Canvas のようなドローアプリや、擬似的なスプレッドシート等があります。また、ドラッグ&ドロップ、スプリッターバー、JavaScript の相互運用など、Blazor に完全には組み込まれていないいくつかの基本的なテクニックのデモンストレーションも入っていて便利です。
GitHub から Lupusa Blazor をダウンロードしたり、オンラインで実行したりできます。
スクリーンショット 2020-12-19 19.23.26.png
スクリーンショット 2020-12-19 19.26.01.png
スクリーンショット 2020-12-19 19.25.04.png

Practical ASP.NET Core

Practical ASP.NET Coreは、数十個の個別の小さなサンプルを使用して ASP.NET の本質を説明することを目的とした、昔から著名なプロジェクトです。たとえば、localization について学習したい場合は、そのためのフォルダーが用意されています。まただんだん複雑さが増していく6つのクックブックスタイルの例もあります。
Blazor に関する実用的な ASP.NET のセクションは小さいですが、増え続けています。現在は、Blazor コンポーネント(構造化方法と通信方法)とデータバインディングに焦点を当てています。
とても良いのですが、要改善点をあげるとしたら、Blazor の例を表示するためにアーカイブ全体をダウンロードする必要があることです。ただし、このサンプルのコレクションで参考になるものを見つけられる可能性は高いです。
Practical ASP.NET Core はGitHub からダウンロードできます。

Blazing Pizza

Blazing Pizzaは、Microsoft によって作成されたサンプルです。
このままで本番ではリリースできないかもしれないですが、オンラインピザ注文サイトのかなり完全な再現をしています。また、gRPC Procedure Call や、サーバー側の Worker Process で Queue に入れられたタスクなどの高度なトピックについても触れます。したがって、Blazing Pizza は多くのブログなどで言及されるサンプルといえます。
image.png

Blazing Pizza サンプルの良い点は、リソースが多数用意されていることです。Microsoft には、Blazing Pizza を自分で開発するプロセスをガイドする一連の10のレッスンがあります(スターターファイルと事前に作成されたコードの断片を使用します)。これらのレッスンはワークショップと呼ばれ、GitHub ページですべてのレッスンへのリンクが貼られています。
それでもよくわからないという場合は、ビデオも用意されています。Blazor PM の Daniel Roth が Blazing Pizza のDeeop Dive を Youtube で公開し、Twitch のライブストリームコーダーである Steve Smith が、ワークショップ全体での作業を示す2時間のビデオを公開しています。
Blazing Pizza は GitHubからダウンロードでき、同じページに10のワークショップがあります。

Blazor Boilerplate

Blazor Boilerplateプロジェクトは、管理ダッシュボード、クライアント側またはサーバー側の実行のサポート、ASP.NET 認証、およびマテリアル UI を備えた、まさにプロフェッショナル用の Blazor アプリケーションに使用できるテンプレートとなっています。ドラッグ&ドロップなど、いくつかの追加機能も追加されます。
image.png

この Blazor Boilerplate からも、自分の Blazor アプリケーションを構築する方法について、かなり参考になるアイデアを取得できると思います。
Blazor Boilerplate は、GitHub から ダウンロードもできますし、オンラインで実行もできます。
スクリーンショット 2020-12-19 19.52.25.png

今後の予定等

以上です。僕も今後、Elastic x ASP.NET Core x Blazor のサンプルなどを作って、Application Search、Application 監視(APM)、Observability などのデモをご紹介していきたいと思っています!

今月はあと26日の .NET ラボ 勉強会 2020年12月に、登壇します。
年明けも色々イベントでの登壇を予定していますので、是非ご覧いただければありがたいです。
今後ともよろしくお願いします!

鈴木章太郎
Elastic テクニカルプロダクトマーケティングマネージャー
内閣官房IT総合戦略室 政府CIO補佐官


Viewing all articles
Browse latest Browse all 9364

Latest Images

Trending Articles