📱

Pythonを使って 30分！Web アプリ開発！

2025/06/26に公開

 🚀 Cursor と Streamlit で学ぶ Python 入門 - 30 分で Web アプリが作れる時代プログラミングを始めたいけれど、何から手をつけていいかわからない...そんな悩みを抱えている方に朗報です。今回は、AI 搭載コードエディタ「Cursor」と、Python で簡単に Web アプリが作れる「Streamlit」を組み合わせた実践的なコーディング配信の内容をご紹介します。

 😒 本当に３０分でできるの。。？今回はできる限りシンプルなコードで様々な機能を網羅しています！そして AI 搭載 cursor を仕様することで、コード補完・予測コーディングしてくれます！！

プログラミングに慣れていない方でも３０分は十分な時間です！👍

 ✨ なぜ Cursor × Streamlit が初心者におすすめなのかCursorは、AI が直接コードを書いてくれる革新的なエディタです。従来のプログラミング学習では、まずは構文を覚えて、エラーと格闘して...という長い道のりが必要でした。しかし Cursor を使えば、「こんなアプリを作りたい」という自然言語での指示から、AI が実際に動くコードを生成してくれます。
Streamlitは、Python でデータサイエンスや Web アプリケーションを簡単に作成できるフレームワークです。HTML や CSS を書く必要がなく、Python の知識だけでインタラクティブな Web アプリが作れるため、初心者でも短時間で成果を実感できます。

 📁 フォルダとファイルの作成まず、プロジェクト用のフォルダとファイルを作成しましょう。
1. フォルダの作成
デスクトップや任意の場所に「python-sample-project」という名前のフォルダを作成してください。
Windows: 右クリック → 新規作成 → フォルダ
Mac: 右クリック → 新規フォルダ
フォルダ名: python-sample-project
2. ファイルの作成

sample.py - メインの Python ファイル

requirements.txt - 必要なライブラリの一覧
3. フォルダ構造
python-sample-project/
├── sample.py
└── requirements.txt
これで、プロジェクトの準備が整います！

 🎯 オーストラリア情報アプリを作ってみよう
 📱 アプリの構成要素1. 基本的な情報表示

さっそく、sample.py にコードを書いていきましょう！

まずはst.title()とst.header()を使って、アプリのタイトルと見出しを設定します。絵文字を使うことで、視覚的にも楽しいアプリになります。
import streamlit as st

st.title('オーストラリアについて')
st.header('🦘 カンガルーっているの？')

 🖥️ アプリを動かす手順1. コードをコピー
上記のコードをコピーして、sample.py に貼り付けます
2. 必要なライブラリをインストール
まず、requirements.txtファイルに以下を書きます：
matplotlib>=3.7.0
streamlit>=1.28.0
scikit-learn>=1.4.0
次に、cursor のターミナルで以下のコマンドを実行（Enter キー）し、ライブラリをインストールします：
pip install -r requirements.txt
3. アプリを起動
python -m streamlit run ファイル名.py


※仮想環境作成済み且つ PATH が設定されている場合、streamlit run ファイル名.py でも可能です。
4. ブラウザで確認
自動的にブラウザが開き、アプリが表示されます


5. コードを変更して再実行

試しにコードの文字を変更して、画面の変化を確認しましょう！
コードの文字を変更して保存
ブラウザを更新すると、文字が変更されているはずです。



実は、以下のコマンドで最初にアプリを起動させた場合、保存時に自動更新されます！
python -m streamlit run sample.py --server.runOnSave true
2. インタラクティブ要素の追加
st.slider()を使って、ユーザーが値を選択できるスライダーを作成します。このスライダーで選択した値は、リアルタイムでアプリに反映されます。
kangaroo_count = st.slider("今日見たカンガルーの数", 0, 20, 5)
st.write(f"今日は{kangaroo_count}匹のカンガルーを見ました！")


Python の f 文字列（f-string）の使い方を見てみましょう。変数の値を文字列に埋め込む方法は、重要な基礎スキルです。

