Chapter 16無料公開

UI コンポーネントの構成を考える

Kei Touge
Kei Touge
2021.11.22に更新

UI コンポーネントの構成を第 1 章で掲げた完成形イメージから逆算して検討します。

全体の App シェル

まずアプリ全体の構成、App シェルをイメージします。


App コンポーネント

https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ja
  • 上部ツールバーへ現在の filter ステート の値を表示する
  • 左上のメニューボタンのクリックでドロワーを開く
  • 開かれたドロワーからフィルターの選択が出来るようにリストを表示する
  • 右下の FAB (Floating Action Button) のクリックで新しいタスクを入力するダイアログを表示する

App シェルを構成する各コンポーネントを想定する

つぎに各部分に分解してみましょう。

  • ToolBar コンポーネント については上で見た通り

  • todos ステート<ul> ~ </ul> タグへ展開していた部分は TodoItem コンポーネントへ

  • TodoItem を構成する一つ一つの todoTodoCard コンテナーへ

  • ActionButton コンポーネント の Floating Action Button(以下、FAB)のクリックで FormDialog コンポーネントを表示


FormDialog コンポーネント

ActionButton コンポーネント

  • filter ステートchecked のときは鉛筆アイコンを無効化

  • filter ステートremoved のときは「ごみ箱を空にする」ボタンを表示

  • 「ごみ箱を空にする」実行前に AlertDialog コンポーネントを表示


AlertDialog コンポーネント

  • 「ごみ箱を空にする」実行後はごみ箱アイコンを無効化

TodoItem コンポーネント

TodoCard コンテナーを細かく見ていきましょう。

  • 上段のフォームには todo.value の値を表示
  • 下段左に todo.checked の値を表すアイコンを配置し、クリックで handleOnCheck() コールバックを実行
  • 下段右のごみ箱アイコンのクリックで handleOnRemove() コールバックを実行

右上のメニューボタンから開かれるドロワーを見てみましょう。


SideBar コンポーネント

  • 最上部にはドロワーヘッダーとバージョン等の情報
  • <select> ~ </select> タグで選択していたフィルターをリストとして展開
  • 「このアプリを共有」クリックでこのアプリの URL をエンコードした QR コードを表示


QR コンポーネント

まとめ

以上でひと通りのコンポーネントが確認できました。次章以降は、この UI を作成するための UI フレームワークを導入し、各コンポーネントを React コンポーネントとして実装していくこととなります。

参考記事

https://zenn.dev/sprout2000/articles/3aa67a5981f4c0