Flutterアプリケーション開発概論

次章へ：動画データをFlutter UIに表示する

FlutteriOSAndroidMacOSWindows基礎から学ぶ開発アプリ開発

この節で学ぶこと

ここまでの第3章では、YouTube風ミニアプリを作るために、Dartでデータを設計する方法を学んできました。

第3章で扱ってきた中心は、次の流れです。

動画カードに表示したい情報がある
↓
その情報をVideo classとして設計する
↓
複数のVideoをListで持つ
↓
必要に応じて表示用のgetterを作る
↓
Flutter UIに渡して表示する準備をする

今回の 3-9 は、第3章のまとめであり、次の章への橋渡しです。

ここでは、これまで作ってきた Video データが、Flutterの画面にどのようにつながっていくのかを整理します。

この節で大切なこと。

Dartで設計したデータは、FlutterのWidgetに渡されて画面になる。

第3章で作ってきたもの

第3章では、いきなりFlutterの画面を作るのではなく、その前に必要な「データの土台」を作ってきました。

YouTube風アプリでいえば、画面に表示される動画カードの裏側には、必ず動画データがあります。

動画カード
├─ サムネイル
├─ 動画タイトル
├─ チャンネル名
├─ 再生回数
├─ 投稿日
├─ 動画時間
└─ ライブ表示

これらを、Dartでは Video classとしてまとめます。

class Video {
  const Video({
    required this.title,
    required this.channelName,
    required this.views,
    required this.publishedAt,
    required this.duration,
    required this.category,
    required this.isLive,
  });

  final String title;
  final String channelName;
  final int views;
  final String publishedAt;
  final String duration;
  final String category;
  final bool isLive;

  String get viewLabel {
    if (views >= 10000) {
      return '${(views / 10000).toStringAsFixed(1)}万回視聴';
    }

    return '$views回視聴';
  }

  String get metaLabel {
    if (isLive) {
      return 'ライブ配信中';
    }

    return '$viewLabel・$publishedAt';
  }
}

この Video classは、動画1本分の設計図です。

そして、実際の動画データは、次のように作ります。

final video = Video(
  title: 'FlutterでYouTube風UIを作る',
  channelName: 'Code Studio',
  views: 128000,
  publishedAt: '2日前',
  duration: '12:34',
  category: 'Flutter',
  isLive: false,
);

1本の動画から複数の動画へ

YouTube風アプリでは、動画カードが1枚だけ表示されるわけではありません。

複数の動画が縦に並びます。

そのため、Video を List に入れます。

final videos = [
  Video(
    title: 'FlutterでYouTube風UIを作る',
    channelName: 'Code Studio',
    views: 128000,
    publishedAt: '2日前',
    duration: '12:34',
    category: 'Flutter',
    isLive: false,
  ),
  Video(
    title: 'DartのListとMapを解説',
    channelName: 'App School',
    views: 8500,
    publishedAt: '5日前',
    duration: '08:21',
    category: 'Dart',
    isLive: false,
  ),
  Video(
    title: 'ライブ：Flutter質問会',
    channelName: 'Mobile Dev Live',
    views: 5600,
    publishedAt: '現在',
    duration: 'LIVE',
    category: 'LIVE',
    isLive: true,
  ),
];

これは、動画一覧画面の元データです。

List<Video>
├─ Video 1本目
├─ Video 2本目
└─ Video 3本目

第3章で学んだことは、最終的にこの List<Video> を作れるようになることでした。

データとUIの関係

ここから、FlutterのUIにつながります。

Flutterでは、画面の部品を Widget と呼びます。

YouTube風アプリでは、動画カードを VideoCard というWidgetとして作ることができます。

Video データ
↓
VideoCard Widget
↓
画面に表示される動画カード

たとえば、次のように考えます。

VideoCard(video: video)

これは、次の意味です。

VideoCardに、Videoデータを1本渡す。

VideoCard は、受け取った Video を使って、タイトルやチャンネル名などを表示します。

Text(video.title)
Text(video.channelName)
Text(video.metaLabel)

つまり、Dartで作ったデータが、FlutterのWidgetの中で使われます。

VideoCardとは何か

VideoCard は、動画1本分を表示するためのUI部品です。

まだ詳しいFlutterのWidget設計は次章以降で扱いますが、考え方だけ先に見ておきます。

class VideoCard extends StatelessWidget {
  const VideoCard({
    super.key,
    required this.video,
  });

  final Video video;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(video.title),
        Text(video.channelName),
        Text(video.metaLabel),
      ],
    );
  }
}

このコードの中心は、次の部分です。

final Video video;

これは、VideoCard が Video データを受け取るという意味です。

そして、受け取った video を使って、画面に文字を表示しています。

