はじめに｜Streamlitってなに？なにがすごいの？

Pythonで作ったスクリプトを、
できるだけ簡単に・無料でWebアプリとして公開したいと思ったことはありませんか？

FlaskやDjangoは本格的すぎるし、
HTMLやJavaScriptを一から学ぶのは正直ハードルが高い…。
そんな悩みを感じている人は、かなり多いはずです。

そこでおすすめなのが Streamlit（ストリームリット） です。

Streamlitを使えば、Pythonのコードを書くだけでWebアプリを作成でき、
ボタン・入力フォーム・グラフ・表なども驚くほど簡単に実装できます。
フロントエンドの知識は一切不要で、Jupyter Notebook感覚で使えるのが大きな特徴です。

さらに、作成したアプリは無料でインターネットに公開することも可能。
個人開発・学習用・社内ツールの共有まで、幅広く活用できます。

この記事では、

• Streamlitの基本的な仕組み
• インストールから最初のWebアプリ作成
• 作ったアプリを無料で公開する方法

までを、初心者でも迷わず進められるように順番に解説します。

「Pythonは書けるけど、Webアプリは初めて」という方でも大丈夫です。
実際に手を動かしながら、一緒にStreamlitでWebアプリを作っていきましょう。

1. Streamlitの魅力とは？｜なぜ人気なのか

Streamlitがここまで注目されている理由は、とにかく**「簡単で早い」**ことに尽きます。
でもそれだけじゃないんです。ここでは、初心者にこそ知ってほしいStreamlitの魅力を紹介します。

🧑‍💻 1. PythonだけでWebアプリが作れる！

通常、Webアプリを作ろうと思うと、HTML・CSS・JavaScriptなど、いろんな技術を覚える必要があります。
でもStreamlitなら、Pythonコードを書くだけでWeb画面が完成します。

たとえばこのコード一行だけで、画面に大きなタイトルが表示されます👇

import streamlit as st
st.title("こんにちは、Streamlit！")

これだけでOK！余計な設定やテンプレートは不要です。

⚡ 2. コードを保存すればすぐ反映｜リアルタイム更新！

コードをちょっと書き換えたら、すぐにアプリも変わってくれたら便利ですよね？
Streamlitはリアルタイムでコードの変更が反映されるので、試行錯誤がサクサク進みます。

streamlit run app.py

このコマンドでアプリを起動すれば、あとはブラウザを開いたままコードを直すだけ。自動でアプリがリロードされます。

📊 3. データ分析に強い！グラフや表が得意

Streamlitはもともとデータ分析のために設計されたフレームワークです。
そのため、PandasのデータフレームやMatplotlibのグラフも、ほんの数行でWeb上に表示できます。

import pandas as pd
st.dataframe(pd.read_csv("data.csv"))

グラフ表示もこんなに簡単👇

import matplotlib.pyplot as plt

fig, ax = plt.subplots()
ax.plot([1, 2, 3], [4, 6, 2])
st.pyplot(fig)

データサイエンス系のツールと非常に相性がいいのが特徴です。

🌍 4. 無料で世界に公開できる！

せっかく作ったアプリ、他の人にも使ってもらいたいですよね？
Streamlitなら、GitHubにアップするだけで無料でネット公開できます。

「Streamlit Community Cloud」という公式サービスがあり、わずか数クリックでデプロイが完了。サーバー構築も不要です。

🔧 5. サイドバーやフォーム、マルチページまで対応！

シンプルなUIだけでなく、以下のような本格的なアプリ構成にも対応しています。

• サイドバー（st.sidebar）
• フォーム（st.form()）
• 入力チェック
• ページの分割（pages/ディレクトリ）

ちょっとした業務ツールや分析アプリを自作したいときにもぴったりなんです。

2. Streamlitのインストールと基本の使い方

では早速、Streamlitを使ってみましょう！
ここでは、インストール方法から最初のアプリの作成・実行までをステップバイステップで解説します。

🔧 Step1：Streamlitをインストールしよう

まずは、Streamlitを自分のPCにインストールします。
Pythonがすでにインストールされていれば、以下のコマンドでOKです。

pip install streamlit

※エラーが出る場合は、python -m pip install streamlitを試してください。
対応バージョンは Python 3.7以上 です。

📝 Step2：アプリのPythonファイルを作成しよう

次に、Streamlit用のPythonファイルを1つ作成します。
ファイル名はなんでもいいですが、ここでは app.py にしておきましょう。

# app.py

import streamlit as st

st.title("こんにちは、Streamlit！")
st.write("これは最初のWebアプリです！")

このように、普段のPythonコードに st.〇〇() の関数を追加するだけで、WebアプリのUIが作れてしまいます。

🚀 Step3：アプリを起動してみよう

ターミナル（またはコマンドプロンプト）で、次のコマンドを実行してください。

streamlit run app.py

すると、自動的にブラウザが立ち上がり、アプリが表示されます。
※ブラウザが開かない場合は、http://localhost:8501 にアクセスしてみてください。

🔁 コードを修正→即反映！

Streamlitはリアルタイム更新に対応しています。
app.py を保存するたびに、ブラウザが自動で更新されるので、「書いて・見て・直す」が超スムーズに行えます。

💡 補足：エラーが出たら？

起動中にエラーが出た場合は、ターミナルに表示されたメッセージを確認してみましょう。
よくあるのは以下のようなものです：

ここまでできれば、**「StreamlitでWebアプリが作れるようになった」**状態です！
次は、実際に使えるUIコンポーネントを紹介していきます👇

3. よく使うUIコンポーネントの紹介とサンプル

Streamlitのすごいところは、ほんの数行のコードで豊富なUIパーツを使えるところ。
しかも、Pythonのコードを書くだけでOKです。

ここでは、よく使う基本的なコンポーネント（ウィジェット）を実際のコード例つきで紹介していきます。

📝 テキストを表示する

Streamlitでは、見出しやテキストも簡単に表示できます。

st.title("タイトルです")
st.header("これはヘッダーです")
st.subheader("これはサブヘッダーです")
st.text("これは普通のテキストです")
st.markdown("**Markdown**にも対応しています！")

