Tech Blogへようこそ

このブログは、エンジニア向けの高品質な技術情報を提供することを目的として構築されました。

🚀 技術スタック

このブログは以下の最新技術で構築されています：

• Astro - 静的サイトジェネレーター
• TypeScript - 型安全な開発
• Tailwind CSS - ユーティリティファーストCSS
• MDX - Markdownとコンポーネントの統合

⚡ パフォーマンス重視

このブログは以下のパフォーマンス目標を設定しています：

• Lighthouse Performance: 90点以上
• Core Web Vitals:
  • LCP < 1.5秒
  • INP < 300ms
  • CLS < 0.1

🎯 特徴

🔍 全文検索

Pagefindによる高速な静的検索を実装。

🌙 ダークモード

システム設定に連動した自動ダークモード切り替え。

♿ アクセシビリティ

WCAG 2.1 AA準拠のアクセシブルな設計。

📱 レスポンシブデザイン

モバイルファーストで設計された完全レスポンシブレイアウト。

📊 品質管理

自動化されたCI/CD

• ESLint & Prettier: コード品質の自動チェック
• TypeScript: 型安全性の保証
• Lighthouse CI: パフォーマンスの継続的監視

セキュリティ

• Content Security Policy設定
• セキュリティヘッダーの適用
• 依存関係の定期監査

🎨 デザインシステム

カスタムTailwind設定により、一貫したデザインシステムを実現：

/* カスタムカラーパレット */
.text-primary {
  color: theme('colors.primary.500');
}
.text-accent {
  color: theme('colors.accent.500');
}

/* グラデーションテキスト */
.text-gradient-primary {
  @apply text-gradient-primary;
}

🛠️ 開発体験

高速な開発サーバー

Viteベースの高速な開発サーバーで快適な開発体験。

型安全性

TypeScriptによる型安全な開発環境。

コード品質

ESLintとPrettierによる一貫したコード品質の維持。

🔮 今後の予定

• コメント機能の実装
• ニュースレター機能
• 多言語対応
• OGP画像の自動生成
• 関連記事レコメンデーション

📝 記事を書く

記事は以下の手順で作成できます：

1. src/content/articles/に新しいMDXファイルを作成
2. 適切なfrontmatterを設定
3. MDXフォーマットでコンテンツを記述
4. pnpm devで確認

詳細は記事作成ガイドをご覧ください。

---

このブログがエンジニアの皆様にとって有益な情報源となることを願っています。 ご質問やフィードバックがございましたら、お気軽にお声かけください！