Text(video.title)
Text(video.channelName)
Text(video.metaLabel)

ここで、第3章で作った Video classが役立ちます。

ListView.builderへつながる

動画カードを1枚だけ表示するなら、VideoCard(video: video) でよいです。

しかし、YouTube風アプリでは、動画カードを何枚も並べたいです。

そこで使うのが、Flutterの ListView.builder です。

ListView.builder(
  itemCount: videos.length,
  itemBuilder: (context, index) {
    return VideoCard(video: videos[index]);
  },
)

このコードは、初心者には少し難しく見えるかもしれません。

しかし、第3章で学んだ内容とつなげると、かなり理解しやすくなります。

コード意味
videos動画データの一覧
videos.length動画が何本あるか
index今、何番目のカードを作っているか
videos[index]index番目の動画データ
VideoCard(video: videos[index])その動画をカードとして表示する

つまり、ListView.builder は、List<Video> を1件ずつ取り出して、VideoCard に渡しています。

videos[0] → VideoCard 1枚目
videos[1] → VideoCard 2枚目
videos[2] → VideoCard 3枚目

第3章で学んだことがどう使われるか

ここで、第3章の内容を、完成アプリとの関係で整理します。

学んだことDartでの内容Flutter UIでの使われ方
変数title, viewsTextに表示する材料
ListList<Video>一覧表示の元データ
Mapキーと値のまとまりclass設計前の練習
classVideo動画1本分のデータ型
constructorVideo(...)動画データを作る
propertyvideo.titleUIに表示する
gettervideo.metaLabel表示用テキストを作る
final値を固定する安全なデータとして扱う
where条件で絞り込むカテゴリ表示や検索に使える
sort並び替える人気順表示に使える

このように、第3章で学んだDartの知識は、Flutterの画面づくりにそのままつながっています。

完成アプリの全体像

第3章の学習内容を使うと、完成アプリのデータ部分は次のように考えられます。

Video class
↓
const videos = [...]
↓
ListView.builder
↓
VideoCard
↓
Thumbnail / ChannelAvatar / VideoInfo
↓
画面に表示

もう少し具体的にすると、次のようになります。

Video
├─ title
├─ channelName
├─ views
├─ publishedAt
├─ duration
├─ category
├─ isLive
├─ viewLabel
└─ metaLabel

↓

VideoCard
├─ Thumbnail
│  ├─ category
│  └─ duration
│
├─ ChannelAvatar
│
└─ VideoInfo
   ├─ title
   ├─ channelName
   └─ metaLabel

データの設計ができているから、UI部品に迷わず渡せます。

なぜ先にデータ設計を学んだのか

ここまで読んで、こう思うかもしれません。

早く画面を作ったほうが楽しいのでは？

もちろん、Flutterでは画面を作ることも大切です。

しかし、アプリは見た目だけでは成り立ちません。

画面に表示される情報には、必ず裏側のデータがあります。

見た目だけ作る
↓
あとでデータを入れると崩れやすい

データを先に設計する
↓
UIに渡しやすい
↓
拡張しやすい

特に、YouTube風アプリのように同じ形のカードを何枚も表示する場合、データ設計がとても重要になります。

Video classを作っておけば、動画が3本でも、30本でも、同じ考え方で表示できます。

小さなアプリでも設計は大切

学習用のミニアプリでも、設計を意識することは大切です。

たとえば、動画タイトルをバラバラの変数で持つと、動画が増えるたびに管理が大変になります。

final title1 = 'FlutterでYouTube風UIを作る';
final title2 = 'DartのListとMapを解説';
final title3 = 'UIデザインの基本';

この形では、動画カードを増やすほどコードが読みにくくなります。

一方、List<Video> にしておけば、動画を増やしても構造は変わりません。

final videos = [
  Video(title: 'FlutterでYouTube風UIを作る', ...),
  Video(title: 'DartのListとMapを解説', ...),
  Video(title: 'UIデザインの基本', ...),
];

動画を増やすときも、Video(...) を追加するだけです。

同じ形のデータを、同じルールで増やせる。

これが、classとListを組み合わせる強さです。

第3章の総まとめ

ここで、第3章全体を振り返ります。

節学んだこと一番大切な考え方
3-1動画データを1本分の情報として見る画面の裏にはデータがある
3-2ListとMapで動画一覧を作る複数の動画はListで扱う
3-3classでVideoを設計するclassはデータの設計図
3-4constructorとpropertyを理解するpropertyはデータの持ち物
3-5method / getterで表示用の値を作るデータを画面用に整える
3-6カプセル化で安全に扱うデータとルールを安全にまとめる
3-7Listを操作する一覧から条件に合う動画を取り出す
3-8アプリ用のclassを設計する画面から必要なデータを逆算する
3-9UIへの接続を理解するDartのデータはWidgetに渡されて画面になる

