[新規]ロジック作成

h-yoshikawa44 commented 3 years ago

作業内容

~API~ API を使った、国情報取得～クイズ生成ロジックを作成
クイズ進行、リザルトのロジックを作成

h-yoshikawa44 commented 3 years ago

ロジック設計

処理の流れ

getStaticPaths：国情報を取得し、国情報 + region の一覧を返す
getStaticProps：region で国情報を絞り込みして props に渡す
クライアントサイド：クイズ生成（生成中はローディング表示を出す）

国情報

API 仕様に合わせてモデル定義。

クイズ情報

カスタムフックでクイズ情報を管理。

クイズデータ（10問分）
現在の問題数
現在の問題の回答
正答数
クイズモード（生成中、出題、解答、リザルト）
クイズ生成関数
クイズ解答関数
クイズ進行関数

追加

リージョン
リージョン選択関数
トップに戻る関数

h-yoshikawa44 commented 2 years ago

API が使えなくなった？

2022/01/07 に久しぶりに戻ってきたところ、API が使えなくなってた。ドキュメントサイトも開けない。一時的にサーバが落ちているのか等は不明。 ↓ 最近、投稿している人の API リクエスト部分を見てみると、https://restcountries.com/ を使用していた。

これについて調べてみると、どうやらオリジナルの方が https://restcountries.eu らしく。このオリジナルは現在サブスクリプション API になったとのこと。このオリジナルに触発されたものが https://restcountries.com/ で、こちらは現在でもオープンソースで使えるらしい。

h-yoshikawa44 commented 2 years ago

問題の生成

必要なデータ

API から取得するデータはプロパティを限定できるので、必要なものだけ取得するようにする。

[
  {
        "flags": {
            "png": "https://flagcdn.com/w320/ng.png",
            "svg": "https://flagcdn.com/ng.svg"
        },
        "name": {
            "common": "Nigeria",
            "official": "Federal Republic of Nigeria",
            "nativeName": {
                "eng": {
                    "official": "Federal Republic of Nigeria",
                    "common": "Nigeria"
                }
            }
        },
        "capital": [
            "Abuja"
        ],
        "region": "Africa"
    },
   ...
]

問題の種類

とりあえずデザインデータにある、以下2種類にしようかと思う。

首都を問うもの
国旗から国名を問うもの

クイズデータ生成ロジックがちょっとめんどくさそう。

h-yoshikawa44 commented 2 years ago

コンテクストの利用

最初は、通常のコンポーネントからカスタムフックで必要なものを取り出して使う気でいたが、複数ページ間で状態を共有したい状況になったので、間にコンテクストをはさむことにした。

参考：useContextとuseStateで状態をグローバルに共有する

h-yoshikawa44 / ch-country-quiz