1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【個人開発 #1】初学者がrailsでTODOアプリを作ってみる~要件定義、基本設計~

Posted at

はじめに

どうも、かずです。
2021/9~エンジニアとして実務をしてから約1年半経ちます。(2023/03/13に書いてます)
自分でアプリを作ったことが無かったので、これを機に挑戦しようと思いました。

※この記事は自分の設計ドキュメントとしても使うので、その都度更新される場合があるのでご了承ください

きっかけ

・知識の定着のために簡単なアプリを作ってみたくなった。
・実装とテストしかしてこなかったので、基本設計~保守運用まで一貫してどんなものかやってみたい。
・今後のキャリアの為に成果物を残したい。

開発過程も残しちゃえ

いろいろ準備して完成してからQiitaに記事でも書こうと思ったのですが、
要件定義とか基本設計を書き出してる時にふと思いました、、、

「この開発過程も記事にすればいいじゃん・・・!」

これは芸人であり実業家の西野亮廣さんが
ミュージカルの練習風景を映像として販売してたのを思い出してやろうと思いました。

お金にはならんけど、初学者とかこういうの見たいと思ってw
あとは自分の振り返りにもとてもいいと思ってます。

自分が3年後もエンジニアしてたら、思い出せるように。

どんなTODOアプリにするか

  • まずはざっくり箇条書きにします。
    • 転職のポートフォリオよりもちょっとハイレベルなイケてるアプリ
    • UIはシンプルで見やすいものとする
    • 設定したTODOの締め切りが近づいたらリマインダーが送信されるようにする
    • 1日の終わりに設定したTODOがどの程度達成されたかを確認できるようにする
    • ユーザーログイン機能つけて、ユーザー毎のTODOアプリにする
    • 無料で作れるレベルにする
    • 機能は比較的簡単にして、レイアウトにはちょっとこだわりたい
    • 社会人向け
    • 資格勉強とか頑張りたい人向け
    • タグ付け機能:TODOにタグをつけて分類できる機能
    • ラベル機能:TODOにラベルをつけて色分けできる機能
    • カレンダー表示機能:カレンダー形式でTODOを表示する機能

要件定義

  • シンプルで見やすいUIを実装する。
  • TODOアイテムには、タイトル、説明、締め切り、優先度、タグ、ラベルを含める。
  • 締め切りが近づいた場合、リマインダー通知を送信する機能を実装する。
  • 1日の終わりに、設定されたTODOアイテムがどの程度完了したかを確認できるようにする。
  • ユーザーログイン機能を実装し、ユーザーごとにTODOアプリを作成する。
  • アプリは無料で利用できるようにする。
  • タグ付け機能を実装し、TODOアイテムを分類できるようにする。
  • ラベル機能を実装し、TODOアイテムを色分けできるようにする。
  • カレンダー表示機能を実装し、TODOアイテムをカレンダー形式で表示する。

基本設計

【UI設計】

  • シンプルなUIを実装し、直感的に操作ができるようにする。
  • 画面レイアウトは、TODOリストを一覧表示するメイン画面と、TODOアイテムの詳細を表示するサブ画面に分ける。
  • メイン画面では、TODOリストをカード形式で表示し、それぞれのカードにはタイトル、説明、優先度、締め切り日、進捗状況、ラベル、タグを表示する。
  • カードの並び順は、優先度が高いものから順に表示する。
  • カレンダー画面では、TODOアイテムをカレンダー形式で表示する。
  • モバイルデバイスからの利用にも配慮し、レスポンシブデザインを採用する。

【データモデル設計】

  • PostgreSQLを採用する。
  • ユーザー情報を格納する「ユーザー」テーブルを作成する。
  • 「TODOアイテム」テーブルを作成し、タイトル、説明、優先度、締め切り日、進捗状況、ラベル、タグをカラムに持たせる。
  • 「ユーザー」と「TODOアイテム」の関係を1対多の関係にする。
  • 通知履歴を格納するための「通知」テーブルを作成し、通知日時、通知先のユーザーID、通知内容などをカラムに持たせる。
  • ユーザー情報のパスワードは、ハッシュ化して格納する。

【システムフロー設計】

  • ユーザーがログインすると、自分のTODOアプリにアクセスできるようになる。
  • ユーザーは、TODOアイテムを作成、編集、削除できる。
  • TODOアイテムの進捗状況を更新すると、1日の終わりに進捗状況を確認できるようにする。
  • 締め切り日が近づいたTODOアイテムに対して、リマインダー通知をSSLを導入して安全に送信する。
  • ユーザーは、タグ付けやラベル付けを行い、TODOアイテムを分類することができる。
  • ユーザーは、カレンダー画面でTODOアイテムを確認できる。

【開発環境】

  • 言語: Ruby on Rails、Vue.js
  • データベース: PostgreSQL
  • エディタ: Visual Studio Code
  • デプロイ先: Heroku
  • バージョン管理: Git、GitHub

課題

  • リマインダー通知をSSLを導入して安全に送信する
    • これは余裕があったらでいいかな…難しそう
    • それかパスワードのハッシュ化など別の方法でセキュリティ対策を検討する

メモ

  • cronジョブ

    • リマインダーを実現するためには、cronジョブを使用するとよいでしょう。例えば、5分ごとに「deadlineが近づいたTODOがあるかどうか」を確認するようなジョブを作成します。ジョブはRakeタスクで実行し、ジョブのログはロギング機能を使用して保存します。
  • リマインダーメールを送信するために、Action Mailerを使用する

    • eminderアクションを実装します。reminderアクションは、deadlineが近づいたTODOを取得し、リマインダーメールを送信します。
    • SendGrid、Mailgun、SES
  • パスワードのハッシュ化

    • ユーザーがパスワードを登録する際に、入力されたパスワードをハッシュ化するための関数を実行します。例えば、Ruby on Railsであれば BCrypt ライブラリを使用することができます。
    • ハッシュ化されたパスワードを、ユーザー情報と一緒にデータベースに格納します。
    • ユーザーがログインする際に、入力されたパスワードを同じハッシュ関数でハッシュ化します。
    • データベースに格納されたハッシュ化されたパスワードと、ログイン時にハッシュ化されたパスワードを比較します。
    • パスワードが一致すれば、ログインが成功したと判断します。
  • sa

おわりに

ひとまずこんなもんで進めていきますー
たぶん全部の設計を再現するのは今の自分には不可能なので、やりやすいところから進めていきます~

Twitterやてます(主に趣味垢)
https://twitter.com/takazu_engineer

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?