テスト 太郎

※さらなる詳細はGithubリンクのREADMEにて記述しております。 https://github.com/siosawa/TsunaRhythm2 ■サービス概要・制作背景 サービス名 : オンラインワークスペース「つなリズム」 サービスURL： https://tsunarhythm.com/ このサービスはフリーランスのためのオンラインワークスペースとして設計されており、自己分析ツールとSNS機能を組み合わせることで、実用的ながらもコミュニティ感を持った環境を提供します。フリーランスで働く人々が自分のワークを客観的に分析しつつ、互いに繋がり合うことを目的としています。 ■使用技術 <フロントエンド> ・React 18 ・Next.js 14.2.3 ・TypeScript 5.5.3 ・axios(バックエンドとの非同期通信) ・ESLint/Prettier(静的解析、フォーマッター) ・TailWindCSS,shadcn/ui ・ChartJS <バックエンド> ・Ruby 3.3.0 ・Rails 7.0.4.3 ・MySQL8.0.36 ・ActionCable ・RuboCop(静的解析、フォーマッター) ・RSpec(自動テスト) ・Nginx(Webサーバー) ・Puma(APサーバー) <インフラ> ・Docker/docker-compose ・AWS（ECS,ECS on Fargate,ECR,RDS,CloudFront,Route53,VPC,ElastiCache） ・GitHub Actions(CICDパイプラインの構築) ・CodeRabbit ■制作背景・ペルソナ 背景 : フリーランスはしばしば孤立しがちで、特に仕事と直接関係のない同業者との繋がりが少ない。また、案件管理や時給計算などの業務管理が煩雑であることが多い。 差別化した点 : 本サービスは、ただのワークスペースではなく、ユーザーの自己分析を支援し、同業者との繋がりを深めることを可能にするSNS機能を備えています。また、作業時間の追跡や時給計算を自動化し、プロジェクト管理を容易にするツールを提供します。 ペルソナ : フリーランスの動画編集者やライター。プロジェクト管理や自己分析に関心が高く、同じ分野の仲間との繋がりを求めている人々。 ■工夫した点 <フロントエンド> ・Next14による完全SPA化を行い、最新のAppRouterを使った画面遷移で設計しました。 ・TypeScriptをダッシュボード機能を中心に部分的に導入しました。 ・レスポンシブ対応にしました。 ・ユーザー一覧ページとフォローしているユーザー一覧ページ、フォローされているユーザー一覧ページでのユーザーの表示形式を同じコンポーネントを使って作成することで保守回収がしやすい設計にしました。 ・ルームでの座席着席機能が自然と行えるようにアカウント作成時に自動でランダムにアイコンが設定されるようにしました。 ・ストップウォッチ機能でブラウザを閉じても再度開いたときには途中からスタートするように作成しました。 ・長期間入室しているユーザーを一定期間で退室させるようにして、入室情報にバグが発生しても早期に改善されやすくなるように設計しました。 <バックエンド> ・RailsをAPIモードで使用しました。 ・ActionCableのWebSocket通信を使いチャット機能と座席着席機能をリアルタイムで通信させるように設計しました。 ・各データ取得時に余計なデータの取得を行わないように目的に応じてメソッドを追加し、データ量が多くなる場合はページネイション機能と合わせることでデータの取得の最適化に勤めました。 ・入室管理機能において、入室情報を管理するテーブルを作成するのではなく、入室時間と退室時間を記録するようにして、入室時間が記録されていて、かつ退室時間がnullのユーザーを入室(着席)中と表現するという方法を使うことで、入室しているユーザーデータの確認を行い、バグを起こりにくくしました。 ・posts_controller.rbにおいてpostsを取得する際、関連するuserも同時にロードするためにincludesメソッドを使用し、N+1問題を回避しました。 ・ロケールファイルを利用して、表示文言を一元管理しました。 <インフラ> ・WebSocket通信を行うためのredisをタスク定義で立ち上げるのではなくElastiCacheを使って立ち上げることで高性能でスケーラブルにしました。 ・GithubActionsを利用してCIを実現しました。 ・Code Rabbitを使用してコードの変更点から何が変更されたのかの要約を自然言語処理を使ってプルリクエスト後マージ前の段階で自動生成→確認できるようにしました。 更なる詳細はGithubリポジトリのREADMEにて記述しております。