アプリの入口を理解しようは医療関係者向けだけの内容ですか。

医療分野の例が含まれる場合もありますが、医療関係者だけに限定した内容ではありません。生成AI、AI活用、DX、業務改善、プロトタイプ開発など、一般的なAI学習の事例として読める内容です。

AI初心者でも読めますか。

はい。AIをこれから学ぶ方、数学が苦手な方、仕事でAIを使いたい方にも読み進めやすいように、教材の章と節の流れに沿って整理しています。

サムネイル画像は必ず表示されますか。

はい。教材にcoverUrlが設定されている場合はその画像を表示し、未設定の場合は代替サムネイル画像を表示します。

Flutterアプリケーション開発概論のほかの章も読めますか。

はい。教材トップから章立てを確認でき、前後の節へもページ下部のナビゲーションから移動できます。

アプリの入口を理解しよう | 人生ゲームを作る。サイコロ処理・イベント分岐・プレイヤー管理・データ設計・アニメーション | Flutterアプリケーション開発概論・生成AIオンライン教材

項目	内容
教材名	Flutterアプリケーション開発概論
章	人生ゲームを作る。サイコロ処理・イベント分岐・プレイヤー管理・データ設計・アニメーション
節	アプリの入口を理解しよう
カテゴリ	Flutter / iOS / Android / MacOS / Windows / 基礎から学ぶ / 開発 / アプリ開発
学習内容	生成AI、AI活用、DX、業務改善を実践しながら理解するための教材です。

忙しい方はこちら

この章で見る場所は、main.dart の一番上です。

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

ここが、Flutterアプリのスタート地点です。

流れはこうです。

main()
↓
runApp()
↓
TimelineLifeGameApp
↓
MaterialApp
↓
TimelineLifeGamePage
↓
人生ゲーム画面が表示される

まずは、これだけ分かればOKです。

この章でやること

この章では、アプリがどこから始まっているのかを確認します。

Flutterアプリは、必ず main() から始まります。

今回の人生ゲームアプリも同じです。

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

難しく考えなくて大丈夫です。

main() は、アプリの電源ボタンのようなものです。

今日のゴール

この章のゴールは、次の3つです。

1. main() がアプリのスタート地点だと分かる
2. runApp() が画面を起動する命令だと分かる
3. MaterialApp がアプリ全体の設定だと分かる

この3つが分かれば、この章はクリアです。

Step 1：main.dartの一番上を見る

lib/main.dart を開きます。

最初の方に、このコードがあります。

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

これは、アプリを起動するためのコードです。

Flutterは、まず main() を探します。

そして、その中に書かれている処理を実行します。

Step 2：main()とは？

main() は、アプリの最初に動く場所です。

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

イメージはこうです。

アプリを開く
↓
main() が呼ばれる
↓
runApp() が実行される
↓
画面が表示される

最初は、

main() = アプリの入口

と覚えればOKです。

Step 3：runApp()とは？

runApp() は、Flutterに対して、

このWidgetを画面に表示してください

とお願いする命令です。

今回はこちらです。

runApp(const TimelineLifeGameApp());

つまり、

TimelineLifeGameAppをアプリとして起動してね

という意味です。

Step 4：TimelineLifeGameAppを見る

次に、このクラスを見ます。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Timeline Life Game',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: AppColors.red,
          brightness: Brightness.light,
        ),
        scaffoldBackgroundColor: AppColors.white,
        useMaterial3: true,
      ),
      home: const TimelineLifeGamePage(),
    );
  }
}

長く見えますが、役割はシンプルです。

アプリ名を決める
デザインを決める
最初に表示する画面を決める

Step 5：MaterialAppとは？

MaterialApp は、Flutterアプリ全体の設定をまとめる箱です。

今回のコードでは、ここです。

return MaterialApp(
  title: 'Timeline Life Game',
  debugShowCheckedModeBanner: false,
  theme: ThemeData(...),
  home: const TimelineLifeGamePage(),
);

特に大事なのは、この4つです。

項目	役割
`title`	アプリ名
`debugShowCheckedModeBanner`	右上のDEBUG表示を消す
`theme`	色や文字のデザイン
`home`	最初に表示する画面

Step 6：titleを確認する

ここで、アプリ名を設定しています。

title: 'Timeline Life Game',

これは、画面上に大きく出るタイトルではありません。

アプリ内部の名前として使われます。

自分用に変えるなら、例えばこうです。

title: '人生ゲームアプリ',

最初は変えなくても大丈夫です。

Step 7：DEBUG表示を消している

次のコードがあります。

debugShowCheckedModeBanner: false,

これを入れると、画面右上の赤い DEBUG 表示が消えます。

教材や発表で見せるときは、消えていた方が見やすいです。

もし true にすると、開発中の目印として DEBUG が表示されます。

debugShowCheckedModeBanner: true,

基本は false のままでOKです。

Step 8：themeで見た目を決める

次の部分で、アプリ全体の見た目を決めています。

