メインコンテンツまでスキップ

🧩 Nodeblocks フロントエンドブロック

モダンなビジネスアプリケーションのための完全なコンポーネントライブラリ ⚡

Nodeblocks フロントエンドブロックへようこそ - アプリケーション開発を加速するために設計された32種類の本番環境対応Reactコンポーネントの包括的なコレクションです。これらのモジュール式でカスタマイズ可能なブロックは、アプリケーションに命を吹き込むビジュアルビルディングブロックです。

📋 目次​

🎯 フロントエンドブロックとは？​

フロントエンドブロックは、アプリケーションのビジュアル基盤となる構築済みのカスタマイズ可能なReactコンポーネントです。各ブロックの特長：

  • 🎨 完全なカスタマイズ性: ブランドやデザイン要件に適応
  • 🔧 本番環境対応: TypeScriptで構築、テスト済み、最適化済み
  • 🧩 モジュール式: 単体でも組み合わせても使用可能
  • ⚡ パフォーマンス最適化: モダンなReactベストプラクティスで構築

🏗️ コンポーネントカテゴリ​

🌟 共通コンポーネント​

あらゆるアプリケーションの基本ビルディングブロック

コンポーネント説明
navbarレスポンシブデザインのメインナビゲーションバー
side-navigation折りたたみ式サイドバーナビゲーション
breadcrumbページ階層のナビゲーションパンくずリスト
footerプロフェッショナルなフッターコンポーネント
hero目を引くヒーローセクション
error-block美しいエラーメッセージ表示
faqよくある質問セクション
chat-conversationリアルタイムチャットインターフェース
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テーブル形式の受注管理

✨ 主な特長​

🎨 デザインシステム統合​

  • 全コンポーネントで一貫したスタイリング
  • カスタマイズ可能なテーマシステム
  • レスポンシブデザインパターン
  • モダンなUI/UXベストプラクティス

🔧 開発者体験​

  • 完全なTypeScriptサポート
  • 包括的なドキュメント
  • 明確なPropsインターフェース
  • 直感的なコンポーネントAPI

🚀 パフォーマンス​

  • 本番使用向けに最適化
  • 遅延読み込みサポート
  • 最小限のバンドル影響
  • 効率的なレンダリングパターン

📱 アクセシビリティ​

  • キーボードナビゲーションサポート
  • スクリーンリーダー互換性
  • フォーカス管理

🚀 はじめに​

インストール​

まず、テーマパッケージをインストールします（すべてのコンポーネントで必須）：

npm install @nodeblocks/frontend-theme

その後、必要に応じて個別のコンポーネントをインストールします：

npm install @nodeblocks/frontend-navbar-block@0.2.0
npm install @nodeblocks/frontend-signin-block@0.3.0

⚠️ 重要: アプリケーションは必ず@nodeblocks/frontend-themeのThemeProviderでラップしてください。これがないとコンポーネントが正しくレンダリングされない場合があります。詳細はテーマガイドを参照してください。

基本的な使い方​

import { ThemeProvider } from '@nodeblocks/frontend-theme';
import { Navbar } from '@nodeblocks/frontend-navbar-block';
import { SignIn } from '@nodeblocks/frontend-signin-block';

function App() {
  return (
    <ThemeProvider>
      <Navbar
        leftContent={<Navbar.Logo src="/logo.png" alt="Logo" />}
        centerContent={
          <div style={{ display: 'flex', gap: 16 }}>
            <Navbar.Link href="/home">ホーム</Navbar.Link>
            <Navbar.Link href="/products">商品</Navbar.Link>
          </div>
        }
        rightContent={<Navbar.ButtonLink href="/login">ログイン</Navbar.ButtonLink>}
        sx={{ backgroundColor: 'white', boxShadow: 1 }}>
        <Navbar.Left />
        <Navbar.Center />
        <Navbar.Right />
      </Navbar>
      
      <SignIn
        onSubmit={(formData) => console.log('ログイン:', formData)}
        onChange={(setError, getValues, clearErrors) => {
          const values = getValues();
          if (!values.email) {
            setError('email', { message: 'メールアドレスは必須です', type: 'required' });
          } else {
            clearErrors('email');
          }
        }}
        signupUrl="#signup"
        resetPasswordUrl="#reset-password">
        <SignIn.SignInTitle>おかえりなさい</SignIn.SignInTitle>
        <SignIn.EmailField label="メールアドレス" placeholder="メールアドレスを入力" />
        <SignIn.PasswordField label="パスワード" placeholder="パスワードを入力" />
        <SignIn.SignInButton>サインイン</SignIn.SignInButton>
      </SignIn>
    </ThemeProvider>
  );
}

💡 使用例​

# テーマパッケージ（必須）
npm install @nodeblocks/frontend-theme

# Eコマース例のコンポーネント
npm install @nodeblocks/frontend-navbar-block@0.2.0
npm install @nodeblocks/frontend-footer-block@0.2.0
npm install @nodeblocks/frontend-list-products-grid-block@0.2.0

🏪 Eコマースアプリケーション​

import { ThemeProvider } from '@nodeblocks/frontend-theme';
import { Footer } from '@nodeblocks/frontend-footer-block';
import { ListProductsGrid } from '@nodeblocks/frontend-list-products-grid-block';
import { Navbar } from '@nodeblocks/frontend-navbar-block';

