【初手】サ〇ーウォーズの誕生日当てで分かるFastAPIとVSCodeなど_2.VSCodeでFastAPIの開発編

# これは何の記事
サ〇ーウォーズの誕生日当て Web アプリを通して，
以下のことを学んでいく記事です

- VSCode で FastAPI を使った開発をする方法
- フロントからバックまでの開発方法をざっくり

https://qiita.com/soiSource/items/fcccf5ad28f8fe522f76

## 今回の内容
- `FastAPI` を使ったプログラムの開発
- `VSCode` で `FastAPI` の実行とデバッグの方法

## FastAPI を使ったプログラムの開発

### 1. プロジェクトフォルダの用意
お好きなところにフォルダを作ってください
名前もお好きなもので大丈夫です

![folder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/07e042da-0c06-4aa8-9807-6778f464916c.png)

### 2. VSCodeを開く
以下のメニューをクリックして，先ほど作成したフォルダを開きましょう

![open.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/67ac3cc7-6a26-40e3-85c8-977ab9febd70.png)

### 3. Python の仮想環境をたてて，有効化する
`Python` の仮想環境とは，プロジェクト専用の実行環境のことです
後でライブラリをインストールしますが，
全体で共有しているところにインストールすると，
他のライブラリに悪影響があったりなかったりします
そうならないように，専用の環境をたてるのが習わしです

ターミナルで以下のコマンドを入力します
ターミナルが表示されていなかったら，
`Ctrl + j` か `Ctrl + shift + @` を押してください

※ Windows 10, 11 の場合です
```powershell
python -m venv v
.\v\Scripts\activate
```

![仮想環境作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/7992e4b6-e119-481c-a94f-4334bcc7eab9.png)

macOS などの場合はこちら

https://www.python.jp/install/macos/virtualenv.html


### 4. ライブラリをインストール
`fastapi` と `uvicorn` をインストールします
ライブラリというのは，作成済みの機能などをまとめたものです
忍者風にいうと巻物ですね
巻物で口寄せをすると忍具を出したり蛙を呼び出したりできます
（ジェネレーションギャップ）

下記のコマンドでインストールしましょう
```powershell
pip install fastapi
```

![pip_install_fastapi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/d26bcfa5-db4a-45db-8939-4175db907286.png)

```powershell
pip install uvicorn
```
![pip_install_uvicorn.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/097a6133-9905-4583-af39-4e2735b12edc.png)


### 5. フォルダとファイルを用意
`routers` フォルダと `main.py` を作成してください
![file_and_folder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/a901c7b8-5cef-413c-bbfc-328d5a28a495.png)

#### main.py
起動した時，最初に動くファイルがこちらです
先ほど作成したファイルに以下をコピペしましょう

```python
import fastapi
from fastapi.middleware.cors import CORSMiddleware


from routers import learn_break_point


app = fastapi.FastAPI()
app.include_router(learn_break_point.router)

# CORS の設定
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/")
def get_hello():
    return {"message": "Hello World"}
```

#### routersフォルダ
`routers` フォルダにまずは，
`learn_break_point.py` ファイルを作成し，以下をコピペです

```python
from fastapi import APIRouter

router = APIRouter(
    prefix="/learn_break_point",
    tags=["break_point"],
    responses={404: {"description": "Not found"}},
)


class CustomException(Exception):
    message = "かすたむえらー"

    def __str__(self):
        return str(self.message)


@router.get("/")
def learn_break_point(item_size: int) -> dict:
    """
    ## args
    - item_size: 返ってくる要素数を指定
    
    ## return
    - item_size が 6 の場合は自作のエラーを返す
    - それ以外は指定された要素数分の配列を返す
    - 配列の各要素は2乗した値を格納
    """

    try:
        if item_size == 6:
            raise CustomException

        return_list = []
        for i in range(item_size):
            return_list.append(i * i)

    except CustomException as custom_exception:
        return {"status_code": 555, "message": str(custom_exception), "return_list": []}
    else:
        return {"status_code": 200, "message": "Success", "return_list": return_list}
    finally:
        print("エラーが起きても起きなくても必ず実行される処理")

```

