Menú
React開発の詳細ガイド。Hooks、コンポーネント設計、パフォーマンス最適化、テストなど、Reactアプリケーション開発のベストプラクティス。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
コンピュータサイエンスの基礎知識を網羅的にカバー。ハードウェアの仕組みからデータ表現、アルゴリズム、データ構造、計算理論、プログラミングパラダイム、ソフトウェアエンジニアリング基礎まで、エンジニアに必要な全てのCS基礎知識を体系的に解説。
Fundamentals of modern web development. Framework selection (React, Vue, Next.js), project architecture, state management, routing, build tools, and CSS strategy best practices.
A comprehensive guide covering the fundamentals of computer science. From hardware internals and data representation to algorithms, data structures, computation theory, programming paradigms, and software engineering basics — a systematic guide to all the CS foundations every engineer needs.
DJテクニック（Rekordbox 7.2.7）と楽曲制作（Ableton Live 12 Suite）を体系的に学べる包括的なガイド。基礎音楽理論から応用テクニック、キャリア構築まで、DJ・音楽プロデューサーに必要な全スキルをカバー。
CLIツール開発ガイド。Node.js（Commander、Inquirer）、Python（Click、Typer）、Go（Cobra）、引数パース、インタラクティブUI、アーキテクチャ設計、テスト、配布方法など、プロフェッショナルなCLIツール開発のベストプラクティス。
スクリプト開発ガイド。Shell、Python、Node.jsスクリプト、自動化、バッチ処理、環境変数管理など、効率的なスクリプト開発のベストプラクティス。
| name | react-development |
| description | React開発の詳細ガイド。Hooks、コンポーネント設計、パフォーマンス最適化、テストなど、Reactアプリケーション開発のベストプラクティス。 |
このSkillは、React開発の詳細をカバーします：
Reactを初めて学ぶ方、プログラミング初心者の方は、まず基礎ガイドから始めてください。
学習時間の目安： 各ガイド1〜2時間、合計7〜14時間
基礎を理解している方は、以下の順番で学習を進めてください。
まずHooks 完全マスターガイドで深く学習
TypeScript パターンガイドで型安全性を習得
パフォーマンス最適化ガイドでプロダクション品質へ
このガイドで学べること: Hooksパターン、コンポーネント設計原則、パフォーマンス最適化手法 公式で確認すべきこと: 最新API、React 19の新機能、Server Components、マイグレーションガイド
React.dev - React公式ドキュメント
React TypeScript Cheatsheets - TypeScript × React
React開発の深い知識を習得するための詳細ガイドを用意しています。
40,000文字超の完全ガイド | TypeScript完全対応
Reactの最重要概念であるHooksを完全にマスターするための実践的ガイドです。
含まれる内容:
こんな方におすすめ:
33,000文字超の完全ガイド | 型安全な開発の決定版
TypeScriptを使った型安全なReact開発のための実践的パターン集です。
含まれる内容:
こんな方におすすめ:
20,000文字超の完全ガイド | 実測データに基づく最適化手法
実際のプロジェクトでの実測データに基づいた、実践的なパフォーマンス改善手法です。
含まれる内容:
こんな方におすすめ:
実測データ例:
初心者の方:
経験者の方:
// ✅ 基本的な使用
function Counter() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
)
}
// ✅ 複雑な状態（オブジェクト）
function UserForm() {
const [form, setForm] = useState({
name: '',
email: ''
})
const handleChange = (field: string, value: string) => {
setForm(prev => ({ ...prev, [field]: value }))
}
return (
<>
<input
value={form.name}
onChange={(e) => handleChange('name', e.target.value)}
/>
<input
value={form.email}
onChange={(e) => handleChange('email', e.target.value)}
/>
</>
)
}
// ✅ データフェッチ
function UserProfile({ userId }: { userId: string }) {
const [user, setUser] = useState<User | null>(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
let ignore = false
async function fetchUser() {
setLoading(true)
const data = await fetch(`/api/users/${userId}`).then(r => r.json())
if (!ignore) {
setUser(data)
setLoading(false)
}
}
fetchUser()
return () => {
ignore = true // クリーンアップ
}
}, [userId])
if (loading) return <div>Loading...</div>
if (!user) return <div>Not found</div>
return <div>{user.name}</div>
}
function SearchInput() {
const inputRef = useRef<HTMLInputElement>(null)
useEffect(() => {
// マウント時にフォーカス
inputRef.current?.focus()
}, [])
return <input ref={inputRef} placeholder="Search..." />
}
// hooks/useFetch.ts
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null)
const [loading, setLoading] = useState(true)
const [error, setError] = useState<Error | null>(null)
useEffect(() => {
let ignore = false
async function fetchData() {
try {
setLoading(true)
const response = await fetch(url)
if (!response.ok) throw new Error('Failed to fetch')
const json = await response.json()
if (!ignore) {
setData(json)
setError(null)
}
} catch (e) {
if (!ignore) {
setError(e as Error)
}
} finally {
if (!ignore) {
setLoading(false)
}
}
}
fetchData()
return () => {
ignore = true
}
}, [url])
return { data, loading, error }
}
// 使用例
function UserList() {
const { data: users, loading, error } = useFetch<User[]>('/api/users')
if (loading) return <div>Loading...</div>
if (error) return <div>Error: {error.message}</div>
return (
<ul>
{users?.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
)
}
// hooks/useLocalStorage.ts
function useLocalStorage<T>(key: string, initialValue: T) {
const [storedValue, setStoredValue] = useState<T>(() => {
try {
const item = window.localStorage.getItem(key)
return item ? JSON.parse(item) : initialValue
} catch (error) {
console.error(error)
return initialValue
}
})
const setValue = (value: T | ((val: T) => T)) => {
try {
const valueToStore = value instanceof Function ? value(storedValue) : value
setStoredValue(valueToStore)
window.localStorage.setItem(key, JSON.stringify(valueToStore))
} catch (error) {
console.error(error)
}
}
return [storedValue, setValue] as const
}
// 使用例
function App() {
const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light')
return (
<button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
Current: {theme}
</button>
)
}
📖 詳細は TypeScript パターン完全ガイド を参照してください
// components/ui/Button.tsx
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
variant?: 'primary' | 'secondary' | 'danger'
size?: 'sm' | 'md' | 'lg'
isLoading?: boolean
}
export function Button({
variant = 'primary',
size = 'md',
isLoading = false,
children,
className,
disabled,
...props
}: ButtonProps) {
const baseStyles = 'rounded font-medium transition-colors'
const variants = {
primary: 'bg-blue-600 text-white hover:bg-blue-700',
secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
danger: 'bg-red-600 text-white hover:bg-red-700'
}
const sizes = {
sm: 'px-3 py-1 text-sm',
md: 'px-4 py-2',
lg: 'px-6 py-3 text-lg'
}
return (
<button
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
disabled={disabled || isLoading}
{...props}
>
{isLoading ? 'Loading...' : children}
</button>
)
}
// 使用例
<Button variant="primary" size="lg" onClick={handleSubmit}>
Submit
</Button>
// components/Tabs.tsx
interface TabsContextValue {
activeTab: string
setActiveTab: (tab: string) => void
}
const TabsContext = React.createContext<TabsContextValue | undefined>(undefined)
function Tabs({ children, defaultTab }: { children: React.ReactNode; defaultTab: string }) {
const [activeTab, setActiveTab] = useState(defaultTab)
return (
<TabsContext.Provider value={{ activeTab, setActiveTab }}>
{children}
</TabsContext.Provider>
)
}
function TabList({ children }: { children: React.ReactNode }) {
return <div className="flex gap-2 border-b">{children}</div>
}
function Tab({ value, children }: { value: string; children: React.ReactNode }) {
const context = React.useContext(TabsContext)
if (!context) throw new Error('Tab must be used within Tabs')
const { activeTab, setActiveTab } = context
return (
<button
className={activeTab === value ? 'border-b-2 border-blue-600' : ''}
onClick={() => setActiveTab(value)}
>
{children}
</button>
)
}
function TabPanel({ value, children }: { value: string; children: React.ReactNode }) {
const context = React.useContext(TabsContext)
if (!context) throw new Error('TabPanel must be used within Tabs')
const { activeTab } = context
if (activeTab !== value) return null
return <div>{children}</div>
}
Tabs.List = TabList
Tabs.Tab = Tab
Tabs.Panel = TabPanel
// 使用例
<Tabs defaultTab="profile">
<Tabs.List>
<Tabs.Tab value="profile">Profile</Tabs.Tab>
<Tabs.Tab value="settings">Settings</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="profile">
<p>Profile content</p>
</Tabs.Panel>
<Tabs.Panel value="settings">
<p>Settings content</p>
</Tabs.Panel>
</Tabs>
📖 詳細は パフォーマンス最適化完全ガイド を参照してください
// ❌ 悪い例（毎回再レンダリング）
function UserCard({ user }: { user: User }) {
console.log('Rendering UserCard')
return <div>{user.name}</div>
}
// ✅ 良い例（propsが変わったときのみ再レンダリング）
const UserCard = React.memo(({ user }: { user: User }) => {
console.log('Rendering UserCard')
return <div>{user.name}</div>
})
function ExpensiveList({ items, filter }: { items: Item[]; filter: string }) {
// ✅ filter または items が変わったときのみ再計算
const filteredItems = useMemo(() => {
console.log('Filtering items...')
return items.filter(item => item.name.includes(filter))
}, [items, filter])
return (
<ul>
{filteredItems.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)
}
function TodoList() {
const [todos, setTodos] = useState<Todo[]>([])
// ✅ 関数をメモ化（子コンポーネントに渡す場合に重要）
const handleToggle = useCallback((id: string) => {
setTodos(prev =>
prev.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
)
)
}, [])
return (
<ul>
{todos.map(todo => (
<TodoItem key={todo.id} todo={todo} onToggle={handleToggle} />
))}
</ul>
)
}
const TodoItem = React.memo(({ todo, onToggle }: {
todo: Todo;
onToggle: (id: string) => void
}) => {
return (
<li>
<input
type="checkbox"
checked={todo.completed}
onChange={() => onToggle(todo.id)}
/>
{todo.title}
</li>
)
})
// ❌ 悪い例
function BadComponent() {
const [data, setData] = useState([])
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(setData) // dataが更新 → useEffectが再実行 → 無限ループ
}, [data])
}
// ✅ 良い例
function GoodComponent() {
const [data, setData] = useState([])
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(setData)
}, []) // 依存配列が空 → マウント時のみ実行
}
// ❌ 悪い例（不要なメモ化）
function Component() {
const name = useMemo(() => 'John', []) // 不要
const greet = useCallback(() => console.log('Hello'), []) // 不要
return <div>{name}</div>
}
// ✅ 良い例
function Component() {
const name = 'John'
const greet = () => console.log('Hello')
return <div>{name}</div>
}
カスタムフック作成
データフェッチ用のカスタムフックuseFetchを作成してください。
loading、error、dataを返すようにしてください。
コンポーネント作成
ユーザーカードコンポーネントを作成してください。
- ユーザー名、メール、アバターを表示
- hover時にシャドウを表示
- クリック時に詳細ページに遷移
Last updated: 2024-12-26