第3章の学習を一言でまとめるなら、次の通りです。

画面に表示したい情報を、Dartのデータとして設計できるようになる章。

この章で身につけた力

第3章を終えると、次のような力が身についています。

- 画面に必要なデータを見つける力
- データをclassとして整理する力
- 複数のデータをListで扱う力
- 表示用の文字をgetterで作る力
- 条件に合うデータをwhereで取り出す力
- UIに渡しやすい形でデータを設計する力

これは、YouTube風アプリだけでなく、さまざまなアプリ開発に応用できます。

たとえば、次のようなアプリでも同じ考え方が使えます。

アプリclassの例Listの例
商品一覧アプリProductList<Product>
ニュースアプリArticleList<Article>
予約アプリReservationList<Reservation>
SNSアプリPostList<Post>
学習アプリLessonList<Lesson>

つまり、Video classで学んだことは、他のアプリにもつながります。

最終確認：VideoからUIまでの流れ

最後に、もっとも重要な流れを確認します。

まず、動画1本分のclassを作ります。

class Video {
  const Video({
    required this.title,
    required this.channelName,
    required this.views,
    required this.publishedAt,
    required this.duration,
    required this.category,
    required this.isLive,
  });

  final String title;
  final String channelName;
  final int views;
  final String publishedAt;
  final String duration;
  final String category;
  final bool isLive;

  String get viewLabel {
    if (views >= 10000) {
      return '${(views / 10000).toStringAsFixed(1)}万回視聴';
    }

    return '$views回視聴';
  }

  String get metaLabel {
    if (isLive) {
      return 'ライブ配信中';
    }

    return '$viewLabel・$publishedAt';
  }
}

次に、動画一覧を作ります。

final videos = [
  Video(
    title: 'FlutterでYouTube風UIを作る',
    channelName: 'Code Studio',
    views: 128000,
    publishedAt: '2日前',
    duration: '12:34',
    category: 'Flutter',
    isLive: false,
  ),
  Video(
    title: 'ライブ：Flutter質問会',
    channelName: 'Mobile Dev Live',
    views: 5600,
    publishedAt: '現在',
    duration: 'LIVE',
    category: 'LIVE',
    isLive: true,
  ),
];

そして、Flutter UIでは、1件ずつ取り出してカードに渡します。

ListView.builder(
  itemCount: videos.length,
  itemBuilder: (context, index) {
    return VideoCard(video: videos[index]);
  },
)

VideoCard は、受け取った Video を使って表示します。

Text(video.title)
Text(video.channelName)
Text(video.metaLabel)

この流れを理解できれば、第3章の目的は達成です。

確認問題1

List<Video> は、YouTube風アプリで何を表しますか。

答え

動画一覧画面に表示する、複数の動画データをまとめたものです。

確認問題2

videos.length は、Flutter UIでどのように使えますか。

答え

動画カードを何枚作るかを決めるために使えます。

ListView.builder では、itemCount: videos.length のように使います。

確認問題3

videos[index] は何を表しますか。

答え

videos の中から、index 番目の動画データを取り出す書き方です。

その動画データを VideoCard に渡して、1枚の動画カードを作ります。

確認問題4

VideoCard(video: videos[index]) は、何をしていますか。

答え

動画一覧の中から1件の Video データを取り出し、それを VideoCard に渡しています。

VideoCard は、そのデータを使って動画タイトルやチャンネル名などを表示します。

確認問題5

第3章で一番大切な考え方は何ですか。

答え

画面に表示したい情報を、Dartのデータとして設計し、そのデータをFlutterのWidgetに渡して表示することです。

第3章の締め

第3章では、YouTube風ミニアプリを題材に、Dartのデータ設計を学びました。

最初は、動画タイトルや再生回数のような「ただの値」から始まりました。

そこから、複数の値をまとめ、List で一覧にし、class で動画1本分の設計図を作り、getter で表示用の文字を整え、最後にはFlutter UIへ渡す流れまでたどり着きました。

これは、アプリ開発においてとても重要な一歩です。

画面は、ただ見た目を並べれば完成するわけではありません。

その裏側には、必ずデータがあります。

そして、よいUIを作るためには、よいデータ設計が必要です。

第3章で学んだ Video、List<Video>、viewLabel、metaLabel の考え方は、今後Flutterで画面を作るときの土台になります。

データを設計できる人は、画面をただ作る人ではなく、アプリの仕組みを作れる人になる。

次の章からは、いよいよFlutterのWidgetを使って、Dartで設計したデータを画面に表示していきます。

前の節YouTube風ミニアプリ用のクラスを設計する
教材トップへ戻る