NextとRESASとHighchartで人口推移アプリ

目次

• 完成品とコード
• 使用したもの
• 勉強になったこと
• 反省点
• こだわった点

転職における試験で TS, React, RESAS と任意のグラフ描画ライブラリを使用し、人口推移のグラフを作るという課題があった。そのときの開発のメモ。

完成品とコード

完成品

GitHub

使用したもの

勉強になったこと

ブランチの命名規則

そもそもブランチに命名規則という概念があることを知らなかった。概念を知らなければググることもできないし、たまたまこの情報に辿り着けたのはラッキーだと思う。

参考: 【Git】ブランチの命名規則を調べてたら Issue ドリブン開発という存在を知った

TS での環境変数に伴うエラー

環境変数を下記のような形で使用していた。

type obj = {
  key: string;
};

const key: obj = {
  key: env.process.NEXT_PUBLIC_HOGE,
};

これでエラーが発生したのでkey: string | undefinedとしてもダメだった。結局解決策として下記のように三項演算子を挟めばいいのがわかった。こうすれば環境変数が設定されていてもされていなくても STRING になる。

const val = env.process.NEXT_PUBLIC_HOGE ? env.process.NEXT_PUBLIC_HOGE : "";

type obj = {
  key: string;
};

const key: obj = {
  key: val,
};

今回はやってなかったが、env.ts のようなファイルを作ってそこであらかじめ全ての環境変数を文字列として確定させてしまえば、いちいち使用するときに文字列として確定させる処理を挟まなくて済むため、今後はそうしていこうと思う。

Jest での fetch のエラー

Jest 環境でfetchが認識されていなかったため、ひたすらfetchのとこでこれなんやねんと言うエラーに苦しんだ。結局、テスト元ファイルでimport fetch from 'isomorphic-unfetch'をすることで Jest 環境でもfetchを行うことができた。

ただ、Jest 環境ではfetchできないが実行自体にはimport ~しなくても問題はなく正常動作が見込めるため、もう少し抜本的な解決策あるいは綺麗なコードを書けそうな気はする。

反省点

Styled-components のグローバルスタイルが正常動作しなかった

取り掛かるときの最初の予定ではデザイン面はすんなり行くと思ってたので後回しにしていた。しかし、styled-components のcreateGlobalStyleで吐いていたリセット CSS がインライン CSS の最後部に来た。

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

別に対応できないこともないが、一番上で表示させられればさせられるに越したことはない。ただどうしても最下部に出力されてしまう。おまけに仕事と並行であり期限も厳しく、残り時間が数時間となっていたので焦る焦る。結局最上部に表示はできたものの、最下部にも表示されてしまった。時間がなく、他にまだやらなければならない箇所が残っていたため結局その状態で提出してしまったのが悔やまれる。

こだわった点

テストが少ない

テストが少なかった、もっとたくさんテストできるようにならないといけない。

デザインというか面白さというか

ファーストインプレッションで少しでも差別化を図れればいいなと考え、イラレの体験版をインストールし、ロゴとファビコンの SVG を作成した。

また、人口推移にちなみ、チェックをつけるとヘッダーに人が増えていく仕様にした。

7 日が過ぎると課金が始まってしまうため、作成後にイラレはすぐに解約した。