Skip to content

daikimatsura/portfolio

BranchesTags

Repository files navigation

Daiki Matsuura ポートフォリオサイト

このリポジトリは、私のポートフォリオサイトのソースコードです。
Next.js、Shadcn UI、Tailwind CSSを使用して構築されており、私の経歴、スキルなどを紹介しています。

サイトURL情報

https://daikimatsuura.vercel.app/

🌟 特徴

  • モダンなUI/UX: Next.js、Shadcn UI、Tailwind CSSを使用した美しく機能的なインターフェース
  • パフォーマンス最適化: Next.jsの画像最適化、コード分割、SSR、キャッシュ戦略を活用
  • アニメーション: Framer Motionを使用したスムーズなアニメーション効果
  • ダークモード対応: ユーザー設定に応じたテーマ切り替え
  • 型安全性: TypeScriptの厳格モードによる堅牢なコード品質
  • アクセシビリティ: WAI-ARIAに準拠したアクセシブルなUI
  • .cursorrules自動生成システム: AIアシスタントとの効率的な協業を実現する革新的な仕組み

🛠️ 技術スタック

📋 プロジェクト構造

portfolio/
├── .cursor/                # AIアシスタント用の設定ディレクトリ
│   ├── prompt.md          # AIアシスタントの役割と指示
│   ├── rules.md           # コーディングルールの定義
│   ├── memory.md          # プロジェクトの記憶
│   └── sh/                # 自動化スクリプト
│       ├── generate_rules.sh  # .cursorrulesの生成
│       ├── update_rules.sh    # .cursorrulesの更新
│       └── setup_git_hooks.sh # Gitフックの設定
│   └── rules/               # CursorのPJルールファイル
│       ├── cursorrules.mdc      # AIアシスタント用ルール
├── public/                 # 静的ファイル
├── src/                    # ソースコード
│   ├── app/                # Next.js App Router
│   ├── components/         # Reactコンポーネント
│   │   ├── atoms/         # 最小単位のUI要素（ボタン、入力フィールド、アイコンなど）
│   │   ├── molecules/     # 複数のatomsを組み合わせた要素（検索フォーム、ナビゲーションリンクグループなど）
│   │   ├── organisms/     # 複数のmoleculesを組み合わせた機能的なセクション（コンタクトフォームなど）
│   │   ├── templates/     # ページのレイアウト構造（ヘッダー、フッターなど）
│   │   └── pages/         # 完全なページコンポーネント
│   ├── hooks/              # カスタムReactフック
│   ├── lib/                # ユーティリティ関数
│   │   ├── animations/    # アニメーション関連
│   │   └── utils/         # 汎用ユーティリティ
│   ├── styles/             # グローバルスタイル
│   └── types/              # TypeScript型定義
├── .eslintrc.json         # ESLint設定
├── .cursorrules           # 自動生成されたAIアシスタント用ルール
├── next.config.js         # Next.js設定
├── package.json           # 依存関係
├── tailwind.config.js     # Tailwind CSS設定
└── tsconfig.json          # TypeScript設定

🚀 開発ガイドライン

コンポーネント設計

各コンポーネントは以下の標準ディレクトリ構造に従って実装します：

ComponentName/
├── ComponentName.tsx    # コンポーネント実装
├── ComponentName.test.tsx    # テスト
└── index.ts             # エクスポート定義

コーディング規約

  1. アトミックデザイン:

    • 階層構造を厳格に遵守（organisms → molecules → atoms）
    • 逆方向の依存（molecules → organisms）は禁止
    • コンポーネントの責任範囲を明確に定義

  2. TypeScript:

    • 厳格な型付けを実施
    • any型の使用を避け、具体的な型定義を使用
    • 型定義はsrc/typesディレクトリで集中管理

  3. スタイリング:

    <div className={cn(
  "bg-gray-900/80 p-4 rounded-lg",
  "hover:bg-gray-800/90 transition-colors",
  className
)}>
    • Tailwind CSSのユーティリティクラスをcn()関数でグループ化
    • 背景色は暗めの色調、アクセント色は青系統を基本

  4. エラーハンドリング:

    try {
  // 処理
} catch (error) {
  console.error("エラーが発生しました:", error);
  return <ErrorComponent message="エラーが発生しました" />;
}

  5. データフェッチング:

    const data = await fetch("/api/data", { next: { revalidate: 3600 } }).then(
  (res) => res.json()
);
    • 可能な限りサーバーコンポーネントでデータフェッチング
    • 適切なキャッシュ戦略を設定

