**唯我独尊** フリキング

https://github.com/shii-park/friends

Go

Azure

PostgreSQL

Terraform

あの熱狂を再び!現代に復元されたじゃんけんバトル「フリキング」

山田優吾

國廣蓮斗

林壱仁_友達

推しアイデア

Web上で遊べるソシャゲ! 昔懐かしいゲームシステム! 革新的なゲームコンセプト!

作った背景

一見すると複雑そうなソシャゲがどんなふうに実装されているか知りたい! 普通にソシャゲのバックエンド実装してみたいよね〜!

推し技術

sqlc 追加、更新にも耐えれるソシャゲのバックエンド構成 ドメイン駆動開発

プロジェクト詳細

フリキング〜唯我独尊〜

1. フリキングについて

有料にありふれたこの世界。 どれだけお金を節約しながら遊べるかを追い求めた小学生時代。 あの頃の野原を駆け巡った思い出を、このゲームで。

ということで、唯我独尊フリキング!! コンセプトは単純明快、「フリー素材」! どれだけお金を使わずにカードを集め、戦いに勝利するかが大事なゲームとなっているぞ!

有償石???課金??? そんなナンセンスなこと言ってないでフリー(無料)でゲームを楽しもう!

フリー(自由)を極めし王...フリキングに君はなれるのか?

2. nulab行動規範

Try First いつでも学び、実践しよう。すごいを超えた価値を届けるために、常識や現状ボーダーにとらわれず挑戦しよう。

  • メンバーのうちの1人はバックエンド初挑戦!
  • 開発を始める最初の一歩はそれぞれのメンバーが担当したことがなかった領域に挑戦(DB、認証)
  • タスクの割り振りも本人のやってみたいを大事に、役割にとらわれず、仕事があればとりあえずやるのマインドでタスクを消化
  • 次世代の開発をテーマにフロントエンドはAIに基本任せ、メンバーは全員バックエンドにフルコミット

Love Differences まずは受け入れることから始めよう。立場、技術、文化、嗜好、すべての違いは力に変えられる。楽しい雰囲気の中でオープンマインドを持ってお互いを尊重しよう。

  • ゲーム系でボーダーの林
  • うぇぶ系でゲーマーの山田
  • バンド系でパーマの國廣

一緒に過ごす時間は多かったものの、一緒に開発をするようになったのは今年からのメンバー。 凸凹にわちゃわちゃ開発中。

Goal Oriented 本質を見失わないよう、オープンな場でゴールを議論し、共有しよう。そして、喜びや悲しみを分かち合いながら共に目的地にたどりつこう。

  • プロダクト完成に必要なタスクを常にGithub Issueで共有しました。
  • Discord上で通知を送るようにすることで作業があれば常に全体に共有されるように。気になったことがあればGithubのコメントを用いてレビューし合うようになりました。

image

  • プロジェクトに関する質問はDiscordで管理して、いつでも見れるようにしました。一番通知が飛ぶのはDiscord。

image

  • プロダクト完成に必要な最低限の機能を目を見張って選別しました!
  • 動くものができてから、+αの追加要素をどんどん追加していく、追加できるようにするのを心がけて開発を行っていました。

3. 技術構成

3.1. 解決したかった技術の課題

  • 時間が足りなくて毎度完成してない!
  • フロントエンドーバックエンドーデータベースのつなぎこみが大変
  • AIくんのこと...気になるけど、どう話しかけたらいいかわからない...
  • ソシャゲのバックエンドを書いてみたい!

そこで色々な取り組みをしました!

3.2. フロントエンド

フロントエンドを書こうとすると何故か手が動かない......
CSS完全に理解していない自分に発狂......

そこでフロントエンドはほとんどをCoding Agentに書いてもらうことにしました!

頭を働かせたところ:

  • docs/Agent.mdを追加することでAIの動きを抑制する! image

ブランチを分けてもらうことで思わぬ事故が起きた際も子を見るような目で見守る事ができました。

  • ゲームのドメイン情報をフロントエンドにも渡すことでAIにもゲームを理解してもらう! image

UIを作る時、それぞれのページの役割を理解して作ってもらえました。おかけで思っていた以上に良いUIになりました。

  • diaryを残しておくことで、次回起動時にもスムーズに開発を継続させる! image ミスって消してもちゃんと文脈を落とすことなくできました!

これらを行っていたおかげで、UIの大枠は自分が意図している通りの動きをしてもらうことができました。細かいデザインの修正に集中することができ、UXの向上させることができました?

3.3. バックエンド

DDDで開発を進めていきました。 3.2でドメイン情報の共有があった、と言っていたように、ドメインをまずつくり、それに必要な情報、機能を作ってから生やすことを意識して開発を行っていました。

これにより、疎結合な開発を行うことができ、機能の追加を行う際も特に問題なく実装することができました。 今回の開発での例としては、どりーさんからアドバイスを受け、コレクションする楽しさが欲しいということだったので急遽図鑑機能を実装することになりましたが、特に難はなく実装することができました。

既存のカードの実装から必要な情報を取得する、さらに所持しているかどうかについての機能を追加するだけでおおよその機能実装ができるようにまで設計を行って完成させることができました。

また、ゲームを気軽に遊ぶ点において、ユーザー登録を行うこと自体が手間だと考え、cookieを用いてsessionの登録を行うことで誰でも簡単にゲームを遊ぶことができるようになりました。

言語やフレームワークのお話をすると,今回バックエンドはGo,Ginを使用しました.

Goは仕様がシンプルな言語なのでコードの中身が理解しやすく,DDDやハンドラー,サービスの責務分離などが非常にやりやすかったです.

GInは軽量でシンプルでスマートで優秀でエレガントなフレームワークであり,今回のようなソシャゲのバックエンドには適任かもしれません.他のフレームワークをあまり知らないのもありますが

3.4 インフラ

  • 開発時間を短縮させるようにローカルの開発環境にこだわりました。Docker-copmpseでフロントーバックーデータベースを一括起動、環境構築できるようにしました。
  • 結局はAIに聞くことになる未来が見えていたので、最初からIaCで管理しやすい親-子リポジトリ構成にしました
  • また、毎度自力でデプロイするのは大変なので、Github Workflowを用いたCDパイプラインを作りました!
  • 最終的にはTerraformを用いてAzureのApp Containerを用いたスケーリングしやすい構成になりました!データはPostgreSQLに保存しました!

3.5. AI (Coding Agent)

  • 今回はGemini CLIおよびClaude Codeを主に用いました。
  • Coding Agentは便利すぎる!ほとんどAIでも作ることができる...
  • ただエンジニアとして開発を通して勉強したい... -> バックエンドではなるべく最小単位で、実装法がわかる範囲でAIを使用!
  • ただしトークン使用量には注意!ほんの少しだけ自腹切りました...

アーキテクチャ図 image

山田優吾

@YugoYamada