可読性・再利用性・パフォーマンスを向上させる！フロントエンドリファクタリングの実践ガイド

// ❌ 悪い例: 1つの関数に複数の責務がある
function getUserDataAndFormat(userId: string) {
  const user = fetchFromDatabase(userId);
  user.name = `${user.firstName} ${user.lastName}`;
  return user;
}

// ✅ 良い例: 関数を分割し、それぞれの責務を明確にする
function fetchUserData(userId: string): User {
  return fetchFromDatabase(userId);
}

function formatUserName(user: User): string {
  return `${user.firstName} ${user.lastName}`;
}

// ユーザーデータを取得する
const user = fetchUserData(userId);

// API からユーザーデータを取得（キャッシュが無効な場合のみリクエスト）
const user = fetchUserData(userId);

// utils/dateUtils.ts
export function formatDate(date: unknown, format: string = 'YYYY-MM-DD'): string {
  if (!(date instanceof Date) || isNaN(date.getTime())) {
    return '-';
  }

  return new Intl.DateTimeFormat('ja-JP', { dateStyle: 'short' }).format(date);
}

import { formatDate } from '@/utils/dateUtils';

console.log(formatDate(new Date())); // 例: "2024/03/10"

import { formatDate } from '@/utils/dateUtils';

describe('formatDate', () => {
  it('正しい日付フォーマットに変換されること', () => {
    const date = new Date(2024, 2, 10);
    expect(formatDate(date)).toBe('2024/03/10');
  });

  it('不正な日付を渡した場合に "-" を返すこと', () => {
    expect(formatDate(new Date('invalid-date'))).toBe('-');
  });

  it('null を渡した場合に "-" を返すこと', () => {
    expect(formatDate(null)).toBe('-');
  });

  it('undefined を渡した場合に "-" を返すこと', () => {
    expect(formatDate(undefined)).toBe('-');
  });

  it('文字列を渡した場合に "-" を返すこと', () => {
    expect(formatDate('2024-03-10')).toBe('-');
  });

  it('数値を渡した場合に "-" を返すこと', () => {
    expect(formatDate(0)).toBe('-');
  });
});

export async function fetchData<T>(url: string, options?: RequestInit): Promise<T> {
  const response = await fetch(url, options);
  if (!response.ok) {
    throw new Error(`HTTP error! Status: ${response.status}`);
  }
  return response.json();
}

import { fetchData } from '@/utils/apiClient';

