constructorとpropertyで動画の持ち物を決める

この節で学ぶこと

前回の 3-3 では、class を使って、動画1本分のデータを Video として設計する方法を学びました。

たとえば、次のようなclassです。

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

  final String title;
  final String channelName;
  final int views;
  final String publishedAt;
  final String duration;
}

今回は、この中に出てくる constructor と property を、見ていきます。

YouTube風アプリでは、動画カードを表示するために、動画タイトル、チャンネル名、再生回数、投稿日、動画時間、カテゴリ、サムネイル色、ライブ中かどうかなどの情報が必要です。

これらはすべて、Video が持つ「持ち物」です。

この節では、動画データの持ち物をどう決めるのか、そして動画データを作るときに初期値をどう渡すのかを学びます。

この節のゴール

この節のゴールは、constructor と property の役割を理解し、YouTube風アプリで使う Video classの中身を読めるようになることです。

最終的には、次のコードを見たときに、「どの値が、どのpropertyに入っているのか」が分かる状態を目指します。

const Video(
  title: 'FlutterでYouTube風UIを作る｜ListViewとCardの実践入門',
  channelName: 'Code Studio',
  views: 128000,
  publishedAt: '2日前',
  duration: '12:34',
  category: 'Flutter',
  thumbnailColor: Color(0xFF121212),
  channelColor: Color(0xFFE53935),
  isLive: false,
)

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

propertyはデータの持ち物、constructorはデータを作る入口である。

まずpropertyとは何か

property とは、classが持っているデータの項目です。

YouTube風アプリの動画カードには、いろいろな情報が表示されます。

動画タイトル
チャンネル名
再生回数
投稿日
動画時間
カテゴリ
サムネイル色
チャンネルアイコン色
ライブ中かどうか

これらを Video classのpropertyとして持たせます。

完成形に近い 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.thumbnailColor,
    required this.channelColor,
    required this.isLive,
  });

  final String title;
  final String channelName;
  final int views;
  final String publishedAt;
  final String duration;
  final String category;
  final Color thumbnailColor;
  final Color channelColor;
  final bool isLive;
}

下の部分がpropertyです。

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

これは、次の意味です。

Videoは、titleを持つ。
Videoは、channelNameを持つ。
Videoは、viewsを持つ。
Videoは、publishedAtを持つ。
Videoは、durationを持つ。
Videoは、categoryを持つ。
Videoは、thumbnailColorを持つ。
Videoは、channelColorを持つ。
Videoは、isLiveを持つ。

propertyを「動画の持ち物」として見る

propertyは、難しく考えるよりも「そのデータが持っているもの」と考えると分かりやすいです。

たとえば、動画1本には次のような持ち物があります。

動画の持ち物	property名	型
動画タイトル	title	String
チャンネル名	channelName	String
再生回数	views	int
投稿日	publishedAt	String
動画時間	duration	String
カテゴリ	category	String
サムネイル背景色	thumbnailColor	Color
チャンネルアイコン色	channelColor	Color
ライブ配信中かどうか	isLive	bool

つまり、Video classを作るということは、「動画1本には、どんな情報が必要か」を決めることです。

これは、UIを作る前の設計です。

画面に何を表示したいのか。

そのためには、どんなデータが必要なのか。

その必要なデータをpropertyとして定義します。

最小のpropertyから始める

いきなり完成形の Video classを見ると、少し長く感じます。

まずは、動画タイトルだけを持つclassから始めます。

void main() {
  final video = Video(
    title: 'FlutterでYouTube風UIを作る',
  );

  print(video.title);
}

class Video {
  const Video({
    required this.title,
  });

  final String title;
}

この Video classは、title だけを持っています。

Video
└─ title

つまり、「動画1本分のデータ」と言っても、今はタイトルだけです。

最初はこれで十分です。

propertyを1つずつ増やす

次に、チャンネル名を追加します。

void main() {
  final video = Video(
    title: 'FlutterでYouTube風UIを作る',
    channelName: 'Code Studio',
  );

  print(video.title);
  print(video.channelName);
}

class Video {
  const Video({
    required this.title,
    required this.channelName,
  });

  final String title;
  final String channelName;
}

Video の持ち物が増えました。

Video
├─ title
└─ channelName

このように、画面に表示したい情報に合わせてpropertyを増やします。

再生回数をpropertyにする

