レベルアップして二度目のチーム開発に挑んだ話

1.はじめに

私はWEBエンジニアを目指す22歳です。
エンジニアを志した理由は、「人々の役に立つサービスを作りたい」という思いからです。

現在参加させていただいてるアプレンティスシップにおいて、二度目のチーム開発を経験する機会を得ることができました。ツッコミたくなるところも多々あるかと思いますが、温かい目で読んでいただけたらと思います！

(一度目のチーム開発については以下の記事で詳細をご紹介していますので、ぜひそちらもご覧いただければ幸いです。)

2.アプリの開発テーマと背景

今回の開発テーマは、『ワクワクするものを開発せよ』 でした。
チームで意見を出し合った結果、「ジョジョ立ち倶楽部」 というアプリを開発することになりまた。

開発の背景

きっかけは、「ノリで撮ったジョジョ立ちをSNSに乗せるのがちょっと恥ずかしかった。」という経験からでした。
ジョジョ立ち写真を共有する場があれば、ユーザーがより気軽に楽しめると考えました。インスタグラムなどの一般的なSNSでは、ジョジョ立ち写真を投稿することに躊躇している人もいます。そこで、ジョジョ立ち写真に特化したプラットフォームを作ることで、ユーザーが自由に楽しめる空間を提供することを目指しました。

期待される効果

「ジョジョ立ち倶楽部」の開発により、ジョジョファン同士の交流が促進され、より多くの人がジョジョ立ち写真を楽しむことができるでしょう。また、ユーザー同士のコミュニケーションが活発化し、新たな友人やファン同士のつながりが生まれることを期待しています。

アプリの機能

このアプリでは、ユーザーが自分のジョジョ立ち写真を投稿し、他のユーザーのジョジョ立ち写真を閲覧することができます。さらに、投稿された写真にはコメントやいいねを付けることができ、コミュニケーションを楽しむことができます。週間・月間ランキング、殿堂入りといった三つの機能を搭載してユーザーが楽しめるようにしました。また、マイページで自分の過去の投稿を見返したり、お気に入りの写真を保存することができます。

今回は実装期間が一週間しかなく、特定のユーザーをフォローする機能は実装できませんでしたが、将来的に追加することで、ユーザー同士のつながりをより強化し、より充実したコミュニティを形成することができると考えています。

3.使用技術

• フロントエンド : React/ Next.js/ Chakra UI
• バックエンド : Rails (7)
• DB : MySQL
• ソース管理 : GitHub
• その他 : Postman/ JWT (JSON Web Tokens)

4.開発の流れと工夫した点

開発は以下の流れで行いました。

• 課題定義(アイデア決め) :開発の背景を読んでください
• 要件定義
• 設計
• DB設計
• タスク出し
• 環境構築
• プレゼン準備
• プレゼン

工夫した点

　開発プロセスでは、定期的なミーティングや進捗報告を通じて、チーム全体が進捗状況を把握し、効果的なコミュニケーションを図りました。

　開発では以下の点に工夫しました。

• 世界観の再現 : ジョジョの世界観を意識してアプリを作成しました。TOP画面をはじめとし、投稿ボタンを「オラ！」にしたり、ログアウトボタンを「逃げるんだよォ！」にするなど、細部までこだわりユーザーがジョジョの世界に没入できるようにしました。

• ユーザーエクスペリエンスの向上 :Chakra UIを使用して、使いやすく魅力的なUIを実現しました。ユーザーがストレスなくアプリを使用できるように心がけました。

4-1.要件定義

要件定義は、後からの修正や追加が困難になるため、時間をかけて慎重に行いました。また、実装期間が一週間と短かったため、優先順位をつけて要件を決定しました。以下に、優先度の高い順に要件を示します。

• 画像投稿・プロフィール画像 : 画像をどう扱うか。DBへの保存方法などわからないことばかりで苦労しました。
• ログイン機能（JWTを使用した認証）: セキュリティを確保するために、JWTを使用したログイン機能の実装をしました。仕組みを理解するところから時間がかかりました。
• コメント・いいね機能 : ユーザー間のコミュニケーションを可能にするために、コメントといいね機能を実装しました。
• マイページ : ユーザーが自分の投稿を確認したり管理したり、いいねした投稿を見れるようにしました。
• ランキング機能 : ユーザーが楽しめるようにランキング機能を実装しました。
• ジョジョ検索機能(外部リンク) :わからないキャラを調べられるように導入しました。
• フォロー機能

赤字のものが今回初挑戦したことになります。初挑戦のものが多く結構苦労しました。フォロー機能は実装できませんでした。

4-2.設計

続いて設計を行いました。

• 画面遷移図
• ワイヤーフレーム
• データベース設計

画面遷移図/ワイヤーフレーム

画面遷移図では、アプリケーション内でのユーザーの操作や画面間の遷移を明確に示すため、Figmaを使用してページの流れを図にしました。
また、ワイヤーフレームでは、各ページのレイアウトや機能、データの配置などを詳細にまとめました。

