「【初心者向け】FastAPI＋PythonでモンスターゲームAPI！Mermaidでシーケンス図を可視化【第2回】」

「本ページはプロモーションが含まれています」

こんにちは。前回は「モンスター育成ゲーム用APIをFastAPIで作りたい」というざっくりした構想と、フレームワークの選定理由なんかをお話ししました。

kunio-ud-zatta.hatenablog.com

ただ、いまだに「ほんとにちゃんと完成するのかな…」という不安は拭えません。が、せっかくなので少しずつでも進めていこうと思います。

今回はMermaidというツールを使って、シーケンス図を描いてみます。シーケンス図があると「どんな流れでAPIを呼び出して、どんなデータのやり取りをするか」がイメージしやすくなるはず…と信じてます。といっても１機能だけだから、大丈夫。タブンネ。。。

1. Mermaidって何？

Mermaid（マーメイド）は、テキストベースでフローチャートやシーケンス図、ER図などを描けるツールです。 GitHubやGitLabでも一部サポートされていて、特にMarkdownファイル内で手軽に図を表現したいときに便利な印象があります。

Mermaidをはてなブログで使う記事はコチラからになります。 kunio-ud-zatta.hatenablog.com

公式サイト

シーケンス図だけでなく、フローチャートやガントチャートなども描ける当ブログ記事内では、シーケンス図のコードサンプルを貼り付けつつ進めます私自身、Mermaidは前回ちょっと触ったことがあるぐらいなので、「こんな書き方で大丈夫？」と不安な部分もありますが…。とにかくやってみます。plantUMLは結構書いてきたはず！大丈夫。

転生したらスライムだった件（１） (シリウスコミックス)

作者:川上泰樹,伏瀬
講談社

Amazon

2. 今回描く「モンスターを手に入れる」シーケンス図のイメージ

2.1 登場人物（アクター）

User（プレイヤー）
Frontend（ゲーム画面やフロントエンドの部分）
API（これから作るFastAPIサーバー）
DB（SQLiteやORMなどを想定）ユーザーがアプリ画面（Frontend）から「モンスターを手に入れる」リクエストを送り、サーバー(API)がDBにレコードを作成する流れを想定しています。いわゆるガチャ機能のようなものをイメージしてもらうと分かりやすいかも。

2.2 実際のフロー

Userが「モンスターを手に入れる」ボタンを押す
Frontendがサーバー（API）に「モンスター入手リクエスト」を投げる
APIはDBを操作して、新たに「ユーザーが所有するモンスター」(owned_monsters的なテーブル)にレコードを追加
APIが結果をFrontendに返す（どのモンスターが当たったか等）
Frontendは画面に結果を表示して、Userが「やったー！」となる（はず…）

Python1年生第2版体験してわかる！会話でまなべる！プログラミングのしくみ

作者:森巧尚
翔泳社

Amazon

3. Mermaidのシーケンス図サンプル

Mermaidでは以下のようなコードでシーケンス図を描きます。とりあえず私が書いたものを貼ってみます。

sequenceDiagram
    participant U as User
    participant FE as Frontend
    participant API as FastAPI Server
    participant DB as Database

    U->>FE: 「モンスターを手に入れる」ボタンをクリック
    note right of U: ここでガチャ的な演出があってもOK

    FE->>API: POST /users/{user_id}/owned-monsters (モンスター入手リクエスト)
    note over FE,API: user_idやガチャパラメータを送る

    note over API: ゲーム内で当たったモンスター種IDを決定
    API->>DB: INSERT INTO user_monsters (...情報...)
    DB-->>API: 新しいレコードIDを返す

    API->>FE: ガチャ結果(owned_monster_id, monster_idなど)
    FE->>U: 結果を画面表示(「○○を手に入れた！」)

sequenceDiagram
    participant U as User
    participant FE as Frontend
    participant API as FastAPI Server
    participant DB as Database

    U->>FE: 「モンスターを手に入れる」ボタンをクリック
    note right of U: ここでガチャ的な演出があってもOK

    FE->>API: POST /users/{user_id}/owned-monsters <br>(モンスター入手リクエスト)
    note over FE,API: user_idやガチャパラメータを送る

    note over API: ゲーム内で当たったモンスター種IDを決定
    API->>DB: INSERT INTO user_monsters (...情報...)
    DB-->>API: 新しいレコードIDを返す


    API->>FE: ガチャ結果<br>(owned_monster_id, monster_idなど)
    FE->>U: 結果を画面表示(「○○を手に入れた！」)

るるぶ石垣宮古竹富島西表島'26

JTBパブリッシング

Amazon

4. Mermaidでの作図環境

VSCode 拡張機能

Visual Studio Codeなら「Markdown Preview Mermaid Support」などの拡張機能を入れることで、.mdファイル内にMermaidのコードを書いてプレビューができます。はてなブログだけの書き方の説明だとダメですね。。。

ジョジョの奇妙な冒険第8部ジョジョリオン 1 ジョジョの奇妙な冒険第8部モノクロ版 (ジャンプコミックスDIGITAL)

作者:荒木飛呂彦
集英社

Amazon

5. 実際に動くかどうかは…これから

さて、ここまでシーケンス図を用意しましたが、まだAPI自体は用意してません。「APIをどう実装するか」は今後の記事で詳しく書いていく予定です。

次回は、やっぱりER図を作ってDBのテーブル構造を固めたいなと思ってます。 Mermaidを使うとER図もテキストベースで書けるので、これまた慣れるまではわちゃわちゃしそうですが、がんばります。正直、シーケンス図も「こんなやり方でいいのかな…」「もっと詳しく描いたほうがいい？」と思いつつ、最初はざっくりしたフローが伝われば十分かなと割り切ってます。

後でAPIを細かく実装する段階になったら、必要に応じて修正＆充実させるのもありです。

とりあえず、スマホゲームのだいご味？のガチャの実装を進めたいですね。

ポケットモンスターバイオレット -Switch

任天堂

Amazon

6. まとめ

Mermaidを使えばテキストベースでシーケンス図を描けるので、APIや画面間の処理の流れを整理しやすい。（たぶん、ゲーム会社の人はシーケンス起こしてないと思う。わかんない。委託だったら起こすかな。）今回は「モンスターを手に入れる」フローを例にして図を描いてみたました。結局、API実装はまだやっていないので、実際に動くものにはもう少し時間がかかりそうだけど、まずはフローを可視化できただけでもだいぶ頭の中がスッキリした…（はず）。ってか、普段のC#の開発と変わらない？笑

次回はER図とSQLiteテーブル設計をやってみる予定で、さらにドキドキしています。

(追記しました。)

kunio-ud-zatta.hatenablog.com

いつもは、AWS DynamoDBなので、久々のRDSです。もっと、進んだら、グラフデータベースにも挑戦したいですね。

少しずつ形にしていけるようにがんばります。もし「ここのフローが分かりづらい」とか「もうちょっと変えた方がいいよ」みたいなアドバイスがあれば、ぜひコメントで教えていただけると助かります！

それでは、また次回。お付き合いありがとうございました！

最後はいつもどおり、宮古島の応援！（広告です）