はじめに

本記事は初心者エンジニアが初めてWebアプリケーションを作成するための日記のような記事です。
間違っているところや効率が悪いところなどがあると思いますが、ご了承ください。

パート1では作成するWebアプリについてまとめていきたいと思います。

開発背景

初めまして。僕は今年、新卒でSIer企業に入社したエンジニアです。
学生時代からずっと『VALORANT』をプレイしており、ついにはイモータルランクに到達することができました。
(Valorant ... Riot Gamesが開発・運営する5対5のタクティカルFPS

突然ですが、みなさんは「空爆」ってどうやって覚えていますか？
(空爆...自分がその位置に直接行かなくてもアビリティを遠距離から投げ入れて効果を発揮させるテクニック <- 知識として覚える必要がある。)

自分の場合は、マップやエージェント、アビリティごとに動画を撮ってローカルに保存していました。でも、だんだんと動画の数が増えていくにつれて、

「あのクリップどこだっけ？」
「仲間にシェアしたいけど面倒…」

といった問題が出てくるようになりました。

そんなときふと思ったのが、「空爆共有や保存をできるサイトを作ったら便利なんじゃないか？」という発想です。
ちょうどVALORANTもある程度やりきった感があり、何か新しいことに挑戦したい気分だったので、「ノリと勢い」で開発に着手することにしました。

右も左も分からない中、ChatGPTに相談しながら構想を練り、少しずつ形にしていきました。
本記事では、その開発背景や実装内容、学んだことなどをまとめていこうと思います。

仕様書

まずは、搭載予定の機能を整理します。
本記事作成時点の初期案なので、今後追加や変更もありえます。
(Qiitaに追加して記載していくかも)

空爆共有機能(メイン機能)

Valorantの空爆を登録し、共有することができる機能です。
Webアプリのメイン機能となる機能です。

・投稿 : マップ/エージェント/アビリティを選択し、空爆の画像や動画を登録する機能
・閲覧 : 他のユーザが投降した空爆の画像や動画を閲覧する機能
・検索 : 他ユーザ空爆投稿のタグやユーザから検索できる機能
・いいね : 他ユーザの空爆投稿にいいねや保存ができる機能
・ランキング : 他ユーザの空爆投稿のいいね数などでランキングを作成する機能
・投稿オプション : 他ユーザには非表示にして自分しか見られないようにしたりするオプションを登録する機能

ユーザーはマップ、エージェント、アビリティ、タイトル、説明文、タグなどを設定し、マップ画像上で始点と着弾点をクリックで指定し、動画または複数画像を添付して投稿することができます。
これを設定することで、検索・閲覧などをしやすくします。
また、おすすめ順などで表示することによって、新しい空爆を発見しやすくします。

ユーザ機能

本Webアプリでは自分の投稿を見返したりすると考えられるため、ユーザー機能を設定することで誰が投稿したことや、過去に何を投稿していたかなどをわかりやすくする。

・ユーザ登録 : メールアドレス、パスワードなどの情報から本人であることを認証して登録する機能(Google登録なども搭載予定)
　└ アイコン : 指定画像を登録してアイコンを設定できる機能
　└ プロフィール : ひとことメッセージなどを登録してプロフィールを作成できる機能
　└ 保存/いいね閲覧 : 他ユーザの空爆投稿を閲覧できる機能
・ユーザ削除 : もともと登録していたユーザを削除する機能
・フォロー : 他ユーザをフォローしてフォロワー数などを表示する機能
・ブロック : 他ユーザをブロックでき、ブロックしたユーザの投稿は閲覧できなくなり、自分の投稿もブロックユーザからは閲覧されなくなる機能

メールアドレスとパスワードによる認証に加え、Googleアカウントを利用したソーシャルログインにも対応するつもりです。(Riotアカウントも対応できれば良き)
プロフィールでは、アイコン、ユーザー名、自己紹介を編集できるようにし、フォロー、ブロック機能で他ユーザーアカウントの管理などを行えます。

グループ機能(追加予定)

Valorantは5人1チームで行うゲームです。
プルパランクやプレミアなどで空爆の共有は重要な項目の一つだと思います。
なので、グループ機能を搭載することで、簡単に指定ユーザに空爆を共有することが可能だと考えています。

・グループ作成 : 指定のユーザを招待してグループを作成する機能
・グループ削除 : 作成したグループを削除する機能
・招待 : すでにあるグループに他ユーザを招待する機能
・退会 : 今入っているグループから退会する機能

ユーザーがグループを作成し、メンバーを招待することで、限定的に空爆情報を共有することができます。
また、グループは、非公開設定が可能であり、将来的にはグループ内チャットや、権限管理、メンバー追放などの機能も追加していけたらなと考えています。

空爆保存機能(追加機能)

マップ、キャラクターごとに自分の使用している空爆を視覚的にわかりやすく保存できる機能です。
アビリティは分けすぎるとかえって効率が悪くなると判断し、すべて一緒に表示しようと思っています。
(ただし、分かりずらかったりしたら変更するかも)
これをすることで、簡単に今自分が使っている空爆を見つけ出すことができます。

この機能はグループ機能と併用することも可能だと考えています。

・マップ選択機能 : マップを選択する機能
・キャラクター選択機能 : キャラクターを選択する機能
・空爆保存機能 : マップ、キャラクターによって空爆の始点と着弾地点を簡単にわかるように保存する機能

マップ、キャラクターを選択すると、登録されている空爆の始点と着弾点を表示し、クリックなどすることによって目印を表示することができます。

課金機能

できれば課金要素などは搭載したくなかったのですが、維持費分ぐらいは課金で補いたいと思います。
広告などは入れたくなかったのでご了承ください。
今考えているのは月500円を考えています。
また、課金ユーザのみの機能を後々導入できたらと考えています。

使用技術

それでは、本Webアプリを作成するために使用する技術を調べてまとめていきたいと思います。
先に言っておきますが、僕は実際にWebアプリを作成した経験がなく、初めて作成するアプリになります。
大した知識はないので遠回りになるかもしれません。それでもあきらめないように頑張りたいと思います。

React

Reactとは、Facebook(現Meta)が開発したUIライブラリで、コンポーネントという部品単位でUIを構築することができます。仮想DOMによる高速な描画が可能なため、1つのページ内で動的に内容が切り替わるSPA(シングルページアプリ)の開発によく使われます。
(仮想DOM ... ブラウザのDOMを直接いじらずに、軽量な仮想のDOMツリーをメモリ上で管理して差分更新する仕組み)

メリット

コンポーネント志向 : UIを部品化して再利用可能
状態管理が容易 : データの状態を簡単に管理できる
豊富なエコシステム : 周辺ツールが豊富

あまり開発に詳しくない僕でも知っているぐらい有名で、一度使ってみたかったからというのが本音の理由です。

AWS

AWS(Amazon Web Services)はAmazonが提供するクラウドサービス群で、サーバー、ストレージ、データベース、認証、配信など、Webアプリに必要な機能を揃えられます。

今回利用予定の主なサービス：

S3 : 動画・画像などのメディアファイルを保存するストレージ
EC2 : アプリケーションをホスティングする仮想サーバー
DynamoDB : NoSQLデータベースで、投稿データやユーザー情報を保存
CloudFront : S3に保存されたメディアを世界中に高速配信
Cognito : ユーザー認証と管理(Googleログイン連携も想定）
Route53 : 独自ドメイン設定（valoshare.com）

AWSを選んだ理由は、スケーラブルで容量制限が事実上なく、初期費用がかからないこと。また、他の機能との連携が容易な点です。
また、こちらもReact同様、一度使ってみたかったからという理由が一番大きいです。

まとめ

ValoShareは、VALORANTの空爆情報を簡単に記録・共有できるWebアプリとして開発を進めています。
ReactとAWSを活用し、初心者でも扱いやすく、将来的な拡張にも耐えられる構成を目指しています。
今後は実装過程や得られた知見もQiitaで共有していく予定です。