【第1回】FastAPIチュートリアル: ToDoアプリを作ってみよう【環境構築編】

メディアチーム

【第1回】FastAPIチュートリアル: ToDoアプリを作ってみよう【環境構築編】

メディアチーム

2019.11.14

IT技術

FastAPI Python

FastAPIチュートリアル: toDoアプリを作ってみる

FastAPI は、最近注目を集めている WebAPIフレームワークです。

以下記事でも、ご紹介している Responder と似ているところもあります。

しかし、FastAPI は、高速にレスポンス可能な WebAPI を構築することに優れています。

2019.10.25【まとめ編】Responderを使ってDjangoチュートリアルをやってみたResponderを使ってDjangoチュートリアルをやってみた～まとめ～ライトコード社長も今、イチオシのWEBフレー...

今回作るもの

しかし、今回、FastAPIを使って作るのは、プログラムを対象としたAPIではなくユーザ(人)を対象とした、いわゆる「MVCアプリケーション（サービス）」です。

MVCの概略図（このような形はMVC2とも呼ばれる）

（Flaskでは、MVT: Model View Template と呼ばれますが、ほとんど同じです。）

もちろん、FastAPIを作るからには、API的要素も加えてみます。

この連載を通して学んでいただきたいこと

FastAPIの使い方
バックで動いているstarletteの使い方
Webアプリケーションの作り方

本記事からスタートする連載「FastAPIチュートリアル: ToDoアプリを作ってみる」では、シンプルなtoDoアプリ作成を通して、上記の3点を学んでいただきたいと考えています。

環境構築

それでは、お約束の環境構築から始めていきます！

前提として、Pythonは3.6以上である必要はありますので、アップデートを予めしておいてください。

FastAPIをインストール

では、pipコマンドからFastAPIをインストールしましょう！

1$ pip install fastapi

このとき、SQLAlchemy と Uvicorn が入っていなければ、ついでにインストールしてください。

1$ pip install sqlalchemy uvicorn

これで、FastAPI が使えるようになりました！

注意

FastAPI をインストールした後は、Responder が動作しなくなることがあります。(逆も然り)

これは、どちらも裏で starlette と言うフレームワークが動いており、それぞれ動作するバージョンが異なるために生じます。

もし動かなくなったら、もう一度使いたいフレームワークをインストールしなおしてみてください。

プロジェクトを作成する

では、プロジェクトディレクトリを作成していきます。

特に名前はなんでも構いません。

この記事では「fastAPI_Tutorial」にしています。

Djangoとは違い、プロジェクト作成コマンドはなく、プロジェクトを１から全て構築していく必要があります。

これは大変な反面、無駄がなく、FastAPIの良い一面でもあります。

必要なファイルを作成する

次に、最低限必要なファイルとコードを作成していきましょう。

まずは、以下の3つのファイルを作成してください。

run.py (サーバ立ち上げ用)
urls.py (URLのルーティング用)
controllers.py (レスポンス処理用)

（名前はなんでもOKですが、分かりやすくこのような名前にしています。）

controllers.py

順番が逆になりますが、まずは、controllers.py に以下の内容を書きましょう。

1from fastapi import FastAPI
2from starlette.requests import Request
3
4app = FastAPI(
5    title='FastAPIでつくるtoDoアプリケーション',
6    description='FastAPIチュートリアル：FastAPI(とstarlette)でシンプルなtoDoアプリを作りましょう．',
7    version='0.9 beta'
8)
9
10
11def index(request: Request):
12    return {'Hello': 'World'}

このファイルでは、FastAPIインスタンスを生成し、この後紹介するurls.pyでURLに紐づく関数を定義しています。

今はまだ、簡単なJSONを返す処理になっていますが、いずれ変えていきたいと思います。

urls.py

ここでは、先ほども言ったように、URLを登録します。

仮に、このように記述してみます。

1from controllers import *
2
3
4# FastAPIのルーティング用関数
5app.add_api_route('/', index)

これで、http://127.0.0.1:8000/にアクセスした時に、controllers.py のdef index() に処理が投げられるというわけです。

ちなみに、app.add_api_route() は、FastAPIクラスのメンバ関数ですが、裏で動いているstarletteのルーティング関数app.add_route() でも良いです。

run.py

このファイルは、今後触ることはなく、単にサーバを立ち上げるだけの関数です。

1from urls import app
2import uvicorn
3
4if __name__ == '__main__':
5    # コンソールで [$ uvicorn run:app --reload]でも可
6    uvicorn.run(app=app)

FastAPI のサーバ立ち上げは、Uvicorn というライブラリで立ち上げる必要があります。

このとき、uvicorn.run(app=app, port=8888) のようにポートを変更することも可能です。

サーバを立ち上げてみる

では、以下のコマンドで run.py を実行し、サーバを立ち上げてみましょう。

1$ python run.py

すると、

1INFO: Started server process [9912]
2INFO: Waiting for application startup.
3INFO: Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)

