【まとめ】Discord風アプリで学んだUI構築を他のアプリに応用する | Discord風チャットアプリ開発入門：Column・Rowで学ぶレスポンシブUI構築 | Flutterアプリケーション開発概論

この節で学ぶこと

ここまでの章では、FlutterでDiscord風チャットアプリを作りながら、UI構築の基本を学んできました。

最初は、画面を観察するところから始めました。

Discord風の画面を観察する
↓
どんな領域があるか分ける
↓
必要なデータを考える
↓
小さなWidgetを作る
↓
状態を持たせる
↓
操作で状態を変える
↓
PC・タブレット・スマホに対応する

この流れは、Discord風アプリだけで使うものではありません。

ECアプリ、SNSアプリ、業務管理アプリ、予約アプリ、医療向けアプリ、教育アプリなど、ほとんどのアプリ開発に応用できます。

この節で一番大切なのは、次の一文です。

UI開発は、見た目をいきなり作るのではなく、画面を観察し、データと部品に分け、状態と操作をつなぐことで整理して作れる。

この章で学んだ流れ

この章全体で学んだ流れを、もう一度整理します。

1. 画面を観察する
2. 必要なデータを考える
3. 画面を領域に分ける
4. 領域をWidgetにする
5. データclassを作る
6. 状態を親Widgetで持つ
7. 子Widgetにデータを渡す
8. ユーザー操作で状態を変える
9. setStateで画面を更新する
10. PC・タブレット・スマホで配置を変える
11. 完成コードを役割ごとに読み解く

この流れは、最初は少し長く感じるかもしれません。

しかし、実務でも教材作成でも、基本的にはこの流れで考えると、複雑なアプリでも整理しやすくなります。

画面の領域	Flutterで作る部品
サーバー一覧	`ServerRail`
チャンネル一覧	`ChannelSidebar`
チャット画面	`ChatArea`
入力欄	`ChatInputBar`
メンバー一覧	`MemberPanel`
プロフィールカード	`ProfileCard`
編集画面	`ProfileEditorDialog`

4. StatelessWidgetとStatefulWidgetを使い分ける

この章では、StatelessWidget と StatefulWidget も使い分けました。

ざっくり言うと、次のように考えます。

種類	使う場面
`StatelessWidget`	受け取ったデータを表示するだけ
`StatefulWidget`	中で状態が変わる

たとえば、ProfileCard は、基本的に受け取った UserProfile を表示するだけです。

UserProfileを受け取る
↓
表示する

そのため、StatelessWidget で作れます。

一方、ProfileEditorDialog は、入力欄の内容や選択中の色が変わります。

名前を入力する
色を選ぶ
オンライン状態を選ぶ

このように、画面内で状態が変わる場合は、StatefulWidget を使います。

表示するだけ
↓
StatelessWidget

中で変わる
↓
StatefulWidget

この判断ができるようになると、Flutterの設計がかなり楽になります。

この章で特に重要だったのが、状態をどこで持つかです。

完成アプリでは、次のような状態を親Widgetで持ちました。

selectedServerIndex
selectedChannelIndex
currentUser
channelMessages
showMemberPanel

たとえば、currentUser は、いろいろな場所で使います。

ProfileCard
MemberPanel
ProfileEditorDialog
ChatMessage送信時

もしそれぞれのWidgetが別々に currentUser を持ってしまうと、情報がズレてしまいます。

そのため、親Widgetで1つだけ状態を持ち、子Widgetへ渡します。

親Widgetが状態を持つ
↓
子Widgetへ渡す
↓
子Widgetは表示する
↓
操作が起きたら親の関数を呼ぶ
↓
親が状態を更新する

これが、Flutterの基本的なデータの流れです。

例1：ECアプリに応用する

ECアプリを作る場合も、同じ流れで考えられます。

まず画面を観察します。

商品カテゴリ
商品一覧
商品詳細
カート
ユーザープロフィール
購入ボタン

これをWidgetにすると、次のようになります。

CategorySidebar
ProductGrid
ProductCard
CartPanel
UserProfileCard
CheckoutButton

データclassは、次のように考えられます。

Product
Category
CartItem
UserProfile
Order

Discord風アプリでいう ChatMessage が、ECアプリでは Product や CartItem に変わるだけです。

Discord
ChatMessageを表示する

EC
Productを表示する

考え方は同じです。

データをclassにする
↓
Widgetに渡す
↓
一覧で表示する
↓
操作で状態を変える

Discord風アプリ	医療向け説明アプリ
チャンネル一覧	診療カテゴリ一覧
チャット画面	説明本文・動画表示
メッセージ入力	質問入力
メンバー一覧	患者情報・スタッフ情報
プロフィールカード	患者プロフィールカード

質問3：画面に表示するデータは何か

次に、データを考えます。

ユーザー情報
投稿情報
商品情報
予約情報
メッセージ情報
カテゴリ情報

