MASA Blazorは、Blazor向けのUIコンポーネントライブラリです。フロントエンドでよく知られているBootstrapやAnt Designのように、開発者がWebアプリケーションを構築するための部品を提供します。
MASA Blazor 公式サイト： https://blazor.masastack.com
MASA Blazor GitHub リポジトリ： https://github.com/BlazorComponent/MASA.Blazor
MASA Blazor Pro デモサイト： https://blazor-pro.masastack.com/dashboards/ecommerce
MASA Blazor Pro GitHub リポジトリ： https://github.com/BlazorComponent/MASA.Blazor.Pro
Blazorとは
MASA Blazorを紹介する前に、Blazorが何かを理解しておく必要があります。すでにBlazorをご存知の方は、このセクションをスキップして先に進んでください。
Blazorは、.NETを使用してインタラクティブなクライアントサイドWeb UIを構築するためのフレームワークです。Blazorを使えば、開発者はC#言語を使ってサーバー側とクライアント側の両方でコードを記述し、リッチなWebアプリケーションを構築できます。フロントエンド開発言語に詳しくないバックエンド開発者でも、Blazorを使ってWebアプリケーションを開発できるというのは魅力的です。簡単に公式の説明を見てみましょう。
Blazorをさらに詳しく知りたい方は、こちらの記事をご覧ください。Blazorとは何か、他のフロントエンド技術との比較が詳しく説明されています。または、公式ドキュメントを直接参照しても構いません。ここでは詳しく説明しません。
Material Design
Blazorを理解したところで、次にMaterial Designについて簡単に説明します。なぜMaterial Designなのかというと、MASA BlazorがMaterial Designに基づいて設計されているからです。
概要： Material Design（日本語では「マテリアルデザイン」、または「マテリアルデザイン言語」）は、Googleが提唱するクロスプラットフォームのデザイン言語です。スマートフォン、タブレット、デスクトップ、その他のプラットフォームで一貫した使用体験と視覚効果を提供することを目的としています。
利点： Material Designは、デザインにおける影の使い方、アニメーションの使い方、さらには使用するピクセル数の境界線に至るまで提案を提供します。これにより、より合理的なページ構造、タイポグラフィ、フォントサイズと間隔を構築するのに役立ちます。また、優雅でスムーズなインタラクション効果を定義し、ユーザーの視覚的な焦点とインタラクション操作をページ内で導きます。
Material Designの核心はシンプルさです。大きく、シンプルで、精緻です。物理世界の体験を画面に持ち込みます。現実の不純物やランダム性を取り除き、最も純粋で原始的な形、空間関係、変化と遷移を保持し、仮想世界の柔軟性と組み合わせて、最も現実に近い体験を再現し、シンプルで直感的な効果を実現します。その利点はこれだけではありません。海外の多くのアプリケーションや多数のWebサイトがMaterial Designに基づいてデザインされています。海外では非常に人気があります。Material Designについてもっと知りたい方は、公式サイトをご覧ください。ここではこの程度にしておきます。
Vuetify
Vuetifyは、世界的に人気のあるVue UIフレームワークで、Vue.jsの上に構築された完全なUIフレームワークです。他のフレームワークとは異なり、Vuetifyは最初から学習しやすく、Material Design仕様に基づいた何百もの精巧にデザインされたコンポーネントを備えています。Vuetifyはモバイルファーストの設計を採用しており、スマートフォン、タブレット、デスクトップのいずれでも、アプリケーションがそのまま使用できます。
つまり、Vueを使っている開発者はVuetifyを使うことで、Material Designスタイルのアプリケーションを簡単に構築できます。
すごいでしょう？ここまではフロントエンドの話ばかりでしたが、BlazorにはそのようなUIコンポーネントライブラリはあるのでしょうか？答えは「もちろんあります」、それがMASA Blazorです。ようやく主役の登場です。
MASA Blazor
冒頭で述べたように、MASA BlazorはBlazorのUIコンポーネントライブラリです。BlazorはJavaScriptを離れてWebアプリケーションを開発できるようにし、MASA Blazorは、CSSをほとんど、あるいはまったく書かなくても美しいWebアプリケーションを構築できるようにします。MASA Blazorは、Material Designの設計仕様に厳密に従って精巧にデザインされたUIコンポーネントライブラリです。次にその利点を説明します。
- Material Designのデザインスタイルに基づいており、Material Designのすべてのデザイン上の利点（マルチデバイスでの優れた体験、インタラクション、操作性）を備えています。
- Blazorと深く統合されており、バックエンド開発者でも非常に簡単に使い始められます。
- レスポンシブデザインが標準装備。Vuetifyが持つコンポーネントに加えて、URL、パンくずリスト、3連動ナビゲーション、高度な検索、i18nなどのプリセットコンポーネントも多数用意されています。
- コミュニティが活発で、簡単に使い始められ、フルタイムのチームがメンテナンスしています。
MASA BlazorはVuetifyのすべてのコンポーネントを深く再現しており、1:1の再現に加えて、非常に便利なプリセットコンポーネントを追加しています。よく使われるコンポーネントやコンポーネントグループをカプセル化し、開発者の日常的な使用に合わせて、開発時間を大幅に短縮し、開発効率を向上させます。また、ほとんどのバックエンド開発者がスタイル調整に悩む問題も解決します。数行のコードで美しいページを素早く構築できます。それでは、BlazorプロジェクトにMASA Blazorを導入する方法を見てみましょう。
MASA Blazorの使用
- 環境：.NET 6.0.0 + Visual Studio 2022
- Blazor Serverアプリを作成
dotnet new blazorserver -o BlazorServerApp
- MASA.Blazorパッケージを追加
NuGetパッケージマネージャーで「MASA.Blazor」を検索して追加するか、直接以下のコマンドを実行します。
dotnet add package MASA.Blazor
- Program.csにMasa Blazor関連のサービスを追加します。
builder.Services.AddMasaBlazor();
ここでは.NET 6.0のMinimal APIを使用しており、Startupクラスはありません。コードも簡潔です。古いバージョンの.NETの場合は、Startup.ConfigureServicesでservices.AddMasaBlazor();を追加してください。
- Pages/_Layout.cshtmlにスタイル、フォント、スクリプトを追加
head内にスタイルとフォントを追加
<link href="_content/MASA.Blazor/css/masa-blazor.css" rel="stylesheet" />
<link href="_content/MASA.Blazor/css/masa-extend-blazor.css" rel="stylesheet" />
<link
href="https://cdn.jsdelivr.net/npm/@("@mdi")/font@5.x/css/materialdesignicons.min.css"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Material+Icons"
rel="stylesheet"
/>
<link
href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
rel="stylesheet"
/>
bodyの最後にJavaScriptスクリプトを追加
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
.NET 6.0より前のバージョンでは、これらのコードはPages/_Host.cshtml（Server）に記述します。
_Imports.razorファイルでMASA.BlazorとBlazorComponent名前空間を参照します。これにより、各ファイルで個別に参照する必要がなくなります。
@using MASA.Blazor @using BlazorComponent
Shared/MainLayout.razorの内容を置き換えます。
<MApp> @Body </MApp>
テンプレートを使用してBlazorプロジェクトをすばやく作成する
上記の手順を実行すれば、MASA Blazorベースの開発を開始できます。ただし、手順が少し多く、煩雑に感じるかもしれません。MASA Blazorもその点を考慮しており、テンプレートを使用してインストールする、より簡単な方法を提供しています。
- dotnetコマンドでテンプレートをインストール
dotnet new --install MASA.Template
- MASA BlazorコンポーネントライブラリベースのBlazor Serverプロジェクトを作成
dotnet new masab -o BlazorServerApp
これで2ステップで完了です。このようにして作成されたプロジェクトは、上記の手順を自動的に実行してくれます。
効果の表示
次に、MASA Blazorのサイドバーとトップツールバーを使用して、元のデモのコンポーネントを置き換えてみましょう。コードの一部を以下に示します。
MNavigationDrawerコンポーネントとMAppBarコンポーネントを使用しています。
結果は以下のとおりです。
他にも多くの美しくて面白いコンポーネントが公式サイトにサンプルとコードとともに掲載されています。例えば、このAppBar：
ソースコードをクリックして表示し、コードをコピーすれば、コンポーネントの完成です。
結果を見てみましょう。
とても簡単です。
公式が提供するAdminテンプレート（MASA Blazor Pro）の効果も見てみましょう。
MASA Blazor Proは、ほとんどのMASA Blazorコンポーネントの使用例を示しています。また、すぐに使えるバックエンド管理フロントエンドテンプレートです。どちらもオープンソースで無料です。興味のある方はぜひご覧ください。
MASA Blazor 公式サイト： https://blazor.masastack.com
MASA Blazor GitHub リポジトリ： https://github.com/BlazorComponent/MASA.Blazor
MASA Blazor Pro デモサイト： https://blazor-pro.masastack.com/dashboards/ecommerce
MASA Blazor Pro GitHub リポジトリ： https://github.com/BlazorComponent/MASA.Blazor.Pro
私たちは動いています。新しいフレームワーク、新しいエコシステム
私たちの目標は、「自由」「使いやすい」「カスタマイズ性が高い」「機能豊富」「堅牢」であることです。
そのために、Building blocksの設計理念を参考に、新しいフレームワーク「MASA Framework」を開発しています。その特徴は以下のとおりです。
- Daprをネイティブサポートし、Daprを従来の通信方式に置き換えることも可能。
- アーキテクチャに制限なし。モノリシック、SOA、マイクロサービスのいずれもサポート。
- .NETネイティブフレームワークをサポートし、学習負荷を低減。特定のドメインで必要な概念以外は、新しい車輪を発明しないという方針。
- 豊富なエコシステムサポート。フレームワーク以外にも、コンポーネントライブラリ、権限センター、設定センター、障害追跡センター、アラートセンターなどの製品を提供。
- コアコードの単体テストカバレッジは90%以上。
- オープンソース、無料、コミュニティ駆動。
- 他に何か？私たちはあなたを待っています。一緒に議論しましょう。
数ヶ月のプロダクションプロジェクトでの実践を経て、POCは完了しました。現在、以前の蓄積を新しいオープンソースプロジェクトにリファクタリングしています。
現在、ソースコードはGitHubに同期され始めています（ドキュメントサイトは計画中で、徐々に充実させていきます）。
技術交流：
- QQグループ： 7424099
- WeChatグループ：技術運営のWeChat（MasaStackTechOps）を追加し、用件を明記の上、グループに招待されます。
------ END ------
著者紹介
- 閻鵬挙：MASA技術チームメンバー。