Webアプリ oShirou開発過程公開 #4

ds

現在私はRUNTEQというオンラインプログラミングスクールでプログラミングの学んでいるのでその学習のアウトプットも兼ねて、Webアプリを1から作っていく過程を書きます。(先述しておきますが、カリキュラムで学んだ技術は使いますがカリキュラムについては一切触れません)

このブログは素人がプログラミングをはじめとしたWebの技術を学びながら書いているため
誤記などあるかもしれませんが、温かく見守っていただけると幸いです。

ただ誤りがないようにしっかり調べて書くつもりなので、これからWebアプリ製作など
プログラミングを学ぼうと思っている方にはぜひご覧いただきたいです。

ds

何かわからないことや、誤りがありましたら
Xなどで教えていただけると幸いです。

目次

前回までのおさらい

ds

前回までにMVPリリースするまでに実装するアプリの
コアとなるサービスを検討しました

MVPとは(Chat-GPTの回答を記述)
MVP(Minimum Viable Product、最小限の実用製品)とは、開発プロジェクトで必要最小限の機能を備えた製品のことです。これにより、製品の市場適合性やユーザーの反応を早期に確認し、フィードバックを基に改良を重ねることができます。MVPは、リスクを低減し、リソースの無駄を避けるために重要な概念です。

今回の工程 : 画面設計とデータベースの設計(ER図の作成)

画面設計

Figmaでアプリの画面イメージを作成
Figmaでアプリの画面イメージを作成

今回は、Macで使用できるアプリ「Figma」を利用して、作成するアプリの画面を設計していきます。

画面遷移図
画面遷移図

その後作成した画面イメージから実際のアプリでの移動イメージを作るために
画面の遷移図を作成します。このように画面の遷移図を作成することで実際のアプリの動きを考えつつ
自分のイメージしたアプリに必要な要件を確認しています。

ER図の作成

db.diagram.ioで作成したER図
db.diagram.ioで作成したER図
JSON形式で記入する画面の画像

今回はこのように「diaram.io」というWebアプリでER図を作成しましたJSON形式で記載すれば
綺麗にER図を書いていけるので手間をかけないようにこのようなツールを使っています。
(RUNTEQの先輩に教えていただき使っています。)
線を引いたりする手間が省けるのは大きいです。

ER図とは(Chat-GPTの回答を記述)
ER図(Entity-Relationship Diagram)とは、データベース設計のための図で、データの構造や関係性を視覚的に表現します。ER図では、以下の要素が使われます:
エンティティ(Entity): データベースで管理する対象(例えば、ユーザーや製品など)。
属性(Attribute): エンティティに関連する情報(例えば、ユーザーの名前や製品の価格など)。
リレーションシップ(Relationship): エンティティ同士の関係性(例えば、ユーザーが注文をする、製品がカテゴリーに属するなど)。
ER図を使うことで、データベースの設計を効率的に行い、データの整合性や関係性を明確にすることができます。

最後に

ds

今回は、簡単なER図と画面遷移図作成しました。ER図を使ってデータベースの構造を視覚的に整理し、画面遷移図でアプリの操作フローを明確にしました。これにより、設計の全体像が把握しやすくなり、プログラミング作業がスムーズに進むでしょう。次回は、ISSUEの作成に取り組む予定ですので、ぜひご期待ください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次