フロントエンド開発スキル

概要

フロントエンドアプリケーション開発のためのスキルで、4つの主要フレームワークをカバーしており、ベストプラクティスを含みます

---

Angular

プロジェクト構造

src/
├── app/
│   ├── core/              # Singleton services, guards, interceptors
│   │   ├── services/
│   │   ├── guards/
│   │   └── interceptors/
│   ├── shared/            # Shared components, pipes, directives
│   │   ├── components/
│   │   ├── pipes/
│   │   └── directives/
│   ├── features/          # Feature modules
│   │   ├── auth/
│   │   ├── dashboard/
│   │   └── users/
│   └── app.component.ts
├── assets/
└── environments/

ベストプラクティス

1. スタンドアロンコンポーネント - スタンドアロンコンポーネントを使用します(Angular 15+)
2. シグナル - リアクティビティのためにシグナルを使用します(Angular 16+)
3. スマートコンポーネント vs ダムコンポーネント - コンテナとプレゼンテーションを分離します
4. OnPush変更検知 - パフォーマンス向上のために使用します
5. 遅延読み込み - 必要に応じてモジュールを読み込みます

共通パターン

// スタンドアロンコンポーネント with シグナル (Angular 17+)
import { toSignal } from "@angular/core/rxjs-interop";

@Component({
  selector: "app-user-list",
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    @for (user of users(); track user.id) {
      <div>{{ user.name }}</div>
    }
  `,
})
export class UserListComponent {
  private userService = inject(UserService);

  // effect() + subscribe の代わりに toSignal() を使用
  users = toSignal(this.userService.getUsers(), { initialValue: [] });
}

---

React

プロジェクト構造

src/
├── components/          # 共有/再利用可能なコンポーネント
│   ├── ui/              # 基本 UI コンポーネント
│   └── layout/          # レイアウトコンポーネント
├── features/            # 機能ベースのモジュール
│   ├── auth/
│   │   ├── components/
│   │   ├── hooks/
│   │   └── api.ts
│   └── users/
├── hooks/               # 共有カスタムフック
├── lib/                 # ユーティリティ、ヘルパー
├── services/            # API サービス
└── stores/              # ステート管理 (Zustand/Redux)

ベストプラクティス

1. 関数型コンポーネント - 常に関数型コンポーネントを使用します
2. カスタムフック - ロジックをフックに抽出します
3. React Query/SWR - データフェッチング用
4. Zustand/Jotai - シンプルなステート管理用
5. エラーバウンダリー - エラーを適切に処理します

共通パターン

// カスタムフックパターン
function useUsers() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetchUsers()
      .then(setUsers)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);

  return { users, loading, error };
}

// React Query パターン
function useUsers() {
  return useQuery({
    queryKey: ["users"],
    queryFn: fetchUsers,
    staleTime: 5 * 60 * 1000,
  });
}

---

Vue 3

プロジェクト構造

src/
├── components/          # 共有コンポーネント
│   ├── ui/
│   └── layout/
├── composables/         # Composition API 関数
├── views/               # ページコンポーネント
├── stores/              # Pinia ストア
├── services/            # API サービス
├── router/
└── assets/

ベストプラクティス

1. Composition API - <script setup> 構文を使用します
2. Pinia - ステート管理用
3. Composables - 再利用可能なロジックを抽出します
4. defineProps/defineEmits - タイプセーフな props とイベント
5. Suspense - 非同期コンポーネント用

共通パターン

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useUserStore } from "@/stores/user";

// Props & Emits
const props = defineProps<{
  userId: number;
}>();

const emit = defineEmits<{
  (e: "select", user: User): void;
}>();

// Composables
const userStore = useUserStore();

// リアクティブステート
const searchQuery = ref("");

// 算出プロパティ
const filteredUsers = computed(() =>
  userStore.users.filter((u) => u.name.includes(searchQuery.value)),
);

// ライフサイクル
onMounted(() => {
  userStore.fetchUsers();
});
</script>

---

Next.js (App Router)

プロジェクト構造

src/
├── app/                   # App Router
│   ├── (auth)/            # ルートグループ
│   │   ├── login/
│   │   └── register/
│   ├── dashboard/
│   │   ├── page.tsx
│   │   ├── layout.tsx
│   │   └── loading.tsx
│   ├── api/               # API ルート
│   │   └── users/
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── ui/
│   └── features/
├── lib/                   # ユーティリティ
└── services/              # API サービス

ベストプラクティス

1. サーバーコンポーネント - デフォルト、データフェッチング用
2. クライアントコンポーネント - インタラクティビティが必要な場合のみ
3. ルートグループ - ルートをグループ化します
4. パラレルルート - 複数のページをレンダリングします
5. サーバーアクション - フォーム送信用

共通パターン

// サーバーコンポーネント (デフォルト)
async function UsersPage() {
  const users = await fetchUsers(); // サーバーサイド

  return (
    <div>
      <UserList users={users} />
      <AddUserButton /> {/* クライアントコンポーネント */}
    </div>
  );
}

// クライアントコンポーネント
("use client");

function AddUserButton() {
  const [open, setOpen] = useState(false);

  return <button onClick={() => setOpen(true)}>Add User</button>;
}

// サーバーアクション
async function createUser(formData: FormData) {
  "use server";

  const name = formData.get("name");
  await db.users.create({ name });
  revalidatePath("/users");
}

---

共有ベストプラクティス

CSS/スタイリング

1. CSS Modules または Tailwind CSS
2. CSS 変数 - テーマ用
3. モバイルファースト レスポンシブデザイン
4. 一貫したスペーシング (8px グリッドシステム)

パフォーマンス

1. 遅延読み込み - コンポーネントとルート
2. 画像最適化 (next/image、@angular/common)
3. コード分割
4. メモ化 (useMemo、React.memo、computed)

アクセシビリティ

1. セマンティック HTML
2. ARIA ラベル
3. キーボードナビゲーション
4. 色のコントラスト
5. フォーカス管理

---

フロントエンドチェックリスト

• TypeScript を使用している
• 適切なフォルダ構造
• 優れたコンポーネント設計
• 適切なステート管理
• エラーハンドリング
• ローディング状態
• レスポンシブデザイン
• アクセシビリティ
• パフォーマンス最適化
• テストカバレッジ