f"今日は{kangaroo_count}匹のカンガルーを見ました！" のように、文字列の前に f を付け、変数を {} で囲むことで、その変数の値が文字列に埋め込まれます。
3. データの可視化
Matplotlib ライブラリを使って、オーストラリアの主要都市の人口データを棒グラフで表示します。
st.subheader("オーストラリアの都市の人口について")
# フォントを日本語対応のYu Gothicに設定
plt.rcParams['font.family'] = 'Yu Gothic'
# グラフのキャンバスと軸を作成
fig, ax = plt.subplots()
# 棒グラフを作成
ax.bar(['シドニー', 'メルボルン', 'ブリスベン'], #都市名
       [5.3, 5.0, 2.5], #人口データ
       color=['red', 'blue', 'green']) #棒グラフの色
# グラフのタイトルと軸ラベルを設定
ax.set_title('オーストラリアの都市の人口')  # グラフのタイトル
ax.set_ylabel('人口（百万人）')  # Y軸のラベル

# Streamlitでグラフを表示する
st.pyplot(fig)

このままではライブラリが使用できずエラーになるので、ファイル上部の import streamlit as st の下に以下を追加
import matplotlib.pyplot as plt
4. 条件分岐による動的コンテンツ
st.selectbox()でユーザーに選択肢を提示し、選択された内容に応じて異なるメッセージを表示します。これにより、ユーザーの操作に応じてアプリの内容が変化します。
st.subheader("カンガルーの動きについて")
# 時間帯選択のドロップダウンを作成
time_of_day = st.selectbox("時間帯を選択", ["朝", "昼", "夕方", "夜"])
# 選択された時間帯に応じてメッセージを表示
if time_of_day == "朝":
    # 朝の場合
    st.success("朝はカンガルーが最も活発です！")
elif time_of_day == "夜":
    # 夜の場合
    st.info("活発に動いて、ご飯を食べます。")
else:
    # その他の時間帯
    st.warning("その他の時間帯はカンガルーは涼しいところを見つけて休んでます。")

 🤖 機械学習を使った動物分類アプリここからは機械学習を取り入れたアプリを作成しました。このアプリは、動物の体長と体重を入力することで、その動物が犬、猫、ウサギのどれかを予測します。

 🧠 機械学習の基本概念を体験1. データの準備
まず、学習用のデータを準備します。ここでは、各動物の体長と体重のサンプルデータを用意し、それぞれに対応する動物種を数値で表現します。

また、ユーザーが数値を入力できるように、入力欄も作成しました。
st.subheader("動物の分類")
st.write("機械学習を使って、機械に動物を分類にしてもらいましょう。")
# 学習用の特徴データ
X = [
    [55, 25],  # 体長55cm、体重25kgの犬
    [40, 10],  # 体長40cm、体重10kgの猫
    [30, 4],   # 体長30cm、体重4kgのウサギ
    [60, 30],  # 体長60cm、体重30kgの犬
    [35, 8],   # 体長35cm、体重8kgの猫
    [25, 3],   # 体長25cm、体重3kgのウサギ
]

# 正解ラベル（0:犬, 1:猫, 2:ウサギ）
y = [0, 1, 2, 0, 1, 2]

# 動物の名前を保存
animal_names = ['犬', '猫', 'ウサギ']

# 数値入力フィールド
length = st.number_input('体長 (cm)', min_value=10, max_value=100, value=50) #(タイトル,最小値,最大値,初期値)
weight = st.number_input('体重 (kg)', min_value=1, max_value=50, value=10)
2. モデルの学習
続いて、scikit-learn ライブラリを使用して、準備したデータでモデルを学習させます。たった２行のコードで、機械学習モデルが完成します。
# 決定木分類器という機械学習モデルを作成
model = DecisionTreeClassifier()
# モデルにデータを学習させる（X: 特徴量、y: 正解ラベル）
model.fit(X, y)
このままではライブラリが使用できずエラーになるので、ファイル上部の import matplotlib.pyplot as plt の下に以下を追加
from sklearn.tree import DecisionTreeClassifier
3. 予測機能の実装
ユーザーがスライダーで体長と体重を入力し、「予測する」ボタンを押すと、学習済みモデルが動物種を予測して結果を表示します。
# 「予測する」ボタンの作成。押された時の処理
if st.button('🔍 予測する'):
    # 入力された体長と体重で動物を予測（[0]で最初の結果を取得）
    prediction = model.predict([[length, weight]])[0]
    # 予測結果を人間が分かりやすい文字で表示
    st.write(f'この動物は **{animal_names[prediction]}** の可能性が高いです！')
