Python プログラミング教室 予告

【実践講座2/14】FlutterでWebゲームを作って公開しよう！

今回の実践プログラミング講座では、
Flutterを使ってWebゲームを制作し、実際にインターネット上へ公開する体験を行います。

単なるゲーム制作ではありません。

✔ プロジェクト作成
✔ ビルド
✔ Gitによる履歴管理
✔ Firebase Hostingでの公開

という、実際のエンジニアが行っている流れを体験します。

🎯 今回のテーマ

  • 開発環境：VS Code
  • 管理方法：ローカルGit
  • 動作環境：Flutter Web
  • 公開先：Firebase Hosting

ゲームの内容そのものは、生成AIを活用して制作します。
今回は「コードを書くこと」よりも、

🧠 プロジェクトを扱う力
🧠 公開までの流れを理解する力
🧠 開発の全体像を知ること

を重視します。

🚀 なぜWeb公開までやるの？

多くの子ども向けプログラミングは

「作って終わり」

ですが、本講座では

「作って、ビルドして、公開する」

まで行います。

これにより、

  • アプリがどのように世の中に出るのか
  • 開発と公開は何が違うのか
  • Gitで履歴管理する意味

といった、実践的な視点を学びます。

💻 当日の流れ（概要）

  1. Flutter Web環境の確認
  2. プロジェクト作成
  3. Webで動作確認
  4. Gitで履歴管理
  5. Webビルド
  6. Firebase Hostingへ公開
  7. URLで動作確認

📋 授業用チェックリスト（Flutter Web × VS Code × ローカルGit × Firebase Hosting）

以下のチェックリストを使って、進捗を確認しながら進めます。

0) 事前準備

□ PCに VS Code が入っている
□ VS Codeに Flutter拡張 を入れた
□ Flutter SDK をインストール済み
□ flutter doctor を実行し、致命的エラーがない（赤が無いのが理想）
□ Git（ローカル） が使える（git --version で確認）
□ Node.js が入っている（Firebase CLIで必要）
□ FirebaseにログインできるGoogleアカウントがある

1) Flutter Web を使える状態にする

□ flutter config --enable-web を実行した
□ flutter devices で Chrome（またはWebデバイス）が表示される

2) Flutterプロジェクト作成（VS Code）

□ flutter create <プロジェクト名> を実行した　　※以下のフォルダで実行する。

C:\PJ\flutter−games\gamesC:\PJ\flutter-games\games


□ VS Codeで新しく作ったプロジェクトフォルダを開いた
□ flutter pub get を実行できた（通常は自動でもOK）

3) Webで起動確認

□ flutter run -d chrome が実行できた
□ ブラウザでアプリが表示された
□ 画面を更新しても致命的エラーが出ない


□ ここで生成AIに依頼して作ってもらったゲームのプログラムを配置　※ゲームの内容は何でもOK。先生はオセロを作ろうと思います。□ 再度 flutter run -d chrome を実行
□ ブラウザでアプリが表示された
□ 画面を更新しても致命的エラーが出ない

4) ローカルGitで履歴管理（GitHubなし）

□ git init を実行した
□ git status で変更が確認できる
□ 1回目のコミットをした（例：initial commit）
□ 変更→コミットの流れを1回以上できた
（例：git add . → git commit -m "..."）

5) Flutter Web ビルド

□ flutter build web を実行した
□ build/web フォルダが生成された
□ エラーなくビルドが完了した

6) Firebase Hosting の準備

□ Firebaseコンソールで プロジェクトを作成した
□ Firebase CLI をインストールした（firebase --version で確認）
□ firebase login でログインできた

7) Firebase Hosting 初期設定

□ プロジェクトのルートで firebase init hosting を実行した
□ 公開フォルダに build/web を指定した
□ SPA設定（「Yes」）を選んだ（Flutter Web向け）
□ firebase.json が生成された

8) Firebaseへデプロイ（公開）

□ firebase deploy を実行した
□ デプロイが成功した
□ 表示されたHosting URLにアクセスできた
□ スマホでもURLが開けた（できれば確認）

9) 変更→再公開の流れ（運用体験）

□ 何か変更を加えた（コードは生成AIでOK）
□ flutter build web をもう一度実行した
□ firebase deploy をもう一度実行した
□ 公開ページが更新されたことを確認できた
□ その変更をGitにコミットした（ローカルでOK）

10) 最終チェック（提出・完了）

□ プロジェクトフォルダ構成を説明できる（lib / web / buildなど）
□ 「ビルド」と「デプロイ」の違いを説明できる
□ ローカルGitのコミット履歴を見せられる（git log）
□ 公開URLを提出できる

🎓 この講座で身につく力

  • プロジェクト管理の基礎
  • Webアプリの公開プロセス理解
  • Gitの基本操作
  • エンジニア的思考の土台

ゲーム制作を通して、
「作る」から「世の中に出す」までを体験します。

🌟 次回予告

今回制作したゲームは、
次回、Firebaseを活用して

オンライン対戦型へ発展

させる予定です。

スタンドアローンからネットワークへ。
本格的なアプリ開発の第一歩になります。

ご参加お待ちしております！

-Python, プログラミング教室, 予告