Webアプリケーションのページ構成について学ぼう

2023/08/07

Web アプリケーションはたくさんのページからできています。あるページでデータを入力したり、別のページに遷移してデータを閲覧したりして、ユーザーはアプリケーションの機能を利用します。

このレクチャーでは、Webアプリケーションのページ構成の基礎ついて学びましょう。基本的なページやボタンの構成を、「リソース」とそれに対する「CRUD」という観点で整理します。

Web アプリケーションの操作対象：リソース

Web アプリケーションでは、なんらかのデータを記録したり、あとで読み出して閲覧をしたりします。このような Web アプリケーションが処理の対象とするデータを「リソース」と呼びます。例えば、SNS アプリケーションでは、「ユーザー」「投稿」「コメント」などがそれぞれ独立したリソースと考えられます。

リソースに対する操作：CRUD

Web アプリケーションでリソースに対して行う基本的な操作は、以下の4つです。それぞれの操作の頭文字を取って CRUD（読み方：くらっど）といいます。

作成 (Create)
読み込み (Read)
更新 (Update)
削除 (Delete)

リソースに対して用意するページ

それでは、Web アプリケーションの基本のページ構成について考えましょう。 Web アプリケーションでは、各リソースに対する CRUD 操作ができるようにページを構成します。まず、各リソースに対して、以下の4つのページを用意します。

一覧画面：複数件のリソースのリストを表示します
詳細画面：1件のリソースの詳細情報を表示します
作成画面：新しいリソースを作成するための入力欄（フォーム）を表示します
編集画面：既存のリソースを更新するためのフォームを表示します

例えば、タスク管理アプリでは、

一覧画面：タスク一覧
詳細画面：タスク詳細
作成画面：タスク新規作成
編集画面：タスク編集画面

の4つの画面を用意します。

ページに用意するボタン

各ページには、ユーザーがアクションをするために以下のようにボタンを配置します：

一覧画面：新規作成ボタン、詳細画面へのリンク（一覧に表示されている各リソース上）
詳細画面：削除ボタン、編集ボタン、一覧に戻るボタン
作成画面：作成ボタン、キャンセルボタン
編集画面：更新ボタン、キャンセルボタン

基本を崩すアイディア

アプリケーションによっては、これまで説明した基本のデザインを崩してユーザーの利便性を高めることがあります。たとえば、一覧画面で、一括削除ボタンや一括編集ボタンのような複数リソースに対する一括操作をサポートする場合などが挙げられます。

まとめ：Web アプリケーションの構成はリソースと CRUD がポイント

Web アプリケーションのページ構成を理解するための鍵は、リソースと CRUD 操作です。これらを把握し適切なページとボタンを用意することで、ユーザーフレンドリーなアプリケーションを設計できます。必要に応じて基本的な構成をカスタマイズすることで、さらに効率的で便利なアプリケーションを作ることも可能です。基本のページ構成を抑えつつ、使いやすいアプリケーションを設計できるようになりましょう。