はじめに
こんにちは！むらぴょんと申します。
私は3,4年ほど前にプログラミングスクール通い、卒業後はヘルプデスク等で働きながらプログラミングの勉強をしている初心者エンジニアです。
様々な言語やフレームワークに触れたいと思い、簡単なWebアプリケーションをポートフォリオとして作成しています。
実際に実装の手順を記載していきますが自身が躓いた個所や、エラーの解消方法等は別途Zennの方に記載しています。
Zennの方にスクラップ集として遭遇したエラーをまとめています。
内容に間違い等があるかと思いますが、温かい目で見守っていただけますと幸いです。
また、本記事を書いていて記事の内容がとても多いことに気が付いたため、シリーズ化して投稿していきたいと思います。
ちなみにどうでもいいことですが、好きな言語はRubyとTypeScriptです。（Rubyは現在あまり触れていないです・・・）
なぜ記事を作成したのか
私自身が1人でもくもく作業することが多く、自分の知見をアウトプットする機会がほとんどないため、記事を投稿しようと決意しました。
あとは、自分がどのようにそのアプリを作ったのかを備忘録として残しておきたいという思いもありました。
今回実装するもの
タスクを作成し、そのタスクをアプリに登録しているユーザーに共有できるSNSアプリです。
タスク共有型SNSアプリ（TaskShareApp）
使用技術と構成
Flutter
元々はWebブラウザやPWAを使用したWebアプリケーションを構築していましたが、クロスプラットフォーム開発に憧れがあり、今回から挑戦していこう、今流行りの注目プラットフォームとしてFlutterがあり、こちらを選択しました。
Nest.js
バックエンド側にはNest.jsを採用しました。React.jsやNext.jsに使用されているTypeScriptを使用してコードを記述できる点で魅力に感じ、フロントエンドで何度も利用しているため選択しました。コードの可読性の向上や、意図しないバグを防ぐことができる点も良いところだと感じています。
PostgreSQL
データベースにはPostgreSQLを使用しています。普段はMySQL系を使用していますが、PostgreSQLも人気のため今回挑戦してみようと思いました。
認証
ユーザー認証にはnestjs/passport、 nestjs/jwt 、passport、 passport-local、passport-google-oauth20、 passport-azure-ad（Google認証やMicrosoft認証）等のJWTやOAuthを採用しています。
参考
Google Auth
Microsoft Auth
あまり記事が見つからず、少し参考にした程度です。
インフラ構成
インフラ構成は画像の通りであり、Flutter側はFirebase Hostingにデプロイし、Cloudflare Tunnelを間に通してバックエンドに接続し、NestJSとDBはCoolifyにセルフホスティングしました。
まずは設計編ということで設計書から作成していきます。
企画書・要件定義書
企画書及び要件定義書です！
すごくザックリしていますが、優しい目でご覧いただけると嬉しいです。何かサンプルやアドバイス等あればお申し付けください！！！
機能一覧
次に実装に必要な機能の一覧をご紹介します！
どのような機能を使用するかを記載しています。順次更新していきます！
フローチャート
フロントエンドにてどのボタンを押したときにどの画面が遷移するかを記載しました。
矢印の先が遷移先です。
ワイヤーフレーム
フローチャートの各画面の設計になります。どんな画面にするかを書いている設計書になります。
ER図
データベースの各テーブルとのリレーションの関係を記載したものです。
テーブル定義書
各テーブルのカラム名やその制約を定義した設計書になります。
アプリケーション詳細設計書
これはバックエンドの設計書で、各テーブルのHTTPメソッドとそのURL、およびバックエンド側のアクションを定義しています。
テスト仕様書
テスト仕様書は現時点のものになります。随時更新していく予定です。
まとめ
以上が今回の設計書になります。
全ての設計書をまとめたコレクションもありますので、こちらもご覧ください。
ここまでご覧いただきありがとうございました！設計編はいかがでしたでしょうか？
何かありましたらコメントで優しく教えていただけると嬉しいです！
投稿の順番が前後してしまいましたが、次回はPart.1 サインアップ編です。いよいよ実装していきます。もしよければ次回の記事もご覧ください。
次回の記事