次に、再生回数を追加します。

再生回数は数字なので、int を使います。

void main() {
  final video = Video(
    title: 'FlutterでYouTube風UIを作る',
    channelName: 'Code Studio',
    views: 128000,
  );

  print(video.title);
  print(video.channelName);
  print(video.views);
}

class Video {
  const Video({
    required this.title,
    required this.channelName,
    required this.views,
  });

  final String title;
  final String channelName;
  final int views;
}

ここで大切なのは、propertyごとに型が決まっていることです。

property	型	理由
title	String	文字だから
channelName	String	文字だから
views	int	数字だから

class を使うと、「このデータは何型なのか」がはっきりします。

Mapよりも安全に扱いやすい理由はここにあります。

constructorとは何か

次に、constructor を見ます。

constructorは、データを作るときの入口です。

たとえば、次の部分がconstructorです。

const Video({
  required this.title,
  required this.channelName,
  required this.views,
});

これは、Video データを作るときに、title、channelName、views を受け取るための入口です。

実際に Video データを作るときは、次のように書きます。

final video = Video(
  title: 'FlutterでYouTube風UIを作る',
  channelName: 'Code Studio',
  views: 128000,
);

このとき、渡した値はpropertyに入ります。

渡した値	入るproperty
FlutterでYouTube風UIを作る	title
Code Studio	channelName
128000	views

constructorがあることで、Video を作るときに必要な値を受け取れるようになります。

constructorの読み方

次のconstructorを、ゆっくり読んでみます。

const Video({
  required this.title,
  required this.channelName,
  required this.views,
});

まず、Video はclassの名前です。

const Video

これは、「Videoを作る入口」という意味です。

次に、required this.title を見ます。

required this.title

これは、次のように読めます。

Videoを作るとき、titleを必ず渡してください。
渡されたtitleを、このVideoのtitleに入れます。

同じように、

required this.channelName

これは、次の意味です。

Videoを作るとき、channelNameを必ず渡してください。
渡されたchannelNameを、このVideoのchannelNameに入れます。

つまり、constructorは、外から値を受け取って、classのpropertyに入れる役割を持っています。

requiredとは何か

required は、「この値は必ず必要です」という意味です。

たとえば、次の Video classがあります。

class Video {
  const Video({
    required this.title,
    required this.channelName,
  });

  final String title;
  final String channelName;
}

この場合、Video を作るときには、title と channelName を必ず渡す必要があります。

正しい例です。

final video = Video(
  title: 'FlutterでYouTube風UIを作る',
  channelName: 'Code Studio',
);

しかし、次のように channelName を書かないと、必要な値が足りません。

final video = Video(
  title: 'FlutterでYouTube風UIを作る',
);

required があることで、「動画を作るなら、この情報は必ず入れてください」とDartに伝えることができます。

YouTube風UIで考えると、動画タイトルやチャンネル名がない動画カードは困ります。

そのため、必要な情報には required をつけます。

finalとは何か

propertyには、よく final をつけます。

final String title;
final String channelName;
final int views;

final は、「一度入れたら、あとから変更しない」という意味です。

たとえば、動画データを作ったあとに、勝手にタイトルが変わると困ります。

FlutterでYouTube風UIを作る
↓
知らないうちに別タイトルへ変わる

このようなことを防ぐために、動画データのpropertyには final を使います。

初心者向けには、まず次の理解で十分です。

finalは、作ったあとに勝手に変えないための印。

finalがあると安全になる

次のようなclassがあるとします。

class Video {
  const Video({
    required this.title,
  });

  final String title;
}

この場合、title は一度入れたら変更できません。

void main() {
  final video = Video(
    title: 'FlutterでYouTube風UIを作る',
  );

  print(video.title);

  // video.title = '別のタイトル';
}

video.title = '別のタイトル'; のような変更はできません。

動画データを安全に扱うためには、このような「変更しない設計」が大切です。

もちろん、アプリによってはあとから変更したいデータもあります。

しかし、この教材では、まず「表示用の動画データは基本的にfinalで持つ」と考えます。

投稿日と動画時間を追加する

YouTube風の動画カードには、投稿日と動画時間も必要です。

完成に近い基本形は次の通りです。

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

  print(video.title);
  print(video.channelName);
  print(video.views);
  print(video.publishedAt);
  print(video.duration);
}

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

  final String title;
  final String channelName;
  final int views;
  final String publishedAt;
  final String duration;
}

