Zenn
Closed17

ゆめみさんのコーディングテストを受けながら考えていることと参考にさせていただいた記事を書いていく

Next.js
TypeScript
ゆーせいゆーせい

ゆめみさんのフロントエンドのコーディングテストをやってみようと思います
と言ってもすでに始めているので途中からです。

ここの実装もっとこうしたほうがいいよってところあればアドバイスいただければ幸いです。
今後の開発の参考にさせていただきます。

ゆーせいゆーせい

テストの方針としてはロジック中心に行う。
と言ってもテストをしっかり書くのはほぼ始めてなので、探り探りやる。
あまり無茶はしない 表示のテストは最低限。

ゆーせいゆーせい

すごく汚いですがこんな感じでタスクを分解して、それぞれにかかる時間を予想してメモってます。
これを書いているうちに自分の脳の中で実装の道筋のイメージが鮮明になっていくのでおすすめの方法です。

ゆーせいゆーせい

RESAS-APIの人口構成のAPIから実績値と推計値の区切り年を取得できるから、注意書き的に表示させてあげるとユーザーに優しい画面になるかも

ゆーせいゆーせい

人口構成を県ごとに取得しないといけない問題はPromise.allでの並列処理で解決した
今は総人口を取得するのでjson.result.data[0].data;となっているが、data[0]の数字の部分を取得したい人口構成で切り替えれば良さそう

useEffect(() => {
    const checkedItemsPrefCodes = Object.keys(checkedItems).filter(
      (key) => checkedItems[key],
    );
    const fetchData = async () => {
      const data = await Promise.all(
        checkedItemsPrefCodes.map(async (prefectureCode) => {
          const response = await fetch(
            `api/prefectures/population?prefCode=${prefectureCode}`,
          );
          const json = await response.json();
          return json.result.data[0].data;
        }),
      );
      setPopulationData(data.flat());
    };

    if (checkedItemsPrefCodes.length > 0) {
      fetchData();
    } else {
      setPopulationData([]);
    }
  }, [checkedItems]);
ゆーせいゆーせい

featuresディレクトリに機能単位でファイルを分けているので、features内のコンポーネント同士で依存関係があるのは良くないのかな

このスクラップは2024/04/04にクローズされました