@blocklet/ui-react/docs/overview.ja.md

Some useful front-end web components that can be used in Blocklets.

# 概要

`@blocklet/ui-react`ライブラリは、Blockletと呼ばれるアプリケーションの開発を加速するために設計された、必須のReactコンポーネントのコレクションを提供します。これは、Blockletのメタデータをインテリジェントに使用することで、一般的なユーザーインターフェース要素の作成を合理化し、開発者が最小限の労力で一貫性のある機能豊富なUIを構築できるようにします。

このライブラリは、Material-UIのテーマ付き拡張である`@arcblock/ux`を基盤として構築されています。この基盤により、すべてのコンポーネントが堅牢で、アクセシビリティが高く、アプリケーションのブランディングに合わせて簡単にカスタマイズできることが保証されます。

## 解決する課題

現代のWebアプリケーションでは、レイアウト、ユーザー管理、通知のために標準的なUIコンポーネントのセットがしばしば必要とされます。これらをプロジェクトごとにゼロから実装するのは時間がかかり、一貫性の欠如につながる可能性があります。Blocklet UI Reactライブラリは、Blockletのメタデータ（`blocklet.yml`）に基づいて自動的に設定される、事前に構築されたコンポーネントを提供することで、この問題に対処します。

このメタデータ駆動のアプローチは、アプリケーション名、ロゴ、ナビゲーションリンク、テーマカラーなどの要素がコンポーネント全体に自動的に適用されることを意味し、定型的なコードを大幅に削減し、ブランドの一貫性を確保します。

## コアアーキテクチャ

このライブラリのアーキテクチャは、シンプルさと自動化を目的として設計されています。`Header`や`Footer`のようなコンポーネントがレンダリングされると、`window.blocklet`オブジェクトから設定データを読み取ります。このオブジェクトは、Blocklet Serverによって`blocklet.yml`ファイルから読み込まれます。これにより、UIの構造とブランディングを中央の設定ファイルで定義でき、コンポーネントはそれに応じて適応します。

<!-- DIAGRAM_IMAGE_START:architecture:16:9:1765962229 -->
![Overview](assets/diagram/overview-diagram-0.ja.jpg)
<!-- DIAGRAM_IMAGE_END -->

## 主な機能

-   **メタデータ駆動:** `blocklet.yml`で定義されたBlockletの名前、ロゴ、ナビゲーション構造を使用して、`Header`や`Footer`などのコンポーネントを自動的に設定します。
-   **統合されたセッション管理:** コンポーネントはDID Connectセッションとシームレスに統合し、ユーザープロファイル情報、セッションコントロール、およびナビゲーションリンクへのロールベースのアクセスを自動的に表示します。
-   **レスポンシブレイアウト:** `Dashboard`のような強力なレイアウトコンポーネントが含まれており、管理インターフェースのためのレスポンシブな構造をすぐに提供します。
-   **コンポーネント管理:** `ComponentInstaller`や`BlockletStudio`などのツールを提供し、Blockletエコシステム内での依存関係やリソースの管理を支援します。

## コアコンポーネント

ライブラリはいくつかの主要なモジュールに整理されており、それぞれがアプリケーションUIの特定の領域に対応しています。

<x-cards data-columns="2">
  <x-card data-title="Layout" data-icon="lucide:layout-template" data-href="/components/layout">
    Header、Footer、Dashboardのような主要コンポーネントで、Blockletアプリケーションの主要な構造を形成します。
  </x-card>
  <x-card data-title="User Management" data-icon="lucide:users" data-href="/components/user-management">
    ユーザープロファイル、セッション管理、組織の切り替えを処理するための一連のコンポーネント。
  </x-card>
  <x-card data-title="Component Management" data-icon="lucide:box" data-href="/components/component-management">
    アプリケーション内でBlockletコンポーネントを動的にインストール、公開、管理するためのツール。
  </x-card>
  <x-card data-title="Utilities" data-icon="lucide:wrench" data-href="/components/utilities">
    多機能なIconコンポーネントやテーマプロバイダーなど、ヘルパーコンポーネントとユーティリティのコレクション。
  </x-card>
</x-cards>

## まとめ

`@blocklet/ui-react`ライブラリを活用することで、開発時間を大幅に短縮し、アプリケーション独自の機能に集中することができます。メタデータ駆動のアプローチは一貫性を確保し、一般的なUI要素の管理を簡素化します。

アプリケーションの構築を開始するには、[はじめに](./getting-started.md)ガイドに進み、ライブラリのインストールと最初のコンポーネントのレンダリングに関するステップバイステップのチュートリアルをご覧ください。