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

この節で学ぶこと

この節では、TikTok風のショート動画アプリを作る前に、まず「画面をどう見ればよいのか」を学びます。

いきなりコードを書き始めるのではなく、完成画面を観察し、画面を小さな部品に分けて考えます。

今回作っていくアプリは、次のようなTikTok風の動画アプリです。

TikTok風ショート動画アプリ
├─ 縦にスワイプすると動画が切り替わる
├─ 動画が全画面で再生される
├─ 右側にいいね・コメント・保存・共有ボタンが並ぶ
├─ いいねを押すとハートに色がつく
├─ コメントボタンを押すとコメント入力画面が出る
├─ 下部にユーザー名・説明文・音源情報が表示される
└─ 動画が無限に続いているように見える

この章から読み始める人でも大丈夫です。

FlutterやDartにまだ慣れていない人でも、「アプリの画面はどうやって作られているのか」を、順番に理解できるように進めます。

まず完成形をイメージする

最終的には、DartPadで次のようなアプリを作ります。

実際には、背景には動画が流れます。

右側にボタンが縦に並びます。

下にはユーザー名、説明文、音源情報が表示されます。

このような画面は、一見すると複雑に見えます。

しかし、Flutterでは画面を小さな部品に分けて作るため、分解して考えると理解しやすくなります。

アプリ開発で大切な考え方

初心者がアプリを作るとき、よくある失敗があります。

それは、完成画面を見て、いきなりすべてをコードにしようとすることです。

完成画面を見る
↓
難しそうに見える
↓
どこから書けばよいか分からない
↓
手が止まる

しかし、アプリ開発では、いきなり全部を作る必要はありません。

大切なのは、次の順番で考えることです。

1. 完成画面を見る
2. 画面を部品に分ける
3. 必要なデータを考える
4. 小さな部品から作る
5. 部品を組み合わせる
6. タップなどの動きを追加する
7. 最後に全体を整える

この流れは、TikTok風アプリだけではありません。

YouTube風アプリ、Instagram風アプリ、商品一覧アプリ、予約アプリ、ニュースアプリでも同じです。

つまり、今回学ぶのは「TikTokっぽい画面を作る方法」だけではなく、どんなアプリでも使える画面づくりの考え方です。

新しい言葉：UIとは何か

ここで、新しい言葉が出てきます。

UI です。

UIとは、User Interfaceの略です。

難しく聞こえますが、初心者向けには次のように理解すれば大丈夫です。

UI = ユーザーが見る画面や、操作する部分

たとえば、TikTok風アプリでは、次のものがUIです。

UIの例	役割
動画が表示される部分	コンテンツを見る
いいねボタン	好きだと伝える
コメントボタン	コメント欄を開く
保存ボタン	後で見られるようにする
共有ボタン	他の人に送る
ユーザー名	投稿者を示す
キャプション	動画の説明を表示する

つまり、画面に見えているもの、ユーザーが触れるものは、ほとんどUIです。

FlutterではUIをWidgetで作る

Flutterでは、画面に表示されるものを Widget と呼びます。

Widget は、画面を作る部品です。

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

FlutterのWidget	役割
Text	文字を表示する
Icon	アイコンを表示する
Container	箱を作る
Row	横に並べる
Column	縦に並べる
Stack	重ねて表示する
PageView	ページをスワイプで切り替える

TikTok風アプリも、これらのWidgetを組み合わせて作ります。

TikTok風アプリ
├─ Text
├─ Icon
├─ Container
├─ Row
├─ Column
├─ Stack
├─ PageView
└─ VideoPlayer

最初は、すべてのWidgetを完璧に覚える必要はありません。

「Flutterの画面はWidgetという部品を組み合わせて作る」と理解できれば大丈夫です。

TikTok風アプリを部品に分ける

では、今回作るTikTok風アプリを部品に分けてみます。

完成画面は、次のように分解できます。

ShortVideoPage
├─ VideoBackground
├─ VideoGradientOverlay
├─ TopNavigation
├─ PageIndicator
├─ RightActionBar
└─ BottomVideoInfo

