はじめに
こんにちは！製造業で働いている私ですが、
これまでローコードツールやExcelマクロで業務を効率化してきました。
だが、だんだんと限界を感じるようになってきて...
「もっと柔軟に、もっと自由にシステムを作れないかな？」
そう思っていたとき、ふと気づきました。
「そういえばWebアプリってあるじゃん！」
でも、Webアプリの作り方なんて全く知らない...。プログラミングも初心者...。
フロントエンドとバックエンド？これってやりとりどうなってるん？？？
そんなとき、AIとおしゃべりしながら学んでみることにしました。
結果として、FastAPIというPythonのフレームワークを使って、
実際に動く電卓アプリを作ることからWebアプリの仕組みを学ぶことができました！
今回は、その過程で学んだことを初心者の方にもわかりやすくまとめてみます。
目次
なぜWebアプリに興味を持ったのか
ローコード・Excelマクロの限界
これまで、以下のようなツールを使って業務を効率化してきました：
- ローコードツール: 簡単なフォームやワークフローは作れるけど、複雑な処理は難しい
- Excelマクロ: VBAで自動化はできるけど、複数人で使うのが大変
- 共有フォルダ: ファイルの管理が煩雑で、同時編集ができない
特に困っていたのは：
- 複数の人が同時に使いたい
- スマホやタブレットからもアクセスしたい
- もっと柔軟な機能を追加したい
Webアプリなら解決できるかも！
Webアプリなら：
- ✅ ブラウザがあればどこからでもアクセスできる
- ✅ 複数人で同時に使える
- ✅ 機能を自由に追加できる
でも、作り方がわからない...。
FastAPIとの出会い
AIに相談してみた
「Webアプリを作りたいけど、何も知らない。どうすればいい？」
AIに聞いてみると、いくつかの選択肢を教えてくれました：
- Flask: シンプルだけど、機能を自分で実装する必要がある
- Django: 高機能だけど、学習コストが高い
- FastAPI: モダンで高速、自動ドキュメント生成が便利
FastAPIを選んだ理由
FastAPIを選んだ理由は：
-
自動ドキュメント生成:
/docsにアクセスするだけでAPIの使い方がわかる - シンプル: コードが読みやすく、初心者にも理解しやすい
- 高速: Node.jsやGoと同等のパフォーマンス
- 知識の面: Pythonについて少しだけ触ったことがあった
AIとおしゃべりしながら、少しずつ理解していきました。
APIって何？超簡単に解説
APIとは
API（Application Programming Interface） って聞くと難しそうですが、実は簡単です。
API = サーバーとブラウザがおしゃべりするための約束事
例えば、電卓アプリの場合：
- ブラウザ: 「10 + 5を計算して！」
- サーバー: 「15だよ！」
- ブラウザ: 「ありがとう！画面に表示するね」
この「おしゃべり」のルールがAPIです。
GETとPOSTの違い
APIには主に2つの方法があります：
- GET: データを「取得」する（例：天気情報を見る）
- POST: データを「送る」（例：計算式を送って計算してもらう）
電卓アプリでは、計算式を送るので POST を使います。
実際の例
電卓アプリの場合：
ブラウザ → サーバー: 「10 + 5を計算して！」（POST）
サーバー → ブラウザ: 「結果は15です！」（JSON形式）
このやり取りがAPIです。
理解するために簡単な電卓アプリを作ってみた
全体の仕組み
電卓アプリは2つの部分でできています：
- バックエンド（サーバー側）: 計算を実行する部分（Python + FastAPI）
- フロントエンド（ブラウザ側）: 見た目と操作する部分（HTML + JavaScript）
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ ブラウザ │ ────→ │ FastAPI │ ────→ │ Python │
│ (ユーザー) │ ←──── │ (サーバー) │ ←──── │ (計算処理) │
└─────────────┘ └──────────────┘ └─────────────┘
バックエンド（main.py）
サーバー側のコードです。計算を実行する部分を作ります。
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from pydantic import BaseModel
# FastAPIアプリを作成
app = FastAPI()
# 計算リクエストの型を定義
class CalculationRequest(BaseModel):
expression: str # 計算式（例: "10 + 5"）
# 計算APIエンドポイント
@app.post("/api/calculate")
async def calculate(request: CalculationRequest):
# 計算を実行
result = eval(request.expression.replace(' ', ''))
return {"result": result}
# HTMLファイルを配信
app.mount("/static", StaticFiles(directory="static"), name="static")
ポイント：
-
@app.post("/api/calculate"): POSTメソッドで/api/calculateにアクセスできる -
CalculationRequest: 送られてくるデータの型を定義 -
eval(): 計算式を実行（実際のアプリではセキュリティ対策が必要）
フロントエンド（static/calculator.html）
ブラウザ側のコードです。見た目と操作する部分を作ります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>電卓</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 400px;
margin: 50px auto;
padding: 20px;
}
input {
width: 100%;
padding: 10px;
font-size: 18px;
margin-bottom: 10px;
}
button {
width: 100%;
padding: 10px;
font-size: 18px;
background: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>電卓アプリ</h1>
<input type="text" id="expression" placeholder="10 + 5">
<button onclick="calculate()">計算</button>
<div id="result"></div>
<script>
async function calculate() {
// 入力された計算式を取得
const expression = document.getElementById('expression').value;
// サーバーにリクエストを送る
const response = await fetch('/api/calculate', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({expression: expression})
});
// 結果を受け取る
const data = await response.json();
// 画面に表示
document.getElementById('result').textContent = '結果: ' + data.result;
}
</script>
</body>
</html>
ポイント：
-
fetch(): サーバーにリクエストを送る -
JSON.stringify(): データをJSON形式に変換 -
response.json(): サーバーからのレスポンスをJSONとして受け取る
動かしてみる
- サーバーを起動
python -m uvicorn main:app --reload
- ブラウザでアクセス
http://localhost:8000/static/calculator.html にアクセス
こんな感じの画面をAIが作ってくれました
- 計算してみる
「10 + 5」と入力して「計算」ボタンをクリック！
「動いた！」
この瞬間が、Webアプリ開発の楽しさを知るきっかけでした。
自動ドキュメントも見てみる
FastAPIのすごいところは、自動でAPIドキュメントを作ってくれることです。
http://localhost:8000/docs にアクセスすると、APIの使い方が一目でわかります！
ブラウザから直接APIをテストすることもできます。これは本当に便利です。
まとめ
ローコードやExcelマクロから始まって、Webアプリ開発に挑戦した私の経験をまとめました。
重要なポイント：
- ✅ API = サーバーとブラウザがおしゃべりする約束事
- ✅ GET = データを取得、POST = データを送る
- ✅ FastAPIは初心者にも優しい - 自動ドキュメントが便利
- ✅ AIとおしゃべりしながら学ぶ - 新しい学習スタイル
AIと一緒に学びながら、少しずつ成長していけることがわかりました。
「何も知らないけど、とりあえずAIとおしゃべりして学んでみるか」
この気持ちで始めてみると、意外とできるものですね！ びっくり！
参考リンク
おわりに
この記事が同じように
「Webアプリを作ってみたい」と思っている方の参考になれば幸いです。
「完璧を目指さず、まずは動くものを作る」
一緒に学んでいきましょう！🚀