💡 st.write() はなんでも表示できる万能関数なので、迷ったらこれを使うのがオススメ！

📊 表やデータを表示する

Pandasのデータフレームやリストもすぐに画面に出せます。

import pandas as pd

df = pd.DataFrame({
    "名前": ["田中", "佐藤", "鈴木"],
    "年齢": [25, 30, 22]
})

st.write(df)           # 自動的に表にしてくれる
st.dataframe(df)       # スクロール可能な表（インタラクティブ）
st.table(df)           # 静的な表（固定表示）

🎨 画像や動画を表示する

画像や動画も1行で表示可能です。

st.image("sample.png", caption="サンプル画像", use_column_width=True)
st.video("https://www.youtube.com/watch?v=xxxxxxx")

🧑‍🔧 入力ウィジェットを使う

フォームやインタラクティブなツールを作るなら、これらの入力系コンポーネントが便利です👇

name = st.text_input("名前を入力してください")
age = st.slider("年齢を選んでください", 0, 100, 25)
color = st.color_picker("好きな色を選んでください")

他にもたくさんあります：

📦 サイドバーを使ってUIを整理

サイドバーは st.sidebar.〇〇 を使えば、メイン画面とは別にウィジェットを配置できます。

option = st.sidebar.selectbox("メニューを選択", ["ホーム", "設定", "ヘルプ"])

👈 サイドバーを使うと、メイン画面がスッキリして見やすくなります！

🔁 処理中のスピナー表示

時間のかかる処理のときは、st.spinner() を使えば読み込み中の表示も可能です。

import time

with st.spinner("処理中..."):
    time.sleep(2)
st.success("完了しました！")

ここまでが、Streamlitでよく使われる基本のコンポーネントたちです。

4. Webアプリをデプロイするには？｜無料でネット公開！

せっかく作ったStreamlitアプリ、自分だけじゃなく他の人にも使ってもらいたい！
そんなときは、Streamlit Community Cloudを使えば、無料で世界中に公開できます。

GitHubと連携して簡単にデプロイできるので、難しいサーバー設定も必要なし。ここでは、そのやり方をステップ形式で紹介します。

🧰 事前準備：GitHubアカウントを用意しよう

Streamlit Cloudで公開するには、まずGitHubアカウントが必要です。まだ持っていない場合は、以下のリンクから無料登録できます。

👉 https://github.com/

🗂 Step1：アプリファイルをGitHubにアップロード

1. GitHubで新しいリポジトリ（例: streamlit-app）を作成
2. ローカルで以下のファイルを用意
   • app.py（またはmain.pyなど、アプリ本体）
   • requirements.txt（必要なライブラリの一覧）

requirements.txt はこんな感じで作ります👇

streamlit
pandas
matplotlib

3. Gitでリポジトリにプッシュ（初心者はGitHub DesktopでもOK）

🌐 Step2：Streamlit Cloudでアプリを公開！

1. Streamlit Community Cloud にアクセス
2. GitHubアカウントでサインイン
3. 「New app」をクリックし、リポジトリを選択
4. 実行したいPythonファイル（例：app.py）を選んで「Deploy」！

これだけで、あなたのアプリがネット上で公開されます✨

📎 公開されたURLを共有しよう！

デプロイが完了すると、https://〇〇.streamlit.appのようなURLが自動発行されます。
このURLを友達や同僚に送れば、誰でもあなたのアプリを使えるようになります！

✅ URLは「非公開」にも設定可能なので、社内だけで使いたいケースにも対応できます。

💼 補足：Snowflakeなど高度なデプロイも可能

もっと本格的に運用したい場合は、以下の選択肢もあります。

• Snowflake Streamlit：セキュリティ・ユーザー管理・CI/CD対応
• Heroku / Render / AWS：カスタマイズ性の高いクラウド環境
• 社内サーバーに直接設置：自社内のネットワークで閉じて使いたいとき

ただし初心者ならまずはStreamlit Cloud一択でOKです！

5. さらに進んだ使い方｜複数ページ・レイアウト・セッション管理

Streamlitは、シンプルなUIだけじゃなく本格的なWebアプリっぽい機能も簡単に実現できます。
この章では、「もっと便利に」「もっときれいに」使うための応用テクニックを紹介します。

📄 複数ページ構成にするには？

Streamlitでは、1つのアプリ内に複数ページを作ることができます。しかもとても簡単！

✅ やり方

1. app.py とは別に、pages/ フォルダを作成
2. その中に Python ファイルを入れる（例：pages/page1.py、pages/page2.py）

すると、サイドバーにページ切り替えメニューが自動で表示されます！

🔁 ページは自動で読み込まれるので、ルーティングの設定などは不要です。

🧱 レイアウトを整えるには？｜カラムやタブを使おう

📌 カラムで横並びに表示

複数のUIを横並びにしたいときは、st.columns() を使います。

col1, col2 = st.columns(2)

with col1:
    st.write("左側のカラム")

with col2:
    st.write("右側のカラム")

📌 タブ切り替えもできる！

Streamlit v1.10以降では、st.tabs() を使えばタブでコンテンツを切り替えることもできます。

tab1, tab2 = st.tabs(["グラフ", "表"])

with tab1:
    st.line_chart(...)

with tab2:
    st.dataframe(...)

💾 セッション状態を管理する｜st.session_stateの活用

通常、Streamlitはブラウザを更新するたびに状態がリセットされます。
でも、st.session_state を使えば、データや入力値をアプリ内で保持できます。

例：カウンターを作る

if "count" not in st.session_state:
    st.session_state.count = 0

if st.button("カウントアップ"):
    st.session_state.count += 1

st.write(f"現在のカウント: {st.session_state.count}")

🧠 フォーム送信やログイン情報の管理などにも使えます！

📋 フォームでまとめて送信

複数の入力欄があって、ボタンを押したときに一括で処理したいときは、フォーム構文が便利です。

with st.form("my_form"):
    name = st.text_input("名前を入力")
    age = st.slider("年齢", 0, 100)
    submitted = st.form_submit_button("送信")

