はじめに

この記事はSystemiアドベンドカレンダー19日目です。
ゲーム系の専門学校を卒業しシステムアイに入社後の6月までの研修期間中に学んだことを使って個人開発で作ったものとその振り返りについて書いていきます。

作ったものの説明

簡単なチャットができるサイトを作成しました。

画像は発表の際に同期に実際に使ってもらっていた様子です。
この画像には写していませんが、画像やgifが張られていたりhtmlタグが生きていたりなどいろいろと予想外の使い方をしていて面白かったです。

制作期間は5月16日(環境構築開始)～6月30日(発表)でした。

始めての挑戦が多く前半の5月中にしたことのほとんどが無駄になり、発表の日に取りあえず完成したということもありできることは少ないですが、チャットが行え、簡単にですがハンドル名の登録が行えたりという必要最低限はできたと思います。

技術スタック

フロントエンド:TypeScript React
バックエンド: Java SpringBoot
DB:Azure cosmosDB for MongoDB
インフラ:Azure(App Service)

以下でそれぞれについて振り返ってみます。

1.フロントエンド

フロントエンドはバックエンドにそこまでの時間がかかる予定ではなくここに時間を使えるだろうと考えていたのですが、見た目にこだわれるほどの時間がなかったのでchatscopeを使用し最低限の見た目を整えたといった形になりました。
Reactの状態遷移には苦戦し、受け取ったデータの持ち方やページ遷移後の処理等いろいろと悩まされました。
それ以外にも、CORSエラーはなぜ出てくるのかが全然わからずに対処に時間がかかりよくわからないまま終わったような気がします。

2.バックエンド

バックエンドはSpringBootを使用することで簡潔にコードを書くことができ、コーディングは時間がかからなかったです。
ただ、開発の当初はDBをPostgreSQLにし、buildツールにDockerを使用していたのですが、DockerのbuildがPostgreSQLで躓くようになり、Dockerでのbuildを完全にGitHub Actionを使用したbuildとデプロイに切り替えDBもAzure cosmosDB for MongoDBに切り替えたということもあり、ここで大きなロスになりフロントエンドに影響がでました。

3.DB & インフラ

DBは学んだものを使用するということもありpostgressにする予定でしたが、バックエンドでの問題もあり、sqlよりもNoSqlの方がやりやすかったこともあり、Mongoを採用しました。
インフラ周りは研修ではAWSを使用していたのですが、その時によくわからなかったということもありますが、逆張りオタクなのでどうせなら1番ではないものでやりたいと思いAzureを採用しました。

振り返り

時間が足りずタイムゾーンのバグの修正ができずに終わったり、画面が簡素な見た目になってしまったことなどの反省点も多いものの、締め切りまでに完成させるための過程で、機能の実現のために考え続けることが楽しく、非常に充実した経験でした。

今はTwitterを真似したサイトを作成中なのですが(XではなくTwitter)、ここでも新しいことに挑戦して楽しんでやっていきたいです。