実際に作成した画面遷移図とワイヤーフレーム

DB設計

DB設計ではER図を用いてどのような情報が必要かを洗い出し、関係性を明確にしました。

ER図

作成したテーブルについて

テーブル名	説明
users	ユーザーの情報を管理
Posts	投稿を管理
Comments	コメントされた投稿を管理
Likes	いいねした投稿管理

これらの設計により、開発チーム全体がアプリの構造や機能について理解を深め、効率的な開発が行われることを目指しました。

4-3.タスク出し

必要なタスクを全て洗い出し、担当を割り振りました。
今回の開発では、機能単位で割り振りました。

• Nさん

  • 投稿機能(画像の処理を中心に)
  • コメント機能
  • メインページのUI（こだわり有り！)

• Tさん

  • TOPページ(インパクト重視)
  • ヘッダーなどのレイアウト

• 私

  • JWTを使った認証機能
  • マイページ(Favorite/MyPost)
  • 発表に向けたスライド作成

前回のチーム開発ではスケジュールの見通しが甘く、計画通りに進まなかった経験を踏まえ、今回は余裕を持ったスケジュールを組みました。今回も計画通りにいかない気がしていましたが、思っていたよりも計画通り進められたので嬉しかったです。

4-4.実装

アプリの実装編になります。

今回のアプリでは世界観を持たせたかったのでだいぶこだわって作りました。
しかし、背景画像など無断で使用している部分があるため、ここに載せていいのか？という疑問が脳内を支配しています。(本当はみてほしい...)

今回の開発では特に UI をこだわりました。

• TOPページ : ページを開いた瞬間かっこよくてインパクトのある画面が現れます。ジョジョ好きにはたまらないはず！！！！！
• メインページ : スライダー を使用して、週間ランキング・月間ランキング・殿堂入り を表示して、クリックするとそれぞれのページに遷移します。
• MyPostとFavoriteの切り替え : トグルで簡単に切り替えられるようにしました。
• 細かいところ : 投稿ボタンは「オラ！！」　ログアウトボタンは「逃げるんだよォ！！」など、しょうもないかもしれないけどこだわりなんです！（伝われ🙏）

開発で苦労した部分

• JWTを使った認証 : JWTって何？というところから入りました。今回は発行したトークンをローカルストレージに保管しています。
  （JWTについては別の記事で学んだことを書こうと思っています。）
• いいね・コメント機能 : ページ遷移してもいいねの値が変わらないようにしました。
• 画像の処理 : 画像を扱うのは初挑戦でした。画像の読み込みと表示・サイズ変更やリサイズなど新たな知識が増えて楽しかったです。

チームメンバーとわからないところを共有しあい、お互いに助け合いながら共通の目標に向かって努力しました。進捗をこまめに共有することでスムーズに開発を行うことができました。チームの雰囲気はいつも明るく、みんなが積極的に意見を出し合い、共に成長を感じることができました。アプリができた時の達成感は最高でした！チームのメンバーには感謝しかありません！
チームメンバーのみんなでジョジョ立ちもしました。最高に楽しかったです！

4-5.プレゼン

アプレンティスでは、チーム開発後に各チームがプレゼンを行い他のチームのアプリに投票を行います。投票の結果、優勝には至りませんでしたが、ジョジョ立ち倶楽部が数人に支持されたことが何よりも嬉しかったです。私の目標である「人々の役に立つサービスを作りたい」という思いが、少し実現した気がします。
また、メンターからのフィードバックでは「世界観がある」と評価していただけて、こだわった箇所が認められてとても嬉しかったです。

5.今後の課題

課題はまだまだたくさんありますが、特に自身が注力したい課題を挙げます。

• インフラ
  • AWSの学習をしようと思います。
• テストの追加
  • アプリの品質向上のため、より包括的なテストを追加していきたいと思います。自動化されたテストの導入も検討しています。
• フォロー機能の学習
• Docker

これからも挑戦すべき課題は山積みですが、限りなく無限に見える中で、今興味を持っている領域に焦点を当てて記載させていただきました。
これらの課題に取り組むことで、より高度な技術や機能を取り入れたアプリを提供できるよう努めていきます。

6.最後に

ここまで読んでくださりありがとうございました！最後に開発を通しての感想を書いて終わりにしたいと思います。

前回のチーム開発ではフレームワークの使用が禁止でした。今回のチーム開発では、自由にフレームワークを活用できたことがとても楽しく、刺激的な経験でした。振り返ってみると、わずか二ヶ月でこれだけの成果を出せたことに、率直に驚いています(自分ヨシヨシ)。

ジョジョ立ちしたかったりスタンド使いになりたい方はご一報ください。一緒にジョジョ立ち楽しみましょ！

まだまだ学びたいことがいっぱいで日々の学習が楽しいです！これからも技術の向上を目指し、より良いサービスを提供できるよう努力していこうと思います！
最後までご覧いただきありがとうございます！