ReactでHPっぽいのを作った話

# React + Tailwind CSSで作るモダンなポートフォリオサイト

## はじめに

こんにちは！今回は、React + Tailwind CSSを使用して、モダンなポートフォリオサイトを作成した経験を共有したいと思います。このプロジェクトでは、アニメーションやレスポンシブデザインを取り入れながら、使いやすく見やすいUIを実現しています。

## 技術スタック

- React 19.0.0
- TypeScript 4.4.2
- Tailwind CSS 3.4.17
- React Text Transition 3.1.0
- Lucide React 0.474.0

## プロジェクトの特徴

1. モダンなUI/UXデザイン
2. スムーズなスクロールアニメーション
3. レスポンシブ対応
4. タイプセーフな実装（TypeScript）
5. コンポーネントベースのアーキテクチャ

## プロジェクト構造

```
src/
├── components/
│   ├── layout/
│   │   ├── Header.tsx
│   │   ├── Footer.tsx
│   │   └── Navigation.tsx
│   └── sections/
│       ├── About.tsx
│       ├── Skills.tsx
│       ├── Experience.tsx
│       └── Portfolio.tsx
├── types/
│   └── index.ts
└── App.tsx
```

## 主要コンポーネントの解説

### 1. ヘッダーセクション

ヘッダーセクションでは、Typewriterライクなテキストアニメーションを実装しています。`react-text-transition`を使用することで、スムーズな文字の切り替えを実現しています。

```typescript
const TEXTS = ["Frontend Developer", "Backend Developer", "Full Stack Engineer"];
const [index, setIndex] = useState(0);

useEffect(() => {
  const intervalId = setInterval(() => {
    setIndex((prev) => (prev + 1) % TEXTS.length);
  }, 3000);

  return () => clearInterval(intervalId);
}, []);
```

### 2. スキルセクション

スキルセクションでは、インタラクティブなスキルカードを実装しています。カードをクリックすると、アニメーション付きでスキルレベルが表示されます。

```typescript
const SkillCategory: React.FC<SkillCategoryProps> = ({ 
  title, 
  icon: Icon, 
  skills, 
  isActive, 
  onClick 
}) => {
  return (
    <div
      onClick={onClick}
      className={`cursor-pointer p-6 rounded-xl transition-all duration-300 ${
        isActive
          ? 'bg-lime-100 shadow-xl scale-105'
          : 'bg-white hover:bg-lime-50'
      }`}
    >
      // ...スキル表示のコード
    </div>
  );
};
```

### 3. 経験セクション

経験セクションでは、SVGを使用したインタラクティブなタイムラインを実装しています。

```typescript
const generatePath = () => {
  const startX = 80;
  const endX = 280;
  const startY = 120;
  const segmentHeight = 100;

  let path = '';
  timeline.forEach((_, index) => {
    const y = startY + (index * segmentHeight);
    if (index < timeline.length - 1) {
      const nextY = startY + ((index + 1) * segmentHeight);
      if (index % 2 === 0) {
        path += `${index === 0 ? 'M' : 'L'} ${startX} ${y} L ${endX} ${nextY}`;
      } else {
        path += `L ${startX} ${nextY}`;
      }
    }
  });

  return path;
};
```

## Tailwind CSSの活用

このプロジェクトでは、Tailwind CSSを最大限に活用しています。以下に主要な使用例を示します：

### 1. レスポンシブデザイン

```typescript
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
```

### 2. アニメーション

```typescript
<div className="transition-all duration-300 hover:scale-105">
```

### 3. カスタムカラーとグラデーション

```typescript
<div className="bg-gradient-to-b from-gray-50 to-white">
```

## パフォーマンス最適化

1. コンポーネントの適切な分割
2. メモ化による不要な再レンダリングの防止
3. 画像の最適化
4. CSS-in-JSの回避によるバンドルサイズの削減

## 実装時の工夫点

### 1. スクロールトラッキング

ナビゲーションの現在位置を追跡するために、Intersection Observerを使用しています：

```typescript
React.useEffect(() => {
  const handleScroll = () => {
    const sections = ['header', 'about', 'skills', 'experience', 'portfolio'];
    const current = sections.find(section => {
      const element = document.getElementById(section);
      if (element) {
        const rect = element.getBoundingClientRect();
        return rect.top <= 100 && rect.bottom >= 100;
      }
      return false;
    });
    if (current) {
      setActiveSection(current);
    }
  };

  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);
```

### 2. アニメーションの最適化

パフォーマンスを考慮し、CSSアニメーションを優先的に使用：

```typescript
<div className="h-full bg-lime-500 rounded-full transition-all duration-1000 ease-out">
```

## まとめ

React + Tailwind CSSの組み合わせは、モダンなWebサイトを構築する上で非常に強力なツールセットとなります。特に以下の点が有効でした：

1. Tailwind CSSによる迅速なスタイリング
2. Reactのコンポーネントベース設計による保守性の向上
3. TypeScriptによる型安全性の確保

## おわりに

このプロジェクトのソースコードは[GitHub](リンク)で公開しています。ぜひ参考にしていただければと思います。また、質問やフィードバックがありましたら、コメントでお願いします！

## 参考リンク

- [React公式ドキュメント](https://reactjs.org/)
- [Tailwind CSS公式ドキュメント](https://tailwindcss.com/)
- [TypeScript公式ドキュメント](https://www.typescriptlang.org/)