if submitted:
    st.write(f"{name} さんは {age} 歳です")

✅ 通常のst.text_input()などは毎回即反映されますが、フォームを使うと「まとめて送信」ができます。

6. 注意点とよくあるトラブル

Streamlitはとても便利ですが、いくつか知っておくべき注意点や、初心者がつまずきやすいポイントもあります。
ここでは、よくあるトラブルとその対処法をまとめました。

🔄 ブラウザをリロードすると状態がリセットされる？

Streamlitでは、ページを再読み込みするとすべての入力や変数が初期化されます。
たとえば、スライダーの値やカウントの状態なども元に戻ってしまいます。

✅ 対策：st.session_state を使う

状態を保持したいときは、セッション情報を管理できる st.session_state を活用しましょう。

if "name" not in st.session_state:
    st.session_state.name = ""

name = st.text_input("名前を入力", value=st.session_state.name)
st.session_state.name = name

🐛 実行エラーが出る！ → エラーメッセージをよく読もう

Streamlitでは、エラーが出るとアプリ画面の下に赤文字で表示されます。
内容をよく読んで、どの行で何が原因かをチェックしてみましょう。

📂 ファイルアップロードがうまくいかない？

Streamlitの st.file_uploader() は、アップロードされたファイルをメモリ上で一時的に扱います。

✅ よくある注意点

• ファイルサイズが大きすぎると読み込みに失敗する
• file.read() はバイト形式で返るので、テキストとして読む場合は .decode() が必要

uploaded_file = st.file_uploader("ファイルを選択")
if uploaded_file is not None:
    content = uploaded_file.read().decode("utf-8")
    st.write(content)

🐢 表示が遅い・重い

大きなデータや複雑なグラフを扱うと、アプリの動作が重くなることがあります。

✅ 対処法

• 表示するデータを必要最小限に絞る
• 毎回同じ処理は @st.cache_data でキャッシュする
• 外部ファイルの読み込みは必要なときだけ行う

@st.cache_data
def load_data():
    return pd.read_csv("big_data.csv")

📦 バージョンアップで動かなくなる？

Streamlitは活発に開発が続けられているため、バージョンアップで仕様変更があることも。
過去に動いていたコードが突然動かなくなることもあります。

✅ 対策

• requirements.txt にバージョンを固定して記載しておく
  例：streamlit==1.32.0
• 公式ドキュメントやリリースノートを定期的にチェック

これらのポイントをおさえておけば、Streamlitでの開発がグッと快適になります！

7. まとめ｜StreamlitでWebアプリ開発はここまで簡単！

ここまで読んでくださってありがとうございます！
今回紹介した Streamlit は、まさに「Pythonで最も手軽にWebアプリが作れる魔法のツール」です。

✅ この記事で学んだこと

• インストールからアプリ作成までわずか数分！
• グラフや表、フォームなど、豊富なUIをPythonだけで実装できる
• 作ったアプリはStreamlit Cloudで無料公開が可能
• st.columns() や st.session_state などで本格的なアプリ構成にも対応
• よくあるトラブルや注意点も事前に知っておけば安心！

Streamlitを使えば、アイデア次第でいろんなアプリが作れます。

たとえば…

• 📊 データを見せる可視化ダッシュボード
• 💬 チャット型のツールやフォームアプリ
• 🧮 業務の自動化ツールや計算アプリ
• 🔮 機械学習モデルのWeb化・デモ展示ページ

などなど、Pythonが少し書けるだけで、**あなたの作ったツールが「誰かの役に立つアプリ」**に変わります！

まずは、自分用のちょっとしたアプリを作って、身近な人に「これ便利だよ！」って見せてみましょう😊
きっと、新しい開発の楽しさが広がっていくはずです！

あわせて読みたい

Streamlitに関連するおすすめ記事をピックアップしました。データ処理やWeb公開の知識をさらに深めたい方におすすめです。

• 🔗 Pythonで仮想通貨の価格をリアルタイム取得＆グラフ表示する方法【Coincheck API】
  → 外部APIとStreamlitを組み合わせれば、リアルタイムで動く価格表示アプリも簡単！
• 🔗 Pythonで家計簿アプリを作ろう！初心者でもできるおこづかい帳の作り方
  → GUIアプリとWebアプリの違いを理解するのにピッタリな比較記事。
• 🔗 PythonとExcelで家計診断ツールを作ってみよう｜グラフで支出が丸わかり！
  → Streamlitで作ったアプリにCSVやExcel出力を加えるヒントにも。
• 🔗 scikit-learnで機械学習モデルを構築する方法｜
  → 機械学習の可視化ツールとしてStreamlitを活用する場合に必読！

よくある質問（Q&A）

1. はじめに｜FastAPIってなに？なぜ人気なの？

こんにちは！
この記事では、PythonでWebアプリやAPIを作るときにとっても便利な「FastAPI（ファストエーピーアイ）」というフレームワークについて紹介していきます。

💡 FastAPIってなに？

FastAPIは、PythonでWeb APIをすばやく作ることができるフレームワークです。
「フレームワーク」とは、アプリやシステムを作るときに役立つ“土台”や“便利ツール集”のようなものです。

たとえば、以下のようなことが簡単にできます：

• ブラウザからアクセスしてデータを取得する「API」を作る
• ユーザーからのリクエストを受け取って返事を返す
• 入力内容が正しいかを自動でチェックしてくれる
• 作ったAPIの説明ページ（ドキュメント）も自動でつくってくれる

こういったことが、びっくりするほど少ないコード量でできるのがFastAPIのスゴイところです。

🚀 なぜFastAPIが人気なの？

FastAPIがいま注目されている理由は、主に次の4つです：

1. とにかく速い！（Fast）
   名前のとおり、FastAPIは処理速度がとても速くて、実はFlaskなどの他のフレームワークよりも高性能だと言われています。
2. コードが少なくてすむ
   Pythonの「型ヒント」を使って、わかりやすく、ミスの少ないコードが書けます。
   はじめての人でも、あっという間にAPIを作れます。
