Markdownの全機能を活用した包括的なブログ記事サンプル：フロントエンド開発における最新技術とベストプラクティスの詳細ガイド

// 基本的なReactコンポーネント
import React, { useState, useEffect } from 'react';
    
const BlogPost = ({ title, content, author }) => {
    const [isLoading, setIsLoading] = useState(false);
    const [comments, setComments] = useState([]);
    
    useEffect(() => {
    fetchComments();
    }, []);
    
    const fetchComments = async () => {
    setIsLoading(true);
    try {
        const response = await fetch(`/api/comments/${postId}`);
        const data = await response.json();
        setComments(data);
    } catch (error) {
        console.error('コメントの取得に失敗しました:', error);
    } finally {
        setIsLoading(false);
    }
    };
    
    return (
    <article>
        <header>
        <h1>{title}</h1>
        <p>著者: {author}</p>
        </header>
        <main dangerouslySetInnerHTML={{ __html: content }} />
        <footer>
        {isLoading ? (
            <p>コメントを読み込み中...</p>
        ) : (
            <CommentsList comments={comments} />
        )}
        </footer>
    </article>
    );
};
    
export default BlogPost;

// 型安全なAPI設計
interface User {
    id: string;
    name: string;
    email: string;
    avatar?: string;
    createdAt: Date;
    updatedAt: Date;
}
    
interface BlogPost {
    id: string;
    title: string;
    slug: string;
    content: string;
    excerpt: string;
    author: User;
    category: Category;
    tags: Tag[];
    publishedAt: Date | null;
    isPublished: boolean;
}
    
type ApiResponse<T> = {
    data: T;
    meta: {
    total: number;
    page: number;
    limit: number;
    };
    success: boolean;
    message?: string;
};
    
// ジェネリック関数の例
const fetchData = async <T>(
    endpoint: string,
    options?: RequestInit
): Promise<ApiResponse<T>> => {
    const response = await fetch(endpoint, options);
    if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
};

/* カスタムCSS */
@layer components {
    .btn-primary {
    @apply px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg
            hover:bg-blue-700 focus:ring-2 focus:ring-blue-500
            focus:ring-offset-2 transition-colors duration-200;
    }
    
    .card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg
            border border-gray-200 dark:border-gray-700
            overflow-hidden;
    }
    
    .gradient-text {
    @apply bg-gradient-to-r from-blue-600 to-purple-600
            bg-clip-text text-transparent;
    }
}
    
/* アニメーション */
@keyframes fadeInUp {
    from {
    opacity: 0;
    transform: translateY(30px);
    }
    to {
    opacity: 1;
    transform: translateY(0);
    }
}
    
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

# 二分探索アルゴリズム (O(log n))
def binary_search(arr, target):
    left, right = 0, len(arr) - 1
    
    while left <= right:
        mid = (left + right) // 2
    
        if arr[mid] == target:
            return mid
        elif arr[mid] < target:
            left = mid + 1
        else:
            right = mid - 1
    
    return -1
    
# 使用例
numbers = [1, 3, 5, 7, 9, 11, 13, 15]
result = binary_search(numbers, 7)
print(f"インデックス: {result}")  # 出力: インデックス: 3

graph TD
    A[クライアント] --> B[Next.js Frontend]
    B --> C[API Gateway]
    C --> D[認証サービス]
    C --> E[ユーザーサービス]
    C --> F[ブログサービス]
    E --> G[PostgreSQL]
    F --> G
    D --> H[Redis]