このリポジトリは、株式会社ゆめみ様のフロントエンドコーディング試験の提出物です。
指定された要件に基づき実装を行いました。
-
Next.js をベースに、TypeScript + Tailwind CSS で開発
-
グラフ描画には Highcharts を使用
-
コンポーネントの再利用性や視認性も意識した設計
-
Figma で事前に簡易設計を実施し、Atomic Design にも配慮
-
Figmaリンク：フロントエンドコーディング試験
- Vercelによって自動でデプロイを行なっています
- 本番環境URL: frontend-coding-chi.vercel.app
| 技術 | バージョン | 用途 |
|---|---|---|
| React | 19.1.0 | UIライブラリ |
| Next.js | 15.5.4 | フレームワーク |
| TypeScript | 5.9.3 | 型定義 |
| Tailwind CSS | 4.1.14 | CSS フレームワーク |
| highcharts | 12.4.0 | グラフ描画ライブラリ |
| React icons | 5.5.0 | アイコン |
| ESLint | 9.37.0 | 静的コード解析 |
| Prettier | 3.6.2 | コードフォーマッタ |
| Testing Library | 16.3.0 | テストユーティリティ |
| ts-jest | 29.4.5 | JestでTypeScriptテスト |
-
リポジトリをクローンします
git clone https://github.com/ice28992/frontend-coding.git cd frontend-coding -
依存関係をインストールします
npm install
-
.env.localファイルを作成します
NEXT_PUBLIC_API_KEY = "API KEY" -
開発サーバーを起動します
npm run dev
-
ブラウザで
http://localhost:3000を開いて動作を確認が可能です
-
jestとReact Testing Library依存関係のインストール
npm install --save-dev jest ts-jest @types/jest typescript
-
テストの実行
npm test
テストコードを書く際に簡単なテストケース一覧を作成することに生成AI ChatGPTを用いた。 また、ダミーデータとしてモック化しておく部分はGeminiを用いることで効率化した。
- Base.test.tsx：ヘッダーとフッターのテスト
- Chart.test.tsx：グラフ表示のテスト
- PrefectureList.test.tsx：都道府県一覧データ取得テスト
- SwitchTabs.test.tsx：タブ切り替えテスト
- タブを選択した際に、
setSelectedTabsが呼び出される - 都道府県選択データが取得され、
checkPrefsが呼び出される - トグルボタンでカードが開閉できる
- カード開閉後、選択状態が維持され、
PrefectureListにデータが渡される
- 都道府県データが正しく取得され、一覧表示されること
- 都道府県を選択・解除した際に、
selectChangeが呼び出される - ボタン操作で、全ての都道府県を選択・解除できる
- 都道府県が選択された場合、データが取得されグラフが表示される
- 都道府県が未選択の場合、選択を促すメッセージが表示され、グラフが非表示になる
- ヘッダーコンポーネントが正しくレンダリングされる
- フッターコンポーネントが正しくレンダリングされる
- モバイルファースト設計・レスポンシブ対応
- APIキーを.env.localに書くことでセキュリティ面に配慮
- Atomic Design を意識したコンポーネント設計
- 型安全性を担保するため、props に明示的な型定義を徹底
- テスト時に pass 状況をコンソールに出力
- コミットメッセージに Prefix をつけて作業内容をわかりやすく
mainとdevelopブランチに分割し、安定した開発フローを確保
- 都道府県の全選択/全解除ボタン
- チェックボックス表示部分のみ折りたたみ機能でグラフの視認性向上
コミットメッセージのPrefixは基本的に下記の通りとしています。
feat: 新しい機能
fix: バグの修正
docs: ドキュメントのみの変更
style: css関係
refactor: 仕様に影響がないコード改善(リファクタ)
chore: パッケージ更新など
test: テスト関連
change: 空白、フォーマット、セミコロン追加など
add: ファイル・フォルダの追加
- テストしやすいコードを意識的に書きたかった
- コンポーネントのStorybook化
- スマホ表示で都道府県選択が多いとグラフ表示領域がかなり狭まってしまう
- 初めてテストまで行ったため理解するのに時間がかかってしまった
https://qiita.com/mysticatea/items/f523dab04a25f617c87d
https://zenn.dev/aew2sbee/articles/nextjs-prettier
https://zenn.dev/shimakaze_soft/articles/57642e22124968
https://zenn.dev/hitotori/articles/81792d51a4c767