import React from 'react'
import './ComponentName.css'

function ComponentName({ prop1, prop2 }) {
  // ロジック

  return (
    <div className="component-name">
      {/* JSX */}
    </div>
  )
}

export default ComponentName

カスタムフック作成パターン

import { useState, useEffect } from 'react'

export function useCustomHook() {
  const [state, setState] = useState(null)

  useEffect(() => {
    // effect logic
  }, [])

  return { state, setState }
}

Redux Slice作成パターン

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

export const asyncAction = createAsyncThunk(
  'slice/asyncAction',
  async (payload) => {
    // async logic
  }
)

export const sliceSlice = createSlice({
  name: 'slice',
  initialState: {},
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(asyncAction.fulfilled, (state, action) => {
      // handle success
    })
  }
})

禁止事項

class componentの使用
React.createElementの直接使用
直接的なDOM操作
console.logの本番環境への残存
魔法の数値の使用（定数化を推奨）

パフォーマンス考慮事項

React.memoでのコンポーネント最適化
useCallback, useMemoの適切な使用
lazy loadingの実装検討
bundle sizeの最適化

テスト方針

React Testing Libraryを使用
ユーザー中心のテストを作成
integration testを優先
mockingは最小限に

セキュリティ

XSS対策の実装
認証トークンの適切な管理
API endpointsの保護
環境変数での機密情報管理

Git 規約

コミットメッセージは日本語で明確に
feature branchでの開発
Pull Requestでのコードレビュー
conventional commitsの採用検討

技術スタック

フロントエンド: React 19.0.0, JSX

ビルドツール: Vite 6.3.2

状態管理: Redux Toolkit 2.7.0, React Redux 9.2.0

ルーティング: React Router DOM 7.3.0

フォーム管理: React Hook Form 7.60.0

日付操作: date-fns 3.0.0

HTTP通信: Axios 1.8.3

認証: React Cookie 8.0.1

スタイリング: CSS, UnoCSS reset

フォント: Inter (@fontsource/inter)

コーディング規約

コンポーネント: PascalCase (例:

TaskItem.jsx

BackButton.jsx

)

ページ:

index.page.jsx

形式

フック:

use

プレフィックス + camelCase (例:

useLogin.js

)

CSS: コンポーネント名と同じ (例:

TaskItem.css

)

アイコン: PascalCase + Icon サフィックス (例:

CheckIcon.jsx

)

src/components/

- 再利用可能なコンポーネント

src/pages/

- ページコンポーネント

src/hooks/

- カスタムフック

src/store/

- Redux store関連

src/routes/

- ルーティング設定

src/icons/

- アイコンコンポーネント

src/utils/

- ユーティリティ関数

src/vendor/

- 外部ライブラリ設定

関数コンポーネントを使用

export defaultでコンポーネントをエクスポート

React Hooksを積極的に使用

props destructuringを行頭で実行

JSXファイル拡張子を使用

createSliceを使用してstoreを定義

configureStoreでstoreを設定

useDispatch, useSelectorでstoreにアクセス

async thunkでAPI通信を処理

React importsを最初に記述

外部ライブラリを次に記述

内部モジュールを最後に記述

相対パスには

@/

を使用（Vite設定による）

コンポーネント単位でCSSファイルを分離

BEM記法を推奨

CSS Modulesは使用せず、通常のCSSを使用

レスポンシブデザインを考慮

axiosを使用

vendor/axios.jsで設定を統一

async/awaitを使用

エラーハンドリングを必須実装

React Router DOM v7を使用

ページベースルーティングを採用

動的ルーティングは

[param]

形式

推奨パターン

import React from 'react'
import './ComponentName.css'

function ComponentName({ prop1, prop2 }) {
  // ロジック

  return (
    <div className="component-name">
      {/* JSX */}
    </div>
  )
}

export default ComponentName

import { useState, useEffect } from 'react'

export function useCustomHook() {
  const [state, setState] = useState(null)

  useEffect(() => {
    // effect logic
  }, [])

  return { state, setState }
}

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

export const asyncAction = createAsyncThunk(
  'slice/asyncAction',
  async (payload) => {
    // async logic
  }
)

export const sliceSlice = createSlice({
  name: 'slice',
  initialState: {},
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(asyncAction.fulfilled, (state, action) => {
      // handle success
    })
  }
})

Railway Todo App - Cursor Rules

Related Skills

Markdown Converter

Nano Banana Pro

1password