3. 自動でドキュメントができる
   作ったAPIは、ブラウザで確認できる「Swagger UI」というページで確認できます。これがまたカッコいい！
4. 世界中で人気急上昇中
   GoogleやNetflix、Uberなどの大企業も使っていて、信頼性もバッチリ。これからPythonでWeb開発を始めたい人にはぴったりです。

🎯 この記事でできるようになること

この記事では、FastAPIを使って、以下のような基本的な操作を実際に体験してもらいます：

• FastAPIのインストール
• はじめてのAPIを作る
• ブラウザでAPIを確認してみる
• よくある失敗例とその直し方

Pythonの基本文法がちょっとわかれば、誰でもすぐに試せる内容なので、気軽に読み進めてくださいね！

2. FastAPIの準備｜インストールと開発環境

さあ、いよいよFastAPIを使っていく準備をしていきましょう！

Pythonがすでにインストールされている人なら、たった数分でFastAPIを動かせるようになりますよ。まだPythonが入っていない人は、こちらの記事を参考にしてみてください👇
👉 【Python入門1】WindowsでPythonを始めよう！IDLEのインストールと基本の使い方ガイド

🧪 ステップ①：Pythonが使えるか確認しよう

まずは、Pythonがちゃんと使える状態かチェックします。
以下のコマンドをターミナル（またはコマンドプロンプト）で入力してください：

python --version

もしくは、環境によっては：

python3 --version

と表示されるかもしれません。
Python 3.10.13 などのバージョンが表示されればOKです！

🧼 ステップ②：仮想環境を作ろう（おすすめ）

仮想環境とは、Pythonの専用作業スペースのことです。
他のプロジェクトと混ざらないので、トラブルが起きにくくなります！

以下のコマンドで仮想環境を作ってみましょう：

python -m venv venv

次に、仮想環境を有効にします。

Windowsの場合：

venv\Scripts\activate

macOS/Linuxの場合：

source venv/bin/activate

成功すると、ターミナルの左側に (venv) と表示されるようになります！

🚀 ステップ③：FastAPIとuvicornをインストール！

最後に、FastAPI本体と、それを動かすための「uvicorn（ユビコーン）」というツールをインストールします。

pip install fastapi uvicorn

これで準備は完了です！🎉
次のステップでは、いよいよ「はじめてのFastAPIアプリ」を作っていきましょう！

3. はじめてのFastAPIアプリを作ろう

いよいよ、FastAPIを使った「最初のWebアプリ」を作ってみましょう！

このステップでは、たった数行のコードで「こんにちは！」と返してくれる簡単なAPIを作ります。難しい知識はまだ必要ありませんので、気楽にやってみてくださいね😊

📄 ステップ①：Pythonファイルを作ろう

まずは、作業用フォルダ（例：fastapi_app）の中に、以下のようなPythonファイルを作りましょう：

ファイル名：main.py

✏️ ステップ②：FastAPIアプリのコードを書こう

以下のコードを main.py にコピペして保存してください。

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "こんにちは！FastAPIの世界へようこそ！"}

💡 解説：

• FastAPI() でアプリ本体を作ります
• @app.get("/") は「ルートURLにアクセスしたら…」という意味
• return の中にある {} は、返すデータ（JSON形式）

たったこれだけで、1つのAPIが完成しました！

🖥 ステップ③：アプリを起動してみよう！

ターミナルを開いて、main.py がある場所に移動して、次のコマンドを入力します：

uvicorn main:app --reload

💬 コマンドの意味：

• main：ファイル名（main.py）
• app：FastAPIインスタンスの変数名（app = FastAPI() の部分）
• --reload：コードを保存すると自動で再起動してくれるオプション（開発に便利！）

🌐 ステップ④：ブラウザで確認しよう！

ターミナルに以下のような表示が出たら…

Uvicorn running on http://127.0.0.1:8000

そのURL（http://127.0.0.1:8000）を**ブラウザで開いてみてください**。

すると…

{"message":"こんにちは！FastAPIの世界へようこそ！"}

このような文字が表示されるはずです！これがあなたが作ったAPIの“返事”です！

✅ さらにスゴイ！自動ドキュメントを見てみよう

FastAPIには、自動でAPIの説明ページを作ってくれる機能があります。

ブラウザで以下のURLにアクセスしてみましょう：

• http://127.0.0.1:8000/docs ←これが有名な「Swagger UI」！

カッコいい画面が出てきて、あなたのAPIが確認できます。
これがFastAPIの最大の魅力のひとつです！

4. APIのエンドポイントを増やしてみよう

前のステップでは、1つのシンプルなAPI（ルート /）を作りましたね。
ここからは、「APIをもっと便利にする方法」＝エンドポイントを増やす方法を解説していきます！

🧭 エンドポイントってなに？

「エンドポイント」とは、かんたんに言うとURLごとの入り口のことです。

たとえば：

• / にアクセス → 「こんにちは！」と表示
• /items/1 にアクセス → 「item_id: 1」と表示

こんなふうに、違うURLにアクセスすることで違う処理ができるのがAPIの特徴です。

🔁 パスパラメータ付きのエンドポイントを作ってみよう

新しく、IDを使ったルート /items/{item_id} を作ってみましょう。
コードを main.py に追加してください👇

@app.get("/items/{item_id}")
def read_item(item_id: int):
    return {"item_id": item_id}

💡 解説：

• {item_id} の部分は変数のようなもの。アクセスしたときの数字が item_id に入ります。
• item_id: int は「この値は整数だよ」と教えてあげる型ヒント。
• return でその値を返しています。

🌐 動かしてみよう！

FastAPIアプリをまだ起動していない場合は、ターミナルで次のコマンドを実行します：

uvicorn main:app --reload

そのあと、ブラウザでこのURLを開いてみてください：

http://127.0.0.1:8000/items/42

結果はこのようになります：

{"item_id": 42}

ばっちりですね！

📦 クエリパラメータを使う例

次は、URLに「?」をつけて指定するクエリパラメータを使った例です。

