⚡ クイックスタートガイド

10分以内で最初のNodeblocksアプリケーションを構築 🚀

このガイドでは、Nodeblocksフロントエンドコンポーネントを素早く立ち上げて実行する方法を説明します。ナビゲーション、認証、データ管理を備えた完全なアプリケーションを作成します。

⏱️ 完了時間: 5-10分
💻 作成するもの: 完全なユーザー管理アプリケーション
📋 前提条件: Node.js 18+、Reactの知識

📋 前提条件

システム要件

Node.js 18.0+ (こちらからダウンロード)
npm 8.0+ または yarn 1.22+
React 18.0+ (セットアップします)
基本的な TypeScript の知識 (推奨)

レジストリアクセス設定

Nodeblocksパッケージをインストールする前に、プライベートnpmレジストリへのアクセスを設定します：

ステップ1: .npmrcファイルの作成

# プロジェクトルートに.npmrcファイルを作成
touch .npmrc

ステップ2: レジストリ設定の追加

.npmrcファイルに以下を追加します：

@nodeblocks:registry=https://registry.npmjs.org
@basaldev:registry=https://registry.npmjs.org
//registry.npmjs.org/:_authToken=${NODEBLOCKS_DEV_TOKEN}

ステップ3: 環境トークンの設定

# Linux/macOS
export NODEBLOCKS_DEV_TOKEN=your_token_here

# Windows
set NODEBLOCKS_DEV_TOKEN=your_token_here

💡 トークンが必要ですか？ 開発アクセストークンを取得するには、Nodeblocksチームにお問い合わせください。

📦 インストール

# 状態管理のためのコアドメインパッケージ
npm install @nodeblocks/matching-app-domain

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

# 必須UIコンポーネント
npm install @nodeblocks/frontend-navbar-block@0.2.0
npm install @nodeblocks/frontend-footer-block@0.2.0
npm install @nodeblocks/frontend-signin-block@0.3.0
npm install @nodeblocks/frontend-list-users-block@0.2.0

🏗️ プロジェクト設定

新しいReactプロジェクトの作成（必要な場合）

新規の場合は、新しいReactプロジェクトを作成します：

# Viteを使用（推奨）
npm create vite@latest my-nodeblocks-app -- --template react-ts
cd my-nodeblocks-app

# React依存関係をインストール
npm install react@^19.0.0 react-dom@^19.0.0
npm install --save-dev @types/react@^19.0.0 @types/react-dom@^19.0.0

npm install

🎯 最初のアプリを構築

ステップ1: アプリケーションシェルの作成

src/App.tsxを以下の完全な例に置き換えます：

import React from 'react';
import { ThemeProvider } from '@nodeblocks/frontend-theme';
import { MatchingAppDomain } from '@nodeblocks/matching-app-domain';
import { Navbar } from '@nodeblocks/frontend-navbar-block';
import { Footer } from '@nodeblocks/frontend-footer-block';
import { SignIn } from '@nodeblocks/frontend-signin-block';
import { ListUsers } from '@nodeblocks/frontend-list-users-block';

