人間関係を可視化させるアプリをつくりました
はじめに
自分を中心とした人間関係を可視化させるWebアプリをNext.jsとNestJSでつくったので紹介したいと思います．もしよければ少し見ていってください！
アプリの概要
今回作ったHuLink（ヒュリンク）はユーザが関わった人を入力して、その人たちをマインドマップのようなグラフで見られるアプリとなっています.
 |
|---|
 |
|---|
 |
|---|
リポジトリ
開発したきっかけ
周りに人間関係の悩みを持っている人が多かったことが開発のきっかけでした．人間関係を一目で確認することが出来れば、自分の中で重要な人やそうでない人をはっきりさせることができ、人間関係の悩みを軽減できると思ったため開発しました.人間関係の悩みは誰でも持っており、この人苦手だなーと思っている人がいるということも少なくないと思います．そんなとき、ボトルネックになっている一人よりも他の多くの自分と関わってくれる人の存在を知ればある程度気持ちが楽になるのではないかと思っています．
技術スタック
フロントエンド
フロントはNext.jsを採用しました．理由としてはファイルベースでルーティングができることと、SSRがデフォルトでサポートされているため、サクサク開発できそうだなと思ったためです．
バックエンド
バックエンドはNestJSを採用してREST APIで開発しました．バックエンドはGo、NestJS、Djangoで迷ったのですが、比較的抽象化されておりTypeScriptで書けるという点でNestJSを使用することにしました．また、モジュール化された構造が僕の苦手な保守性をカバーしてくれることも採用理由にあります．
インフラ
アプリはECS+Fargateで構築しました．また、DBにはAmazon RDSでPostgreSQLを使用しています．
IaC（Infrastructure as Code）という方法を最近知ったので、AmazonのCDKを使って構築させました．
その他の技術スタック
Firebase
トークンを自分で管理するのは面倒なので、ユーザの認証はFirebase Authenticationに任せました．
OpenAPI
フルスタックで開発するときに共通した設計書があると便利だと思ったのでOpenAPIを採用しました．OpenAPIからモックデータを作成できたり、バックエンドのバリデーションに使用できたりして、とても使い勝手が良かったです．
CI
CIはPRが作成されたらgithub actionsでコードのフォーマットチェック、単体テスト、e2eテストを実行させるようにしました．これらのおかげでmainブランチのコードの品質を維持させることができました．
追加したい機能
- 関わった回数によってノード（円）の大きさを変える
- カテゴリ（大学、会社、プライベート）ごとに表示させる
- 自分が好きな人・苦手な人を色で分けて表示させる
開発する際に苦労した点
設計
今後、様々な機能を追加していくことを想定してどんなデータを持たせるべきかを初期段階で考えることが難しく、開発していく最中に何度かDB設計を変更することになりました．
TypeScriptの型エラー
今回初めてTypeScriptを使用したのですが、型によるコードの保守性があがる反面、何度も型エラーに悩まされました．特にライブラリの型定義ファイルを追ってコードを書くことが大変でした．
将来的に
このアプリは最終的には人間関係の悩みを減らすことを目的としたアプリの1機能として組み込みたいと考えています．例えば、ユーザーの日常的なコミュニケーションを分析し、改善のための提案を行う機能、昔の友人とのつながりを維持するリマインダー機能などがあるアプリです．そんなアプリを通じて、多くの人がより良い人間関係を築いていってほしいと思っています．
最後に
ここまで読んでいただきありがとうございました！
今回の開発では使ったことのない技術を多く取り入れて開発してみました．新しい技術を使用して多くの失敗をしてきたことでとても多くのことを学ぶことが出来たと感じています．これからも色んなアプリを作っていきたいと思います！
Discussion