これで、動画カードの基本情報がそろいました。

Video
├─ title
├─ channelName
├─ views
├─ publishedAt
└─ duration

この5つがあれば、シンプルな動画カードのテキスト部分は作れます。

画面に必要なデータからpropertyを考える

ここで、画面から逆算して考えます。

動画カードに次のように表示したいとします。

FlutterでYouTube風UIを作る
Code Studio
12.8万回視聴・2日前
12:34

この表示に必要なデータは、次の通りです。

表示したいもの	必要なproperty	型
FlutterでYouTube風UIを作る	title	String
Code Studio	channelName	String
12.8万回視聴	views	int
2日前	publishedAt	String
12:34	duration	String

ここで、少し不思議に感じるかもしれません。

画面には「12.8万回視聴」と表示したいのに、propertyでは views を 128000 という数字で持ちます。

これは、あとで表示用に変換するためです。

データとして持つ値：
128000

画面に表示する文字：
12.8万回視聴

この変換は、次の 3-5 の method で扱います。

categoryを追加する

完成アプリでは、サムネイル中央にカテゴリ名を表示しています。

たとえば、次のような文字です。

Flutter
Dart
UI Design
LIVE

そのため、Video に category を追加します。

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

  final String title;
  final String channelName;
  final int views;
  final String publishedAt;
  final String duration;
  final String category;
}

実際に動画データを作るときは、次のように書きます。

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

これで、動画がどのカテゴリなのかも持てるようになりました。

YouTube風アプリでは、この category をサムネイル中央の文字として使う予定です。

Video
├─ title
├─ channelName
├─ views
├─ publishedAt
├─ duration
└─ category

isLiveを追加する

完成アプリでは、ライブ配信中かどうかも表現します。

そのために、isLive というpropertyを追加します。

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;
}

isLive は bool 型です。

bool は、true か false のどちらかを持つ型です。

値	意味
true	ライブ配信中
false	通常動画

たとえば、通常動画なら次のようにします。

isLive: false

ライブ配信なら、次のようにします。

isLive: true

この値を使うことで、画面表示を切り替えられます。

isLiveがtrue
↓
「ライブ配信中」と表示

isLiveがfalse
↓
「12.8万回視聴・2日前」と表示

このように、bool は「表示を切り替えるためのスイッチ」としてよく使われます。

Colorを追加する

完成アプリでは、サムネイル背景色とチャンネルアイコン色も動画ごとに変えています。

そのため、thumbnailColor と channelColor を追加します。

final Color thumbnailColor;
final Color channelColor;

ただし、Color はFlutterの型です。

Dartだけのコードではなく、Flutterで使うときに登場します。

完成形に近い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.thumbnailColor,
    required this.channelColor,
    required this.isLive,
  });

  final String title;
  final String channelName;
  final int views;
  final String publishedAt;
  final String duration;
  final String category;
  final Color thumbnailColor;
  final Color channelColor;
  final bool isLive;
}

thumbnailColor は、サムネイルの背景に使います。

channelColor は、チャンネルアイコンの背景に使います。

property	使う場所
thumbnailColor	サムネイル背景
channelColor	チャンネルアイコン背景

たとえば、完成アプリでは次のような値を入れます。

thumbnailColor: Color(0xFF121212),
channelColor: Color(0xFFE53935),

最初は数字の意味まで覚えなくて大丈夫です。

ここでは、「色もデータとして持てる」と理解してください。

完成形のVideo class

ここまでで、完成アプリに近い Video classができました。

Flutterで使う場合は、先頭に次のimportが必要です。

import 'package:flutter/material.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.thumbnailColor,
    required this.channelColor,
    required this.isLive,
  });

  final String title;
  final String channelName;
  final int views;
  final String publishedAt;
  final String duration;
  final String category;
  final Color thumbnailColor;
  final Color channelColor;
  final bool isLive;
}

このclassは、YouTube風動画カードを作るために必要なデータをまとめています。

Video
├─ title
├─ channelName
├─ views
├─ publishedAt
├─ duration
├─ category
├─ thumbnailColor
├─ channelColor
└─ isLive

実際にVideoを作る

完成形の Video classを使うと、動画データを次のように作れます。

