概要

オーサリングプラクティス勉強会の中間課題として、以下のシステムを実装してもらいます。

実装するもの、要件

1. ダイアログで追加、編集を行うTODOリストを実装してください
   • できてほしいことは以下のようになる(実際のイメージはワイヤーフレーム を参照)
     • TODOの追加
       1. 追加ボタンを押すとダイアログが開く
       2. ダイアログに入力を行う
       3. ダイアログの送信を押すとダイアログが閉じて、元のページに送信したTODOが表示される。
     • TODOの削除
       1. メッセージ一覧の削除ボタンを押す
       2. 削除しても良いですかというモーダルが表示される
       3. はいを押すとメッセージが削除される
     • TODOのチェック
       1. チェックボックスをチェックします
       2. TODOがチェックされます
     • TODOの編集(できれば)
       1. 編集ボタンを押す
       2. 編集用ダイアログが開く
       3. 編集して送信を押す
       4. リストが編集される
   • ダイアログの構成要素(実際のイメージはワイヤーフレーム を参照)
   1. タイトル
   2. 期限
   3. 詳細
   4. 送信ボタン
   5. キャンセルボタン
   • その他
     • ライブラリは使っても良いです。しかし、モーダル、テキストボックスなどを自動的に作成してくれるライブラリは使ってはいけません。あくまでHTMLを記述するようにすることとします。
     • ダメなもの: MUI, react-model, Bootstrapなど
     • 良いもの: React, Vue, Svelte, Nextなど
     • この輪読会で勉強した知識を使って、できるだけアクセシブルに作成することとする
       • 採点のため、満たすべき要件を解答としてありますが、ここではあえて提示しません。何をどのように使って作ればよいか考えてください
       • バリデーションなどの処理などはやってもやらなくても良いです
         • 空白のチェックなどはシステムとしては必要ですが、今回の課題では必須としません。
       • ヒント
         • まずはHTMLをちゃんと書こう
           • ラベル要素
           • フォーム要素
           • etc.
         • ダイアログに文章を入力しているときにフィードバックはどうするか
         • メッセージの送信が行われて追加されたとき、どのような処理をすれば良いか
         • ボタンが押されたときはどうするか
         • チェックが入れられたときにどうするか
         • 一つ一つのTODOは一つのまとまりとも言えそうです
2. 上記のページに対して自分で考えたアクセシビリティを高めるための施策を行う
   • ダイアログに対して行っても良いし、別の要素を使ってそれをアクセシブルに作っても良いです

提出方法

演習解説日にGitHubリポジトリで提出ください。

リポジトリは関がcloneできる状態にしてください。niftyのアカウントでも個人でもどちらでも良いです。

READMEに2の自分で考えて実装した施策を記述してください

ワイヤーフレーム

デザインに関しては今回は任せます

ワイヤーフレームとしては以下になります

あくまで一例なので、アクセシビリティ満たす範囲で自由に作っても良いです(面倒なら、HTMLまんまで良いです。というかそっちの方が良いまである)

• メイン画面

  

• 追加モーダル

  

• 編集モーダル

  

• 削除確認モーダル