### 6. デバッガーの設定と実行
`main.py` が表示されている状態で，`F5` キーを押してください
すると下図のような画面が表示されます
そこで `Python Debugger` を選択しましょう

![running_at_first_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/b6ec6a20-d288-4cbe-b0e3-13164a37d568.png)


すると下図のような画面が表示されます
そこで `FastAPI` を選択しましょう
![after_first_runnning_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/ce1eb643-fdba-4493-bb93-2ef6dc43c560.png)

すると `main.py` が実行されます
![running_at_first.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/dea13e1a-60fa-45dd-86a0-f82e61fc97ea.png)

ただこのままだと後々こまります
ポート番号を変えたいとか，オプションをつけたいとか
というわけで設定ファイルを作成します

四角ボタンを押して実行を停止しましょう
`shift + F5` でも OK です

下図に示されている歯車マークを押しましょう
すると下図のような画面が表示されます
そこで `Python Debugger` を選択しましょう

![after_first_runnning.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/9c01e0b5-9016-4963-9596-1c56b5f2ff2f.png)

すると下図のような画面が表示されます
そこで `FastAPI` を選択しましょう

![after_first_runnning_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/ce5fd0ab-7f5f-4ea0-90dd-eaa92d026004.png)

そうすると，`.vscode` の中に `launch.json` が作成されます

![laungh_json_made.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/71ee43ca-d4de-4be3-8776-cda12452a5cb.png)

下図のようにポート番号の設定を追加しましょう

![laungh_setting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/c5806970-df27-4d53-96d5-9a397ef03b31.png)

では `F5` を押して実行しましょう

### 7. ブレークポイントを設置

では `learn_break_point.py` を開いて，
下図のようにブレークポイントを置いてみましょう
行番号の左をクリックすると設置できます

![break_point_vscode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/f59c93e2-139d-476b-9ed6-c46c4f81eb28.png)

### 8. Swagger UI 画面を開く
1. お好きなブラウザ (chrome) を起動
2. アドレスバーに `localhost:8765/docs` を入力
3. Enter!

![localhost_docs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/055e8151-d4f9-4052-a2e9-b444ed0e50d3.png)

するとこのような画面が表示されます

![swagger_break_point.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/eee8d4f4-8bab-45b2-9cee-1efd96a6d342.png)

### 9. API を実行する
画面の`v` を押して画面を展開します 

 ![break_point_try_it_out.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/8d697086-6f57-45a7-b0fd-6ce862ccbccf.png)

`item_size` が入力欄になっているので，
何か数字を入れてみましょう
数字を入れたら `Execute` ボタンを押してみましょう

 ![break_point_execute.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/1444f3e8-59ec-4ea0-aafa-f4d37255c9b0.png)

すると `VSCode` 画面のブレークポイントを置いたところで，
実行が一時停止します

そうですその名の通りブレークポイントは，
そこで処理を一時停止するポイントということでした

またデバッグに有用な情報があちらこちらにあります
- 画面左: その時点でどの変数に何が入っているかが表示されてます
- コード画面: カーソルを上に置くとその変数などの状態が表示されます
- 画面下のデバッグコンソール: 現時点の状態でコードを書いて実行できます
- 画面上部のデバッグツール: 現時点から処理を進めたり戻したりできます

![break_point_debug.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/9802ef10-f52b-4984-89e4-a70478b24c88.png)

ということで処理を最後まで進めたいので，
画面上部の三角ボタンを押しましょう
（デバッガーツールの一番左にあるボタンです）

すると，Swagger UI の画面で値が返って来たのが分かります
今回はわざとエラーになる数字を入れたので，エラーが返ってきてますね
（Code 自体は 200 なので成功扱いですが，今回は簡単のためよしとしてください）
![break_point_swagger_response.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294646/f9935766-fad0-44a2-9469-701b7bdca837.png)

因みに今のコードには，
マジックナンバーがあったり，
内包表記を使っていなかったり，
`docstring` の書き方が普通に `Markdown` だったり，
（個人的には普通に `Markdown` で良い気がしてますが）
ラジバンダリ，よろしくない点があります
こうゆうのを見つけて潰すと勉強になるかなと思います

というわけで今回はここまで^^