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

    広告メディア事業部広告メディア事業部
    2019.11.14

    IT技術

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

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

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

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

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

    今回作るもの

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

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

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

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

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

    1. FastAPIの使い方
    2. バックで動いているstarletteの使い方
    3. 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とは違い、プロジェクト作成コマンドはなく、プロジェクトを1から全て構築していく必要があります

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

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

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

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

    1. run.py (サーバ立ち上げ用)
    2. urls.py (URLのルーティング用)
    3. 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)の作成を行いたいと思います。

    お楽しみに!

    第2回の記事はこちら

    featureImg2019.11.21【第2回】FastAPIチュートリアル: ToDoアプリを作ってみよう【モデル構築編】FastAPIチュートリアル: toDoアプリを作ってみよう~第2回~前回の記事「【第1回】FastAPIチュートリア...

    ResponderとFastAPIを実際に使って比較してみた

    featureImg2020.01.10ResponderとFastAPIを実際に使って比較してみたResponderとFastAPIを比較したい!Webアプリケーションといえば、PHPの「CakePHP」、Pytho...

    こちらの記事もオススメ!

    featureImg2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...

    featureImg2020.07.30Python 特集実装編※最新記事順Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた!P...

    広告メディア事業部

    広告メディア事業部

    おすすめ記事

    GitHubActionsのランナーに触れてみた

    こやまん(エンジニア)

    こやまん(エンジニア)

    2024.03.28

    IT技術

    Azure Data FactoryでSlackへ通知をしてみる

    たかやん(エンジニア)

    たかやん(エンジニア)

    2024.03.28

    IT技術

    GCP Secret Managerを使ってみた

    たなゆー(エンジニア)

    たなゆー(エンジニア)

    2024.03.21

    IT技術

    Bitriseのパイプラインと環境変数

    加納(エンジニア)

    加納(エンジニア)

    2024.03.11

    IT技術