研修修了課題として、バックエンド/フロントエンド別にそれぞれ課題を用意しました．
都道府県別の総人口推移グラフを表示するSPA(Single Page Application)を構築してください．
- RESAS(地域経済分析システム) APIの「都道府県一覧」APIから取得する
- APIレスポンスから都道府県一覧のチェックボックスを動的に生成する
- 都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する
- 人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する
- 「総人口」の他に「年少人口」「生産年齢人口」「老年人口」も切り替えるUIを何らかの形で用意し表示できるようにすること（同時に表示する必要はない）
- 都道府県一覧および総人口情報はRESAS APIのデータを用いること
- APIからデータを取得する際は、HTTPリクエストの作成機能を有した axios など、任意のツールを使用してもよい
- グラフは Highcharts や Rechart.js などのサードパーティ製のグラフライブラリを用いて描画すること (ただし、グラフライブラリは上記のものに限らず、任意のものを用いてよい)
- Google Chrome最新版で正しく動くこと
- PC/スマートフォン表示に対応すること(レスポンシブデザイン対応) ただし実機でなく、Google Chromeの検証ツールで確認できればよい
- リンターやフォーマッターを適切に設定すること
- リンターにはESLint、フォーマッターにはPrettierを使用すること
- TypeScriptで記述すること
- テストケース/テストコードを作成すること
- テストツールは任意のものを用いてよい
- テスト実行時にエラーが発生しないこと
- ソースコードはGitで管理し、作成したソースコードはGitHubにアップロードすること
- Netlify / GitHub Pages / Firebase hosting / Vercel 等のホスティングサービスにデプロイし、インターネット経由で閲覧できる状態にし、そのURLを提出時に共有すること
- RESAS APIの利用登録(無料)を行い、API Keyを発行すること
- セキュリティを考慮してコードを記述すること
- アプリのコンポーネント粒度の設計、Gitコミットメッセージやコミット粒度、ドキュメンテーション等もレビュー対象となる、チーム開発を意識してコードを記述すること
参考
- API -> FastAPI (poetry管理)
- DB -> お好みのDBを使用してください。sqlite3でも可能
作成してもらうのは上のような簡単なTODOアプリです(APIの部分のみでHTML&CSSは不要)
- ユーザーはTODOリストを追加することができる。(認証機能は無し)
- TODOリストにはタイトルと締切、メモを追加することができる。
- TODOリストにはそれぞれ、子タスク(図中ではステップ)を作成することができる。子タスクはその下に子タスクを持つことはできない。子タスクには、名前だけを持たせる。
- タスクは古い順に上から並べて表示する。
- ユーザーは上の検索ボタンからタスクの名前で検索を行うことができる。
- TODOリストのデータはDBに保存されている。
参考にしたのはMicroSoftのTODOリストです。機能を絞ってありますが、もしも動作を確認したい場合は、以下のリンクからアクセスできます。 もしも要件でわからないところがあれば参考にしてください。
- FastAPIやDjango Rest FrameworkなどChap2で学習したフレームワークを使用して作成すること．
- リンターやフォーマッターを適切に設定すること
- リンターにはflake8、フォーマッターにはblackを使用すること
- なるべくTypeHintが記述されていること
- テストケース/テストコードを作成すること
- テストツールは任意のものを用いてよい
- テスト実行時にエラーが発生しないこと
- ソースコードはGitで管理し、作成したソースコードはGitHubにアップロードすること
本リポジトリをcloneして,改善点を見つけてPull Request(以下、PRと省略)を出しましょう！
どんな些細なPRでも構いません！:pray:
改善点のPull Requestが出されたら、本Chapterのフィードバックと次Chapterのプランを作成するための面談をセットするので改善点のPull Requestはどんな内容でもいいので必ず出してください！