以下のように書きます：

@app.get("/users/")
def read_user(name: str = "ゲスト"):
    return {"message": f"こんにちは、{name}さん！"}

📌 アクセス方法：

http://127.0.0.1:8000/users/?name=たろう

結果：

{"message":"こんにちは、たろうさん！"}

※ name を指定しなければ「ゲストさん」になります！

✍ POSTメソッドの使い方も見てみよう！

ここまではすべて「GET」でしたが、次は「POST」メソッド（データを送る）も追加してみましょう。

from pydantic import BaseModel

class Item(BaseModel):
    name: str
    price: float

@app.post("/items/")
def create_item(item: Item):
    return {"message": f"{item.name} を登録しました（価格: {item.price}円）"}

Swagger UI（http://127.0.0.1:8000/docs）から試すことができます！

例：

{
  "name": "りんご",
  "price": 120.5
}

✅ まとめ

FastAPIでは、たった数行のコードでいろいろなエンドポイントが作れます：

• /items/1 のような パスパラメータ
• /users/?name=〜 のような クエリパラメータ
• POST を使った データ登録API

これらを組み合わせると、本格的なWebサービスも作れてしまうんです✨

次は、FastAPIの魅力である「Swagger UI」やAPIドキュメントの自動生成」について解説していきます！

5. Swagger UIでAPIを確認しよう

FastAPIのすごいところのひとつが、**「自動でAPIの説明ページ（ドキュメント）を作ってくれる機能」**です。

これを使えば、自分で作ったAPIがどんなものなのかをブラウザでかんたんに確認＆テストできます！
しかも、専門的な設定は必要ありません。FastAPIなら、最初からこの機能がついています✨

📖 Swagger UIってなに？

Swagger UI（スワッガーユーアイ）とは、APIの仕様（どんなURLがあるのか、どんなデータを送れるのかなど）を見やすく表示してくれるWebページのことです。

FastAPIでアプリを起動すると、自動的にSwagger UIが生成されます！

🌐 Swagger UIを開いてみよう！

ターミナルでFastAPIアプリを起動している状態で、ブラウザから次のURLにアクセスしてみましょう：

http://127.0.0.1:8000/docs

すると、こんな感じの画面が表示されるはずです👇

• 青い「GET」や「POST」のボタンがある
• エンドポイント（APIのURL）が一覧で見られる
• パラメータや戻り値の説明がついている
• 実際にデータを送信してAPIのテストができる！

🔍 「Try it out」でテストしてみよう！

1. GET /items/{item_id} をクリック
2. 「Try it out（試してみる）」を押す
3. item_id に好きな数字を入力（例：10）
4. 「Execute」をクリック！

すると、下のほうにレスポンス（APIの返事）が表示されます：

{
  "item_id": 10
}

このように、ブラウザ上だけでAPIの動作確認ができるのはとっても便利ですね！

🧾 ReDocもあるよ！

実はもうひとつ、FastAPIは**ReDoc（リードック）**という別の見た目のドキュメントも用意してくれています。

こちらは以下のURLでアクセスできます：

http://127.0.0.1:8000/redoc

Swagger UIよりも読み物としての説明に特化していて、ドキュメントとして整っている印象です。どちらも無料で自動生成されるのがありがたいですね。

✅ まとめ

FastAPIでは、開発者向けの便利なドキュメントが自動で作られます：

• http://127.0.0.1:8000/docs（Swagger UI）：実際に動かして試せる！
• http://127.0.0.1:8000/redoc（ReDoc）：読みやすく整理されたAPI説明ページ

コードを書いたらすぐに見て・試して・直せるので、開発スピードがグッと上がります。

6. 実用的な活用例｜簡単なToDo APIを作る

ここまでFastAPIの基本を学んできたみなさん、お疲れさまです！
ここからは**「実際にどんなAPIが作れるのか？」**を体験していきましょう。

今回はシンプルな「ToDoリストAPI」を作ってみます！

🧾 ToDo APIでやりたいこと

このミニアプリでは、以下の3つの機能を作ります：

1. 📋 現在のToDo一覧を取得（GET）
2. ➕ 新しいToDoを追加（POST）
3. ❌ 指定したToDoを削除（DELETE）

まだデータベースは使いません。Pythonのリスト（配列）だけで実現します！

💻 コード全体（コピペでOK）

main.py に、これまでの内容に追加・上書きする形で、以下のコードを入れてください👇

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel

app = FastAPI()

# ToDoアイテムのデータモデル
class ToDoItem(BaseModel):
    title: str

# データを保存するリスト（サーバーの中だけ）
todo_list = []

# 1. ToDo一覧を取得する
@app.get("/todos")
def get_todos():
    return {"todos": todo_list}

# 2. 新しいToDoを追加する
@app.post("/todos")
def add_todo(item: ToDoItem):
    todo_list.append(item)
    return {"message": "追加しました！", "todo": item}

# 3. ToDoを削除する
@app.delete("/todos/{index}")
def delete_todo(index: int):
    if index < 0 or index >= len(todo_list):
        raise HTTPException(status_code=404, detail="その番号のToDoは見つかりません")
    removed = todo_list.pop(index)
    return {"message": "削除しました", "removed": removed}

🌐 試してみよう（Swagger UI）

1. アプリを起動していない人は以下のコマンドで起動： bashコピーする編集するuvicorn main:app --reload
2. ブラウザで http://127.0.0.1:8000/docs にアクセス！

試し方：

• POST /todos：新しいToDoを追加 jsonコピーする編集する{ "title": "ブログ記事を書く" }
• GET /todos：今のToDo一覧を確認
• DELETE /todos/{index}：番号を指定して削除（0番目が最初）

✅ 補足ポイント

• データは「Pythonのリスト（配列）」に保存されます。
• このデータはサーバーを再起動すると消えます（＝データベースは未使用）。
• 初心者でも「アプリっぽさ」を体験しやすい構成になっています！

7. よくあるエラーと対処法

FastAPIは使いやすいフレームワークですが、最初のうちはちょっとしたミスでエラーが出てしまうこともあります。

