開発環境のセットアップ
GitHub Codespaces（ブラウザ上の開発環境）でStreamlitアプリを構築・実行できるようになる
学習目標：GitHub Codespaces（ブラウザ上の開発環境）でStreamlitアプリを構築・実行できるようになる
必要なもの：GitHubアカウント、支払い方法設定（無料枠あり）
既にローカル環境をお持ちの方：この章は参考程度にご覧ください。GitHub Codespacesは環境差分の問題を解決し、非エンジニアのチームメンバーを巻き込む際に特に有効です。
GitHub Codespaces
これから本格的なコーディングに入門する方や、久しぶりに復帰する方にとって最も大きな障壁となるのは、開発環境のセットアップです。一度開発環境が整ってしまえば、AIの支援を受けてコードを書くことができますが、環境構築に時間を取られるのは避けたいものです。
ローカル開発環境構築、つまり使用しているマシンに必要なソフトウェアやライブラリをインストールする作業では、OSやCPUアーキテクチャの違いによる問題が発生しやすいです。特に近年では使用しているOSのメジャーバージョンに違いがあったり (Windows 10と11など)、CPUアーキテクチャが異なる (IntelとARMなど) 場合が多くあり、それぞれ適切な手順を選択する必要があります。
そこで、GitHub Codespacesが便利な選択肢になります。GitHub Codespacesは、ブラウザ上で動作する開発環境を提供し、OSやCPUアーキテクチャに依存しないため、環境差分の問題を解決します。これにより、非エンジニアのチームメンバーも簡単に開発環境に参加できるようになります。
https://github.co.jp/features/codespaces
Github Codespacesのメリット
- 開発環境のセットアップがすぐに完了する
- OSやCPUアーキテクチャに依存しない (Linuxベースの環境)
- ブラウザ上で動作するため、インターネット接続があればどこでも利用可能
- VS Codeのフル機能を利用できる
- GitHubリポジトリと統合。ブランチごとにCodespaceを作成できる
- devcontainer.jsonを使って、環境設定の統一・配布が可能
GitHub Codespacesの始め方
ステップ1：アカウント準備
- GitHubアカウントを作成（無料）
- 支払い方法を設定（月120時間まで無料）
ステップ2：Codespace作成
Codespaceを作成するには、以下の手順に従います：
GitHubのリポジトリを作成
Github Codespacesを利用するためには、作業を行うリポジトリが必要なので、Github上に新しいリポジトリを作成します。
Codespaceを作成
- リポジトリのトップページで「Code」ボタンをクリック
- 「Codespaces」タブを選択
- 「Create codespace on main」をクリック
Codespaceで作業を開始する
初回は自動的にCodespaceが起動し、数分で準備が完了します。次回以降は、作業リポジトリのページから作成したCodespaceを選択して起動できます。
ステップ3：自動設定（オプション）
高度な設定をご希望の方は、.devcontainer/devcontainer.jsonでCodespaceの環境を自動設定できます。以下はStreamlitを使ったPython環境の例です。
{
"name": "streamlit-lab",
"image": "mcr.microsoft.com/devcontainers/python:3.11",
"features": {
"ghcr.io/devcontainers/features/common-utils:2": {
"installZsh": "false",
"installOhMyZsh": "false",
"configureZshAsDefaultShell": "false",
"installAptPackages": "true"
}
},
// postCreateCommand は uv のインストールと venv 作成までにとどめる
"postCreateCommand": "bash -c \"curl -LsSf https://astral.sh/uv/install.sh | sh && export PATH=$PATH:/home/vscode/.cargo/bin && uv venv && uv pip install -r .devcontainer/requirements.txt\"",
"forwardPorts": [8501],
"customizations": {
"vscode": {
"extensions": [
"ms-python.python",
"ms-python.vscode-pylance",
"GitHub.copilot"
],
// VS CodeのPython拡張機能が仮想環境を自動的に選択するように設定
"settings": {
"python.defaultInterpreterPath": "./.venv/bin/python",
"python.terminal.activateEnvironment": true
}
}
},
"remoteUser": "vscode"
}パッケージ管理の選択肢
uv（推奨） vs pip（標準）
uvでのセットアップ手順
# プロジェクト作成
$ uv init my-dashboard
$ cd my-dashboard
# Streamlitインストール
$ uv add streamlit pandas plotly
# 動作確認
$ streamlit hellopipでのセットアップ手順
# 仮想環境作成
$ python -m venv .venv
$ source .venv/bin/activate # macOS/Linux
$ .venv\Scripts\activate # Windows
# Streamlitインストール
$ pip install streamlit pandas plotly
# 動作確認
$ streamlit helloどちらでもブラウザでStreamlitデモが表示されたら成功です。
初めてのStreamlitアプリ作成
最小限のコードでダッシュボードを作る
app.pyファイルを作成：
import streamlit as st
import pandas as pd
# タイトル
st.title('売上ダッシュボード')
# サンプルデータ
data = pd.DataFrame({
'月': ['1月', '2月', '3月', '4月', '5月'],
'売上': [100, 120, 110, 140, 130]
})
# データ表示
st.dataframe(data)
# グラフ表示
st.line_chart(data.set_index('月'))実行方法：
streamlit run app.pyたった15行でダッシュボードが完成します。
AIでコード生成を試してみる
ChatGPTへのシンプルな指示
以下をChatGPTにコピー&ペーストしてください：
StreamlitでCSVアップロード機能付きのダッシュボードを作ってください。
機能：ファイルアップロード、データ表示、グラフ作成生成されたコードの例
import streamlit as st
import pandas as pd
st.title("データアップローダー")
# CSVアップロード
file = st.file_uploader("CSVファイルを選択", type='csv')
if file:
df = pd.read_csv(file)
st.dataframe(df)
# 数値列があればグラフ表示
numeric_cols = df.select_dtypes(include='number').columns
if len(numeric_cols) > 0:
st.line_chart(df[numeric_cols])AIが生成したコードをapp.pyに保存し、streamlit run app.pyで実行してみましょう。
トラブルシューティング
問題：ポートが使用できない
解決方法：別のポートを指定
streamlit run app.py --server.port 8502問題：エラーの原因が分からない
解決方法：デバッグモードで詳細情報を表示
streamlit run app.py --logger.level debugこの章のまとめ
達成できたこと
- ブラウザだけでStreamlit環境を構築
- 15行のコードでダッシュボードを作成
- AIでさらに高度なアプリを生成
次のステップ：実際のビジネスデータを使った本格的なBIダッシュボード構築
確認チェックリスト
以下がすべて動作すれば次章へ進めます：
基本動作
- GitHub Codespacesが起動する
-
streamlit helloでデモが表示される - 自作アプリがブラウザで表示される
AI活用
- ChatGPTでコード生成ができる
- 生成したコードが実際に動作する
すべてチェックがついたら、次章「データの前処理とデータベースの準備」へ進みましょう。