と表示されるはずです。

確認

http://127.0.0.1:8000 にアクセスしてみましょう！

1{"Hello":"World"}

と表示されれば、FastAPI は正しく動作しています。

ちなみに、http://127.0.0.1:8000/docsにアクセスすると、自動でAPIドキュメントが生成されます。(これは便利！)

テンプレートエンジンを使う

今のままでは、素の文字列が表示されるだけのつまらないアプリです。

そこで、Jinja2 のテンプレートエンジンを使って、もう少しマシなビューを作りましょう。

Jinja2（ジンジャツー）
渡された変数を元に動的にページを生成するツールです。

これは、裏で動いているstarletteにインポートされています。

controllers.pyに加筆

まずは、テンプレートを使うために、controllers.py に必要事項を加筆します。

1from fastapi import FastAPI
2from starlette.templating import Jinja2Templates  # new
3from starlette.requests import Request
4
5
6app = FastAPI(
7    title='FastAPIでつくるtoDoアプリケーション',
8    description='FastAPIチュートリアル：FastAPI(とstarlette)でシンプルなtoDoアプリを作りましょう．',
9    version='0.9 beta'
10)
11
12
13# new テンプレート関連の設定 (jinja2)
14templates = Jinja2Templates(directory="templates")
15jinja_env = templates.env  # Jinja2.Environment : filterやglobalの設定用
16
17
18def index(request: Request):
19    return templates.TemplateResponse('index.html',
20                                      {'request': request}  # new 変更！

これで、URL「/」でtemplates/index.htmlをレスポンスするようになりました。

これ以降、ビューは全て「templates」ディレクトリに作成していくのでディレクトリを作りましょう！

templates/layout.html

ビューを作っていきます。

まずは、全てのビューに共通する部分を作成します。

デザインは、 Bootstrap4 を使ってラクをしたいと思います（笑）

1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
5    <meta charset="UTF-8">
6    <title>Simple toDo Application</title>
7</head>
8<body>
9<div style="display: flex; flex-direction: column; min-height: 80vh">
10    <div class="container">
11        {% block content %}
12        <!-- メインコンテンツ -->
13        {% endblock %}
14    </div>
15</div>
16<br>
17<hr>
18<footer>
19    <div align="center">
20        <p>Copyright &copy; RightCode Inc. All right reserves.</p>
21        <p>Powered by FastAPI 0.36.0 &amp; starlette 0.12.9</p>
22    </div>
23</footer>
24</body>
25</html>

このように実装してみました。

この部分に、それぞれの固有のビューが入ります。

1{% block content %}
2<!-- メインコンテンツ -->
3{% endblock %}

ちなみに、何もメインコンテンツがないと、以下のような見た目です。

レイアウト (templates/layout.html)

フッターは、コンテンツが何も無い場合でも、下部に表示されるようにしています。

templates/index.html

それでは、トップページを簡単に書いてみましょう！

1{% extends "layout.html" %}
2{% block content %}
3<br>
4<div class="row">
5    <div class="col-md-10">
6        <h1>Welcome to Simple toDo application</h1>
7    </div>
8    <div class="col-md-2">
9        <a href="/admin" class="btn btn-primary">Login</a>
10    </div>
11</div>
12
13<hr>
14<p>This is a simple toDo application powered by <b>FastAPI</b>!</p>
15
16{% endblock %}

現段階でのトップページ（templates/index.html）

ひとまず、こんな感じにしておきます！

templates/admin.html

管理者ページも、適当に作っておきましょう。

まずは、URLを追加し、コントローラも簡単に書きます。

1# urls.py
2# FastAPIのルーティング用関数
3app.add_api_route('/', index)
4app.add_api_route('/admin', admin)  # new

1# controllers.py
2
3def admin(request: Request):
4    return templates.TemplateResponse('admin.html',
5                                      {'request': request,
6                                       'username': 'admin'})

1<!-- templates/admin.html -->
2
3{% extends "layout.html" %}
4{% block content %}
5<br>
6<h2>Administrator page</h2>
7<hr>
8<p>Hi, {{ username }}.</p>
9
10{% endblock %}

まだ、特に何もしない処理ですが、ビューに'username' という名前で、変数を渡してビューで展開しています。（<p>Hi, {{ username }}.</p> ）

ここは、いずれログインユーザによって変化するようにします。

現段階での管理者ページ (templates/admin.html)

第2回へつづく！

今回は、ここまで！

第1回目は、FastAPIにおける基本的な「MVCアプリケーション」の「V」と「C」について作り方を解説しました。

次回は、管理者ページの充実と、モデル(M)の作成を行いたいと思います。

お楽しみに！

ライトコードでは、エンジニアを積極採用中！

ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

採用情報へ

メディアチーム

「好きを仕事にするエンジニア集団」の（株）ライトコードです！ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。システム開発依頼・お見積もり大歓迎！また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！インターンや新卒採用も行っております。以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit