WebアプリケーションのUIパターン #Laravelの教科書

一つのWebアプリケーションを紐解いていくと、複数の機能に分類することができます。

掲示板のアプリは次のような機能を持つアプリケーションです。

・お知らせを投稿する機能
・お知らせを一覧で表示する機能

お知らせアプリは次のような機能を持つアプリケーションです。

・会員登録機能（ログイン、ログアウト含む）
・お知らせを投稿する機能
・お知らせを編集する機能
・ユーザーページを表示する機能
・（管理側）ユーザーを作成する機能
・（管理側）ユーザーを管理する機能

これらの機能はアプリケーション毎にユニークなものではなく共通のパターンを持っています。共通のパターンを見つけ、応用することでWebアプリケーションの設計・開発をスムーズに進めることができます。

この記事ではUIのパターンについて解説し、各パターン毎にLaravelでどのように書くか解説していきます。

# UIパターン一覧

この記事で紹介するUIのパターンは次の6個です。

■ 作成
　作成フォームがあり、新規にデータを保存する

■ 一覧、検索
　データの一覧
　絞り込みの機能であったり、検索の機能がある
　一覧からデータの編集、削除のためのUIを提供する

■ 詳細、編集
　詳細画面と編集画面を兼用することもある。
　データを更新するためのUI

■ 削除
　削除は削除確認画面を置かず、一覧から直接削除する場合もある

■ 設定
　プロフィールなど、フォームがあって同じデータを更新するパターン

■ ダッシュボード
　トップページなどで利用。複数のウィジェットで色々な機能への誘導・情報を表示する。

これら以外にもありますが、ほとんどのアプリケーションがこれら6個の組み合わせで作ることができます。

# UIパターンの利用方法

Laravelでアプリケーションを開発する時、今から作ろうとしている機能はこの6個のパターンのうちどれに最も近いか、ということを考えます。

パターンが同じであれば必要なクラス、ファイルをコピーアンドペーストして書き換えるだけで機能をどんどん量産することができます。

例えばレシピを登録して管理するWebアプリケーションについて考えてみましょう。どんな機能があるか、どんな機能がどのパターンに当てはまるか考えてみます。

・レシピを登録する（作成）
・レシピを検索する（一覧・検索）
・レシピを確認する（詳細・編集）
・レシピを編集する（詳細・編集）
・最近使ったレシピを表示する（ダッシュボード）

このUIパターンにはもう一つ意味があります。それはこの順番に開発するとやりやすいという指標です。例えば一覧を出すにはまずは登録を作る方が良いというように、この順番で作るのがやりやすいです。

■ 作成
↓
■ 一覧、検索
↓
■ 詳細、編集
↓
■ 削除
↓
■ 設定
↓
■ ダッシュボード

# プロジェクトの準備

次回より各パターンから順に説明していきます。

各記事ではプロジェクトの作成ついての説明を省略しますので、UIパターンの練習用のプロジェクトを作成しましょう。

composer create-project --prefer-dist laravel/laravle ui_pattern

laravelのプロジェクトを作成します。プロジェクトは「ui_pattern」とします。

cd ui_pattern

ui_patternディレクトリに移動します。

.envの編集を行う

DBを利用するため、データーベースの作成と.envの設定を行ってください。詳細は省略します。

composer require laravel/jetstream

Jetstreamをインストールします。

php artisan jetstream:install livewire

jetstream:installコマンドを使って、jetstreamの初期化を行います。

php artisan migrate

マイグレーションを実行します。

npm install && npm run dev

jetstreamで利用するJavaScriptとCSSを初期化します。

php artisan serve

開発サーバーを実行します

ブラウザで表示を確認します。

# まとめ

参考にしているWebアプリケーションを操作する時にもこれらのUIパターンを意識することをおすすめします。

例えばこの連載を行っているnoteではどうでしょうか？
操作しやすいように工夫しているポイントはどこでしょうか？
どのように機能がまとまっていて導線がどうなっているでしょうか？

など、意識しながら操作するだけでUIパターンに対する知識の引き出しが増えていきます。引き出しが増えれば増えるほど、やれることが増えていくということです。

DRY原則、という言葉があります。同じコードを何度も書かなくて良いようにどうすれば手抜きができるかを全力で考えることが良いプログラマーになる第一歩です。

WebアプリケーションのUIパターン｜Laravelの教科書｜note