設計サンプル

このページでは、本コースの各 Step で作成する成果物の具体例として、DevOps コースでも扱っている sns-camp（SNS アプリケーション）を題材にした設計・コードサンプルを Step ごとにまとめています。

各 Step の教材からは、該当箇所へのリンクを張っています。あくまで 1 つの正解例として参考にしてください。自作アプリケーションのテーマに合わせて、粒度・項目は自由に決めて構いません。

1. Step 1 バックエンド1

以下は sns-camp をテーマとして選んだ場合の テーマ選定のサンプルです。3 案とも詳細に書ききる必要はなく、メンタリングで壁打ちして絞り込むことを前提としたドラフトです。

1.1 選定したテーマ案（3案）

案 1: SNS アプリケーション（本命）

• テーマ: 短文投稿・フォロー・いいねができるシンプルな SNS
• 想定するターゲットユーザ: 気軽に日々の出来事を共有したい 20〜40 代
• 解決したい課題: 既存の SNS は情報過多で疲れる。シンプルな機能に絞った SNS が欲しい
• 作りたい機能のドラフト案:
  • ユーザ登録・ログイン
  • 短文投稿（280 文字以内）
  • 他ユーザのフォロー・フォロー解除
  • タイムライン表示（フォロー中のユーザの投稿）
  • いいね

案 2: レシピ管理アプリ

• テーマ: 自分だけのレシピを管理できるアプリ
• 想定するターゲットユーザ: 家庭で料理する人
• 解決したい課題: 自分好みにアレンジしたレシピを整理して残したい
• 作りたい機能のドラフト案: レシピの登録・材料と手順の入力・カテゴリ分け・検索

案 3: 読書記録アプリ

• テーマ: 読んだ本を記録し、感想をまとめるアプリ
• 想定するターゲットユーザ: 読書好きの個人
• 解決したい課題: 過去に読んだ本と感想を一元管理したい
• 作りたい機能のドラフト案: 本の登録・感想メモ・評価・読書記録の統計表示

1.2 採用予定の言語

Python（Web バックエンドの主要フレームワークが充実、シンプルに書ける）

2. Step 2 バックエンド2

以下は Step 1 の 案 1（SNS アプリケーション = sns-camp）を選んだ場合の、API 仕様書・DB 仕様書・ER 図のサンプルです。

2.1 API 仕様書

APIの概要

SNS Camp のバックエンド REST API です。ユーザ認証、投稿、フォロー、いいね機能を提供します。

共通仕様

• ベースURL: http://<your-host>/api/v1
• 日時フォーマット: ISO 8601（例: 2026-04-03T12:00:00）
• ページネーション: クエリパラメータ limit（デフォルト: 20、最大: 100）、offset（デフォルト: 0）

認証方式

ヘルスチェック・ユーザ登録・ログインを除くすべての API リクエストに Bearer トークンが必要です。

Authorization: Bearer <access_token>

トークンは JWT（HS256）で、有効期限は 24 時間です。

レスポンス形式

成功時:

{ "data": { ... } }

エラー時:

{ "error": { "code": "ERROR_CODE", "message": "エラーメッセージ" } }

ステータスコード一覧

エンドポイント一覧

API 詳細（API-002 ユーザ登録の例）

POST /api/v1/auth/register

リクエストパラメータ:

リクエスト例:

{
  "username": "testuser",
  "email": "test@example.com",
  "password": "password123",
  "display_name": "テストユーザ"
}

レスポンス（201 Created）:

レスポンス例:

{
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIs...",
    "user": {
      "id": 1,
      "username": "testuser",
      "email": "test@example.com",
      "display_name": "テストユーザ"
    }
  }
}

エラーレスポンス:

2.2 DB 仕様書

データベース概要

SNS アプリケーションのユーザ情報・投稿・フォロー関係・いいねを管理するデータベースです。

テーブル一覧

テーブル詳細（users テーブルの例）

ユーザの基本情報と認証情報を保存するテーブル。

カラム定義:

インデックス:

テーブル詳細（posts テーブルの例）

ユーザの投稿を保存するテーブル。

カラム定義:

インデックス:

テーブル詳細（follows テーブルの例）

ユーザ間のフォロー関係を保存する中間テーブル。

カラム定義:

制約:

• UNIQUE(follower_id, following_id): 同じ組み合わせのフォロー重複を防ぐ

インデックス:

2.3 ER 図

sns-camp のテーブル構造の ER 図です。

erDiagram
  users ||--o{ posts : "投稿する"
  users ||--o{ follows : "フォローする（follower_id）"
  users ||--o{ follows : "フォローされる（following_id）"
  users ||--o{ likes : "いいねする"
  posts ||--o{ likes : "いいねされる"
  users {
    bigint id PK
    varchar username UK
    varchar email UK
    varchar password_hash
    varchar display_name
  }
  posts {
    bigint id PK
    bigint user_id FK
    varchar content
  }
  follows {
    bigint id PK
    bigint follower_id FK
    bigint following_id FK
  }
  likes {
    bigint id PK
    bigint user_id FK
    bigint post_id FK
  }

3. Step 3 バックエンド実装

以下は sns-camp-api の完全なソースコード（自動テスト・Docker 設定・静的解析設定を含む）です。ダウンロードしてローカルで起動しながら、コード構成の参考にしてください。

4. Step 4 フロントエンド1

以下は sns-camp-front の画面一覧・画面遷移図のサンプルです。

4.1 画面一覧

4.2 画面遷移図

sns-camp-front の画面遷移を Mermaid で表現したサンプルです。

flowchart LR
  root[SCR-001 ルート]
  login[SCR-002 ログイン画面]
  register[SCR-003 ユーザ登録画面]
  timeline[SCR-004 タイムライン画面]
  postDetail[SCR-005 投稿詳細画面]
  postEdit[SCR-006 投稿編集画面]
  profile[SCR-007 ユーザプロフィール画面]

  root -->|認証済み| timeline
  root -->|未認証| login
  login -->|ログイン成功| timeline
  login -->|新規登録リンク| register
  register -->|登録成功| timeline
  register -->|ログインリンク| login
  timeline -->|投稿クリック| postDetail
  timeline -->|ユーザ名クリック| profile
  timeline -->|ログアウト| login
  postDetail -->|編集ボタン| postEdit
  postDetail -->|削除・戻る| timeline
  postEdit -->|更新成功| postDetail
  postEdit -->|キャンセル| postDetail
  profile -->|投稿クリック| postDetail

5. Step 5 フロントエンド2

以下は sns-camp-front のイベント設計のサンプルです。SCR-004 タイムライン画面（一覧系）と SCR-003 ユーザ登録画面（登録系）の 2 画面を例として示します。

5.1 SCR-004 タイムライン画面（一覧系）

5.2 SCR-003 ユーザ登録画面（登録系）

6. Step 6 フロントエンド実装

以下は sns-camp-front の完全なソースコード（Docker 設定・自動テスト設定を含む）です。ダウンロードしてローカルで起動しながら、コード構成の参考にしてください。