4. 学習データの可視化
アプリの信頼性を高めるため、どのようなデータで学習したかを表形式で表示します。これにより、ユーザーは予測結果の根拠を理解できます。
# 学習データを表示用の形式に変換するための空のリストを作成
data_display = []

# 学習データの数だけ繰り返し処理
for i in range(len(X)):
    # 各動物のデータを辞書形式で追加
    data_display.append({
        '動物': animal_names[y[i]],  # 動物の名前（数字から文字に変換）
        '体長': f'{X[i][0]} cm',    # 体長データに単位を追加
        '体重': f'{X[i][1]} kg'     # 体重データに単位を追加
    })

# 作成したデータを表形式で表示
st.table(data_display)
# 今回は**1. データの準備**で定義したXとyを表示している。

 📚 詳細な構文説明for 文の構文
for i in range(len(X)):  # i に 0,1,2,3,4,5 の値を順番に代入して繰り返し処理

range(len(X)) → len(X)は 6 なので、range(6)となり、0,1,2,3,4,5 を生成

i は「インデックス番号」と呼ばれ、リストの何番目のデータかを示す
append メソッド
data_display.append({...})  # リストの末尾に新しい要素を追加する

append()は「追加する」という意味

{...}は辞書（キーと値のペア）を作成
animal_names[y[i]]の仕組み
animal_names = ['犬', '猫', 'ウサギ']  # インデックス 0:犬、1:猫、2:ウサギ
y = [0, 1, 2, 0, 1, 2]                # 各動物の種類を数字で表現
y[i]                                   # i 番目の動物の種類（数字）
animal_names[y[i]]                     # 数字を動物名に変換
具体例：

i=0 の時：y[0]=0、animal_names[0]='犬'

i=1 の時：y[1]=1、animal_names[1]='猫'



 🎉 完成！おめでとうございます！

 今回出来上がった画面はこちらです 👇
streamlit の公式サイトには、今回使用した機能以外にも多くの使用例がありますので、是非見てみてくださいね！

Streamlit 公式サイト

 🎯 まとめ：プログラミング学習の未来今回紹介した 2 つのアプリケーションは、プログラミング初心者でも 30 分程で作成できる内容です。しかし、その中には以下のような多くの重要な概念が含まれています：
変数とデータ型
条件分岐とループ処理
ライブラリの使用方法
データの可視化
機械学習の基礎概念
Cursor と Streamlit を使うことで、これらの概念を暗記するのではなく、実際に手を動かしながら自然に身につけることができます。プログラミング学習において最も重要なのは、楽しむことです！

「楽しむ＝継続する」

これからプログラミングを学ぼうと考えている方は、ぜひ Cursor と Streamlit の組み合わせから始めてみてください。きっと、プログラミングの新しい世界が開けるはずです。
まずは今回紹介したコードの一部を変更して、画面の変化を体験してみてください。例えば、「カンガルー」を「コアラ」に変えたり、「オーストラリア」を「日本」に変えたりしてみましょう！コードを少し変えるだけで、アプリの表示が変わることを実感できます！！

 🎓 プログラミング学習におすすめプログラミング未経験の方には CyTech（サイテック） がおすすめです！
CyTech は、未経験から IT エンジニアを目指す人向けのオンライン学習プラットフォームで、基礎から実務レベルのスキルを最短 10 ヶ月で習得できるカリキュラムを提供しています。

HTML/CSS/JavaScript/PHP/SQL/Git などのプログラミング言語に加え、デザイン、英語なども学べる総合的なプラットフォームです。

今後随時学習できるプログラミング言語増加予定！

エンジニア学習にお困りの方はまずは CyTech 無料カウンセリングでお悩み解消！