⚡ クイックスタートガイド
10分以内で最初のNodeblocksアプリケーションを構築 🚀
このガイドでは、Nodeblocks フロントエンドコンポーネントを素早く使い始める方法を説明します。ナビゲーション、認証、データ管理を備えた完全なアプリケーションを作成します。
⏱️ 完了時間: 5-10分
💻 作成するもの: 完全なユーザー管理アプリケーション
📋 前提条件: Node.js 18+、React の知識
📋 前提条件
システム要件
- Node.js 18.0+ (こちらからダウンロード)
- npm 8.0+ または yarn 1.22+
- React 18.0+ (このあとセットアップします)
- 基本的な TypeScript の知識 (推奨)
📦 インストール
# レイアウトとナビゲーション、認証、リストとテーブル
npm install @emotion/react @emotion/styled
npm install @mui/icons-material
npm install @mui/material
npm install @mui/x-date-pickers
npm install @nodeblocks/frontend-navbar-block
npm install @nodeblocks/frontend-footer-block
npm install @nodeblocks/frontend-theme
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
npm install
🎯 最初のアプリを構築
ステップ1: アプリケーションシェルの作成
src/App.tsx を以下の完全な例に置き換えます：
import React, { useState } from 'react';
import { Box, Button, Stack, Typography } from '@mui/material';
import { Navbar } from '@nodeblocks/frontend-navbar-block';
import { Footer } from '@nodeblocks/frontend-footer-block';
import { ThemeProvider, defaultTheme } from '@nodeblocks/frontend-theme';
import { SignIn } from '@nodeblocks/frontend-signin-block';
import { ListUsers } from '@nodeblocks/frontend-list-users-block';
type Page = 'home' | 'login' | 'users_list';
function App() {
const [currentPage, setCurrentPage] = useState<Page>('home');
const [loggedInUser, setLoggedInUser] = useState<{ name: string } | null>(null);
const [signInData, setSignInData] = useState({ email: '', password: '' });
const renderCurrentPage = () => {
switch (currentPage) {
case 'login':
return (
<Box sx={{ maxWidth: 400, mx: 'auto', my: 4, px: 3, py: 4 }}>
<SignIn
data={signInData}
onDataChange={(nextData) => setSignInData(nextData)}
onSubmit={(event) => {
event.preventDefault();
setLoggedInUser({ name: signInData.email.split('@')[0] || 'ユーザー' });
setCurrentPage('users_list');
console.log('ログイン成功！');
}}
sx={{
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'
}}
>
<SignIn.SignInTitle>おかえりなさい</SignIn.SignInTitle>
<SignIn.EmailField label="メール" placeholder="メールアドレスを入力" />
<SignIn.PasswordField label="パスワード" placeholder="パスワードを入力" />
<SignIn.SignInButton>サインイン</SignIn.SignInButton>
</SignIn>
</Box>
);
case 'users_list':
return (
<Box sx={{ p: 4 }}>
<Stack spacing={1.5} sx={{ mb: 3 }}>
<Typography variant="h4">ダッシュボードへようこそ！</Typography>
<Typography color="text.secondary">こんにちは、{loggedInUser?.name || 'ユーザー'}さん！</Typography>
</Stack>
<ListUsers
listUsersTitle="チームメンバー"
data={[
{
id: '1',
name: '田中太郎',
status: 'active',
createdAt: '2024-01-15'
},
{
id: '2',
name: '佐藤花子',
status: 'inactive',
createdAt: '2024-01-20'
}
]}
labels={{
headerRow: {
createdAt: '参加日',
name: '名前',
status: 'ステータス'
},
cellData: {
statusActive: '有効',
statusInactive: '無効'
}
}}
/>
</Box>
);
default:
return (
<Box sx={{ textAlign: 'center', p: 6 }}>
<Typography variant="h4">Nodeblocksへようこそ！</Typography>
<Typography color="text.secondary">アプリケーションは正常に実行されています。</Typography>
</Box>
);
}
};
return (
<ThemeProvider theme={defaultTheme}>
<Box sx={{ minHeight: '100vh', width: '100vw', display: 'flex', flexDirection: 'column' }}>
<Navbar
leftContent={
<Stack direction="row" spacing={1} alignItems="center">
<Box
sx={{
width: 32,
height: 32,
backgroundColor: 'primary.main',
borderRadius: 1
}}
/>
<Typography variant="h6" sx={{ fontWeight: 700 }}>
マイアプリ
</Typography>
</Stack>
}
centerContent={
<Button
variant="text"
onClick={(e) => {
e.preventDefault();
setCurrentPage('users_list');
}}
>
ユーザー
</Button>
}
rightContent={
<Box>
{loggedInUser ? (
<Stack direction="row" spacing={1} alignItems="center">
<Typography>こんにちは、{loggedInUser.name}さん！</Typography>
<Button
variant="contained"
onClick={() => {
setLoggedInUser(null);
setCurrentPage('login');
}}
>
ログアウト
</Button>
</Stack>
) : (
<Button
variant="outlined"
onClick={() => setCurrentPage('login')}
>
サインイン
</Button>
)}
</Box>
}
/>
<Box component="main" sx={{ flex: 1, bgcolor: 'background.default' }}>
{renderCurrentPage()}
</Box>
<Footer
logoSrc="/vite.svg"
content={
<Box sx={{ textAlign: 'center', color: 'text.primary' }}>
<Typography>
Nodeblocks - ビジネスアプリケーション向けReactコンポーネントライブラリで構築
</Typography>
</Box>
}
copyright="© 2024 Your Company Name. All rights reserved."
sx={{ mt: 'auto' }}
/>
</Box>
</ThemeProvider>
);
}
export default App;
ステップ2: アプリケーションの起動
npm run dev
🎉 おめでとうございます！ Nodeblocksアプリケーションが実行されています。以下が表示されるはずです：
- ナビゲーションバー
- 認証フロー（「サインイン」をクリックしてテスト）
- ユーザー管理ダッシュボード（ログイン後）
- フッター
✅ 構築したもの
あなたのアプリケーションには以下が含まれています：
- 🔐 認証システム - 完全なログイン/ログアウトフロー
- 👥 ユーザー管理 - チームメンバーのリストと管理
- 🧭 ナビゲーション - ルーティング付きナビゲーション
- 📱 レスポンシブデザイン - すべてのデバイスで動作
🚀 次のステップ
アプリケーションの拡張
完全なソリューションを構築するためにコンポーネントを追加：
# フォームとウィザード、リストとテーブル
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-organization-block
# コミュニケーション
npm install @nodeblocks/frontend-chat-conversation-block
npm install @nodeblocks/frontend-chat-conversation-list-block
さらに学ぶ
- 🧩 すべてのコンポーネントを見る - 9つのカテゴリに分かれた42の利用可能なコンポーネントを確認
- 🎨 高度なカスタマイズ - ブロックオーバーライドをマスター
- ❓ トラブルシューティング - よくある問題の解決策
💡 ヒント
🎯 小さく始める
Navbar や SignIn などの基本コンポーネントから始めましょう。学びながら少しずつ複雑さを追加してください。
🔧 TypeScriptを使用
すべてのコンポーネントには、より良い開発体験のための完全な TypeScript サポートがあります。
📚 ドキュメントを読む
各コンポーネントには、例とカスタマイズオプションを含む詳細なドキュメントがあります。
🎉 Nodeblocks で素晴らしいアプリケーションを構築する準備が整いました！
サポートが必要ですか？❓ トラブルシューティングガイドをご確認いただくか、サポートチームにお問い合わせください。