🧩 Nodeblocks フロントエンドブロック
近代的な業務アプリのためのコンポーネントライブラリ ⚡
Nodeblocks フロントエンドブロックは、アプリ開発を加速するための再利用可能な React コンポーネント群です。モジュール式でカスタマイズ可能なブロックを組み合わせて、実運用レベルの UI を素早く構築できます。
🎯 フロントエンドブロックとは
事前構築済みの React コンポーネントです。特長:
- 🎨 カスタマイズ容易（ブランド/テーマに適合）
- 🔧 実運用向け（TypeScript・テスト・最適化）
- 🧩 モジュール式（単体でも組み合わせても活用可能）
- ⚡ 高パフォーマンス（モダンな React ベストプラクティス）
🏗️ コンポーネントカテゴリ
🌟 共通コンポーネント
| コンポーネント | 説明 |
|---|---|
| navbar | レスポンシブなナビゲーションバー |
| side-navigation | 折りたたみ式サイドナビゲーション |
| breadcrumb | ページ階層のパンくずリスト |
| footer | プロフェッショナルなフッター |
| hero | ヒーローセクション |
| error-block | エラーメッセージ表示 |
| faq | FAQ セクション |
| chat-conversation | チャット UI |
| chat-conversation-list | チャット会話一覧 |
| settings | 設定画面 |
| filter-search-panel | 高度な検索/フィルタ |
| filter-list | フィルタ可能なリスト |
| search-by-chips | チップによる検索 |
| merits | 実績/メリット表示 |
| how-to-use | 使い方セクション |
👥 ユーザー管理
| コンポーネント | 説明 |
|---|---|
| sign-in | ユーザーのサインイン |
| sign-up | 新規ユーザー登録 |
| reset-password | パスワードリセット |
| list-users | ユーザー一覧管理 |
| basic-information | プロフィール基本情報フォーム |
🏢 組織管理
| コンポーネント | 説明 |
|---|---|
| create-organization | 組織作成ワークフロー |
| view-organization | 組織詳細表示 |
| list-organizations | 組織一覧管理 |
| list-invites | 組織招待の管理 |
📦 商品管理
| コンポーネント | 説明 |
|---|---|
| create-product | 商品作成インターフェース |
| view-product | 商品詳細表示 |
| list-products-table | 商品一覧（テーブル） |
| list-products-grid | 商品一覧（グリッド） |
| attribute-selection | 属性管理 |
🛒 受注管理
| コンポーネント | 説明 |
|---|---|
| view-order | 受注詳細表示 |
| list-order | 受注一覧管理 |
| list-order-table | 受注一覧（テーブル） |
✨ 主な特長
🎨 デザイン/UX
- コンポーネント間で一貫したスタイル
- テーマ/ブランドに合わせて拡張可能
- レスポンシブデザイン
🔧 開発者体験
- TypeScript 対応
- 明確な Props インターフェース
- 豊富なドキュメント
🚀 パフォーマンス
- 本番運用を想定した最適化
- 遅延ロード対応
- 最小限のバンドル影響
♿ アクセシビリティ
- キーボード操作
- スクリーンリーダー配慮
- フォーカス管理
🚀 はじめに
インストール
npm install @nodeblocks/frontend-navbar-block
npm install @nodeblocks/frontend-signin-block
基本的な使い方
import {Navbar} from '@nodeblocks/frontend-navbar-block';
import {SignIn} from '@nodeblocks/frontend-signin-block';
function App() {
return (
<div>
<Navbar leftContent={<img src="/logo.png" alt="Logo" />} />
<SignIn onSubmit={(data) => console.log('Login:', data)} />
</div>
);
}
🔗 ドメインアプリとの連携
Nodeblocks ドメインアプリとシームレスに連携できます。
- ブロック: 見た目と UI を提供
- ドメインアプリ: 業務ロジックと状態管理を提供
- 両者を組み合わせることで、完成度の高いアプリを短期間で構築可能
📈 メリット
- ⚡ 開発速度向上（UI 実装を大幅短縮）
- 🎨 品質の向上（実運用で検証済みの UI）
- 🔧 柔軟性（必要なブロックのみ採用/拡張）
- 💰 コスト効率（開発・保守の負担を軽減）
Nodeblocks チームが愛を込めて開発しています ❤️