async function getUserData() {
  try {
    const user = await fetchData<{ name: string; age: number }>('https://api.example.com/user');
    console.log(user);
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
}

import { fetchData } from '@/utils/apiClient';

global.fetch = jest.fn();

describe('fetchData', () => {
  it('APIからデータを取得できること', async () => {
    (fetch as jest.Mock).mockResolvedValueOnce({
      ok: true,
      json: async () => ({ name: 'John Doe' }),
    });

    const data = await fetchData<{ name: string }>('https://api.example.com/user');
    expect(data).toEqual({ name: 'John Doe' });
  });

  it('APIリクエストが失敗した場合にエラーを投げること', async () => {
    (fetch as jest.Mock).mockResolvedValueOnce({
      ok: false,
      status: 500,
    });

    await expect(fetchData('https://api.example.com/user')).rejects.toThrow('HTTP error! Status: 500');
  });

  it('ネットワークエラーが発生した場合にエラーを投げること', async () => {
    (fetch as jest.Mock).mockRejectedValueOnce(new Error('Network Error'));

    await expect(fetchData('https://api.example.com/user')).rejects.toThrow('Network Error');
  });
});

export function isValidEmail(email: string): boolean {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

import { isValidEmail } from '@/utils/validation';

console.log(isValidEmail('test@example.com')); // true
console.log(isValidEmail('invalid-email')); // false

import { isValidEmail } from '@/utils/validation';

describe('isValidEmail', () => {
  it('正しいメールアドレス形式を受け入れること', () => {
    expect(isValidEmail('test@example.com')).toBe(true);
    expect(isValidEmail('user.name+alias@domain.co.jp')).toBe(true);
  });

  it('不正なメールアドレス形式を拒否すること', () => {
    expect(isValidEmail('invalid-email')).toBe(false);
    expect(isValidEmail('user@domain,com')).toBe(false);
    expect(isValidEmail('user@.com')).toBe(false);
  });
});

export function getStorageItem<T>(key: string): T | null {
  const item = localStorage.getItem(key);
  return item ? JSON.parse(item) : null;
}

export function setStorageItem<T>(key: string, value: T): void {
  localStorage.setItem(key, JSON.stringify(value));
}

export function removeStorageItem(key: string): void {
  localStorage.removeItem(key);
}

import { getStorageItem, setStorageItem } from '@/utils/storage';

setStorageItem('user', { name: 'John Doe', age: 30 });

const user = getStorageItem<{ name: string; age: number }>('user');
console.log(user); // { name: 'John Doe', age: 30 }

import { getStorageItem, setStorageItem, removeStorageItem } from '@/utils/storage';

describe('localStorage utils', () => {
  beforeEach(() => {
    localStorage.clear();
  });

  it('データを正しく保存できること', () => {
    setStorageItem('testKey', { foo: 'bar' });
    expect(localStorage.getItem('testKey')).toBe(JSON.stringify({ foo: 'bar' }));
  });

  it('データを正しく取得できること', () => {
    localStorage.setItem('testKey', JSON.stringify({ foo: 'bar' }));
    expect(getStorageItem<{ foo: string }>('testKey')).toEqual({ foo: 'bar' });
  });

  it('データを削除できること', () => {
    localStorage.setItem('testKey', JSON.stringify({ foo: 'bar' }));
    removeStorageItem('testKey');
    expect(localStorage.getItem('testKey')).toBeNull();
  });
});

export function handleError(error: unknown): string {
  if (error instanceof Error) {
    return error.message;
  }
  return 'An unknown error occurred';
}

import { handleError } from '@/utils/errorHandler';

try {
  throw new Error('Something went wrong');
} catch (error) {
  console.error(handleError(error)); // "Something went wrong"
}

import { handleError } from '@/utils/errorHandler';

describe('handleError', () => {
  it('Errorオブジェクトからメッセージを取得できること', () => {
    const error = new Error('Something went wrong');
    expect(handleError(error)).toBe('Something went wrong');
  });

  it('未知のエラーの際にデフォルトメッセージを返すこと', () => {
    expect(handleError(null)).toBe('An unknown error occurred');
    expect(handleError(undefined)).toBe('An unknown error occurred');
  });
});

// ❌ 悪い例
function UserProfile() {
  const { data: user, isLoading, error } = useUserData();

  if (isLoading) {
    return <Loading />;
  }

  if (error) {
    return <ErrorMessage message="ユーザー情報を取得できませんでした。" />;
  }

  return (
    <div className="p-4 border rounded-lg">
      <h2 className="text-xl font-bold">{user.name}</h2>
      <p className="text-gray-600">{user.email}</p>
    </div>
  );
}

// ✅ Container Component（データ取得と状態管理）
function UserProfileContainer() {
  const { data: user, isLoading, error } = useUserData();

  if (isLoading) return <Loading />;
  if (error) return <ErrorMessage message="ユーザー情報を取得できませんでした。" />;

  return <UserProfile user={user} />;
}

// ✅ Presentational Component（UIの描画）
function UserProfile({ user }: { user: User }) {
  return (
    <div className="p-4 border rounded-lg">
      <h2 className="text-xl font-bold">{user.name}</h2>
      <p className="text-gray-600">{user.email}</p>
    </div>
  );
}

// エンティティ層（ドメインモデル）
class User {
  constructor(
    public id: string,
    public name: string,
    public email: string
  ) {}
}

// ユースケース層（アプリケーションのビジネスロジック）
class GetUserUseCase {
  constructor(private userRepository: UserRepository) {}

  async execute(userId: string): Promise<User> {
    return this.userRepository.findById(userId);
  }
}

// インターフェースアダプター層（リポジトリの実装）
class UserRepositoryImpl implements UserRepository {
  constructor(private db: Database) {}

  async findById(id: string): Promise<User> {
    const userData = await this.db.query("SELECT * FROM users WHERE id = ?", [id]);
    return new User(userData.id, userData.name, userData.email);
  }
}

interface UserRepository {
  findById(id: string): Promise<User>;
  save(user: User): Promise<void>;
}

class InMemoryUserRepository implements UserRepository {
  private users = new Map<string, User>();

  async findById(id: string): Promise<User | null> {
    return this.users.get(id) || null;
  }

  async save(user: User): Promise<void> {
    this.users.set(user.id, user);
  }
}

class CreateUserUseCase {
  constructor(private userRepository: UserRepository) {}

  async execute(name: string, email: string): Promise<User> {
    const user = new User(uuid(), name, email);
    await this.userRepository.save(user);
    return user;
  }
}

import React from 'react';

const ExpensiveComponent = React.memo(({ value }: { value: number }) => {
  console.log('Rendering ExpensiveComponent');
  return <div>{value}</div>;
});

export default ExpensiveComponent;

import { useState, useCallback } from 'react';
import ExpensiveComponent from './ExpensiveComponent';

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(10);

  const increment = useCallback(() => setCount((prev) => prev + 1), []);

  return (
    <div>
      <button onClick={increment}>Increment: {count}</button>
      <ExpensiveComponent value={value} />
    </div>
  );
};

export default ParentComponent;

import { useState, useMemo } from 'react';

const ExpensiveCalculation = (num: number) => {
  console.log('Calculating...');
  return num * 2;
};

const MemoizedComponent = () => {
  const [count, setCount] = useState(0);
  const [value, setValue] = useState(10);

  const computedValue = useMemo(() => ExpensiveCalculation(value), [value]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment: {count}</button>
      <div>Computed Value: {computedValue}</div>
    </div>
  );
};

export default MemoizedComponent;

const items = ['Apple', 'Banana', 'Orange'];

const ItemList = () => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
};

