Webアプリを作成する流れ【5ステップ】

2021年1月1日2021年4月24日デザイン

Webアプリを作る基本的な流れを紹介します。 次の5つのステップに分かれます。

1. ユーザーストーリー User stories
2. 必要な機能を考える Features
3. フローチャートに落とし込む Flowchart – What we will build
4. 設計する Architecture – How we will build it
5. 開発する Development

それぞれ簡単に説明します。

Webアプリの作成手順

ステップ1: ユーザーストーリー User stories

ユーザーの観点からアプリに必要な機能を描写します。 すべてのユーザーのストーリーを一緒にして全体のアプリを作り上げます。 次の共通のフォーマットを使ってユーザーのストーリーを落とし込みましょう。 As a [type of user], I want [an action] so that [a benefit] [ユーザータイプ]である私は、[ベネフィット]のために、[行動]がしたいです。 どんな人が（who） = [ユーザータイプ] 例) ユーザー、管理者など 何をしたい(what) = [行動] なぜ（why） = [ベネフィット]

ステップ2: 必要な機能を考える Features

ユーザーストーリーを考えたら、そこから必要な機能を言語化していきます。

ステップ3: フローチャートに落とし込む Flowchart – What we will build

何を作るかを明確にするために、フローチャートを作ります。 ここで大事なことは、完璧なフローチャートを最初から作ろうとしないことです。 開発していくと問題がみえるので、都度変更していきます。 そのため、この段階で時間を使わないようにしましょう。

ステップ4: 設計する Architecture – How we will build it

どのように作るかを明確にするために、設計します。 こちらも、完璧である必要はありません。 設計でとても大切な要素となるのがデータです。 データをどのようにして、どこに保存するかということです。 アプリにとってデータはとても重要です。 データがないとそもそもアプリとして成り立たないものが多くあります。 まずは、どのようなデータを保管する必要があるかを明確にしましょう。 たとえば、名前、年齢、生年月日、ロケーション、日時、距離、時間、スピード、標高、時速、金額、評価点などなどです。 そして、その似たようなデータの集合を探してグループ化しましょう。 共通のデータをグループ化したものを、親クラスとしましょう。 そこから個別のデータを子クラスに収めます。

ステップ5: 開発する Development

コードを書いて計画を実行します。