品質管理

  1. リントチェック:

    yarn lint  # すべてのソースコードとテストファイルをチェック
    • コンポーネント実装・修正後
    • テスト実装・修正後
    • プルリクエスト作成前
    • ビルド実行前

  2. テスト:

    yarn test  # すべてのテストを実行
    • コンポーネント変更後は対応するテストを実行
    • 構造変更後は全テストを実行
    • テストファイルは各コンポーネントと同じディレクトリに配置

🤖 .cursorrulesの自動生成・更新システム

このプロジェクトでは、AIアシスタントとの効率的な協業を実現するために、.cursorrulesの自動生成・更新システムを導入しています。

仕組み

  1. .cursor/prompt.mdにAIアシスタントの役割と指示を定義
  2. .cursor/rules.mdと.cursor/memory.mdにコーディングルールとプロジェクトの記憶を定義
  3. .cursor/sh/generate_rules.shスクリプトが各ファイルの内容を結合してcursorrules.mdcを生成
  4. Gitのpre-commitフックを使用して、コミット前に自動的にcursorrules.mdcを更新
  5. 更新されたcursorrules.mdcは自動的にコミットに含まれる

利点

  • AIアシスタントの一貫性: セッションが切れても同じルールと記憶に基づいて作業を継続
  • 開発者の負担軽減: ルールの手動更新が不要で、常に最新の状態を維持
  • チーム協業の向上: 全員が同じルールと記憶に基づいて開発を進められる
  • バージョン管理: ルールと記憶の変更履歴をGitで追跡可能

設定方法

# Gitフックの設定
bash .cursor/sh/setup_git_hooks.sh

# 手動で.cursorrulesを生成・更新
bash .cursor/sh/generate_rules.sh

💡 その他の革新的な点

  • アクセシビリティへの配慮: prefers-reduced-motionに対応したアニメーション
  • パフォーマンス最適化: Next.jsの最新機能を活用した高速なページ読み込み
  • 開発者体験の向上: AIアシスタントとの効率的な協業による生産性向上

🔧 セットアップ

前提条件

  • Node.js 18.x以上
  • Yarn または npm

インストール

# リポジトリをクローン
git clone https://github.com/daikimatsura/portfolio.git
cd portfolio

# 依存関係をインストール
yarn install
# または
npm install

開発サーバーの起動

# 開発サーバーを起動
yarn dev
# または
npm run dev

ブラウザで http://localhost:3000 を開いてサイトを確認できます。

ビルドと本番環境での実行

# 本番用にビルド
yarn build
# または
npm run build

# 本番サーバーを起動
yarn start
# または
npm start

📝 主な機能

  • ホームページ: 自己紹介と主要なナビゲーション
  • 職務経歴: これまでの職務経歴と実績
  • スキル: 技術スタックと専門知識
  • プロジェクト: 過去のプロジェクト実績
  • ブログ: 技術記事やナレッジシェア
  • お問い合わせ: コンタクトフォーム

📐 開発ガイドライン

コーディング規約

このプロジェクトでは以下のコーディング規約に従っています：

  1. コンポーネント設計:

    • アトミックデザインパターンを採用
    • 再利用可能なコンポーネントの抽出と共通化
    • 単一責任の原則に従ったコンポーネント設計

  2. TypeScript:

    • 厳格な型付けを実施
    • インターフェースと型エイリアスの適切な使い分け
    • 型定義はsrc/typesディレクトリで集中管理

  3. スタイリング:

    • Tailwind CSSのユーティリティクラスを優先使用
    • 条件付きクラス名にはcn()ユーティリティ関数を使用
    • カラーパレットはダークテーマベースで統一

  4. 状態管理:

    • ローカル状態にはReactフック（useState, useReducer）を使用
    • サーバーコンポーネントでのサーバーサイド状態管理
    • 必要に応じてコンテキストを使用したグローバル状態管理

  5. アクセシビリティ:

    • セマンティックなHTML要素の使用
    • WAI-ARIAの適切な実装
    • キーボードナビゲーションのサポート
    • prefers-reduced-motionに対応したアニメーション

  6. パフォーマンス:

    • 画像の最適化
    • コード分割と遅延ロード
    • メモ化によるレンダリングの最適化
    • サーバーサイドレンダリングの活用