でも大丈夫！よくあるエラーとその直し方を知っておけば、怖くありません😊
ここでは、初心者がよく出会う3つのエラーとその解決方法を紹介します。

❌ エラー①：ModuleNotFoundError: No module named 'fastapi'

🔎 原因：

FastAPIやuvicornをインストールしていない、もしくは仮想環境を有効にしていない状態です。

✅ 対処法：

以下のコマンドをターミナルで実行して、もう一度インストールしましょう：

pip install fastapi uvicorn

仮想環境を使っている場合は、必ず有効にしてからインストール＆実行してくださいね👇

• Windows: venv\Scripts\activate
• Mac/Linux: source venv/bin/activate

❌ エラー②：AttributeError: module 'main' has no attribute 'app'

🔎 原因：

FastAPIの起動コマンドで指定している「main:app」のどちらかが間違っていることが多いです。

✅ 対処法：

以下を確認してください：

• ファイル名は main.py ですか？（uvicorn main:app の main 部分）
• app = FastAPI() の変数名は app になっていますか？

修正後は、再度以下のコマンドで起動しましょう：

uvicorn main:app --reload

❌ エラー③：POSTリクエストで422 Unprocessable Entity

🔎 原因：

POSTで送ったデータの形式が間違っている場合に出ます。

たとえば、こんなコードがあるとします：

class Item(BaseModel):
    name: str
    price: float

そのときに、リクエストがこうなっていたらNGです：

{
  "name": "ノートパソコン"
}

（← price が抜けている！）

✅ 対処法：

正しく送る必要があります。例えば：

{
  "name": "ノートパソコン",
  "price": 98000
}

Swagger UIでは「モデルの例」が表示されるので、そちらを参考にすると安心です。

🛠 それでもうまくいかないときは？

• エラーメッセージをよく読んでみましょう。行番号やヒントが書かれていることがあります。
• コピペミスがないか確認しましょう（カッコの閉じ忘れ、インデントなど）。
• わからないときは、エラー名 Python FastAPI でGoogle検索すると多くの事例が出てきます。

ここまで読んでくださってありがとうございます！
FastAPIの基本的な使い方、エンドポイントの作成、Swagger UIの使い方、ToDo APIの作成、そしてエラー対応までバッチリ学べましたね🎉

🧭 あわせて読みたい

• 👉 Python初心者がFlaskでWebアプリを作る方法
• 👉 【中級者向け】PythonでChatGPT APIを使う完全ガイド
• 👉 【初心者向け】PythonでGoogleスプレッドシートを操作する基本

よくある質問（Q&A）

1. はじめに｜Cloudflare Pages × Python APIって何ができるの？

こんにちは！この記事では、Cloudflare PagesとPython APIを組み合わせて、最新のWebアプリを公開する方法をご紹介します。

最近よく聞く「Jamstack（ジャムスタック）」って言葉、知っていますか？これは、フロントエンド（見た目）を静的サイトで、バックエンド（中身の処理）をAPIで作るという新しいWeb開発の考え方なんです。

たとえば…

• WebページはCloudflare Pagesで超高速に配信！
• データの保存や計算などの裏側処理はPythonで作ったAPIにおまかせ！

というふうに、「表示」と「処理」をきれいに分けて動かせるのがJamstack構成のポイントです。

🔧こんな人におすすめ！

• PythonでAPI（裏側のプログラム）を作ったけど、公開方法がよくわからない…
• Cloudflare Pagesってよく聞くけど、どう使えばいいの？
• ReactやHTMLでフロントを作ったあと、バックエンドをPythonで連携したい！

🌟この記事でわかること

この記事では、次のようなことをステップごとにやさしく解説していきます！

• Cloudflare Pagesの基本とメリット
• PythonでAPIを作る方法（FastAPIを使います）
• 静的サイトとAPIを組み合わせて公開する手順

「サーバーを持たずにWebアプリを作りたい！」「Pythonで書いたコードをそのままWebに活かしたい！」
そんな方にぴったりの内容です。

それでは、Cloudflare Pages × Python APIの世界へ、いっしょに一歩踏み出してみましょう！

2. Jamstackとは？構成の基本をおさらい

「Jamstack（ジャムスタック）」って言葉、ちょっとカッコいいけど、なんだか難しそうですよね。でも、仕組みは意外とシンプルなんです。

💡Jamstackって何の略？

Jamstackは、3つの要素の頭文字からできた言葉です。

• JavaScript：動きをつける言語（ReactやVueなど）
• API：外部のデータや処理を呼び出す仕組み（今回はPythonで作る！）
• Markup：HTMLなどの静的なページ

つまり、「フロントエンドは静的（HTML）で高速に配信し、裏側の処理はAPIで別に用意する」というスタイルなんです。

🚀Jamstack構成のメリット

なぜこの構成が人気なのか？理由はとても魅力的です。

🔧よくあるJamstackの例

たとえば、次のような構成が人気です：

• フロントエンド：Next.js（Reactベース）を使ってCloudflare Pagesにホスティング
• バックエンド：FastAPI（Python）でAPIを用意し、Cloudflare Workersや他のサーバレス環境で公開

こんなふうに「見た目」と「処理」を分けて構築することで、モダンでメンテしやすいアプリが作れるんですね。

Jamstackのイメージがつかめてきたら、次はいよいよ主役のひとつ「Cloudflare Pages」について詳しく見ていきましょう！

3. Cloudflare Pagesとは？無料で使える高速ホスティング

さて、ここからはJamstack構成の「見た目」部分、つまり静的サイトのホスティングを担う「Cloudflare Pages（クラウドフレア・ページズ）」について見ていきましょう。

🌀Cloudflare Pagesってなに？

Cloudflare Pagesは、静的なWebサイトをGitHubと連携して自動で公開できるサービスです。しかも無料プランでも十分すぎる機能が使えるので、個人開発や学習用途にもピッタリ！

できることはこんな感じ：

• GitHubにプッシュしたら自動でデプロイされる
• 世界中のCloudflare CDNから超高速で配信
• カスタムドメイン・SSL対応も無料！