const video = Video(
  title: 'FlutterでYouTube風UIを作る｜ListViewとCardの実践入門',
  channelName: 'Code Studio',
  views: 128000,
  publishedAt: '2日前',
  duration: '12:34',
  category: 'Flutter',
  thumbnailColor: Color(0xFF121212),
  channelColor: Color(0xFFE53935),
  isLive: false,
);

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

property	値
title	FlutterでYouTube風UIを作る｜ListViewとCardの実践入門
channelName	Code Studio
views	128000
publishedAt	2日前
duration	12:34
category	Flutter
thumbnailColor	Color(0xFF121212)
channelColor	Color(0xFFE53935)
isLive	false

このように、constructorに渡した値が、それぞれのpropertyに入ります。

constructorとpropertyの対応を見る

constructorとpropertyは、対応しています。

const Video({
  required this.title,
  required this.channelName,
  required this.views,
});

final String title;
final String channelName;
final int views;

対応関係は次の通りです。

constructorで受け取る値	対応するproperty
required this.title	final String title
required this.channelName	final String channelName
required this.views	final int views

つまり、constructorで「値を受け取る」。

propertyで「その値を持っておく」。

この2つがセットです。

constructor：
値を受け取る入口

property：
受け取った値を持っておく場所

なぜconstructorが必要なのか

constructorがないと、Video を作るときに必要な値を渡せません。

たとえば、動画ごとにタイトルや再生回数は違います。

動画1：
title = FlutterでYouTube風UIを作る
views = 128000

動画2：
title = DartのListとMapを解説
views = 8500

constructorがあるから、動画ごとに違う値を渡せます。

const video1 = Video(
  title: 'FlutterでYouTube風UIを作る',
  channelName: 'Code Studio',
  views: 128000,
  publishedAt: '2日前',
  duration: '12:34',
  category: 'Flutter',
  thumbnailColor: Color(0xFF121212),
  channelColor: Color(0xFFE53935),
  isLive: false,
);

const video2 = Video(
  title: 'DartのListとMapを解説',
  channelName: 'App School',
  views: 8500,
  publishedAt: '5日前',
  duration: '08:21',
  category: 'Dart',
  thumbnailColor: Color(0xFF1E3A8A),
  channelColor: Color(0xFF1565C0),
  isLive: false,
);

同じ Video classを使っていますが、中身の値は違います。

これがclassの便利なところです。

const constructorとは何か

完成アプリでは、constructorに const がついています。

const Video({
  required this.title,
  required this.channelName,
  required this.views,
});

今は深く理解しなくても大丈夫です。

初心者向けには、次の理解で十分です。

constは、変わらない固定データとして扱えるときに使う。

今回の動画データは、アプリの中で最初から決まっている固定データです。

そのため、const Video(...) と書けます。

const video = Video(
  title: 'FlutterでYouTube風UIを作る',
  channelName: 'Code Studio',
  views: 128000,
);

ただし、最初のうちは const と final の細かい違いで止まらなくて大丈夫です。

まずは次のように覚えてください。

書き方	初心者向けの理解
final	一度入れたら変えない
const	最初から固定された値
const constructor	固定データを作れるconstructor

Dartだけで試す最小コード

まずは、Flutterを使わず、Dartだけでconstructorとpropertyを確認します。

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

  print(video.title);
  print(video.channelName);
  print(video.views);
  print(video.publishedAt);
  print(video.duration);
  print(video.category);
  print(video.isLive);
}

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;
}

このコードでは、Color を使っていません。

そのため、DartPadのDart環境でも試しやすいです。

出力結果は次のようになります。

FlutterでYouTube風UIを作る
Code Studio
128000
2日前
12:34
Flutter
false

Flutterで使うVideo class

FlutterのUIに近づける場合は、Color も含めたclassにします。

import 'package:flutter/material.dart';

void main() {
  const video = Video(
    title: 'FlutterでYouTube風UIを作る',
    channelName: 'Code Studio',
    views: 128000,
    publishedAt: '2日前',
    duration: '12:34',
    category: 'Flutter',
    thumbnailColor: Color(0xFF121212),
    channelColor: Color(0xFFE53935),
    isLive: false,
  );

  print(video.title);
  print(video.thumbnailColor);
}

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

  final String title;
  final String channelName;
  final int views;
  final String publishedAt;
  final String duration;
  final String category;
  final Color thumbnailColor;
  final Color channelColor;
  final bool isLive;
}