それぞれの役割は、次の通りです。

部品名	役割
VideoBackground	背景の動画を表示する
VideoGradientOverlay	文字を読みやすくするための黒いグラデーション
TopNavigation	上部の「フォロー中」「おすすめ」「検索」
PageIndicator	今どの動画を見ているかの表示
RightActionBar	いいね・コメント・保存・共有ボタン
BottomVideoInfo	ユーザー名・説明文・音源情報

このように、1つの画面を小さな部品に分けて考えます。

これを 部品化 と呼びます。

新しい言葉：部品化とは何か

部品化とは、画面を小さなまとまりに分けることです。

たとえば、右側のボタン全部を1つの部品として考えます。

RightActionBar
├─ プロフィールボタン
├─ いいねボタン
├─ コメントボタン
├─ 保存ボタン
├─ 共有ボタン
└─ 音源ディスク

さらに、いいねボタンやコメントボタンは、同じ形をしています。

アイコン
数字

なので、ボタン1つ分を ActionButton として作ることができます。

ActionButton
├─ Icon
└─ Text

このように、共通している形を部品にすると、コードが読みやすくなります。

また、同じ部品を何度も使えるようになります。

なぜ部品化するのか

もし、すべてを1つの場所に書くとどうなるでしょうか。

画面全体のコード
├─ 動画
├─ 上部ナビ
├─ いいねボタン
├─ コメントボタン
├─ 保存ボタン
├─ 共有ボタン
├─ コメント欄
├─ 入力欄
├─ 下部テキスト
└─ 音源表示

これを全部1つのclassに書くと、コードが長くなりすぎます。

どこに何が書いてあるのか分かりにくくなります。

そこで、役割ごとに分けます。

動画を表示する部品
ボタンを並べる部品
コメント欄の部品
下部情報の部品

こうすることで、1つひとつのコードが読みやすくなります。

Flutterでは、画面を部品に分けることがとても大切です。

今回の完成コードの全体像

今回の最終コードには、次のようなclassが出てきます。

TikTokLikeVideoApp
ShortVideo
ShortVideoHomePage
ShortVideoPage
VideoBackground
VideoGradientOverlay
TopNavigation
RightActionBar
ProfileButton
ActionButton
SpinningDisc
BottomVideoInfo
PageIndicator
CommentSheet
CommentTile
CommentInputBar

初めて見ると多く感じるかもしれません。

しかし、1つずつ見ると、それぞれ役割があります。

class名	役割
TikTokLikeVideoApp	アプリ全体の入口
ShortVideo	動画1本分のデータ
ShortVideoHomePage	縦スクロール全体を管理する画面
ShortVideoPage	1本分の動画ページ
VideoBackground	動画背景
RightActionBar	右側ボタン一覧
ActionButton	いいね・コメントなどのボタン
CommentSheet	コメント入力画面
BottomVideoInfo	下部の投稿情報

この章では、これらを最初から一気に書くのではなく、順番に作っていきます。

TikTok風アプリのデータを考える

画面を作るには、表示するデータが必要です。

今回のアプリでは、動画1本分の情報を ShortVideo というclassで持ちます。

class ShortVideo {
  const ShortVideo({
    required this.videoUrl,
    required this.userName,
    required this.caption,
    required this.musicTitle,
    required this.likes,
    required this.comments,
    required this.saves,
    required this.shares,
    required this.avatarColor,
    required this.categoryLabel,
  });

  final String videoUrl;
  final String userName;
  final String caption;
  final String musicTitle;
  final int likes;
  final int comments;
  final int saves;
  final int shares;
  final Color avatarColor;
  final String categoryLabel;
}

この時点で、すべてを理解できなくても大丈夫です。

ここでは、次のことだけ分かれば十分です。

ShortVideoは、動画1本分の情報をまとめるclassである。

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

情報	例
動画URL	butterfly.mp4
ユーザー名	pet_cafe_diary
説明文	小さな命の動きは...
音源名	Healing Cafe Sound
いいね数	12800
コメント数	324
保存数	1204
共有数	856
カテゴリ	PET