🌟Cloudflare Pagesのメリットまとめ

📂静的サイトってどんなもの？

静的サイトというのは、HTML・CSS・JavaScriptなどがすでに完成した状態のファイルです。Cloudflare Pagesでは、こういったファイルをまるごとアップロードするだけで公開できます。

たとえば…

• ReactやVueなどのフレームワークでビルドしたページ
• PelicanやHugoなどの静的ブログジェネレーターで作ったサイト
• 純粋なHTML/CSSの手書きサイト

これらすべてがCloudflare Pagesに対応しています！

🤔でも、Pythonのバックエンドはどうするの？

ここがポイント。Cloudflare Pagesは「静的サイト専用」なので、Pythonのようなサーバーサイドの処理はそのままでは動かせません。

じゃあどうするか？
答えは次のセクションで詳しく紹介しますが、Python APIを別の場所にホスティングして、それをフロントから呼び出すというスタイルにするんです。

4. PythonでAPIを作る｜FastAPIを例に解説

さて、ここからは「バックエンド」側のお話です。
Cloudflare Pagesで公開する静的なフロントエンドと連携するために、PythonでAPIを作っておく必要があります。

ここでは、近年大人気のフレームワーク「FastAPI（ファストエーピーアイ）」を使って、かんたんなAPIを作ってみましょう！

🐍FastAPIってなに？

FastAPIは、PythonでAPIを高速に作れる軽量フレームワークです。次のような特徴があります：

• 書き方がシンプルで初心者でもわかりやすい！
• 自動でAPIドキュメント（Swagger UI）を作ってくれる！
• 実行がめちゃくちゃ速い！

PythonでAPIを作るなら、まずこれを使っておけば間違いなしです。

🛠️準備するもの

まずは環境を用意しましょう。次の手順でOKです：

# 仮想環境の作成（任意）
python -m venv venv
source venv/bin/activate  # Windowsなら venv\Scripts\activate

# 必要なパッケージのインストール
pip install fastapi uvicorn

📦最小構成のAPIコードを書いてみよう

次に、main.py という名前で以下のようなコードを作ってみましょう。

from fastapi import FastAPI

app = FastAPI()

@app.get("/")
def read_root():
    return {"message": "こんにちは！FastAPIが動いています！"}

@app.get("/greet/{name}")
def greet(name: str):
    return {"message": f"こんにちは、{name}さん！"}

🚀ローカルで起動してみよう

APIを実行するには、以下のコマンドを使います：

uvicorn main:app --reload

起動したら、ブラウザで次のURLにアクセスしてみましょう：

• http://localhost:8000 → トップページ
• http://localhost:8000/greet/Taro → 「こんにちは、Taroさん！」と返してくれる！

🌐Swagger UIでAPIを試せる！

FastAPIは、http://localhost:8000/docs にアクセスすると、自動生成されたAPIドキュメント（Swagger UI）が表示されます。ここでAPIを直接試すこともできますよ！

このようにして、Pythonだけで簡単に動くAPIが完成しました！
あとは、これをどこかに「公開」して、Cloudflare PagesのフロントエンドとつなげればOKです。

5. Python APIをCloudflare Workersにデプロイする手順

前のセクションで作成したPythonのFastAPI。ローカルではバッチリ動きましたね！
でも、Webアプリとして誰でもアクセスできるようにするには「どこかに公開」する必要があります。

ここでは、Cloudflareが提供する**サーバーレス実行環境「Cloudflare Workers」**を使って、PythonのAPIを動かす方法を解説します。

😥 でもちょっと待って！Cloudflare WorkersってPython動くの？

正直に言うと、Cloudflare Workersは**Node.jsやWebAssembly（WASM）**ベースの環境なので、そのままPythonを動かすことはできません。

ですが、以下の方法でPython APIを「擬似的に」クラウドに公開することができます：

✅ Python API公開の3つの選択肢（Cloudflare Pagesと相性◎）

ここでは、一番現実的でかんたんな「①FastAPIを別クラウドにデプロイ」してから「Cloudflare Pagesのフロントエンドとつなぐ」方法を紹介します！

🚀ステップ1：Render.comでFastAPIを公開しよう

1. GitHubにFastAPIのコードをアップ

1. GitHubに新しいリポジトリを作成
2. main.py や requirements.txt をpush

# requirements.txt
fastapi
uvicorn

2. Renderで新しいWebサービスを作成

1. https://render.com/ にアクセスして無料アカウント作成
2. Dashboard → 「New Web Service」→ GitHubを選んでリポジトリを選択
3. 設定値は以下を参考に：

3. 数分待つと、自動でAPIが公開されるURLが発行されます！

例：

https://my-fastapi-app.onrender.com/greet/Taro

これで、外部からもアクセスできる「公開されたPython API」が完成しました！

🔗ステップ2：Cloudflare Pagesの静的フロントと連携

Cloudflare Pages側のJavaScriptやHTMLから、このAPIを呼び出せばOKです。

例（JavaScript）：

fetch("https://my-fastapi-app.onrender.com/greet/Taro")
  .then(res => res.json())
  .then(data => console.log(data.message));

RenderやFly.ioでも独自ドメイン対応可能です。
さらにCloudflare側でDNS設定すれば、静的サイトと同じドメイン配下で統一することも可能ですよ！

6. Cloudflare PagesとAPIを統合する

ここまでで、Cloudflare Pagesで静的なフロントエンドができて、Pythonで作ったAPIもクラウドに公開できました！

あとは、この2つを組み合わせて、ユーザーが操作するとAPIが動き、結果が表示されるようにすれば、JamstackなWebアプリの完成です！

🎨ステップ1：フロントエンドを作成しよう

まずは、Cloudflare Pagesにアップする**静的Webページ（HTML/JS）**を作成します。ここでは、APIと連携するシンプルなHTMLを例にしてみましょう。

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Python API連携アプリ</title>
</head>
<body>
  <h1>Python APIと連携しよう！</h1>
  <input type="text" id="name" placeholder="名前を入力してね" />
  <button onclick="callAPI()">あいさつする</button>
  <p id="result"></p>

  <script>
    async function callAPI() {
      const name = document.getElementById('name').value;
      const response = await fetch(`https://your-fastapi-app.onrender.com/greet/${name}`);
      const data = await response.json();
      document.getElementById('result').textContent = data.message;
    }
  </script>
