Step-by-step guide for adding new feature modules to the renderer process using feature-based architecture
このガイドは、アプリケーションのレンダラー側に新機能を追加するためのステップバイステップの手順を提供します。
mkdir -p src/renderer/features/<feature-name>/{components,hooks,utils}
features/<feature-name>/components/にコンポーネントファイルを作成します：
// components/FeatureItem.tsx
import type { Feature } from '../../../shared/types';
interface FeatureItemProps {
feature: Feature;
onAction: (id: string) => void;
}
export function FeatureItem({ feature, onAction }: FeatureItemProps) {
return (
<div className="flex items-center justify-between p-4">
<span>{feature.name}</span>
<button onClick={() => onAction(feature.id)}>
Action
</button>
</div>
);
}
features/<feature-name>/hooks/にフックファイルを作成します：
// hooks/useFeatures.ts
import { useState, useEffect } from 'react';
import type { Feature } from '../../../shared/types';
export function useFeatures() {
const [features, setFeatures] = useState<Feature[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
useEffect(() => {
window.api.listFeatures()
.then(setFeatures)
.catch(setError)
.finally(() => setLoading(false));
}, []);
const addFeature = async (data: Partial<Feature>) => {
const newFeature = await window.api.addFeature(data);
setFeatures(prev => [...prev, newFeature]);
};
return { features, loading, error, addFeature };
}
フィーチャー固有のユーティリティがある場合は、utils/にファイルを作成します：
// utils/formatting.ts
export function formatFeatureStatus(status: string): string {
return status.toUpperCase();
}
// utils/formatting.test.ts
import { formatFeatureStatus } from './formatting';
describe('formatFeatureStatus', () => {
it('should uppercase status', () => {
expect(formatFeatureStatus('active')).toBe('ACTIVE');
});
});
フィーチャーディレクトリにindex.tsを作成します：
// features/<feature-name>/index.ts
export { FeatureItem } from './components/FeatureItem';
export { FeatureList } from './components/FeatureList';
export { useFeatures } from './hooks/useFeatures';
export * from './utils/constants';
フィーチャーが新しいIPCチャネルを必要とする場合：
// src/shared/types.ts
export interface Feature {
id: string;
name: string;
enabled: boolean;
}
// src/shared/constants.ts
export const IPC_CHANNELS = {
// ... 既存のチャネル
FEATURE_LIST: 'feature:list',
FEATURE_ADD: 'feature:add',
} as const;
// src/main/ipc.ts
ipcMain.handle(IPC_CHANNELS.FEATURE_LIST, async (): Promise<Feature[]> => {
const repo = new FeatureRepository(getDatabase());
return await repo.findAll();
});
// src/preload/index.ts