【導入】Discord風アプリを分解して、UIづくりの流れをつかむ

この節で学ぶこと

この章では、FlutterでDiscord風のチャットアプリを作っていきます。

ただし、最初から完成コードを一気に書くことはしません。

まずは、Discord風アプリの画面をよく観察します。

アプリ開発では、いきなりコードを書き始めるよりも、先に画面を分解することがとても大切です。

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

この流れを理解すると、Discord風アプリだけではなく、SNSアプリ、学習アプリ、予約アプリ、管理画面なども同じ考え方で作れるようになります。

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

アプリ開発は、完成画面を見て「部品」「データ」「状態」「操作」に分けるところから始まる。

いきなりコードを書かない理由

Flutterを学び始めたばかりの人は、アプリを作ろうとしたときに、すぐにコードを書きたくなるかもしれません。

しかし、完成画面が複雑な場合、いきなりコードを書き始めると、途中で迷いやすくなります。

たとえば、Discord風アプリには、次のような要素があります。

サーバー一覧
チャンネル一覧
チャット一覧
メッセージ入力欄
メンバー一覧
プロフィールカード
プロフィール編集画面
スマホ用メニュー

これらを全部まとめて一度に作ろうとすると、かなり難しく感じます。

そこで、まずは画面を小さな部品に分けます。

大きな画面
↓
小さな部品に分ける
↓
1つずつWidgetとして作る
↓
最後につなげる

この考え方が、Flutter UI構築の基本です。

完成イメージを観察する

今回作るDiscord風アプリは、PC表示では次のような構造になります。

横方向に大きく4つの領域があります。

領域	内容	Flutterで作る部品名の例
サーバー一覧	左端の丸いアイコン一覧	ServerRail
チャンネル一覧	general、flutter-uiなどの一覧	ChannelSidebar
チャット画面	メッセージ一覧と入力欄	ChatArea
メンバー一覧	オンラインメンバー、プロフィール	MemberPanel

まずは、画面全体をこの4つに分けて考えます。

スマホ表示も観察する

Discord風のPC画面は、横に情報が多く並びます。

しかし、スマホは横幅が狭いため、同じように4カラムで表示することはできません。

そのため、スマホでは次のように考えます。

サーバー一覧やチャンネル一覧は、左側メニューに収納します。

左メニューを開く
↓
サーバー一覧 + チャンネル一覧を表示

メンバー一覧は、右側メニューに収納します。

右メニューを開く
↓
メンバー一覧を表示

つまり、PCとスマホでは、同じ情報を使いながら、表示方法を変えます。

PC
サーバー | チャンネル | チャット | メンバー

スマホ
チャット中心
サーバー・チャンネルはDrawer
メンバーはendDrawer

これがレスポンシブUIの考え方です。

レスポンシブUIとは何か

レスポンシブUIとは、画面の幅に合わせて見た目や配置を変えるUIのことです。

初心者向けには、次のように理解してください。

レスポンシブUI = PC・タブレット・スマホで見やすく表示を変える画面設計

たとえば、Discord風アプリでは、画面幅によって次のように変えます。

画面幅	表示
PC	サーバー一覧・チャンネル一覧・チャット・メンバー一覧を横並び
タブレット	サーバー一覧・チャンネル一覧・チャットを横並び、メンバー一覧は省略
スマホ	チャット中心、サーバー一覧とチャンネル一覧はDrawerに収納

この教材では、最終的にこのレスポンシブ対応まで実装します。

Discord風アプリを「部品」に分ける

Flutterでは、画面に表示されるものは基本的にWidgetです。

そのため、Discord風アプリもWidgetに分けて考えます。

完成アプリの主なWidgetは、次のようになります。

DiscordHomePage
├─ DesktopDiscordLayout
├─ MobileDiscordLayout
├─ ServerRail
│  └─ ServerIcon
├─ ChannelSidebar
│  └─ ChannelTile
├─ ChatTopBar
├─ ChatArea
│  ├─ ChannelIntro
│  ├─ ChatMessageTile
│  └─ ChatInputBar
├─ MemberPanel
│  ├─ MemberTile
│  └─ ProfileCard
└─ ProfileEditorDialog

このように見ると、完成コードが長くても怖くありません。

なぜなら、1つ1つは小さな部品だからです。

Widgetとは何か

Widgetは、Flutterで画面を作るための部品です。

ボタン、文字、アイコン、画像、余白、一覧、入力欄など、ほとんどのものがWidgetです。

Text
Icon
Container
Row
Column
ListView
TextField
Drawer
Dialog

たとえば、チャットメッセージ1件もWidgetとして作れます。