</body>
</html>

📦ステップ2：Cloudflare Pagesにデプロイ

このHTMLをGitHubにpushし、Cloudflare Pagesに連携させます。

手順：

1. GitHubで新しいリポジトリを作成（例：python-api-frontend）
2. index.html をルートに置く
3. Cloudflare Pagesにログイン → 「Create a Project」
4. GitHubのリポジトリを選ぶ
5. ビルド設定は次のように：

これで、Cloudflare Pagesで静的ページがデプロイされます！
例：

https://python-api-frontend.pages.dev/

🔗ステップ3：APIとつなげて動作確認！

Cloudflare Pagesに公開されたページで、名前を入力しボタンを押すと、FastAPIで作ったAPIが呼ばれて結果が表示されるようになります！

🔐ステップ4：環境変数やAPIの保護（補足）

本番環境では以下のポイントにも注意しましょう。

• APIキーが必要な場合は Cloudflare Pagesの環境変数機能を使う
• レート制限や認証を導入して、APIの濫用を防止
• CORS設定をFastAPI側で調整（fastapi.middleware.cors）

例：

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://your-pages.pages.dev"],
    allow_methods=["*"],
    allow_headers=["*"],
)

これで、Cloudflare Pages + Python APIを組み合わせたJamstack構成が完成です！

7. 公開と動作確認｜デプロイ後のチェックポイント

ついに！Cloudflare Pagesで静的なフロントエンドを公開し、Pythonで作ったAPIとも連携できるようになりました。

ここでは、「**きちんと動いているか？」「本番運用で問題が起きないか？」」をチェックするためのポイントをまとめておきます！

✅1. 公開URLの確認

まずは、Cloudflare Pagesで発行されたURLを開いてみましょう。

例：

https://your-frontend-project.pages.dev/

画面がちゃんと表示されているか、ボタンなどの操作ができるか確認します。

✅2. APIとの通信ができているか確認

フォームやボタンを使ってAPIにリクエストを送り、結果が表示されるかどうかを確認します。

例：

• 名前を入力 → 「こんにちは、◯◯さん！」と表示されたらOK！
• ネットワークタブ（開発者ツール）でfetchリクエストが成功しているか確認

✅3. API側でエラーが出ていないか？

RenderやFly.ioなど、APIをホスティングしているプラットフォームの管理画面でログを確認しましょう。

• 404や500エラーが出ていないか？
• CORSエラーで止まっていないか？

✅4. CORS（クロスオリジン）の確認

ブラウザからAPIを呼び出すとき、「CORS」というセキュリティ設定に引っかかって失敗することがあります。

FastAPI側で、以下のようなCORS設定が入っているか確認しましょう：

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://your-frontend-project.pages.dev"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

✅5. モバイル・別ブラウザでも確認しよう

PCだけでなく、スマホや別のブラウザでも表示・操作できるか確認することで、ユーザー目線の不具合を減らせます。

• スマホ表示が崩れていないか？
• 入力やボタン操作がスムーズに動くか？

✅6. キャッシュやHTTPS設定もチェック

Cloudflare Pagesは自動でHTTPS（SSL）に対応しますが、初回デプロイ後すぐはHTTPリダイレクトが効かない場合もあります。

• https:// で始まるURLでアクセスできるか？
• APIや画像などもHTTPS経由で読み込まれているか？

✅7. 予期しない入力にも強いか？（バリデーション）

予想外の入力（空欄、記号だけ、大量の文字など）でも、APIが落ちないようにチェック！

例：

@app.get("/greet/{name}")
def greet(name: str):
    if not name or len(name) > 50:
        return {"message": "入力が正しくありません"}
    return {"message": f"こんにちは、{name}さん！"}

このように、公開後は技術的なチェック＋ユーザー体験のチェックの両方を丁寧に行うことで、安心して運用できるJamstackアプリが完成します！

8. まとめ

ここまで、Cloudflare PagesとPython API（FastAPI）を連携して、Jamstack構成のWebアプリを作る流れを一緒に見てきました。

ふり返ってみると、こんなステップで構成できましたね！

✅今回やったことまとめ

🚀Jamstackで広がる開発の可能性

Jamstack構成にすることで、速く・安全で・拡張しやすいWebアプリを作ることができます。

• 小規模なプロジェクトや個人アプリ
• APIベースのSaaS
• ブログやポートフォリオ、業務ツールなど

Pythonを活かして、さまざまなサービスを軽量に実現できるのが魅力ですね！

🔄今後の展開アイデア

今回の構成をベースに、次のようなステップアップも可能です：

• ログイン機能を追加（OAuthやJWT連携）
• データベース（PostgreSQLなど）と接続して本格的なCRUDアプリ化
• Stripe APIなどと連携して、課金付きアプリにも！

JamstackとPythonを組み合わせれば、「静的サイト × 動的API」という最先端の開発スタイルを誰でも体験できます。
ぜひ、あなたのアイデアを形にしてみてくださいね！

🔗あわせて読みたい（関連リンク）

以下は、本記事と関連性が高く、内部リンクとしておすすめの既存記事です：

• 👉 Pelicanでブログを作ってCloudflare Pagesにデプロイする方法
  静的サイトホスティングの基本を学べる記事。Cloudflare Pages初心者に◎
• 👉 【初心者向け】FastAPIの基本の使い方を解説
  FastAPIをはじめて使う方にぴったりのチュートリアル
• 👉 Python初心者がFlaskでWebアプリを作る方法｜最小構成で始めるWeb開発
  Flaskとの違いや使い分けが気になる人にもおすすめ
• 👉 Pythonでできる自動化10選｜初心者向けにやさしく解説
  Jamstackと連携できる自動化スクリプトのヒントにも！

よくある質問（Q&A）