1. HOME
  2. ブログ
  3. IT技術
  4. 【第1回】FastAPIチュートリアル: ToDoアプリを作ってみよう【環境構築編】

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

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

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

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

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

今回作るもの

しかし、今回、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をインストールしましょう!

このとき、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 に以下の内容を書きましょう。

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

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

urls.py

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

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

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

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

run.py

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

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

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

サーバを立ち上げてみる

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

すると、

と表示されるはずです。

確認

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

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

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

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

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

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

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

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

controllers.pyに加筆

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

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

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

templates/layout.html

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

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

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

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

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

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

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

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

templates/index.html

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

fastapi_1-2現段階でのトップページ(templates/index.html)

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

templates/admin.html

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

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

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

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

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

第1回:さいごに

今回は、ここまで!

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

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

お楽しみに!

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

ライトコードでは、仲間を募集しております!

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

ライトコードでは一緒に働いていただける方を募集しております!

採用情報はこちら

関連記事