function App() {
  return (
    <ThemeProvider>
      <MatchingAppDomain 
        applicationType={['admin']}
        serviceEndpoints={{
          user: 'http://localhost:3000/users',
          auth: 'http://localhost:3000/auth',
          organization: 'http://localhost:3000/orgs',
          catalog: 'http://localhost:3000/catalog',
          chat: 'http://localhost:3000/chat',
          order: 'http://localhost:3000/orders',
        }}
        logoutRedirectUrl="/login"
        loggedInRedirectUrl="/users"
        sessionType="local_storage"
      >
        {({state, middleware}) => {
          // 現在の状態に基づくシンプルなページルーティング
          const renderCurrentPage = () => {
            switch (state.currentPage) {
              case 'login':
                return (
                  <div style={{maxWidth: '400px', margin: '2rem auto', padding: '2rem'}}>
                    <SignIn
                      onSubmit={async (formData) => {
                        try {
                          await middleware.onActionLogin(formData.email || '', formData.password || '');
                          console.log('ログイン成功！');
                        } catch (error) {
                          console.error('ログイン失敗:', error);
                        }
                      }}
                      onChange={(setError, getValues, clearErrors) => {
                        const values = getValues();
                        if (values.email && !/\S+@\S+\.\S+/.test(values.email)) {
                          setError('email', {message: '無効なメール形式', type: 'pattern'});
                        } else {
                          clearErrors('email');
                        }
                      }}
                      signupUrl="#signup"
                      resetPasswordUrl="#reset-password"
                      sx={{ maxWidth: 400, mx: 'auto' }}>
                      <SignIn.SignInTitle>おかえりなさい</SignIn.SignInTitle>
                      <SignIn.EmailField label="メール" placeholder="メールアドレスを入力" />
                      <SignIn.PasswordField label="パスワード" placeholder="パスワードを入力" />
                      <SignIn.SignInButton>サインイン</SignIn.SignInButton>
                      <SignIn.GotoSignUp>
                        <span>アカウントをお持ちでないですか？ <a href="#signup">サインアップ</a></span>
                      </SignIn.GotoSignUp>
                      <SignIn.ResetPassword>
                        <a href="#reset-password">パスワードをお忘れですか？</a>
                      </SignIn.ResetPassword>
                    </SignIn>
                  </div>
                );

              case 'users_list':
                return (
                  <div style={{padding: '2rem'}}>
                    <h1>ダッシュボードへようこそ！</h1>
                    <p>こんにちは、{state.loggedInUser?.name || 'ユーザー'}さん！</p>
                    
                    <ListUsers
                      listUsersTitle="チームメンバー"
                      data={[
                        {
                          id: '1',
                          name: '田中太郎',
                          status: 'active',
                          createdAt: '2025-01-15T10:30:00Z'
                        },
                        {
                          id: '2',
                          name: '佐藤花子',
                          status: 'active',
                          createdAt: '2025-01-20T09:15:00Z'
                        }
                      ]}
                      labels={{
                        headerRow: {
                          name: '名前',
                          status: 'ステータス',
                          createdAt: '参加日'
                        },
                        cellData: {
                          statusInUse: 'アクティブ',
                          statusNotInUse: '非アクティブ'
                        },
                        emptyStateMessage: 'ユーザーが見つかりません'
                      }}
                      rowHref={(row) => `#users/${row.id}`}
                      onNavigate={(path) => console.log('移動先:', path)}>
                      <ListUsers.Header>
                        <ListUsers.Title />
                      </ListUsers.Header>
                      <ListUsers.Content />
                    </ListUsers>
                  </div>
                );

              default:
                return (
                  <div style={{textAlign: 'center', padding: '4rem'}}>
                    <h2>Nodeblocksへようこそ！</h2>
                    <p>アプリケーションが正常に実行されています。</p>
                    <p>現在のページ: {state.currentPage}</p>
                  </div>
                );
            }
          };

          return (
            <div style={{minHeight: '100vh', width: '100vw', display: 'flex', flexDirection: 'column'}}>
              {/* ナビゲーションヘッダー */}
              <Navbar
                leftContent={
                  <div style={{display: 'flex', alignItems: 'center', gap: '0.5rem'}}>
                    <div style={{
                      width: '32px', 
                      height: '32px', 
                      backgroundColor: '#006ead', 
                      borderRadius: '4px'
                    }} />
                    <span style={{fontWeight: 'bold', fontSize: '1.2rem'}}>マイアプリ</span>
                  </div>
                }
                centerContent={
                  <div style={{display: 'flex', gap: 16}}>
                    <Navbar.Link href="#" onClick={(e) => {e.preventDefault(); middleware.redirect('/users');}}>
                      ユーザー
                    </Navbar.Link>
                  </div>
                }
                rightContent={
                  state.loggedInUser ? (
                    <div style={{display: 'flex', gap: '1rem', alignItems: 'center'}}>
                      <span>こんにちは、{state.loggedInUser.name}さん！</span>
                      <Navbar.ButtonLink onClick={() => middleware.onActionLogout()}>
                        ログアウト
                      </Navbar.ButtonLink>
                    </div>
                  ) : (
                    <Navbar.ButtonLink onClick={() => middleware.redirect('/login')}>
                      サインイン
                    </Navbar.ButtonLink>
                  )
                }
                sx={{ backgroundColor: 'white', boxShadow: 1 }}>
                <Navbar.Left />
                <Navbar.Center />
                <Navbar.Right />
              </Navbar>

              {/* メインコンテンツ */}
              <main style={{flex: 1, backgroundColor: 'white'}}>
                {renderCurrentPage()}
              </main>

              {/* フッター */}
              <Footer
                logoSrc="/logo.png"
                content={
                  <div style={{textAlign: 'center'}}>
                    <p>Nodeblocks - ビジネスアプリケーション向けReactコンポーネントライブラリで構築</p>
                  </div>
                }
                copyright="© 2025 Your Company Name. All rights reserved.">
                <Footer.Logo />
                <Footer.Content />
                <Footer.Copyright />
              </Footer>
            </div>
          );
        }}
      </MatchingAppDomain>
    </ThemeProvider>
  );
}