theme: ThemeData(
  colorScheme: ColorScheme.fromSeed(
    seedColor: AppColors.red,
    brightness: Brightness.light,
  ),
  scaffoldBackgroundColor: AppColors.white,
  useMaterial3: true,
),

ここでは、主に次の設定をしています。

赤色をメインカラーにする
背景を白にする
Material 3のデザインを使う

色の詳しい変更は、次の章でやります。

この章では、

theme = アプリ全体の見た目設定

と分かればOKです。

Step 9：homeが最初の画面

一番大事なのはここです。

home: const TimelineLifeGamePage(),

これは、

アプリを開いたら、TimelineLifeGamePageを表示してください

という意味です。

つまり、人生ゲームの本体画面は TimelineLifeGamePage です。

Step 10：TimelineLifeGamePageがゲーム画面

次に、このクラスがあります。

class TimelineLifeGamePage extends StatefulWidget {
  const TimelineLifeGamePage({super.key});

  @override
  State<TimelineLifeGamePage> createState() => _TimelineLifeGamePageState();
}

これは、人生ゲームの画面です。

StatefulWidget になっている理由は、ゲーム中に画面が変わるからです。

たとえば、

サイコロの数字が変わる
プレイヤーの位置が変わる
現金が増える
順位が変わる
イベント画面が出る

こうした変化があるので、StatefulWidget を使っています。

Step 11：StatelessWidgetとStatefulWidgetの違い

今回、2種類のWidgetが出てきます。

種類	使う場面
`StatelessWidget`	ほとんど変化しない画面
`StatefulWidget`	状態が変わる画面

今回の使い分けです。

TimelineLifeGameApp
↓
アプリ全体の設定なので StatelessWidget

TimelineLifeGamePage
↓
ゲーム中に状態が変わるので StatefulWidget

最初はこの理解で大丈夫です。

Step 12：アプリ起動の流れをもう一度見る

今回の起動の流れはこうです。

1. main() が動く
2. runApp() が呼ばれる
3. TimelineLifeGameApp が起動する
4. MaterialApp が作られる
5. home に TimelineLifeGamePage が指定される
6. 人生ゲーム画面が表示される

コードで見ると、こうです。

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

home: const TimelineLifeGamePage(),

この2か所がつながっています。

触ってみよう：アプリ名を少し変える

試しに、title を変更してみましょう。

変更前です。

title: 'Timeline Life Game',

変更後です。

title: 'My Life Game',

保存したら、ホットリスタートします。

または、もう一度起動します。

flutter run

画面が壊れなければOKです。

注意：画面上の「人生ゲーム」は別の場所

title を変えても、画面上の「人生ゲーム」という表示は変わらない場合があります。

画面上の文字はこちらで作っています。

const Text(
  '人生ゲーム',
)

つまり、名前には2種類あります。

場所	役割
`MaterialApp` の `title`	アプリ内部の名前
`Text('人生ゲーム')`	画面に表示される文字

画面の文字変更は、後の章で扱います。

よくあるエラーと直し方

1. main()を消してしまった

エラーになることがあります。

No main method found

この場合は、これを戻します。

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

main() は消さないようにしましょう。

2. homeを書き間違えた

例えば、クラス名を間違えるとエラーになります。

悪い例です。

home: const TimelineLifeGame(),

正しくはこちらです。

home: const TimelineLifeGamePage(),

クラス名は、1文字違うだけでもエラーになります。

3. constでエラーが出る

const をつける場所を間違えると、エラーになることがあります。

最初は、教材のコード通りにしておけばOKです。

分からない場合は、いったん const を消すと動くこともあります。

home: TimelineLifeGamePage(),

ただし、基本は元のコードのままで大丈夫です。

この章で覚えること

この章で覚えることは、3つだけです。

1. main() がアプリの入口
2. runApp() がアプリを起動する
3. home に最初の画面を書く

これだけで十分です。

やる気を維持するコツ

アプリの入口が分かると、コード全体が少し怖くなくなります。

長いコードも、最初に動く場所はここだけです。

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

まず入口を見つける。

次に、どの画面が表示されるかを見る。

この順番で読むと、長いコードでも迷いにくくなります。

チェックリスト

□ main.dartを開いた
□ main()を見つけた
□ runApp()を見つけた
□ TimelineLifeGameAppを見つけた
□ MaterialAppを見つけた
□ titleの役割を確認した
□ themeの役割を確認した
□ homeの役割を確認した
□ TimelineLifeGamePageがゲーム画面だと分かった
□ StatefulWidgetを使う理由が少し分かった

まとめ

この章では、アプリの入口を確認しました。

Flutterアプリは、main() から始まります。

runApp() でアプリを起動し、MaterialApp でアプリ全体の設定をします。

そして、home に指定した TimelineLifeGamePage が、最初に表示される人生ゲーム画面です。

次の章では、AppColors と ThemeData を見ながら、色と見た目を変えていきます。

アプリの入口を理解しよう

この節で学べること

目次

ここから