はじめに
システム設計フェーズで決定したアーキテクチャを基に、機能設計フェーズでは各機能の詳細な実装方法を設計します。
このフェーズでは、API設計、Lambda関数の詳細仕様、データフローを具体的に定義します。
API概要
基本情報
- API Gateway: REST API
- プロトコル: HTTPS/TLS 1.2
- データ形式: JSON
- 文字エンコーディング: UTF-8
エンドポイント構成
https://{api-id}.execute-api.ap-northeast-1.amazonaws.com/{stage}/contact
特に言う事なし。
お問い合わせ作成API
エンドポイント詳細
基本情報
-
パス:
/contact -
メソッド:
POST - CORS: 有効
お問い合わせ機能の詳細仕様を定義し、バリデーションとエラーハンドリングを明確にしています。
リクエスト仕様
Content-Type: application/json
リクエストボディ:
{
"name": "string (必須)",
"email": "string (必須)",
"subject": "string (オプション)",
"message": "string (必須)",
"recaptchaToken": "string (オプション)"
}
フィールド詳細:
-
name: お名前（1-100文字） -
email: メールアドレス（有効な形式） -
subject: 件名（0-200文字、オプション） -
message: メッセージ内容（1-2000文字）
レスポンス仕様
レスポンスはシンプルに以下の通りに設計します。
成功時（201 Created）:
{
"success": true,
"message": "Contact created successfully",
"id": "2025-01-XX-XXXXXXXXX"
}
バリデーションエラー（400 Bad Request）:
{
"success": false,
"error": "Name, email, and message are required"
}
Lambda関数概要
実装するLambda関数
- API Handler Lambda: お問い合わせデータの受信・保存
- Notification Processor Lambda: 非同期通知処理
- Error Notification Lambda: エラー監視・通知
共通仕様
- ランタイム: Node.js 20.x
- ログ: CloudWatch Logs
詳細な実装は別記事「Lambda関数実装詳細」で解説
記事データ取得
実装方式
-
静的JSONファイル:
/latest-articles.json - 取得方法: フロントエンドから直接fetch
- データ形式: Article[]配列
静的JSONファイルを活用した記事取得を実施し、CDNによる配信でパフォーマンスを最適化しています。
静的JSONファイルによる記事データ取得の仕組み。フロントエンドから直接fetchすることで、CDNによる高速配信を実現しています。
データ構造
interface Article {
slug: string;
title: string;
date: string;
tags: string[];
description: string;
thumbnail?: string;
content: string;
category: "portfolio" | "life";
}
お問い合わせ機能の実装
お問い合わせフォームの設計
お問い合わせ機能は、ユーザーが簡単に連絡を取れるように設計されています。
お問い合わせフォームの実装。バリデーション機能とエラーハンドリングを組み合わせて、ユーザーフレンドリーな体験を提供しています。
機能設計の特徴
1. 非同期処理
- 高速レスポンス: ユーザーへの即座のレスポンス
- バックグラウンド処理: 通知処理の非同期実行
- エラー分離: 通知処理の失敗がユーザー体験に影響しない
疎結合な設計にする事で、それぞれの処理に影響しないようにしています。
2. スケーラビリティ
- サーバーレス: トラフィックに応じた自動スケール
- 並行処理: 複数の通知処理を並行実行
- リソース最適化: 使用量に応じた課金
なるべくお金をかけないようにサーバーレスに設計。
3. 監視・アラート
- 統合監視: CloudWatchによる統合監視
- リアルタイム通知: Discord Webhookによる即座の通知
- 詳細ログ: 問題の早期発見と迅速な対応
詳細な実装と監視システムは別記事で解説
次のステップ
機能設計が完了したら、次のフェーズである運用設計に進みます。
運用設計では、デプロイ手順、監視設定、運用プロセスを具体的に定義していきます。
機能設計フェーズで意識したことは、料金と運用のコストを最低限にしつつ、堅牢でスケーラブルな機能を設計することです。
本当はユーザー目線でエクスペリエンスの良いものにしたかったのですが、個人運営なので妥協しちゃっています。