ChatMessageTile
├─ アイコン
├─ ユーザー名
├─ 時刻
└─ メッセージ本文

Flutterでは、このような小さなWidgetを組み合わせて画面を作ります。

今回のアプリで必要なデータを考える

画面を部品に分けたら、次に必要なデータを考えます。

Discord風アプリでは、次のようなデータが必要です。

データ	内容	class名の例
サーバー情報	サーバー名、アイコン画像URL、色	DiscordServer
チャンネル情報	チャンネル名、テキスト/ボイス、未読状態	DiscordChannel
メッセージ情報	投稿者、本文、時刻、アイコン	ChatMessage
ユーザー情報	名前、ID、自己紹介、アイコン、オンライン状態	UserProfile

このように、画面に表示する情報をclassとして整理します。

画面に表示したい情報
↓
classにまとめる
↓
Widgetに渡して表示する

データとWidgetの関係

たとえば、サーバー一覧を作る場合を考えます。

サーバー1つ分のデータは、次のように考えられます。

サーバー名
ラベル
画像URL
テーマカラー

これを DiscordServer classにします。

class DiscordServer {
  const DiscordServer({
    required this.name,
    required this.label,
    required this.imageUrl,
    required this.color,
  });

  final String name;
  final String label;
  final String imageUrl;
  final Color color;
}

そして、複数のサーバーをListで持ちます。

final List<DiscordServer> servers = const [
  DiscordServer(
    name: 'Flutter Lab',
    label: 'FL',
    imageUrl: 'https://example.com/image.jpg',
    color: Color(0xFF00B0F4),
  ),
];

このデータを ServerRail に渡して、画面に表示します。

servers
↓
ServerRail
↓
ServerIcon
↓
画面に表示

この流れを理解すると、他の部品も同じように作れます。

状態とは何か

Discord風アプリでは、ただ表示するだけではなく、ユーザー操作によって画面が変わります。

たとえば、次のような状態があります。

現在選択しているサーバー
現在選択しているチャンネル
入力中のメッセージ
送信されたメッセージ一覧
現在のプロフィール情報
メンバー一覧を表示するかどうか

状態とは、画面に影響する現在の値です。

初心者向けには、次のように理解してください。

状態 = 画面が今どうなっているかを決める値

たとえば、選択中チャンネルが変わると、チャット画面の内容も変わります。

selectedChannelIndex = 0
↓
generalのメッセージを表示

selectedChannelIndex = 1
↓
flutter-uiのメッセージを表示

Flutterでは、状態を変更するときに setState を使います。

これは後の節で詳しく扱います。

この章で作る完成アプリの機能

最終的には、次のような機能を持つアプリを作ります。

サーバー一覧を表示する
チャンネル一覧を表示する
チャンネルを切り替える
チャットメッセージを表示する
メッセージを入力して送信する
メンバー一覧を表示する
プロフィールカードを表示する
プロフィール編集画面を開く
名前・ハンドル・自己紹介を編集する
アイコン画像URLを登録する
PC・スマホで表示を切り替える

ただし、DBは使いません。

この教材では、アプリ内の状態だけで動かします。

DBなし
ログインなし
リロードするとリセット

その代わり、UI構築、データ設計、状態管理、レスポンシブ対応に集中します。

最初に作る小さなゴール

この節では、まだ完成アプリは作りません。

まずは、Discord風アプリを作るための考え方を整理します。

最初の小さなゴールは、次の通りです。

1. Discord風アプリの画面構造を説明できる
2. どの部品が必要か分かる
3. どのデータが必要か分かる
4. PCとスマホで表示方法が変わる理由が分かる

ここが理解できると、次の節からコードを書き始めたときに、何を作っているのか迷いにくくなります。

手を動かす準備：完成画面を言葉で分解する

コードを書く前に、まずは紙やメモに画面を分解してみましょう。

次のように書ければ十分です。

Discord風アプリ

PC表示
- 左端にサーバーアイコン一覧
- その右にチャンネル一覧
- 中央にチャット一覧
- 下にメッセージ入力欄
- 右側にメンバー一覧
- メンバー欄の下にプロフィールカード

スマホ表示
- 中央にチャット画面
- 左上メニューでサーバー・チャンネル一覧
- 右上ボタンでメンバー一覧

このように、まず言葉で説明できる状態にします。

言葉で説明できる画面は、コードにも落とし込みやすくなります。

小さな練習1：画面を4つに分ける

次の空欄を埋めてみてください。

Discord風PC画面は、主に4つの領域に分けられる。

