JS / TS ブートキャンプ実習課題

あなたは、TODO 管理アプリを開発しているチームに参加し、アプリのエンハンスに取り組むことになりました。

演習の心構え

• 少しでもコードを読める / 書けるようになるのが目的です
• 課題を終わらせることが目的ではありません
• 周りの人の進捗を気にする必要はありません

課題 1：既存コードのキャッチアップ

チームに参加したあなたは、はじめに既存のコードを読み、アプリの設計や構造を把握することにしました。

チームメンバーによれば、以下のような設計に関するメモがあるとのことでした。

メモ：

• このアプリはクライアント、サーバー共に TypeScript で書かれている。
• フロントエンド
  • 外部のライブラリは使用していない
  • 画面の描画にはコンポーネント設計を採用している。コンポーネントとは、画面上の 1 まとまりの部品のことで、状態を HTMLElement に変換するもの
  • 状態管理には Flux という設計を採用している。以下のような用語が登場する
    • State：アプリの状態
    • Store：State を保持するもの
    • Action：Store の更新を表すオブジェクト
    • Reducer：現在の State と Action から新しい State を計算する関数
    • Dispatch：Action によって Store の State を更新すること
• バックエンド
  • Express で書かれている
  • Todo 情報は変数で保持していて、特に DB などで永続化はしていない

課題：メモと既存のコードから、アプリがどのように動作するのかを把握してください。不明点があれば、既存のチームメンバーに質問してください（ここでは演習なので、講師に質問してください。または、受講生どうしで相談しても構いません

課題 2：機能追加

キャッチアップを済ませたあなたは、TODO の削除機能の追加を頼まれました。

前任者によれば、サーバー側の必要なコードはすでに書かれており、フロントエンド側の修正だけが必要とのことです。

課題：TODO の削除機能を追加してください。フロントエンドに削除のための UI を追加し、サーバーに対して削除のリクエストを送信できるようにする必要があります。UI のデザインは任意です。

課題 3：自由課題

課題：このアプリを自由に改造してみてください

• 現状のアプリに不足している、または追加してみたい機能はあるでしょうか。
• さらに良いビジュアルデザインを思いつきますか。ユーザーの操作に対してアニメーションが動くとどうですか
• リファクタリングや修正が必要な箇所はあるでしょうか。型は十分に付いているでしょうか
• セキュリティの問題はありませんか。不正な入力に対して安全でしょうか。
• アクセシビリティに問題はありませんか。

セットアップ

ランタイム：

• Node.js (^18.15.0)
• npm (^9.5.0)

git clone [このリポジトリのURL]
cd  bootcamp-js-ts-2023
npm i

起動

cd  bootcamp-js-ts-2023
npm start