コードレビュー基準

プルリクエストのレビュー時には以下の点を確認します：

  • コードの可読性と保守性
  • パフォーマンスへの影響
  • アクセシビリティ対応
  • セキュリティ上の問題
  • テストカバレッジ
  • ブラウザ互換性

🧪 テスト

このプロジェクトではJestとReact Testing Libraryを使用してテストを実装しています。

テストコマンド

# すべてのテストを実行
yarn test

# 監視モードでテストを実行（ファイル変更時に自動的に再実行）
yarn test:watch

# カバレッジレポートを生成
yarn test:coverage

テスト実装パターン

  1. モック戦略:

    • 外部ライブラリ（アイコン、UIコンポーネント、フレームワーク機能）は一元的にモック
    • jest.setup.jsでモックの基本設定を集中管理
    • 複雑なコンポーネントは階層構造を保持しつつ簡略化したモックを作成

  2. 共通モックパターン:

    // アイコンコンポーネント
jest.mock("@/components/atoms/Icon", () => ({
  Icon: ({ "data-testid": testId }) => <span data-testid={testId} />,
}));

// Framer Motionコンポーネント
jest.mock("framer-motion", () => ({
  motion: {
    div: ({ children, ...props }) => <div {...props}>{children}</div>,
  },
}));

  3. テスト安定性向上の手法:

    • 要素取得はdata-testid属性を優先使用
    • 非同期処理テストではwaitForやfindBy*クエリを使用
    • 複雑なテキスト検証は正規表現による部分一致を活用
    • セレクタは安定性の高い方法（id > role > class）を優先

  4. テストファイルの配置:

    src/components/カテゴリ/
  └── ComponentName/
      ├── ComponentName.tsx
      ├── ComponentName.test.tsx  # コンポーネントと同じディレクトリに配置
      └── index.ts

テスト実行のタイミング

  • コンポーネント変更後は対応するテストを必ず実行
  • 構造変更後は全テストを実行して影響範囲を確認
  • ビルド前の全テスト実行による品質保証

テスト修正の優先順位

  1. コンポーネントの意図と実装が正しい場合はテストを修正
  2. テストの期待値が正しい場合はコンポーネントを修正
  3. 両方に問題がある場合は設計から見直し

🔍 パフォーマンス最適化

このプロジェクトでは以下のパフォーマンス最適化を実施しています：

  • 画像最適化: Next.jsのImageコンポーネントを使用
  • コード分割: 動的インポートによるバンドルサイズの削減
  • サーバーサイドレンダリング: 初期ロード時間の短縮
  • キャッシュ戦略: 適切なキャッシュヘッダーの設定

lib/ディレクトリの構造

src/libディレクトリには、アプリケーション全体で使用されるユーティリティ関数が含まれています：

  • animations/: Framer Motionを使用したアニメーション定義
    • animations.ts: 基本的なアニメーションプロパティ
    • variants.ts: アニメーションバリアント
    • index.ts: エクスポート用インデックスファイル
  • errors/: エラーハンドリング関連のユーティリティ
    • ErrorBoundary.tsx: エラー境界コンポーネント
    • errorHandlers.ts: エラーハンドリングロジック
    • errorTypes.ts: エラー型定義
  • styles/: スタイル関連のユーティリティ
    • index.ts: 共通スタイル定義（グラデーション、カラーなど）
  • utils.ts: 汎用ユーティリティ関数（クラス名結合など）

👨‍💻 作者

🙏 謝辞

  • Next.js Team: 素晴らしいフレームワークの提供
  • Shadcn UI: 美しいUIコンポーネント
  • Vercel: ホスティングとデプロイ環境の提供

© 2025 Daiki Matsuura. All Rights Reserved.

About

私の自己紹介が入ったポートフォリオです

daikimatsuura.vercel.app/

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages