【初心者向け】Webアプリを作ろう STEP3：バックエンドを理解する（Python）

2026-05-22プログラミング

#Web開発#初心者#Python#FastAPI#バックエンド#API

STEP2でフロントエンド（HTML/CSS/JavaScript）を使って画面を作りました。

STEP3ではバックエンドに挑戦します。バックエンドとは、ユーザーには見えない「裏側の処理」を担う部分です。PythonでサーバーAPIを作り、STEP2の画面からそのAPIを呼び出してみましょう。

ゴール

STEP2で作ったWebページのボタンを押すと、Pythonサーバーにリクエストを送り、サーバーからの返答（レスポンス）を画面に表示する。

バックエンドとは？

ユーザー
  ↕ 見る・操作する
【フロントエンド】 HTML / CSS / JavaScript
  ↕ HTTPリクエスト / レスポンス
【バックエンド】← STEP3で学ぶ
  Python（FastAPI）
  ↕ データを保存・取得する
【データベース】← STEP4で学ぶ
  PostgreSQL

バックエンドの仕事：

フロントエンドからのリクエストを受け取る
計算・処理をする
結果をフロントエンドに返す

作業フォルダの構成

STEP2で作った webapp フォルダに、バックエンドのファイルを追加します。

webapp/
├── index.html      ← STEP2で作成済み
├── style.css       ← STEP2で作成済み
├── script.js       ← STEP2から更新する
└── main.py         ← STEP3で新規作成

FastAPIとは？

FastAPI はPythonでAPIサーバーを作るためのフレームワークです。少ないコードで簡単にAPIが作れます。

APIとは？ Application Programming Interface の略。アプリとアプリが会話するための「窓口」のようなものです。フロントエンドがバックエンドに「データをください」とリクエストし、バックエンドが「はいどうぞ」と返す仕組みがAPIです。

FastAPIのインストール

ターミナルを開いて以下を実行します：

pip install fastapi uvicorn

pip はPythonのパッケージ管理ツールです。 uvicorn はPythonのWebサーバーを動かすためのツールです。

インストールが完了したら確認してみましょう：

pip show fastapi

バージョン情報が表示されればOKです。

1. Pythonでサーバーを作る

webapp フォルダに main.py を作成します。

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

# FastAPIのアプリを作成
app = FastAPI()

# フロントエンドからのアクセスを許可する設定（CORS）
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_methods=["*"],
    allow_headers=["*"],
)

# GETリクエストに応答するAPI
@app.get("/hello")
def say_hello():
    return {"message": "Pythonサーバーからこんにちは！"}

# 名前を受け取って挨拶を返すAPI
@app.get("/greet/{name}")
def greet(name: str):
    return {"message": f"こんにちは、{name}さん！サーバーから返信しました。"}

コードの解説

# @app.get("/hello") → /hello というURLへのGETリクエストを受け付ける
@app.get("/hello")
def say_hello():
    # 辞書（dict）をreturnするとJSON形式でレスポンスが返る
    return {"message": "Pythonサーバーからこんにちは！"}

2. サーバーを起動する

ターミナルで webapp フォルダに移動してサーバーを起動します：

cd webapp
uvicorn main:app --reload

--reload オプションをつけると、コードを変更したときに自動でサーバーが再起動されます。

起動成功すると以下のように表示されます：

INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)
INFO:     Started reloader process
INFO:     Started server process
INFO:     Waiting for application startup.
INFO:     Application startup complete.

3. ブラウザでAPIを確認する

サーバーが起動したら、ブラウザで以下のURLを開いてみましょう：

APIのレスポンスを確認：

http://localhost:8000/hello

ブラウザに以下のJSON（データ）が表示されれば成功です：

{"message":"Pythonサーバーからこんにちは！"}

名前を渡すAPIも試してみましょう：

http://localhost:8000/greet/田中

{"message":"こんにちは、田中さん！サーバーから返信しました。"}

自動ドキュメント機能

FastAPIには自動でAPIドキュメントを作る機能があります：

http://localhost:8000/docs

このURLを開くと、作ったAPIの一覧が表示され、ブラウザ上でAPIを試すことができます。これは開発時にとても便利な機能です。

4. フロントエンドからAPIを呼び出す

STEP2で作った script.js を更新して、Pythonサーバーと連携させます。

`script.js` を更新する

// ボタン要素を取得する
const button = document.getElementById('hello-btn');

// メッセージ表示エリアを取得する
const message = document.getElementById('message');

// ボタンがクリックされたときの処理
button.addEventListener('click', async function() {
  // ローディング表示
  message.textContent = '通信中...';

  try {
    // Pythonサーバーの /hello APIを呼び出す
    const response = await fetch('http://localhost:8000/hello');

    // レスポンスをJSON形式で取得する
    const data = await response.json();

    // サーバーから返ってきたメッセージを表示する
    message.textContent = data.message;

  } catch (error) {
    // エラーが起きた場合
    message.textContent = 'サーバーに接続できませんでした';
  }
});

追加：名前を入力してサーバーに送る機能

index.html の「ボタンを押してみよう」セクションを以下に更新しましょう：

<section>
  <h2>バックエンドと連携しよう</h2>
  <input type="text" id="name-input" placeholder="名前を入力してください">
  <button id="hello-btn">サーバーに送信</button>
  <p id="message"></p>
</section>

script.js も名前を送る処理に更新します：

const button = document.getElementById('hello-btn');
const message = document.getElementById('message');
const nameInput = document.getElementById('name-input');

button.addEventListener('click', async function() {
  const name = nameInput.value;

  // 名前が空の場合はデフォルトAPIを呼ぶ
  const url = name
    ? `http://localhost:8000/greet/${name}`
    : 'http://localhost:8000/hello';

  message.textContent = '通信中...';

  try {
    const response = await fetch(url);
    const data = await response.json();
    message.textContent = data.message;
  } catch (error) {
    message.textContent = 'サーバーに接続できませんでした。サーバーが起動しているか確認してください。';
  }
});

5. 動作確認

ターミナルでサーバーが起動していることを確認（uvicorn main:app --reload）
ブラウザで index.html を開く
テキストボックスに名前を入力して「サーバーに送信」ボタンを押す

画面に以下のように表示されれば成功です：

こんにちは、田中さん！サーバーから返信しました。

仕組みの整理

ボタンを押してから結果が表示されるまでの流れ：

① ユーザーがボタンをクリック
        ↓
② JavaScript が fetch() でHTTPリクエストを送信
        ↓
③ Python（FastAPI）サーバーがリクエストを受け取る
        ↓
④ サーバーが処理をしてJSONを返す
        ↓
⑤ JavaScript がJSONを受け取って画面に表示する

この流れが「フロントエンドとバックエンドの連携」の基本です。

エラーが起きたときは？

エラー	原因	対処法
`Failed to fetch`	サーバーが起動していない	`uvicorn main:app --reload` を実行する
`pip: command not found`	PythonのPATHが設定されていない	STEP1を確認してPythonを再インストール
`ModuleNotFoundError: No module named 'fastapi'`	FastAPIがインストールされていない	`pip install fastapi uvicorn` を実行

まとめ

やったこと	内容
FastAPIのインストール	`pip install fastapi uvicorn`
サーバー作成	`main.py` にAPIを定義した
サーバー起動	`uvicorn main:app --reload`
フロントエンド連携	`fetch()` でAPIを呼び出した

STEP3のゴール達成！

PythonでAPIサーバーを作れた
ブラウザからサーバーを呼び出して結果を表示できた

次のSTEP4では、このサーバーに**データベース（PostgreSQL）**を接続します。データを保存・取得することで、本格的なWebアプリの仕組みが完成します！

前の記事：【STEP2】フロントエンドを理解する（HTML/CSS/JavaScript）

次の記事：【STEP4】データベースを理解する（PostgreSQL）

← 記事一覧に戻る