const promises = [fetchData1(), fetchData2(), fetchData3()];
Promise.all(promises)
  .then(results => {
    console.log("すべての処理が完了", results);
  })
  .catch(error => {
    console.error("エラーが発生", error);
  });

const promises = [fetchData1(), fetchData2(), fetchData3()];
Promise.allSettled(promises)
  .then(results => {
    results.forEach((result, index) => {
      if (result.status === "fulfilled") {
        console.log(`成功: ${index}`, result.value);
      } else {
        console.error(`失敗: ${index}`, result.reason);
      }
    });
  });

const safeFetch = (promise) => {
  return promise.catch(error => ({ error }));
};

const promises = [
  safeFetch(fetchData1()),
  safeFetch(fetchData2()),
  safeFetch(fetchData3()),
];

Promise.all(promises).then(results => {
  results.forEach((result, index) => {
    if (result.error) {
      console.error(`失敗: ${index}`, result.error);
    } else {
      console.log(`成功: ${index}`, result);
    }
  });
});

const fetchDataWithRetry = async (fetchFunction, retries = 3) => {
  for (let i = 0; i < retries; i++) {
    try {
      return await fetchFunction();
    } catch (error) {
      console.warn(`リトライ ${i + 1} 回目に失敗`, error);
    }
  }
  throw new Error("最大リトライ回数を超えました");
};

const promises = [
  fetchDataWithRetry(fetchData1),
  fetchDataWithRetry(fetchData2),
  fetchDataWithRetry(fetchData3),
];

Promise.all(promises)
  .then(results => console.log("すべて成功", results))
  .catch(error => console.error("エラー", error));

npm list --depth=0  # npmの場合
pnpm list --depth=0  # pnpmの場合
yarn list --depth=0  # yarnの場合

npm uninstall <package_name>
pnpm remove <package_name>
yarn remove <package_name>

npm test  # 事前に用意したテストスクリプトを実行

npm outdated  # アップデート可能なパッケージを確認
npm update    # マイナーバージョンの更新

npm test  # 事前に用意したテストスクリプトを実行

function parseJson(json: string): unknown {
  return JSON.parse(json);
}

const data: unknown = parseJson('{"name":"Alice"}');
if (typeof data === 'object' && data !== null && 'name' in data) {
  console.log((data as { name: string }).name); // 型チェック後にキャスト
}

function identity<T>(value: T): T {
  return value;
}

const result = identity<string>("Hello"); // 型が string になる

interface User {
  id: number;
  name: string;
}

const getUser = (id: number): User => {
  return { id, name: "John Doe" };
};

type PartialUser = Partial<User>; // すべてのプロパティをオプショナルに

const user: PartialUser = { name: "Alice" }; // OK

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // `num` は number 型として推論される

function isUser(obj: any): obj is User {
  return typeof obj.id === "number" && typeof obj.name === "string";
}

const maybeUser: any = { id: 1, name: "Alice" };
if (isUser(maybeUser)) {
  console.log(maybeUser.name); // 安全に型を適用できる
}

// NG 例
const data: any = getData();
const user = data as User; // 型安全性が失われる

npm install --save-dev @types/lodash