これをclassとしてまとめます。

UserProfile
ChatMessage
Product
Reservation
Category

質問4：どのデータが変化するか

次に、状態を考えます。

選択中の項目
入力中の文字
ログイン中のユーザー
表示中の一覧
いいね状態
保存状態

変化するものは、どこかで状態として持つ必要があります。

変わらない
↓
constやfinalのデータ

変わる
↓
Stateで管理

質問5：その状態はどこで持つべきか

複数のWidgetで使う状態は、親Widgetで持つことが多いです。

複数の子で使う
↓
親で持つ

そのWidget内だけで使う
↓
そのWidget内で持つ

たとえば、Discord風アプリでは、currentUser は親で持ちました。

一方、入力欄の TextEditingController は、ChatArea や ProfileEditorDialog 内で持ちました。

質問6：ユーザー操作で何が変わるか

次に、操作を考えます。

ボタンを押す
入力する
選択する
保存する
送信する
Drawerを開く

そして、操作によって何の状態が変わるかを考えます。

Sendを押す
↓
messagesが増える

プロフィール保存
↓
currentUserが変わる

チャンネル選択
↓
selectedChannelIndexが変わる

アプリ開発の共通テンプレート

この章で学んだ流れを、どんなアプリにも使えるテンプレートにすると、次のようになります。

アプリ名：
作りたい画面：

1. 画面を観察する
- 上部：
- 左側：
- 中央：
- 右側：
- 下部：

2. 必要なデータを考える
- データ1：
- データ2：
- データ3：

3. classを考える
- class名：
- property：

4. Widgetに分ける
- Widget1：
- Widget2：
- Widget3：

5. 状態を考える
- 変わる値：
- 親で持つ値：
- 子で持つ値：

6. 操作を考える
- 操作1：
- 操作2：
- 操作3：

7. レスポンシブ対応を考える
- PC：
- タブレット：
- スマホ：

新しいアプリを作るときは、いきなりコードを書く前に、このテンプレートを埋めるだけでもかなり整理できます。

この章の到達点

この章を最後まで学ぶと、次のことができるようになります。

複雑な画面を部品に分解できる
データclassを考えられる
Listを使って一覧UIを作れる
TextFieldで入力を受け取れる
Dialogで編集画面を作れる
Drawerでスマホ対応できる
LayoutBuilderでレスポンシブ対応できる
完成コードを役割ごとに読める

これは、かなり大きな前進です。

「Discord風アプリを作った」というより、Flutterでアプリ画面を設計する流れを一通り経験した と考えるとよいです。

手を動かす最終演習1：別アプリに置き換える

Discord風アプリの部品を、別のアプリに置き換えてみましょう。

たとえば、タスク管理アプリなら次のように置き換えられます。

Discord風アプリ	タスク管理アプリ
`ServerRail`	プロジェクト一覧
`ChannelSidebar`	タスクカテゴリ一覧
`ChatArea`	タスク一覧・作業ログ
`MemberPanel`	担当者一覧
`ProfileCard`	担当者プロフィール
`ChatInputBar`	コメント入力欄

このように置き換えるだけで、Discord風UIの構造が、別アプリの設計に変わります。

よくある不安4：スマホ対応が難しい

スマホ対応は、まず「何を隠すか」を決めると簡単になります。

全部表示しようとしない
↓
一番大事な画面を残す
↓
補助情報はDrawerや別画面へ移す

今回のDiscord風アプリでは、スマホの主役を ChatArea にしました。

このように、優先順位を決めることが重要です。

答え

データclassです。例として、UserProfile、ChatMessage、DiscordChannel などがあります。

答え

はい。ECアプリ、SNSアプリ、業務管理アプリ、医療向けアプリなどにも応用できます。

この章のまとめ

この章では、Discord風チャットアプリを題材に、FlutterのUI構築を学びました。

作ったものはDiscord風アプリですが、本当に学んだことは、もっと広いアプリ開発の考え方です。

画面を観察する
↓
必要なデータを考える
↓
画面を部品に分ける
↓
部品をWidgetとして作る
↓
状態を持たせる
↓
ユーザー操作で状態を変える
↓
必要な機能を少しずつ追加する
↓
画面幅に応じてレイアウトを変える

この流れを理解できれば、次に別のアプリを作るときも、同じように考えられます。

どんなアプリでも
↓
画面がある
データがある
部品がある
状態がある
操作がある
画面幅への対応がある

つまり、アプリの種類が変わっても、基本の考え方は変わりません。

最後に、この章で一番覚えておきたい言葉を置いておきます。

複雑なアプリは、いきなり作るのではなく、小さな部品と状態の流れに分ければ作れる。

この考え方が身につけば、Flutterで作れるものは大きく広がっていきます。

Discord風の画面を観察する ↓ どんな領域があるか分ける ↓ 必要なデータを考える ↓ 小さなWidgetを作る ↓ 状態を持たせる ↓ 操作で状態を変える ↓ PC・タブレット・スマホに対応する

