next.jsでチャットAppを作ってみる(計画)

なんかブックマーク管理アプリを作るとかなんとか言ってましたが、next.jsのチュートリアルしてたら楽しくなってしまい、一通り終わらせたあとでnext.jsで何か作りたくなってしまいました。

Twitterで何を作ればいいかツイートしたところ海外の方から「チャットアプリでも作ったら？」と来たので作ってみようと思います。まずはストーリーを考えてやること・やらないことを書き出していきます。アプリの名前は適当です。気にしないでください笑　

UserStory

UserStoryなんてたいそうなこと書いてますが、目的です。なぜこのアプリを作るのかを箇条書きしています。作っていく中で迷ったらここに戻って判断します。

MasterStory

アプリ完成までにクリアしていく課題を書き出します。目的を達成するための小目標とでも呼びましょうか。この課題を全てクリアした時にアプリが完成するように設定します。一つ一つの小目標は「ユーザー登録のページを作る」・「ユーザー登録のAPIを作る」などと詳しく書かずに、「ユーザー登録を作る」とある程度ざっくり設定しておきます。あとで内容が変更になっった時に柔軟に対応出来ます。

Don't do this time

今回しないことや、含めない機能を書き出します。時間は有限なので、目的に合わせて、やらないことを設定することも大事です。

I'll do if I can

目的の達成上必要ではないけど、可能ならやりたいことを書いておきます。開発がある程度進んだときの状況をみて後から決めます。

各ページのワイヤフレームと遷移図

先ほどのマスターストーリーから必要なページを書き出し、各々のページで必要なコンポーネントを描きます。またアクセスした際の最初のページ(root page)からのページ遷移も書き込みます。こうすることによって必要な要素(コンポーネント・データなど)は何か、逆に無駄な要素は無いかを確認することが出来ます。

firebaseの設計

マスターストーリー、ワイヤーフレームと遷移図からfirestoreにはこのような形でデータを保存しようと思います。

このような計画で作っていこうと思います。ここまでで述べたものはあくまで計画なので、必要があれば開発途中でも修正を入れます。作りながら考えていけば良いのでは？と思うかもしれませんが、最近それをやってある程度形にしたけど、新しい機能を盛り込む時にどうしても最初の実装が邪魔して諦めました。最初に可能な限りしっかり計画して、その要素を排除しスケールの可能なアプリを作りたいと思っています。とはいえ計画はあくまで自分の考えを顕在化するものであり、敷かれたレールとは思わないようにしましょう。