はじめに

前回の記事で、このブログを作った目的やこれから書いていく内容について書きました。 今回は、どのように作ったかについて、全体像をざっと紹介してみようと思います。 「なぜブログサイトを作ったのか」は前回で触れたので、今回は技術的な側面に焦点を当てます。 といっても、技術的な深掘りは別の記事で書く予定なので、この記事では全体の構造や設計の考え方を中心にまとめます。

このシリーズでは、以下の4つのテーマで記事を書いていく予定です。

1. 1. この記事: ブログサイト自体の構築記（全体像）

2. 2. 技術選定の理由と経緯: なぜこの技術スタックを選んだか

3. 3. 課題解決のプロセス: 実装中のハマりどころや解決のメモ

4. 4. 機能追加の設計と実装: 設計の考え方や試行錯誤のログ

最低限必要な機能

最初から完璧な機能を目指すのではなく、小さく始めて少しずつ機能を追加していく方針にしました。

v1.0.0での初回リリース時点では、以下の機能を実装しました

- マークダウンでの記事執筆: エディタとプレビュー機能

- 管理画面での記事管理: 記事の作成・編集・削除、下書き機能

- タグ・検索機能: 記事を整理しやすくするため

- レスポンシブデザイン: モバイル・タブレット・デスクトップで快適に読めるように シンプルですが、最低限の機能は揃っている状態でスタートしました。

開発の流れと期間感

開発期間は、v1.0.0の初回リリースまでが約2週間程度でした。

細かく分けると

1. 初期設計

- 技術スタックの選定（この詳細は別記事で）

- アーキテクチャの設計

- データベーススキーマの設計

2. 実装フェーズ

- 基本的な記事閲覧機能

- 管理画面の実装

- マークダウン処理の実装

- UI/UXの調整

3. テスト・デプロイ

- ローカルでの動作確認

- Cloudflare Workersへのデプロイ

- 不具合の修正

v1.1.0での機能追加

初回リリース後、セキュリティや開発体験を改善するためにv1.1.0をリリースしました。

- セキュリティ強化: JWT認証の強化、XSS対策、レートリミット

- テスト環境整備: Vitest、Playwrightによるテストスイート

- CI/CD導入: GitHub Actionsでの自動テスト・ビルド 開発の進め方としては、小さく始めて少しずつ機能を追加するスタイルを意識しました。 完璧を目指すよりも、動くものを作ってから改善していく方が、学習記録としても自然に残せると考えています。 次の記事では、技術選定の理由と経緯について詳しく書きます。 その次に、実際の開発で遭遇した課題と解決方法、最後に機能追加の設計と実装について書く予定です。

終わりに

この記事では、ブログサイトの全体像をざっと紹介しました。 技術的な深掘り記事は別途書くつもりですが、このシリーズではなぜそうしたかという背景や目的を重視して書いていきたいと思います。

もし同じように個人ブログを作ろうとしている人や、技術選定で迷っている人の参考になれば嬉しいです。 次回もよろしくお願いします。