今回の目的
色々とアウトプットすることにも慣れてきたので、
頭の整理のためにも、QiitaでWebアプリ開発の一から書いていこうかなと思います。
初めて投稿しますので、お手柔らかにお願いします。
今回はRuby on Rails / Rubyを使用した開発を想定して、説明を進めていきたいと思います。
この記事を通して作成するアプリのイメージは、ログインありの投稿型アプリを想定してます。
それでは、アプリ開発する際に、はじめに行う
「要件定義、基本設計、詳細設計」の説明をしていきたいと思います。
今回使うツール
draw.io: https://app.diagrams.net/
「draw.io」とは、フローチャートやオフィスのレイアウト図、ネットワーク図を作成できる無料の作図ツールです。
GoogleChromeのようなブラウザ上で操作ができ、作成した図はGoogleドライブやGithubと連携させて保存が可能です。
顧客向けの資料や、プレゼンテーションに用いる際には図は欠かせない存在です。
参考：draw.ioの使い方を解説〜無料の高機能作図ツールを使って資料の質をあげよう！
要件定義
要件とは、「こんなものがあったらいいな」という要望を考えることです（ざっくり）。
そこで、「こんなものあったらいいな」を文章でまとめます。
主に、下記の項目を書いてあればいいのかな、と思います。
- 概要：どんなアプリなのか
- 背景：どうしてこれを作成しようとしたのか
- ターゲットユーザ：利用者はどんな層を想定しているのか
- 用語の定義：例）”vibes”は「いいね」です。
- 実装機能：下記の画像参照
実際に、こんな感じでまとめます。
基本設計
基本設計では、要件定義で文章にしたものを図や表などを用いて視覚的にイメージするものです（ざっくり）。
下記のようなものを基本設計では作成していきます。
- UI Flow：画面遷移をどのようにするか図にする。
- ワイヤーフレーム：画面ごとの配置（レイアウトやボタンの位置など）はどうするのか図にする。
- ER図：データベースでそれぞれのデータの詳細や繋がりを図にする。
- テーブル定義書：それぞれのデータの詳細（カラムの型など）を表にする。
作成するのは、UI Flowから順にやっていくと、ざっとしたイメージから細かなイメージまで考えることができるので、いいのかなと思います。
先ほどの、「使用するツール」にでてきました、draw.ioを使用して、UI Flow、ワイヤーフレーム、ER図を作成します。
他にも、基本設計をするためのツールは色々あるので、自分の使いやすいもので設計してください。
下記画像は、draw.ioで新規作成をし、フレームワークで選択した初期画面です。
ここから自分のイメージする画面へカスタマイズしていきます。
日本語設定もできるので、比較的使いやすいとおもいます。
詳細設計
詳細設計とは、今まで作成した基本設計を元に、このページのURLは何にするか・・、など表で作成します。
Ruby on Railsを例にするなら、下記のようなことを記載すればいいのかなと思います。
- パッケージを使用する際はどんなパッケージか（例）Gem:用途 / devise：ログイン機能など）
- httpメゾット
- URL
- controller
- action
- その画面の目的
こちらは、Googleのスプレットシートなどを使うといいと思います。
こちらが全て終了しましたら、次に実装に入っていきます。
今後投稿する記事は、下記を想定しています。
1. Ruby / RailsでWEBアプリを作成する -- ⑵Githubとの接続
2. Ruby / RailsでWEBアプリを作成する -- ⑶modelとcontrollerの作成①
3. Ruby / RailsでWEBアプリを作成する -- ⑷viewの作成
4. Ruby / RailsでWEBアプリを作成する -- ⑸modelとcontrollerの作成②