Honoで作るモダンブログシステム設計 🏗️
現代的なブログシステムをHonoで構築する際の設計パターンと最適化手法について詳しく解説します。
システム全体像
アーキテクチャコンポーネント
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ フロントエンド │ │ Honoアプリ │ │ データソース │
│ (HTML/CSS/JS) │◄──►│ ルーティング │◄──►│ Markdown │
│ │ │ テンプレート │ │ ファイル │
└─────────────────┘ └─────────────────┘ └─────────────────┘
ディレクトリ構造設計
blog-hono/
├── posts/ # Markdownファイル
│ ├── 2025/
│ │ ├── 01/
│ │ └── 02/
│ └── categories/
├── templates/ # HTMLテンプレート
│ ├── base.html
│ ├── post.html
│ └── list.html
├── static/ # 静的ファイル
│ ├── css/
│ ├── js/
│ └── images/
├── utils/ # ユーティリティ
│ ├── markdown.js
│ ├── cache.js
│ └── helpers.js
└── index.js # メインアプリ
コンテンツ管理システム
Frontmatter設計
---
title: "記事タイトル"
slug: "url-friendly-slug"
date: "2025-01-17"
updated: "2025-01-18"
category: "技術"
tags: ["hono", "javascript"]
excerpt: "記事の要約"
featured: true
draft: false
author: "著者名"
---
メタデータ管理
// utils/metadata.js
export class PostMetadata {
constructor(frontmatter) {
this.title = frontmatter.title
this.slug = frontmatter.slug
this.date = new Date(frontmatter.date)
this.category = frontmatter.category
this.tags = frontmatter.tags || []
this.excerpt = frontmatter.excerpt
this.featured = frontmatter.featured || false
}
getReadingTime(content) {
const wordsPerMinute = 200
const words = content.split(/\s+/).length
return Math.ceil(words / wordsPerMinute)
}
}
パフォーマンス最適化
メモリキャッシュシステム
// utils/cache.js
class PostCache {
constructor(maxAge = 3600000) { // 1時間
this.cache = new Map()
this.maxAge = maxAge
}
set(key, value) {
this.cache.set(key, {
data: value,
timestamp: Date.now()
})
}
get(key) {
const item = this.cache.get(key)
if (!item) return null
if (Date.now() - item.timestamp > this.maxAge) {
this.cache.delete(key)
return null
}
return item.data
}
}
export const postCache = new PostCache()
遅延ローディング
// 必要な時にのみMarkdownを読み込み
const loadPost = async (slug) => {
const cached = postCache.get(slug)
if (cached) return cached
const content = await fs.readFile(`posts/${slug}.md`, 'utf-8')
const parsed = matter(content)
const post = {
...parsed.data,
content: marked(parsed.content),
readingTime: calculateReadingTime(parsed.content)
}
postCache.set(slug, post)
return post
}
SEO最適化
メタタグ生成
const generateMetaTags = (post) => `
<meta name="description" content="${post.excerpt}">
<meta name="keywords" content="${post.tags.join(', ')}">
<meta property="og:title" content="${post.title}">
<meta property="og:description" content="${post.excerpt}">
<meta property="og:type" content="article">
<meta name="twitter:card" content="summary_large_image">
<link rel="canonical" href="https://yourblog.com/blog/${post.slug}">
`
構造化データ
const generateStructuredData = (post) => ({
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": post.title,
"description": post.excerpt,
"author": {
"@type": "Person",
"name": post.author
},
"datePublished": post.date.toISOString(),
"dateModified": post.updated?.toISOString() || post.date.toISOString()
})
検索機能の実装
全文検索インデックス
// utils/search.js
class SearchIndex {
constructor() {
this.index = new Map()
}
addPost(post) {
const searchText = `${post.title} ${post.excerpt} ${post.content}`.toLowerCase()
const words = searchText.split(/\s+/)
words.forEach(word => {
if (!this.index.has(word)) {
this.index.set(word, new Set())
}
this.index.get(word).add(post.slug)
})
}
search(query) {
const words = query.toLowerCase().split(/\s+/)
const results = new Set()
words.forEach(word => {
const posts = this.index.get(word)
if (posts) {
posts.forEach(slug => results.add(slug))
}
})
return Array.from(results)
}
}
レスポンシブデザイン対応
テンプレートシステム
// templates/base.js
export const baseTemplate = (content, meta = {}) => `
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>${meta.title || 'ブログ'}</title>
${meta.tags || ''}
<link rel="stylesheet" href="/static/css/style.css">
</head>
<body>
<header>
<nav>
<a href="/">ホーム</a>
<a href="/blog">ブログ</a>
<a href="/about">アバウト</a>
</nav>
</header>
<main>${content}</main>
<footer>
<p>© 2025 My Blog</p>
</footer>
<script src="/static/js/main.js"></script>
</body>
</html>
`
エラーハンドリング
グレースフルエラー処理
app.use('*', async (c, next) => {
try {
await next()
} catch (error) {
console.error('Error:', error)
if (error.code === 'ENOENT') {
return c.html(render404Page(), 404)
}
return c.html(render500Page(error), 500)
}
})
デプロイメント戦略
静的サイト生成 (SSG)
// build.js
import { toSSG } from 'hono/ssg'
const routes = [
'/',
'/blog',
...posts.map(post => `/blog/${post.slug}`),
...categories.map(cat => `/category/${cat}`),
]
await toSSG(app, fs, { routes })
CI/CD統合
# .github/workflows/deploy.yml
name: Deploy Blog
on:
push:
branches: [main]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '18'
- run: npm install
- run: npm run build
- run: npm run deploy
まとめ
Honoでブログシステムを構築する際は：
- パフォーマンス: キャッシュとインデックスを活用
- SEO: メタデータと構造化データを適切に設定
- 保守性: モジュラー設計とテンプレートシステム
- スケーラビリティ: 静的生成とCDN配信の検討
これらの要素を組み合わせることで、高速で保守しやすいブログシステムが構築できます！