Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
FARM スタックに触れてみる
Search
takf
February 09, 2022
Technology
0
1.5k
FARM スタックに触れてみる
2022.02.08 Saitama.js #2 LT
takf
February 09, 2022
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
500
Atomic Design とテストの○○な話
takfjp
2
1.8k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.7k
React Testing Library の Query について整理してみた
takfjp
0
480
React.js 消えるライフサイクルメソッドについて
takfjp
0
130
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
3.1k
React で Stateless Functional Component の書き方を盛大に間違えていた話
takfjp
0
420
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
320
meguro.es.pdf
takfjp
0
130
Other Decks in Technology
See All in Technology
LLM時代にデータエンジニアの役割はどう変わるか?
ikkimiyazaki
6
1.2k
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
210
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
290
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
160
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
120
三菱電機・ソニーグループ共同の「Agile Japan企業内サテライト」_2025
sony
0
140
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
130
社内お問い合わせBotの仕組みと学び
nish01
1
570
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
720
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
400
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
210
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
200
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
9.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Why Our Code Smells
bkeepers
PRO
339
57k
Documentation Writing (for coders)
carmenintech
75
5k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
The Cost Of JavaScript in 2023
addyosmani
54
9k
Transcript
FARM スタックに触れてみる 2022.02.08 Saitama.js vol.2 @takfjp
自己紹介 Takeru Furuichi (@takfjp) 川越市出身です ( オススメのお店:寿製麺よしかわ) https://www.kotobukiseimen.com/ コネヒト株式会社 所属
「ママリ」という出産・育児領域のサービスを開発・運営してい ます フロント: React バックエンド: CakePHP
None
FARM スタックとは? 以下の技術スタックを使ったSPA の開発手法 FastAPI React Mongo DB
MERN スタック Mongo DB Express React Node.js サーバサイドもJS で完結しているのが特徴
今回話さないこと FastAPI の詳細な仕様 Python の文法, 各種ライブラリの説明 デプロイ手順 実戦への導入( 触れてみた、という軽い紹介) React
アプリの実装( 時間の都合上)
FastAPI とは Python 製のAPI フレームワーク (v3.6 以上) https://fastapi.tiangolo.com/ja/ 名前の通り高速 Request,
Response 共に型定義が可能 SwaggerUI でAPI のドキュメントを自動生成できる <- !!
Swagger UI locahost:port/docs で表示できる リクエストを作成して投げるのを試せる
Mongo DB のセットアップ Mongo DB Cloud を利用 無料プラン(shared) を使用可能
GCP / AWS / Azure からクラウドプロバイダを選択可能 Tokyo リージョンを選択できる (!!)
FastAPI 側で用意するもの router REST API のエンドポイントを記載 schema エンドポイント向けに Request, Response
の型定義 DB に格納するModel の型定義 controller アクセス時の DB への操作 router に読み込ませる
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
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
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")
deploy できたバックエンドAPI は Vercel Heroku などにデプロイして使用 Docker にpython のコンテナを作ってローカルで開発しても良さそ う
フロントエンドアプリ React, React-Query, Axios( 非同期通信用) などを使用して実装 単純なTodo アプリで動かしてみました React-Query はキャッシュが使えたりデータの取得状態を返し
てくれて便利ですね
Todo List
Todo List 2 Todo 作成成功と同時にDB に格納された Todo を fetch
雑感 API も独力で実装したい時にとても協力 フロントエンドエンジニアだって API を作りたい Mongo DB + FastAPI
は GraphQL とも親和性が高そう SwaggerUI を自動生成してくれるのはとても嬉しい API 側で型定義できるので TypeScript との親和性も高い Todo List 以外でも活用したくなる
We're Hiring! カジュアル面談やってます! https://connehito.com/recruit/
Thank you!
None