export default App;

ステップ2: 環境変数の追加（オプション）

APIエンドポイント用にプロジェクトルートに.envファイルを作成します：

# Viteプロジェクト用（推奨）
VITE_USER_SERVICE_URL=https://your-user-api.com
VITE_AUTH_SERVICE_URL=https://your-auth-api.com
VITE_ORG_SERVICE_URL=https://your-org-api.com
VITE_CATALOG_SERVICE_URL=https://your-catalog-api.com
VITE_CHAT_SERVICE_URL=https://your-chat-api.com
VITE_ORDER_SERVICE_URL=https://your-order-api.com

注: コード内ではimport.meta.env.VITE_USER_SERVICE_URLでアクセスします

ステップ3: アプリケーションの起動

npm start
# またはViteの場合
npm run dev

🎉 おめでとうございます！ Nodeblocksアプリケーションが実行されています。以下が表示されるはずです：

ナビゲーションバー
認証フロー（「サインイン」をクリックしてテスト）
ユーザー管理ダッシュボード（ログイン後）
フッター

✅ 構築したもの

あなたのアプリケーションには以下が含まれています：

🔐 認証システム - 完全なログイン/ログアウトフロー
👥 ユーザー管理 - チームメンバーのリストと管理
🧭 ナビゲーション - ルーティング付きナビゲーション
📱 レスポンシブデザイン - すべてのデバイスで動作

🚀 次のステップ

アプリケーションの拡張

完全なソリューションを構築するためにコンポーネントを追加：

# Eコマース機能
npm install @nodeblocks/frontend-create-product-block@0.5.0
npm install @nodeblocks/frontend-list-products-grid-block@0.2.0

# 組織管理
npm install @nodeblocks/frontend-create-organization-block
npm install @nodeblocks/frontend-list-organizations-block

# コミュニケーション機能
npm install @nodeblocks/frontend-chat-conversation-block@0.2.0
npm install @nodeblocks/frontend-chat-conversation-list-block

さらに学ぶ

🧩 すべてのコンポーネントを見る - 30以上の利用可能なコンポーネントを発見
🎨 テーマガイド - カラー、タイポグラフィ、スタイリングをカスタマイズ
🏗️ ドメインアプリガイド - アプリケーションアーキテクチャについて学ぶ
🔧 高度なカスタマイズ - ブロックオーバーライドをマスター
🚀 完全セットアップガイド - 包括的なプロジェクトセットアップ
❓ トラブルシューティング - よくある問題の解決策

💡 ヒント

🎯 小さく始める
NavbarやSignInなどの基本的なコンポーネントから始めましょう。学習しながら徐々に複雑さを追加します。

🔧 TypeScriptを使用
すべてのコンポーネントは、より良い開発体験のための完全なTypeScriptサポートを含んでいます。

📚 ドキュメントを読む
各コンポーネントには、例とカスタマイズオプションを含む詳細なドキュメントがあります。

🎉 Nodeblocksで素晴らしいアプリケーションを構築する準備が整いました！

サポートが必要ですか？❓ トラブルシューティングガイドをご確認いただくか、サポートチームにお問い合わせください。

📋 前提条件​

システム要件​

レジストリアクセス設定​

ステップ1: .npmrcファイルの作成​

ステップ2: レジストリ設定の追加​

ステップ3: 環境トークンの設定​

📦 インストール​

🏗️ プロジェクト設定​

新しいReactプロジェクトの作成（必要な場合）​

🎯 最初のアプリを構築​

ステップ1: アプリケーションシェルの作成​

ステップ2: 環境変数の追加（オプション）​

ステップ3: アプリケーションの起動​

✅ 構築したもの​

🚀 次のステップ​

アプリケーションの拡張​

さらに学ぶ​

💡 ヒント​