前のパートに戻る 完了して次のパートへ  

  0-3 アプリケーションの設計を考える

今回のパートではクイズアプリケーションを作る上でどのように設計を行うかを解説していきます。

全画面(通常)の洗い出し


設計をする前に本講座で作成する画面を全て紹介します。 通常画面は全部で6画面あります。

ホーム画面


クイズのジャンルを選択する画面です。基本的にHTMLコーディングした画面を表示しますので、特筆すべきことはありません。 Chart.jsを使用したランキングのパーツもありますが、本課題の本質からは逸れますので、詳しい解説はしません。

クイズ画面


実際にクイズを行う画面です。1つの問題に対して4つの回答から1つを選択し、正解か不正解かを表示します。正解・不正解の表示の切り替えや次の問題への以降は画面遷移をせずSPA(シングルページアプリケーション)で切り替えます。

SPA(シングルページアプリケーション)とは単一のページでコンテンツの切り替えを行うWebアプリケーションの名称を指します。

キーワード画面


クイズに必要なキーワードを紹介する画面です。 DBから取得した値を表示するのみのシンプルな画面です。

ログイン画面


ログイン画面ではユーザーがログインできます。

会員登録画面


会員登録画面ではユーザーの新規登録ができます。 

マイページ画面


マイページ画面では直近N回の正解率推移を確認できます。

管理画面について


基本的にLaravel-Admin(Laravelの管理画面のオールインワンパッケージ)設定通り行いますので、特に画面のコーディングの設定は行わない予定です。

必要な情報の洗い出し


今回のコースで主に開発する機能は、以下の2つになります。

  • 会員登録機能/ログイン機能
  • クイズ出題のSPA機能

会員登録/ログイン機能に必要な情報

  • 名前
  • メールアドレス
  • パスワード
  • ランキング情報

クイズ出題の必要な最低限の情報

  • クイズの情報
  • クイズに紐付く答えの情報
  • クイズに紐付くカテゴリーの情報

以下はクイズアプリケーションをより良いものにするためのオプションの情報です。

  • カテゴリーに紐付くキーワードの情報
  • お知らせ情報

情報の関係性を考える

クイズの情報と答えの情報の関係性は以下のようになります。

  • クイズは1つの答えの情報をもつ
  • クイズは1つのカテゴリーの情報をもつ

先ほど、クイズの情報と答えの情報の関係を考えました。今度は全ての情報の関係性を洗い出して、テーブル設計を行います。 今回作成するクイズアプリケーションのテーブル設計すると以下のようになります。

  • Usersテーブル

  • Rankingsテーブル

  • Quizzesテーブル

  • Answersテーブル

  • Categoriesテーブル

  • Keywordsテーブル

  • Informationsテーブル

テーブルの関係性を示した図です。

  • HasOneとは「1対1」の関係です。図を例に挙げると、Quizzesテーブルと1つのレコードにつき1つのAnswersテーブルのレコードを持つという意味です。
  • HasManyとは「1対多」の関係です。図を例に挙げると、Usersテーブルは1つのレコードにつき複数のRankingテーブルのレコードを持つという意味です。

SPAの構成


次にSPAの構成を考えます。

シンプルに「/」にアクセスしたら、XXControllerを介してVue.jsが描画したHTML返却するようにします。 「/api/...」アクセスしたら、Api\XXControllerがJSONを返却し、Vue.jsがJSONを解釈してHTMLを描画するよう設定します。

XXControllerとはユーザーの入力(この場合はURL)に基づき、DB(データベース)接続(厳密にはController以外でDBの処理を行うパターンが多いです)などを行ってデータを取得し、データを画面に表示するものです。 詳しくはMVCで調べてみてください。 JSON (JavaScript Object Notation)とは、データ交換フォーマットの一種で、「JavaScriptの中でオブジェクトを記述する書式」と訳します。 JavaScriptで扱いやすいデータ形式ですので、JavaScriptでデータを操作する際はJSONがよく使われます。

上記の構成をまとめた図です。

以上で本パートは終了です。

お疲れ様でした。

議論

0 質問

このコースの評価は?