Vue & Flux アプリケーション設計 【2】

前回からの続きです。
機能要件と非機能要件を考えます。

機能要件と非機能要件

機能要件

機能要件はシステムまたはアプリケーションで何をやりたいのかということです。
この機能要件をすべて網羅した段階で完成ということになります。
機能要件は要件定義書に書いてあると思います。
なのでどちらかというとエンジニアは期間内にやれるかとか、ここは技術的に難しいとかフィルタリングをしています。
今回はデザインがあるのでデザインを見ながら決めましょう。

非機能要件

非機能要件はユーザーの価値とかユーザの満足度と言われますが、「やったほうが良さげなこと」と考えます。
「良さげ」なことは大概、暗黙の了解になってやらなかったとき色々言われるので自分やチームの中で「やったほうが良さげ」だと思ったことを、開発期間を無視して箇条書きでまとめて形にしておくと後から楽になります。

まとめる

エンジニアは機能要件と非機能要件をまとめる必要があります。
形はわかりやすければ何でもいいですが、MarkDown とパワポでまとめることが多いです。
パワポはとくにミーティングの際に発表しやすいのでおすすめです。
今回はミーティングはしないのでMarkDown でまとめます。
GitHub やGitLab のIssue に書くと想定して画像や動画を含めてわかりやすくまとめます。
ここで前回決めた名前が活躍します。

機能要件

ヘッダー

• 「ロゴエリア」にロゴが表示されていること
• 「検索ボックス」が表示されていること
  • 「検索ボックス」に文字を入力できること
  • 入力された文字に応じて「カード」がフィルタリングできること ※1
• 「お気に入り」が表示されていること
  • 「カード」をD&D で「お気に入りカード」に追加できること ※2
  • クリックで追加した「お気に入りカード」を表示できること ※2
  • 「お気に入りカード」はログイン不要でブラウザに保持されること

※1

※2

コンテンツ

• 「カード」が32枚表示されること
• 「カード」内には以下の要素が表示されていること
  • 「問題エリア」
    • 問題は※3のようなデータをCSVに保持すること
  • 「セレクトエリア」
    • 正解以外の選択肢2つはWikipedia のAPI を利用してとってくること
  • 「アンサーボタン」
    • 正解の選択肢を選んで「アンサーボタン」を押下すると正解の「リザルトレイヤ」が表示されること ※4
    • 不正解の選択肢を選んで「アンサーボタン」を押下すると不正解の「リザルトレイヤ」が表示されること ※4

※3

id	question	answer
1	座っているのに、空にあるものってなんだ？	星座

※4

非機能要件

• クロスブラウザ対応
• レスポンシブデザイン
• ロード中画面の表示

次回は機能要件に基づいてツールの選定、フロントアーキテクチャの設計を決めます。