アプリケーションを設計する

[junseinagao]

方針

1 で検討した方針リスト

Must

• Next.js を採用する。
• ホスティング環境はVercelを使用する
• CDはVercelを使用する。
• Next.jsで構築する際にSuspenseを使う
• .browserslistrc で chrome@latest を指定する
• iPhone SE2 のディスプレイサイズを仮想テストデバイスにする
• huskeyとlint-stagedを使ってコミット時にCIを実行する
• スタイリングには、css-module を使う。
• TypeScriptで型安全に開発する。
• デザインドキュメント、開発ドキュメント、カバーレター、Public用のREADMEを用意する
• 一人でPull Rquestを使った開発プロセスを実行する。
• セマンティクスを意識したコーディングをする

More

• TDDで開発する
• グラフ描画系ライブラリを調査する
• UI Good を意識したスタイリングを実装する
• lighthouseスコアを高める。

Extra

• アクセシビリティを意識する。
• Vue3 (vite) を使った構築も作る。
• Sveltekit を使った構築も作る。

[junseinagao]

アプリケーション構成

FW

• Next.js v12.1

Using Library in App

• React.js v18.1.0
• SWR
• Jest
• React Testing Library
• highcharts-react

Using API in App

• Fetch API
• React Hooks API
• React Suspense API