Python × Flet でデータ分析ツールを作ろう！第 1 回：開発環境の準備と Flet の基本
こんにちは！こっしーです。
いつもご覧いただきありがとうございます。
実は最近、仕事で回帰分析モデルの作成に挑戦する機会があったんです。でも、僕は統計は学生時代に少しかじった程度の初心者で、専門用語もよくわからない状態でした。
ネット上にはさまざまな統計ソフトがあるのですが、多機能ゆえに初学者には何に手を出していいかわからず、困ってしまいました。そこで思いついたのが、アプリ構築を通じて Python や統計についての学習とモデルの構築を同時に進めるという方法です。
生成AIを使えばわからないことも教えてくれるし、ライブラリを使えば難しい計算式が分からなくても何となく形になるものができるんじゃないかと考えたわけです。
こういった生成AIを使ってコードを書くことをバイブコーディングというみたいです。
このシリーズでは、Python × Flet を使って、段階的に機能を実装していき、最終的には以下の機能を持つ本格的な回帰分析アプリを目指します：
- データ読み込み・前処理機能：CSV ファイルの読み込み、データ変換（対数変換、差分化）、標準化
- 探索的データ分析：相関分析、散布図、時系列プロット
- 回帰分析機能：単回帰、重回帰、変数選択
- 時系列分析：動的回帰分析
- モデル評価・比較：各種統計指標、モデル選択
素人があーでもないこーでもないと試行錯誤しながら制作しました。間違いや事実と異なる部分があってもご容赦ください。その際はコメント等でご指摘ただけると幸いです。
それでは本編にいきましょう！
第 1 回の目標
第 1 回では、開発環境の準備と Flet の基本に焦点を当てます。統計の知識は一切不要で、プログラミングの基礎から始めます。
今回学ぶこと
- 必要なライブラリのインストール方法
- プロジェクトのフォルダ構造の作り方
- Flet という UI フレームワークの基本
- 簡単なアプリの作成方法
今回作るもの
- 最小限の Flet アプリ
- 基本的な UI コンポーネント
- アプリの基本構造
統計初学者の視点から、一つずつ理解しながら進めていきましょう！
プロジェクト概要
開発するアプリの目的
今回開発するのは、経済指標データを対象とした回帰分析アプリです。でも、第 1 回では統計の話は一切しません！
まずは、初学者でも使いやすい UIを持つアプリを作ることを目標にします。具体的には以下の目的があります：
- 直感的な操作：ボタンを押すだけで操作できるシンプルなインターフェース
- 段階的な学習支援：各ステップで何をしているかを理解できる
- 実用的な機能：実際に使えるアプリの作成
- 可視化重視：数値だけでなく、グラフやチャートで結果を分かりやすく表示
使用する技術スタック
今回使用する技術は以下の通りです。難しいものは一切ありません：
メイン技術
- Python 3.x：プログラミング言語（既に知っている前提）
- Flet：UI フレームワーク（今回初めて学びます）
後で使う技術（第 1 回では触れません）
- Pandas：データフレーム操作
- NumPy：数値計算
- Scikit-learn：機械学習・統計分析
- SQLite：データベース
- Matplotlib/Seaborn：グラフ作成
第 1 回で学ぶのは Flet だけです！
開発環境の準備
必要なライブラリのインストール
まずは、Flet をインストールしましょう。これだけで第 1 回は十分です！
VSCode での Flet インストール
- VSCode を開く
- VSCode を起動します
- 新しいフォルダを作成するか、既存のフォルダを開きます
- ターミナルを開く
- メニューから「表示」→「ターミナル」を選択
- Flet をインストール
- ターミナルに以下のコマンドを入力して Enter を押します：
pip install flet- インストールの確認
- インストールが完了したら、以下のコマンドで確認します：
python -c "import flet; print('Fletのインストール成功！')"- 「Flet のインストール成功！」と表示されれば OK です
インストール時の注意点
- インターネット接続が必要です
- 初回インストールには数分かかる場合があります
- エラーが出た場合は、Python が正しくインストールされているか確認してください
プロジェクト構造の設定
VSCode を使って、プロジェクトのフォルダ構造を作成しましょう。
- プロジェクトフォルダの作成
- 新しいフォルダを作成
- デスクトップやドキュメントフォルダに移動
- 右クリック → 「新規作成」→ 「フォルダ」
- フォルダ名を「DataAnalysisTool」にする
- VSCode でフォルダを開く
- VSCode のメニューから「ファイル」→「フォルダを開く」
- 作成した「DataAnalysisTool」フォルダを選択
- 必要なフォルダの作成
VSCode のエクスプローラー（左側のパネル）で以下の手順でフォルダを作成します：
- pages フォルダの作成
- エクスプローラーで右クリック → 「新規フォルダ」
- フォルダ名を「pages」にする
- components フォルダの作成
- 同様に「components」フォルダを作成
- Documents フォルダの作成
- 同様に「Documents」フォルダを作成
完成するフォルダ構造
DataAnalysisTool/
├── main.py # アプリのエントリーポイント（今回作成）
├── pages/ # 各ページのUI（後で作成）
├── components/ # 再利用可能なコンポーネント（後で作成）
└── Documents/ # ドキュメント（残しておきたいノートなどを保存）- main.py ファイルの作成
- ファイルの作成
- エクスプローラーで右クリック → 「新規ファイル」
- ファイル名を「main.py」にする
- ファイルの確認
- main.py ファイルが作成され、VSCode で開かれます
- この段階では空のファイルで OK です
最初に作るファイル
main.py：アプリのメインファイル（今回作成）- その他は後回し
この段階では、main.pyファイルだけを作成すれば十分です！
画像には「.vev」というフォルダがありますが、ここではいったん無視して問題ありません。
Pythonの仮想環境を作成するためのフォルダですが、無くても問題なく動きますのでここではいったん無視して進めます。
Flet の基本
Flet とは？
Flet は、Python でクロスプラットフォームのアプリを作れるフレームワークです。難しいことは一切ありません！
Flet の特徴
- Python だけで作れる：HTML、CSS、JavaScript は不要
- クロスプラットフォーム：Windows、Mac、Linux で動作
- 簡単な UI：ボタン、テキスト、テーブルなどが簡単に作れる
- リアルタイム更新：データが変わると画面も自動で更新
従来の方法との違い
- 従来：Web アプリを作るには HTML + CSS + JavaScript が必要
- Flet：Python だけで完結！
簡単な Flet アプリの作成
まずは、最もシンプルな Flet アプリを作ってみましょう。
- main.py にコードを書く
VSCode で main.py ファイルを開いて、以下のコードを入力します：
import flet as ft
def main(page: ft.Page):
page.title = "はじめてのFletアプリ"
page.add(ft.Text("こんにちは、Flet！"))
ft.app(target=main)- アプリを実行する
VSCode のターミナルで以下のコマンドを実行します：
python main.py- 結果の確認
ブラウザが開いて、「こんにちは、Flet！」という文字が表示されます。
コードの説明
import flet as ft：Flet ライブラリをインポートdef main(page: ft.Page)：アプリのメイン関数page.title：ブラウザのタイトルを設定page.add()：画面に要素を追加ft.Text()：テキストを表示する要素ft.app(target=main)：アプリを起動
基本的な UI コンポーネント
Flet には様々な UI コンポーネントがあります。主要なものを紹介します：
- テキスト（Text）
page.add(ft.Text("普通のテキスト"))
page.add(ft.Text("大きなテキスト", size=30))
page.add(ft.Text("色付きテキスト", color="red"))- ボタン（ElevatedButton）
def button_clicked(e):
print("ボタンが押されました！")
page.add(ft.ElevatedButton("クリックしてください", on_click=button_clicked))- 入力フィールド（TextField）
page.add(ft.TextField(label="名前を入力してください"))- 行と列（Row, Column）
# 横並び
page.add(
ft.Row(
[
ft.Text("左"),
ft.Text("右")
]
)
)
# 縦並び
page.add(ft.Column([
ft.Text("上"),
ft.Text("下")
]))実際に試してみよう
main.py を以下のコードに変更して、いろいろなコンポーネントを試してみてください：
import flet as ft
def main(page: ft.Page):
page.title = "Fletコンポーネントの練習"
def button_clicked(e):
print("ボタンが押されました！")
page.add(ft.Text("Fletの基本コンポーネント", size=20, weight=ft.FontWeight.BOLD))
page.add(ft.Text("これは普通のテキストです"))
page.add(ft.ElevatedButton("クリックしてください", on_click=button_clicked))
page.add(ft.TextField(label="名前を入力してください"))
page.add(
ft.Row(
[
ft.Text("左側"),
ft.Text("右側")
]
)
)
ft.app(target=main)このコードを実行すると、様々な UI コンポーネントが表示されます！
アプリの基本構造
main.py の作成
データ分析アプリの基本構造を作成しましょう。今度は、もう少し本格的なアプリの構造を学びます。
- 基本的なアプリ構造
main.py を以下のコードに変更してください：
import flet as ft
class AppData:
def __init__(self):
self.current_page = "home"
self.user_name = ""
def main(page: ft.Page):
# アプリの基本設定
page.title = "データ分析アプリ"
page.theme_mode = ft.ThemeMode.LIGHT
# アプリデータの初期化
app_data = AppData()
# メインコンテンツの作成
def create_main_content():
return ft.Column(
[
ft.Text("データ分析アプリへようこそ！", size=24, weight=ft.FontWeight.BOLD),
ft.Text("第1回：開発環境の準備とFletの基本", size=16),
ft.Divider(),
ft.Text("このアプリは段階的に機能を追加していきます。", size=14),
ft.Text("現在のページ: " + app_data.current_page, size=12, color="gray"),
]
)
# ページにコンテンツを追加
page.add(create_main_content())
# ページを更新
page.update()
if __name__ == '__main__':
ft.app(target=main)- コードの説明
class AppData：アプリ全体で使うデータを管理するクラスpage.title：ブラウザのタイトルpage.theme_mode：テーマの設定（ライトモード）page.window_width/height：ウィンドウサイズの設定page.app_data：アプリ全体で使えるデータを保存create_main_content()：画面に表示する内容を作成する関数
- アプリを実行
python main.pyルーティングの設定
複数のページを持つアプリを作るための準備をしましょう。
- ページ管理の基本概念
ルーティングとは、ユーザーがボタンを押したときに、どのページを表示するかを決める仕組みです。データ分析アプリでは、後で以下のようなページを追加していきます：
- データ読み込みページ
- データ分析ページ
- 回帰分析ページ
- 結果表示ページ
- 基本的なページ構造の準備
main.py を以下のコードに変更してください：
import flet as ft
class AppData:
def __init__(self):
self.current_page = "home"
self.data_loaded = False
def main(page: ft.Page):
# アプリの基本設定
page.title = "データ分析アプリ"
page.theme_mode = ft.ThemeMode.LIGHT
# アプリデータの初期化
app_data = AppData()
# メインページの内容
def create_main_page():
return ft.Column(
[
ft.Text("データ分析アプリへようこそ！", size=24, weight=ft.FontWeight.BOLD),
ft.Text("第1回：開発環境の準備とFletの基本", size=16),
ft.Divider(),
ft.Text("このアプリは段階的に機能を追加していきます。", size=14),
ft.Text("現在のページ: " + app_data.current_page, size=12, color="gray"),
ft.Divider(),
ft.Text("次回以降で実装予定の機能:", size=14, weight=ft.FontWeight.BOLD),
ft.Text("• データ読み込み機能", size=12),
ft.Text("• データ変換・標準化機能", size=12),
ft.Text("• 回帰分析機能", size=12),
ft.Text("• 結果可視化機能", size=12),
]
)
# ページにコンテンツを追加
page.add(create_main_page())
page.update()
if __name__ == '__main__':
ft.app(target=main)- 動作確認
- アプリを実行すると、データ分析アプリのメインページが表示されます
- 次回以降で実装予定の機能が一覧表示されます
アプリデータの管理
アプリ全体で使うデータを管理する方法を学びましょう。
- AppData クラスの拡張
main.py の AppData クラスを以下のように変更してください：
class AppData:
def __init__(self):
self.current_page = "home"
self.data_loaded = False
self.merged_df = None # 後でデータフレームを保存
self.standardized_df = None # 後で標準化データを保存- データ管理の基本概念
current_page：現在表示しているページを管理data_loaded：データが読み込まれているかどうかのフラグmerged_df：後で結合したデータを保存（第 2 回で実装）standardized_df：後で標準化したデータを保存（第 3 回で実装）
- データの永続化について
現在のデータはアプリを終了すると消えてしまいます。第 2 回で SQLite データベースを使うことで、データを保存できるようになります。
完成したアプリの特徴
- シンプルで分かりやすい構造
- データ分析アプリの基盤
- 段階的な機能追加に対応
- 拡張しやすい設計
これで、データ分析アプリの基盤が完成しました！次回は、実際にデータを読み込む機能を実装していきます。
完成版の main.py
最後に、今回作成した完全な main.py ファイルの内容を確認しましょう：
import flet as ft
class AppData:
def __init__(self):
self.current_page = "home"
self.data_loaded = False
self.merged_df = None # 後でデータフレームを保存
self.standardized_df = None # 後で標準化データを保存
def main(page: ft.Page):
# アプリの基本設定
page.title = "データ分析アプリ"
page.theme_mode = ft.ThemeMode.LIGHT
# アプリデータの初期化
app_data = AppData()
# メインページの内容
def create_main_page():
return ft.Column(
[
ft.Text("データ分析アプリへようこそ！", size=24, weight=ft.FontWeight.BOLD),
ft.Text("第1回：開発環境の準備とFletの基本", size=16),
ft.Divider(),
ft.Text("このアプリは段階的に機能を追加していきます。", size=14),
ft.Text("現在のページ: " + app_data.current_page, size=12, color="gray"),
ft.Divider(),
ft.Text("次回以降で実装予定の機能:", size=14, weight=ft.FontWeight.BOLD),
ft.Text("• データ読み込み機能", size=12),
ft.Text("• データ変換・標準化機能", size=12),
ft.Text("• 回帰分析機能", size=12),
ft.Text("• 結果可視化機能", size=12),
]
)
# ページにコンテンツを追加
page.add(create_main_page())
page.update()
if __name__ == "__main__":
ft.app(target=main)このコードを main.py ファイルにコピーして実行すると、データ分析アプリの基本画面が表示されます！
実行方法
- VSCode で main.py ファイルを開く
- 上記のコードをコピー＆ペースト
- ファイルを保存（Ctrl+S）
- ターミナルで
python main.pyを実行 - ブラウザが開いてアプリが表示される
まとめと次回予告
今回の実装で学んだこと
第 1 回の実装を通じて、以下のことを学びました：
Flet の基本
- Python でクロスプラットフォームの UI を作成する方法
- 基本的な UI コンポーネント（Text、Button、TextField、Row、Column）の使い方
- アプリの基本構造とデータ管理の方法
開発環境の準備
- VSCode を使った効率的な開発環境の構築
- プロジェクトフォルダの適切な構造設計
- 必要なライブラリのインストールと確認方法
アプリ設計の基礎
- アプリ全体でデータを管理する AppData クラスの設計
- 段階的な機能追加に対応した拡張しやすい構造
- 初学者でも理解しやすいコード設計
実用的な開発手法
- 段階的な機能実装とテスト
- エラー処理の重要性
- 次回以降の実装を見据えた設計
次回の実装内容
第 2 回では、データ読み込み機能の実装を行います：
予定している機能
- CSV ファイル読み込み：経済指標データの読み込み
- データ結合：複数の CSV ファイルの結合処理
- データベース連携：SQLite を使ったデータの永続化
- エラーハンドリング：ファイル読み込みエラーの処理
- UI 表示：読み込んだデータのテーブル表示
技術的なポイント
- Pandas を使った CSV ファイルの読み込み
- データフレームの結合（inner join）
- SQLite データベースの基本操作
- Flet でのデータテーブル表示
学習目標
- データ処理の基本を理解する
- エラーハンドリングの実装方法を習得する
- データベース連携の基礎を学ぶ
次回も、統計初学者の視点から、一つずつ理解しながら進めていきましょう！
いかがでしたでしょうか？第 1 回では、データ分析ツールの基盤となる開発環境の準備と Flet の基本を学びました。
Flet を使った UI 開発の基本や、アプリの構造設計について理解できたと思います。次回は、実際にデータを読み込む機能を実装していきますので、お楽しみに！
最後までお読みいただき、ありがとうございました。
それではまた次の記事でお会いしましょう。 ばいばいっ！
コメント