これらをバラバラに持つのではなく、ShortVideo としてまとめます。

新しい言葉：データとは何か

データとは、画面に表示する情報の元になるものです。

たとえば、画面に次のように表示されているとします。

@pet_cafe_diary
小さな命の動きは、見ているだけで少しやさしい気持ちになる。
1.3万

この表示の裏側には、次のようなデータがあります。

userName: pet_cafe_diary
caption: 小さな命の動きは...
likes: 12800

画面は、データを見やすく並べたものです。

つまり、アプリ開発では次の流れが重要です。

データを作る
↓
データをWidgetに渡す
↓
Widgetが画面に表示する

TikTok風UIの構造を図で見る

今回のアプリ全体は、次のような構造になります。

TikTokLikeVideoApp
└─ MaterialApp
   └─ ShortVideoHomePage
      └─ PageView.builder
         └─ ShortVideoPage
            ├─ VideoBackground
            ├─ VideoGradientOverlay
            ├─ TopNavigation
            ├─ PageIndicator
            ├─ RightActionBar
            │  ├─ ProfileButton
            │  ├─ ActionButton いいね
            │  ├─ ActionButton コメント
            │  ├─ ActionButton 保存
            │  ├─ ActionButton 共有
            │  └─ SpinningDisc
            └─ BottomVideoInfo

コメントボタンを押すと、別の画面が下から出ます。

CommentSheet
├─ コメント件数
├─ コメント一覧
│  └─ CommentTile
└─ CommentInputBar

このように、アプリは小さな部品の組み合わせでできています。

今回作るアプリの機能

この章で作るアプリには、次の機能があります。

機能	使う主な考え方
動画を再生する	video_player
縦にスワイプする	PageView.builder
無限スクロール風にする	%
いいねを押す	setState
ハートに色をつける	状態による表示切り替え
コメント欄を開く	showModalBottomSheet
コメントを入力する	TextField
保存・共有状態を変える	Set<int>
UIを部品に分ける	Widget分割

この章のポイントは、機能を一気に作らないことです。

1つずつ、小さく作ります。

まず土台
↓
動画表示
↓
縦スワイプ
↓
右側ボタン
↓
状態変更
↓
コメント欄
↓
完成

この順番で作ることで、初心者でも理解しながら進められます。

最初に覚える全体の流れ

この章では、次の流れでアプリを作ります。

1. 画面を観察する
2. 部品に分ける
3. データを設計する
4. 動画を表示する
5. 縦スワイプを作る
6. 無限ループ風にする
7. ボタンを作る
8. タップしたら状態を変える
9. コメント入力画面を作る
10. 全体を整理する

この流れは、TikTok風アプリだけでなく、どんなアプリでも使えます。

たとえば、商品一覧アプリでも同じです。

商品一覧アプリ
├─ 商品データを作る
├─ 商品カードを作る
├─ ListViewで並べる
├─ お気に入り状態を作る
└─ 詳細画面を出す

予約アプリでも同じです。

予約アプリ
├─ 予約データを作る
├─ 予約カードを作る
├─ 日付ごとに並べる
├─ 選択状態を作る
└─ 入力画面を出す

つまり、アプリが変わっても、考え方は共通しています。

この節で手を動かす最小コード

ここでは、まずFlutterアプリの最小構成を書いてみます。

まだTikTok風UIにはしません。

最初は、黒い画面に文字を表示するだけです。

DartPadに次のコードを貼り付けてください。

import 'package:flutter/material.dart';

void main() {
  runApp(const TikTokLikeVideoApp());
}

class TikTokLikeVideoApp extends StatelessWidget {
  const TikTokLikeVideoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ShortVideoHomePage(),
    );
  }
}