export default function EcommerceApp() {
  const products = [
    {
      title: 'プレミアムヘッドフォン',
      subtitle: '高品質オーディオ',
      imageUrl: '/headphones.jpg',
      chips: [{ label: '新着' }],
      tags: [{ icon: 'shopping_bag' as const, label: '電子機器' }],
      linkProps: {
        href: '/products/1',
        onNavigate: () => console.log('商品を表示'),
      },
    },
  ];

  return (
    <ThemeProvider>
      <Navbar
        leftContent={<Navbar.Logo src="/logo.png" alt="ストア" style={{ height: 32 }} />}
        centerContent={
          <div style={{ display: 'flex', gap: 16 }}>
            <Navbar.Link href="/home">ホーム</Navbar.Link>
            <Navbar.Link href="/products">商品</Navbar.Link>
          </div>
        }
        rightContent={<Navbar.ButtonLink href="/cart">カート (0)</Navbar.ButtonLink>}
        sx={{ backgroundColor: 'white', boxShadow: 1 }}>
        <Navbar.Left />
        <Navbar.Center />
        <Navbar.Right />
      </Navbar>

      <main style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh', backgroundColor: 'white' }}>
        <ListProductsGrid listProductsGridTitle="注目の商品" subtitle="最新コレクション">
          <ListProductsGrid.Title />
          <ListProductsGrid.Items>
            {products.map(product => (
              <ListProductsGrid.Items.GridCard key={product.title} {...product} />
            ))}
          </ListProductsGrid.Items>
        </ListProductsGrid>

        <Footer
          logoSrc="/logo.png"
          copyright="© 2025 Nodeblocks. All rights reserved."
          content={<div>お問い合わせ: info@example.com</div>}
          sx={{ marginTop: 'auto' }}>
          <Footer.Logo />
          <Footer.Content />
          <Footer.Copyright />
        </Footer>
      </main>
    </ThemeProvider>
  );
}

🏢 エンタープライズダッシュボード​

npm install @nodeblocks/frontend-side-navigation-block@0.3.0
npm install @nodeblocks/frontend-list-users-block@0.2.0
npm install @nodeblocks/frontend-filter-search-panel-block@0.3.0
import { useState } from 'react';
import { ThemeProvider } from '@nodeblocks/frontend-theme';
import { FilterSearchPanel } from '@nodeblocks/frontend-filter-search-panel-block';
import { ListUsers } from '@nodeblocks/frontend-list-users-block';
import { SideNavigation } from '@nodeblocks/frontend-side-navigation-block';

export default function DashboardApp() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <ThemeProvider>
      <div style={{ display: 'flex', backgroundColor: 'white', height: '100vh', alignItems: 'start' }}>
        <SideNavigation
          isFloating={true}
          isMenuOpen={isMenuOpen}
          setIsMenuOpen={setIsMenuOpen}
          links={[
            { text: 'ダッシュボード', href: '/dashboard' },
            { text: 'ユーザー', href: '/users' },
            { text: '設定', href: '/settings' },
          ]}
          sx={{ height: '100vh', width: '200px' }}
        />

        <main style={{ flex: 1, paddingLeft: '20px', paddingRight: '20px' }}>
          <FilterSearchPanel
            onSearch={({ search }) => console.log('検索:', search)}
            filters={[
              { label: 'アクティブ', key: 'status-active', groupName: 'ステータス' },
              { label: '管理者', key: 'role-admin', groupName: '権限' },
            ]}
            onClickRemoveFilter={(filter) => console.log('フィルター削除:', filter)}
            searchPlaceholder="ユーザーを検索..."
          />

          <ListUsers
            listUsersTitle="チームメンバー"
            labels={{
              emptyStateMessage: 'ユーザーが見つかりません',
              headerRow: {
                name: '名前',
                status: 'ステータス',
                createdAt: '作成日',
              },
              cellData: {
                statusInUse: 'アクティブ',
                statusNotInUse: '非アクティブ',
              },
            }}
            data={[
              { id: '1', name: '山田 太郎', status: 'active', createdAt: '2025-01-15T10:30:00Z' },
              { id: '2', name: '鈴木 花子', status: 'inactive', createdAt: '2025-01-20T09:15:00Z' },
            ]}
            rowHref={(row) => `#users/${row.id}`}
            onNavigate={(path) => console.log('ナビゲート:', path)}>
            <ListUsers.Header>
              <ListUsers.Title />
            </ListUsers.Header>
            <ListUsers.Content />
          </ListUsers>
        </main>
      </div>
    </ThemeProvider>
  );
}

🔗 ドメインアプリとの統合​

フロントエンドブロックはNodeblocks ドメインアプリとシームレスに連携し、完全なアプリケーションソリューションを提供できます：

  • ブロックが提供: ビジュアルコンポーネントとユーザーインターフェース
  • ドメインアプリが提供: ビジネスロジックと状態管理
  • 両者を組み合わせることで: 完全な本番環境対応アプリケーションを実現

📈 メリット​

⚡ スピード​

  • 開発時間を70%削減
  • 面倒なUI開発をスキップ
  • ビジネスロジックに集中

🎨 品質​

  • 本番環境でテスト済みのコンポーネント
  • 一貫したデザイン言語
  • プロフェッショナルな外観

🔧 柔軟性​

  • コンポーネントを自由に組み合わせ
  • ニーズに合わせてカスタマイズ
  • 独自のブロックで拡張

💰 コスト効率​

  • 開発コストの削減
  • 市場投入までの時間短縮
  • メンテナンスオーバーヘッドの軽減

Basalの Nodeblocks チームが❤️を込めて構築しました