PC表示 ┌────────────┬────────────────┬──────────────────────┬──────────────┐ │ ServerRail │ ChannelSidebar │ ChatArea │ MemberPanel │ └────────────┴────────────────┴──────────────────────┴──────────────┘

スマホ表示 ┌──────────────────────────────┐ │ ChatTopBar │ ├──────────────────────────────┤ │ ChatArea │ └──────────────────────────────┘ 左Drawer └─ ServerRail + ChannelSidebar 右Drawer └─ MemberPanel

1. 画面を観察する 2. 必要なデータを考える 3. 画面を領域に分ける 4. 領域をWidgetにする 5. データclassを作る 6. 状態を親Widgetで持つ 7. 子Widgetにデータを渡す 8. ユーザー操作で状態を変える 9. setStateで画面を更新する 10. PC・タブレット・スマホで配置を変える 11. 完成コードを役割ごとに読み解く

画面の領域	Flutterで作る部品
サーバー一覧	`ServerRail`
チャンネル一覧	`ChannelSidebar`
チャット画面	`ChatArea`
入力欄	`ChatInputBar`
メンバー一覧	`MemberPanel`
プロフィールカード	`ProfileCard`
編集画面	`ProfileEditorDialog`

画面の領域

Flutterで作る部品

サーバー一覧

ServerRail

チャンネル一覧

ChannelSidebar

チャット画面

ChatArea

入力欄

ChatInputBar

メンバー一覧

MemberPanel

プロフィールカード

ProfileCard

編集画面

ProfileEditorDialog

class ChatMessage { const ChatMessage({ required this.userName, required this.handle, required this.avatarColor, required this.avatarUrl, required this.body, required this.timestamp, required this.status, this.isSystem = false, }); final String userName; final String handle; final Color avatarColor; final String avatarUrl; final String body; final DateTime timestamp; final OnlineStatus status; final bool isSystem; }

種類

使う場面

StatelessWidget

受け取ったデータを表示するだけ

StatefulWidget

中で状態が変わる

アプリの入口共通ルールデータclass 状態を持つ親Widget レイアウト切り替え PC用レイアウトスマホ用レイアウト左側パネル中央チャット画面右側メンバー欄プロフィール編集Dialog 補助関数

Discord風アプリ

業務管理アプリ

ServerRail

プロジェクト一覧

ChannelSidebar

タスクカテゴリ

ChatArea

タスク一覧・作業ログ

MemberPanel

担当者一覧

ProfileCard

担当者プロフィール

ChatInputBar

コメント入力欄

Discord風アプリ	医療向け説明アプリ
チャンネル一覧	診療カテゴリ一覧
チャット画面	説明本文・動画表示
メッセージ入力	質問入力
メンバー一覧	患者情報・スタッフ情報
プロフィールカード	患者プロフィールカード

Discord風アプリ

医療向け説明アプリ

チャンネル一覧

診療カテゴリ一覧

チャット画面

説明本文・動画表示

メッセージ入力

質問入力

メンバー一覧

患者情報・スタッフ情報

プロフィールカード

患者プロフィールカード

アプリ名：作りたい画面： 1. 画面を観察する - 上部： - 左側： - 中央： - 右側： - 下部： 2. 必要なデータを考える - データ1： - データ2： - データ3： 3. classを考える - class名： - property： 4. Widgetに分ける - Widget1： - Widget2： - Widget3： 5. 状態を考える - 変わる値： - 親で持つ値： - 子で持つ値： 6. 操作を考える - 操作1： - 操作2： - 操作3： 7. レスポンシブ対応を考える - PC： - タブレット： - スマホ：

複雑な画面を部品に分解できるデータclassを考えられる Listを使って一覧UIを作れる TextFieldで入力を受け取れる Dialogで編集画面を作れる Drawerでスマホ対応できる LayoutBuilderでレスポンシブ対応できる完成コードを役割ごとに読める

Discord風アプリ

タスク管理アプリ

ServerRail

プロジェクト一覧

ChannelSidebar

タスクカテゴリ一覧

ChatArea

タスク一覧・作業ログ

MemberPanel

担当者一覧

ProfileCard

担当者プロフィール

ChatInputBar

コメント入力欄

作りたいアプリ：画面の領域： 1. 2. 3. 4. 必要なデータ： 1. 2. 3. 作るWidget： 1. 2. 3. 4. 変化する状態： 1. 2. 3. ユーザー操作： 1. 2. 3. スマホ対応： PCでは：スマホでは：

画面を観察する ↓ 必要なデータを考える ↓ 画面を部品に分ける ↓ 部品をWidgetとして作る ↓ 状態を持たせる ↓ ユーザー操作で状態を変える ↓ 必要な機能を少しずつ追加する ↓ 画面幅に応じてレイアウトを変える