class ShortVideoHomePage extends StatelessWidget {
  const ShortVideoHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Text(
          'TikTok風アプリを作っていきます',
          style: TextStyle(
            color: Colors.white,
            fontSize: 22,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

コードの解説

import

import 'package:flutter/material.dart';

これは、Flutterの基本的なWidgetを使うための読み込みです。

Text、Scaffold、MaterialApp、Colors などを使うために必要です。

main

void main() {
  runApp(const TikTokLikeVideoApp());
}

main は、Dartプログラムのスタート地点です。

Flutterアプリでは、ここからアプリを起動します。

runApp は、「このWidgetをアプリとして表示してください」という命令です。

TikTokLikeVideoApp

class TikTokLikeVideoApp extends StatelessWidget {
  const TikTokLikeVideoApp({super.key});

これは、アプリ全体の入口になるWidgetです。

StatelessWidget は、状態を持たないWidgetです。

まだ、いいねやコメントのように変化するものは扱っていないので、ここでは StatelessWidget を使っています。

MaterialApp

return const MaterialApp(
  debugShowCheckedModeBanner: false,
  home: ShortVideoHomePage(),
);

MaterialApp は、Flutterアプリ全体の基本設定です。

debugShowCheckedModeBanner: false は、右上のDEBUG表示を消す設定です。

home は、最初に表示する画面です。

ここでは、ShortVideoHomePage を表示しています。

Scaffold

return const Scaffold(
  backgroundColor: Colors.black,
  body: Center(
    child: Text(...),
  ),
);

Scaffold は、画面の土台です。

backgroundColor: Colors.black によって、背景を黒にしています。

TikTok風アプリは動画が主役なので、黒背景が合いやすいです。

Center

Center(
  child: Text(...),
)

Center は、中のWidgetを中央に配置します。

ここでは、文字を画面中央に置いています。

Text

Text(
  'TikTok風アプリを作っていきます',
)

Text は、文字を表示するWidgetです。

文字色、文字サイズ、太さなどを指定できます。

実行して確認すること

DartPadで実行すると、黒い画面の中央に次の文字が表示されます。

TikTok風アプリを作っていきます

まだ動画もボタンもありません。

しかし、これでFlutterアプリの土台ができました。

アプリ開発では、このように小さく始めます。

最初から完成形を作らない。
まず土台を作る。
次に部品を足していく。

この節の確認問題

確認問題1

UIとは何ですか。

答え

ユーザーが見る画面や、操作する部分のことです。

動画、ボタン、文字、コメント欄などがUIです。

確認問題2

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

答え

Widget と呼びます。

文字も、アイコンも、ボタンも、レイアウトもWidgetです。

確認問題3

TikTok風アプリの画面は、どのような部品に分けられますか。

答え

たとえば、次のように分けられます。

動画背景
上部ナビゲーション
右側アクションバー
下部投稿情報
コメント入力画面

確認問題4

なぜ画面を部品に分けるのですか。

答え

コードを読みやすくし、役割ごとに整理するためです。

また、同じ形の部品を再利用しやすくなります。

確認問題5

この章で一番大切な考え方は何ですか。

答え

アプリをいきなり全部作るのではなく、画面を観察し、部品に分け、データを設計し、小さく作って組み合わせていくことです。

この節のまとめ

この節では、TikTok風アプリを作る前に、画面をどう分解して考えるかを学びました。

TikTok風アプリは、一見すると複雑です。

しかし、分けて見ると、次の部品の組み合わせです。

TikTok風アプリ
├─ 動画背景
├─ 上部ナビ
├─ 右側アクションバー
├─ 下部投稿情報
└─ コメント入力画面

Flutterでは、これらをWidgetとして作っていきます。

最初に大切なのは、完成形を一気に作ろうとしないことです。

まず画面を観察します。

次に部品に分けます。

そして、1つずつコードにしていきます。

この節のポイント：
- UIとは、ユーザーが見る画面や操作する部分である
- Flutterの画面はWidgetでできている
- 複雑な画面も、小さな部品に分けると理解しやすい
- TikTok風アプリも、動画背景、ボタン、テキスト、コメント欄に分けられる
- アプリ開発では、毎回「観察→分解→設計→実装」の流れで考える

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

画面づくりは、いきなりコードを書くのではなく、画面を部品に分けて考えるところから始まる。

次の節では、Flutterの画面を作る基本である Widget について、もう少し丁寧に学びます。