初心者が５日間でお天気アプリを作る -要件定義・設計編

スマホアプリの開発をしたいが、何から手をつければ良いのかわからないこともありますよね。

自分も初めてのスマホアプリ開発は、右も左もわかりませんでした。

そこで、アプリ開発に精通した知人に教えを求め、アプリ開発初心者でもわかりやすいように、開発の流れと各フェーズでやるべきことをレクチャーしていただきました。

そのレクチャーをもとに書いた備忘録をより初心者に寄せた形で記事にしました。

スマホアプリ開発に必要なフェーズと流れ

• 設計・要件定義
• 主要機能の実装とテスト

要件定義・設計

「要件定義・設計」では、どのようなアプリを作るべきか、そのアプリが完成するまでに必要な全ての項目を確定します。
「依頼者の要望に沿ったアプリの開発手法の概要作成」と言い換えることで理解しやすくなるかもしれません。
要件定義は、依頼側の要望と開発側の認識をすり合わせる作業に該当し、設計は「アプリの開発手法の概要作成」に該当します。
このプロセスを通じて、要望にそったアプリを開発できると共に、全体像の把握と開発手法があらかじめわかるようになります。

要件定義・設計は、効率的かつ全体を見通した計画的な開発もできます。
さらに、開発作業に入った後に不確定要素が少なくてすむので、実装に集中することもできます。

要件定義・設計の流れ

要件定義・設計は、「要件定義」「設計」の順に行っていきます。
要件定義をもとに設計をするので、要件定義が先になります。
以下が要件定義、設計の具体的な流れになります。

• 要件定義
  • 誰に向けてどんな問題を解決するのか
  • どのような機能・性質が必要なのか
• 設計
  • 画面設計
    • 必要な画面を考えて、UIを作成する（figma等）
    • 画面ごとの役割分担を定める（機能設計）
  • データフロー
    • 通信するデータ内容と相手（図の作成）

まず、要件定義を実際にどのようにしたのかを記していきます。

要件定義

要件定義は、要望に沿ったアプリを作成するために「誰に向けてどんな問題を解決するのか」「どのような機能・性質が必要なのか」の手順で精査していきます。

解決すべき問題の確認を先にすることで、漏れなく問題を解決できるように、必要な機能が考えやすくなります。

誰に向けてどんな問題を解決するのか

本来は、依頼主からいただいた要望を精査するのですが、今回は、自分のために何かしらアプリを作成することにしました。

今回は、依頼内容を以下のようにしてみました。

依頼

1. iphoneについているデフォルトの天気予報アプリの情報量が自分にとっては多いのでシンプルにしてほしい
2. 普段利用する「家」「学校」「行きつけのクラブ」の情報のみが表示されて欲しい
3. 天気、傘の有無、最高気温、最低気温の情報のみが記載されていて欲しい

次に、依頼内容にそって、どのような機能を作成するべきかを考えていきます。

どのような機能・性質が必要なのか

依頼の内容をもとに、どのような機能があれば良いかを考えます。
以下の４つが要望をもとに必要だと考えた機能

機能要件

1. その日の天気の情報を取得できる機能
2. 「家」「学校」「図書館」のみが正確に表示される機能
3. 「天気」「傘の有無」「最高気温」「最低気温」のみが正確に表示される機能

この段階で、要望に答えるために、どのような機能を搭載したアプリを作成すればいいかがわかりました。次に、設計工程に入り、具体的にどのように開発するかを決めていきましょう。

設計

設計は、どのような開発手法でアプリを完成させるかの概要を決めるため「画面設計」の後に「データフローの作成」の手順で行っていきます。
画面設計では、アプリの各ページごとのデザインとできる操作を決めます。そこで、決めた内容をもとにデータの移動を考えやすくなります。

画面設計

画面ごとのデザインをもとに必要な操作やデータを決めるために、「必要な画面を考えて、アプリ画面（UI）を作成する」「画面ごとにできることを定める」の順で設計していきます。
UIを先に作成し、それをもとに画面ごとの役割を考える手順となります。

必要な画面を考えて、アプリの画面（UI）を作成する

要望に沿ったUIを作成するため、要件定義であげた「要望に答えるために必要な機能」を参照して、作成したUIは以下のようになりました。

場所一覧ページ	天気詳細ページ

天気情報が見れるようにすべき場所は少ないのですが、全ての場所ごとにまとめて天気詳細情報を表示すると、かなりみにくくなってしまうと感じました。

そこで、１ページ目で該当する場所をボタンとして一覧で表示し、選択された場所の天気詳細情報を２ページ目に表示するようにしました。

画面ごとにできることを定める

各ページごとで、どのような役割を持っている部品を作成する必要があるかを確認していきます。

場所一覧ページ（１ページ目）

部品名 or ページ名	機能
一覧ページ全体	天気情報をリアルタイムで受け取る
場所の名前をもつボタン	詳細ページに遷移する・天気詳細を次のページに送る

天気の詳細情報ページ（２ページ目）

部品名 or ページ名	機能
場所ごとの天気の詳細情報ページ	ボタンから送られた情報を受け取る

データフローの決定

データフローの決定は、データがどこからどこに送られるかを各ページのUIと機能をもとに確認し決定します。
最後に図で可視化するとわかりやすいのでおすすめです。

通信するデータ内容と相手（図の作成）

今回は、２箇所でデータの受け渡しが行われるような仕様にしました。

渡すがわ	データ	受け取る側
外部データ（お天気API）	「家」「学校」「クラブ」の天気詳細	一覧画面
ボタン	選択された場所の「場所名」「最高気温」「最低気温」「天気」	詳細画面

最後に表をデータフロー図として書き起こしました。
外部データ、一覧画面、詳細画面のフィールドを作成しデータの移動に関わる内容を記載します。

終わりに

以上で「要件定義・設計」は終わりですが、これまでの流れはあくまで、精通した知り合いに初心者でも可能なレベルな要件定義・設計を教わったものです。（規格通りの設計手順にはなっていない）

ただ、ある程度、実際にコードを書いて開発する前にどのような「データ」「機能」「仕組み」が開発に必要かがわかったと思います。
この作業をすることで、スムーズに開発に入れると思うので、ぜひやってみてください。

次は、「主要機能の実装・テスト」に入ります。ここからは、最後までコードを書くフェーズとなります。