Slide 1

Slide 1 text

FARM スタックに触れてみる 2022.02.08 Saitama.js vol.2 @takfjp

Slide 2

Slide 2 text

自己紹介 Takeru Furuichi (@takfjp) 川越市出身です ( オススメのお店:寿製麺よしかわ) https://www.kotobukiseimen.com/ コネヒト株式会社 所属 「ママリ」という出産・育児領域のサービスを開発・運営してい ます フロント: React バックエンド: CakePHP

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

FARM スタックとは? 以下の技術スタックを使ったSPA の開発手法 FastAPI React Mongo DB

Slide 5

Slide 5 text

MERN スタック Mongo DB Express React Node.js サーバサイドもJS で完結しているのが特徴

Slide 6

Slide 6 text

今回話さないこと FastAPI の詳細な仕様 Python の文法, 各種ライブラリの説明 デプロイ手順 実戦への導入( 触れてみた、という軽い紹介) React アプリの実装( 時間の都合上)

Slide 7

Slide 7 text

FastAPI とは Python 製のAPI フレームワーク (v3.6 以上) https://fastapi.tiangolo.com/ja/ 名前の通り高速 Request, Response 共に型定義が可能 SwaggerUI でAPI のドキュメントを自動生成できる <- !!

Slide 8

Slide 8 text

Swagger UI locahost:port/docs で表示できる リクエストを作成して投げるのを試せる

Slide 9

Slide 9 text

Mongo DB のセットアップ Mongo DB Cloud を利用 無料プラン(shared) を使用可能

Slide 10

Slide 10 text

GCP / AWS / Azure からクラウドプロバイダを選択可能 Tokyo リージョンを選択できる (!!)

Slide 11

Slide 11 text

FastAPI 側で用意するもの router REST API のエンドポイントを記載 schema エンドポイント向けに Request, Response の型定義 DB に格納するModel の型定義 controller アクセス時の DB への操作 router に読み込ませる

Slide 12

Slide 12 text

schema from pydantic import BaseModel from typing import Optional from decouple import config # BaseModel = FastAPI のスキーマモデル class Todo(BaseModel): id: str title: str description: str class TodoBody(BaseModel): title: str description: str

Slide 13

Slide 13 text

controller (database) from decouple import config ~~~ 中略 ~~~ # async / await で手軽に非同期通信処理を記述できる async def db_create_todo(data: dict) -> Union[dict, bool]: todo = await collection_todo.insert_one(data) new_todo = await collection_todo.find_one({"_id": todo.inserted_id}) if new_todo: return todo_serializer(new_todo) return False

Slide 14

Slide 14 text

router from fastapi import APIRouter, Response, Request, HTTPException from schemas import Todo, TodoBody from database import db_create_todo from starlette.status import HTTP_201_CREATED router = APIRouter() @router.post("/api/todo", response_model=Todo) async def create_todo(request: Request, response: Response, data: TodoBody): todo = jsonable_encoder(data) res = await db_create_todo(todo) response.status_code = HTTP_201_CREATED if res: return res raise HTTPException( status_code=404, detail="Create task failed")

Slide 15

Slide 15 text

deploy できたバックエンドAPI は Vercel Heroku などにデプロイして使用 Docker にpython のコンテナを作ってローカルで開発しても良さそ う

Slide 16

Slide 16 text

フロントエンドアプリ React, React-Query, Axios( 非同期通信用) などを使用して実装 単純なTodo アプリで動かしてみました React-Query はキャッシュが使えたりデータの取得状態を返し てくれて便利ですね

Slide 17

Slide 17 text

Todo List

Slide 18

Slide 18 text

Todo List 2 Todo 作成成功と同時にDB に格納された Todo を fetch

Slide 19

Slide 19 text

雑感 API も独力で実装したい時にとても協力 フロントエンドエンジニアだって API を作りたい Mongo DB + FastAPI は GraphQL とも親和性が高そう SwaggerUI を自動生成してくれるのはとても嬉しい API 側で型定義できるので TypeScript との親和性も高い Todo List 以外でも活用したくなる

Slide 20

Slide 20 text

We're Hiring! カジュアル面談やってます! https://connehito.com/recruit/

Slide 21

Slide 21 text

Thank you!

Slide 22

Slide 22 text

No content