このコードは、Flutter環境で実行します。

Color はFlutterの型なので、import 'package:flutter/material.dart'; が必要です。

完成アプリのどこにつながるか

完成アプリでは、動画一覧データとして const videos = [...] を使っています。

const videos = [
  Video(
    title: 'FlutterでYouTube風UIを作る｜ListViewとCardの実践入門',
    channelName: 'Code Studio',
    views: 128000,
    publishedAt: '2日前',
    duration: '12:34',
    category: 'Flutter',
    thumbnailColor: Color(0xFF121212),
    channelColor: Color(0xFFE53935),
    isLive: false,
  ),
];

この Video(...) は、constructorを使って動画データを作っている部分です。

そして、title や views などはpropertyです。

完成アプリの中では、これらのpropertyがUIに使われます。

property	使われるWidget
title	VideoInfo内のText
channelName	VideoInfo内のText
views	metaLabelを作る元データ
publishedAt	metaLabelを作る元データ
duration	Thumbnail右下の時間表示
category	Thumbnail中央のText
thumbnailColor	Thumbnail背景
channelColor	ChannelAvatar背景
isLive	ライブ表示の切り替え

このように、propertyは画面表示の材料です。

UI側ではどう使われるか

完成アプリでは、VideoInfo の中で次のように使われています。

Text(video.title)

これは、動画タイトルを表示しています。

Text(video.channelName)

これは、チャンネル名を表示しています。

また、サムネイルでは次のように使われています。

color: video.thumbnailColor

これは、動画ごとのサムネイル色を使っています。

つまり、Video classで定義したpropertyは、UIのあちこちで使われます。

Videoのproperty
↓
Widgetに渡される
↓
画面に表示される

手を動かす練習1：propertyを読む

次のclassを見て、Video が持っているpropertyを書き出してください。

class Video {
  const Video({
    required this.title,
    required this.views,
  });

  final String title;
  final int views;
}

解答例

property	型	意味
title	String	動画タイトル
views	int	再生回数

手を動かす練習2：constructorに値を渡す

次の Video classを使って、動画データを1つ作ってください。

class Video {
  const Video({
    required this.title,
    required this.channelName,
  });

  final String title;
  final String channelName;
}

条件です。

title：
Dartのconstructor入門

channelName：
App School

解答例

void main() {
  final video = Video(
    title: 'Dartのconstructor入門',
    channelName: 'App School',
  );

  print(video.title);
  print(video.channelName);
}

class Video {
  const Video({
    required this.title,
    required this.channelName,
  });

  final String title;
  final String channelName;
}

手を動かす練習3：propertyを追加する

次のclassに、再生回数 views を追加してください。

変更前です。

class Video {
  const Video({
    required this.title,
    required this.channelName,
  });

  final String title;
  final String channelName;
}

解答例

class Video {
  const Video({
    required this.title,
    required this.channelName,
    required this.views,
  });

  final String title;
  final String channelName;
  final int views;
}

constructorにも required this.views を追加します。

propertyにも final int views; を追加します。

この2つはセットで考えます。

手を動かす練習4：動画カード用の基本classを完成させる

title、channelName、views、publishedAt、duration を持つ Video classを書いてください。

解答例

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

  print(video.title);
  print(video.channelName);
  print(video.views);
  print(video.publishedAt);
  print(video.duration);
}

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

  final String title;
  final String channelName;
  final int views;
  final String publishedAt;
  final String duration;
}

手を動かす練習5：完成形に近いVideo classを書く

Flutter環境で、次のpropertyを持つ Video classを書いてください。

title
channelName
views
publishedAt
duration
category
thumbnailColor
channelColor
isLive

解答例

import 'package:flutter/material.dart';

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

  final String title;
  final String channelName;
  final int views;
  final String publishedAt;
  final String duration;
  final String category;
  final Color thumbnailColor;
  final Color channelColor;
  final bool isLive;
}

よくあるつまずき1：constructorとpropertyの片方だけ書いてしまう

初心者がよくやるミスです。

たとえば、propertyだけ追加して、constructorに追加し忘れることがあります。

class Video {
  const Video({
    required this.title,
  });

  final String title;
  final int views;
}

この場合、views というpropertyはありますが、constructorで値を受け取っていません。

基本的には、必要なpropertyを追加したら、constructorにも追加します。

class Video {
  const Video({
    required this.title,
    required this.views,
  });

