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

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

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

🏗️ プロジェクト設定

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

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

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

# React 18にダウングレード（Nodeblocks要件）
npm install react@^18.0.0 react-dom@^18.0.0
npm install --save-dev @types/react@^18.0.0 @types/react-dom@^18.0.0

npm install

⚠️ 重要: Nodeblocksは現在React 18が必要です。React 19サポートは近日公開予定です。

🎯 最初のアプリを構築

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

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

import React from 'react';
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 (
    <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, updateState}) => {
        // 現在の状態に基づくシンプルなページルーティング
        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);
                      }
                    }}
                    style={{
                      backgroundColor: 'white',
                      boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
                      padding: '2rem',
                      border: '1px solid lightgray',
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      justifyContent: 'center',
                      gap: '1rem'
                    }}
                    onChange={(setError, getValues, clearErrors) => {
                      const values = getValues();
                      // 必要に応じてバリデーションを追加
                      if (values.email && !/\S+@\S+\.\S+/.test(values.email)) {
                        setError('email', {message: '無効なメール形式', type: 'pattern'});
                      } else {
                        clearErrors('email');
                      }
                    }}
                  >
                    <SignIn.SignInTitle>おかえりなさい</SignIn.SignInTitle>
                    <SignIn.EmailField label="メール" placeholder="メールアドレスを入力" />
                    <SignIn.PasswordField label="パスワード" placeholder="パスワードを入力" />
                    <SignIn.SignInButton>サインイン</SignIn.SignInButton>
                  </SignIn>
                </div>
              );

            case 'users_list':
              return (
                <div style={{padding: '2rem'}}>
                  <h1>ダッシュボードへようこそ！</h1>
                  <p>こんにちは、{state.loggedInUser?.name || 'ユーザー'}さん！</p>
                  
                  <ListUsers
                    listUsersTitle="チームメンバー"
                    data={[
                      {
                        id: '1',
                        name: '田中太郎',
                        email: 'tanaka@example.com',
                        status: 'Active',
                        createdAt: '2024-01-15'
                      },
                      {
                        id: '2',
                        name: '佐藤花子',
                        email: 'sato@example.com',
                        status: 'Active',
                        createdAt: '2024-01-20'
                      }
                    ]}
                    labels={{
                      headerRow: {
                        name: '名前',
                        email: 'メール',
                        status: 'ステータス',
                        createdAt: '参加日'
                      },
                      cellData: {
                        statusInUse: '使用中',
                        statusNotInUse: '未使用'
                      },
                      emptyStateMessage: 'ユーザーが見つかりません'
                    }}
                    onSelect={(user) => console.log('選択されたユーザー:', user)}
                  />
                </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: 'var(--ifm-color-primary)', 
                    borderRadius: '4px'
                  }}></div>
                  <span style={{fontWeight: 'bold', fontSize: '1.2rem', color: 'black'}}>マイアプリ</span>
                </div>
              }
              centerContent={
                <nav style={{display: 'flex', gap: '2rem'}}>
                  <a 
                    href="#" 
                    onClick={(e) => {e.preventDefault(); middleware.redirect('/users');}}
                    style={{textDecoration: 'none', color: 'black'}}
                  >
                    ユーザー
                  </a>
                </nav>
              }
              rightContent={
                <div>
                  {state.loggedInUser ? (
                    <div style={{display: 'flex', gap: '1rem', alignItems: 'center'}}>
                      <span>こんにちは、{state.loggedInUser.name}さん！</span>
                      <button 
                        onClick={() => middleware.onActionLogout()}
                        style={{
                          padding: '0.5rem 1rem',
                          backgroundColor: 'red',
                          color: 'white',
                          border: 'none',
                          borderRadius: '4px',
                          cursor: 'pointer'
                        }}
                      >
                        ログアウト
                      </button>
                    </div>
                  ) : (
                    <button 
                      onClick={() => middleware.redirect('/login')}
                      style={{
                        padding: '0.5rem 1rem',
                        backgroundColor: 'white',
                        color: 'black',
                        border: '1px solid black',
                        borderRadius: '4px',
                        cursor: 'pointer'
                      }}
                    >
                      サインイン
                    </button>
                  )}
                </div>
              }
            />

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

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

export default App;

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

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

REACT_APP_USER_SERVICE_URL=https://your-user-api.com
REACT_APP_AUTH_SERVICE_URL=https://your-auth-api.com
REACT_APP_ORG_SERVICE_URL=https://your-org-api.com
REACT_APP_CATALOG_SERVICE_URL=https://your-catalog-api.com
REACT_APP_CHAT_SERVICE_URL=https://your-chat-api.com
REACT_APP_ORDER_SERVICE_URL=https://your-order-api.com

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

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

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

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

✅ 構築したもの

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

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

🚀 次のステップ

アプリケーションの拡張

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

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

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

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

さらに学ぶ

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

💡 ヒント

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

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

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

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

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

📋 前提条件​

システム要件​

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

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

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

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

📦 インストール​

🏗️ プロジェクト設定​

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

🎯 最初のアプリを構築​

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

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

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

✅ 構築したもの​

🚀 次のステップ​

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

さらに学ぶ​

💡 ヒント​