1. ____________________
2. ____________________
3. ____________________
4. ____________________

答えの例です。

1. サーバー一覧
2. チャンネル一覧
3. チャット画面
4. メンバー一覧

小さな練習2：必要なclassを考える

次の画面要素を、どのclassで表せそうか考えてみてください。

画面要素	class名の例
サーバー1つ分
チャンネル1つ分
メッセージ1つ分
ユーザー1人分

答えの例です。

画面要素	class名の例
サーバー1つ分	DiscordServer
チャンネル1つ分	DiscordChannel
メッセージ1つ分	ChatMessage
ユーザー1人分	UserProfile

小さな練習3：Widget名を考える

次の部品に、FlutterのWidget名をつけるとしたらどうしますか。

部品	Widget名の例
サーバー一覧
サーバーアイコン1つ
チャンネル一覧
チャンネル1つ
チャット画面
メッセージ1件
入力欄
メンバー一覧
プロフィールカード

答えの例です。

部品	Widget名の例
サーバー一覧	ServerRail
サーバーアイコン1つ	ServerIcon
チャンネル一覧	ChannelSidebar
チャンネル1つ	ChannelTile
チャット画面	ChatArea
メッセージ1件	ChatMessageTile
入力欄	ChatInputBar
メンバー一覧	MemberPanel
プロフィールカード	ProfileCard

名前をつけることは、とても大切です。

名前をつけられるということは、その部品の役割を理解できているということだからです。

この節で出てきた新しい言葉

用語	意味
Widget	Flutterで画面を作る部品
レスポンシブUI	画面幅に応じて表示を変えるUI
class	データの設計図
property	classが持つ情報
状態	画面が今どうなっているかを決める値
Drawer	画面の横から出てくるメニュー
Dialog	画面の上に表示される小さな編集画面
List	複数のデータを順番に持つもの

よくあるつまずき1：完成コードが長くて怖い

完成アプリのコードは長くなります。

しかし、長いコードも小さなWidgetの集まりです。

完成コード
↓
長くて難しそう

分解して見る
↓
ServerRail
ChannelSidebar
ChatArea
MemberPanel
ProfileCard

1つずつ見る
↓
理解しやすい

最初から全体を一気に理解しようとしなくて大丈夫です。

まずは、1つのWidgetを作れるようになることが大切です。

よくあるつまずき2：何から作ればよいか分からない

何から作ればよいか迷ったら、次の順番で考えてください。

1. 画面全体の大枠
2. 色やテーマ
3. 左側のサーバー一覧
4. チャンネル一覧
5. チャット画面
6. 入力欄
7. プロフィール
8. スマホ対応

いきなりチャット機能やプロフィール編集を作る必要はありません。

まずは、画面の大枠を作ります。

よくあるつまずき3：PC表示とスマホ表示を同時に考えて混乱する

最初はPC表示だけで大丈夫です。

PC表示で部品が作れたら、その後にスマホ表示へ対応します。

まずPC表示を作る
↓
部品を整理する
↓
スマホではDrawerに入れる

レスポンシブ対応は、最後に考えると分かりやすいです。

この節の確認問題

確認問題1

Discord風アプリのPC画面は、主にどの4つの領域に分けられますか。

答え

サーバー一覧、チャンネル一覧、チャット画面、メンバー一覧です。

確認問題2

Flutterで画面を作る部品を何と呼びますか。

答え

Widgetです。

確認問題3

レスポンシブUIとは何ですか。

答え

PC、タブレット、スマホなど、画面幅に合わせて見た目や配置を変えるUIのことです。

確認問題4

この教材で作る主なデータclassには、どのようなものがありますか。

答え

DiscordServer、DiscordChannel、ChatMessage、UserProfile などです。

確認問題5

アプリ開発で、いきなりコードを書かずに最初に行うべきことは何ですか。

答え

作りたい画面を観察し、どんな部品・データ・状態が必要かを分解することです。

この節のまとめ

この節では、Discord風アプリを作る前に、画面を観察して分解する方法を学びました。

Discord風アプリは、一見すると複雑に見えます。

しかし、分解すると次のような部品の集まりです。

サーバー一覧
チャンネル一覧
チャット画面
メンバー一覧
プロフィールカード
プロフィール編集画面

また、画面に表示する情報は、classとして整理できます。

DiscordServer
DiscordChannel
ChatMessage
UserProfile

この節で一番大切なのは、次の考え方です。

複雑なアプリも、画面を観察し、部品とデータに分ければ、小さく作り始められる。

次の節では、実際にFlutterの Column と Row を使って、Discord風アプリの4カラム構造を作っていきます。