  final String title;
  final int views;
}

このように、constructorとpropertyはセットで考えます。

よくあるつまずき2：型を間違える

たとえば、再生回数は数字なので int が自然です。

final int views;

しかし、次のように String にしてしまうと、数字として扱いにくくなります。

final String views;

表示するだけなら文字でもできることがあります。

しかし、あとで「10000以上かどうか」を判定したいなら、数字として持つほうが便利です。

データ	おすすめの型	理由
title	String	文字だから
channelName	String	文字だから
views	int	数字として比較したいから
publishedAt	String	「2日前」のような表示用文字だから
duration	String	「12:34」のような表示用文字だから
isLive	bool	true / falseで切り替えたいから

よくあるつまずき3：durationをintにしようとする

動画時間の 12:34 は数字のように見えます。

しかし、この教材では String として扱います。

final String duration;

理由は、今回は計算するためではなく、画面に表示するために使うからです。

12:34
08:21
15:10
LIVE

このような値は、表示用の文字として持つと分かりやすいです。

よくあるつまずき4：ColorをDartだけで使おうとする

Color はFlutterの型です。

そのため、Dartだけの環境で次のコードを書くと動きません。

final Color thumbnailColor;

Flutter環境では、次のimportが必要です。

import 'package:flutter/material.dart';

Dartだけでconstructorとpropertyを練習したい場合は、まず Color を使わない形で練習すると詰まりにくいです。

class Video {
  const Video({
    required this.title,
    required this.category,
    required this.isLive,
  });

  final String title;
  final String category;
  final bool isLive;
}

Flutterに進んだら、Color を追加すれば大丈夫です。

よくあるつまずき5：requiredをつけ忘れる

constructorで値を必ず渡してほしい場合は、required をつけます。

const Video({
  required this.title,
  required this.channelName,
});

required をつけることで、動画データを作るときに必要な情報の入れ忘れを防げます。

final video = Video(
  title: 'Flutter入門',
  channelName: 'Code Studio',
);

YouTube風アプリでは、動画タイトルやチャンネル名がないとカードとして困ります。

そのため、基本的なpropertyには required をつけておくと安全です。

この節で覚える対応表

用語	意味	YouTube風アプリでの例
property	classが持つデータ	title、views、duration
constructor	データを作る入口	Video(...)
required	必ず渡す値	required this.title
final	あとから変更しない値	final String title;
String	文字列	動画タイトル
int	整数	再生回数
bool	true / false	ライブ中かどうか
Color	Flutterの色	サムネイル色

確認問題1

propertyとは何ですか。

答え

classが持つデータの項目です。

YouTube風アプリでは、title、channelName、views などがpropertyです。

確認問題2

constructorとは何ですか。

答え

データを作るときに、必要な値を受け取る入口です。

Video(...) のように書いて、動画データを作るときに使います。

確認問題3

次のコードで、propertyを2つ答えてください。

class Video {
  const Video({
    required this.title,
    required this.views,
  });

  final String title;
  final int views;
}

答え

title と views です。

確認問題4

required this.title は何を意味しますか。

答え

Video を作るときに、title を必ず渡してください、という意味です。

渡された値は、この Video の title に入ります。

確認問題5

final int views; は何を意味しますか。

答え

Video が views という整数データを持つ、という意味です。

final がついているので、作ったあとに基本的に変更しない値として扱います。

この節のまとめ

この節では、constructor と property を使って、動画データの初期値と持ち物を決める方法を学びました。

propertyは、Video が持つ情報です。

constructorは、Video を作るときに値を受け取る入口です。

YouTube風アプリでは、動画カードを表示するために、title、channelName、views、publishedAt、duration、category、thumbnailColor、channelColor、isLive などのpropertyが必要になります。

この節のポイント
- propertyは、classが持つデータである
- constructorは、データを作る入口である
- requiredは、必ず渡す値を表す
- finalは、あとから変更しない値を表す
- 画面に表示したいものから逆算してpropertyを決める
- YouTube風アプリでは、Video classが動画カードの元データになる

この節のポイント

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

画面に表示したい情報をpropertyとして持たせ、constructorで初期値を受け取る。

次の 3-5 では、method を使って、動画データに表示用のふるまいを持たせます。

たとえば、128000 という再生回数を、12.8万回視聴 のような画面用テキストに変える方法を学びます。