@mizchi
Cloudflare Meetup 2024/10/02
今日の Prisma + Cloudflare の様子
だいたいここ15年
*.d.ts
@types/*
const x: number = 1; //=> const x = 1;
export function Counter() { const [counter, setCounter] = useState(0); return <button onClick={()=>setCounter(n => n+1)}>{counter}</div> }
以降、この資料では Next.js = Next.js 型フルスタックアーキテクチャ
/* ファイルシステム規約でURLのマッピングを決める pages/posts.tsx => /posts */ // サーバーサイドの Loader export async function getServerSideProps() { return { props: { posts: await db.query('select * from "posts"') }} } // ルーティングは必ずルートコンポーネントと対応 // サーバー処理: props を入力したHTMLを返却 (SSR) // クライアント処理: コンポーネントロジックを注入(Hydrate) export default function PostListPage(props) { return <ul> {props.posts.map(p => ( <li key={p.id}><Link to={`/posts/${p.id}`}>{p.title}</Link></li> )} </ul> }
と言えるか…？ でも、その前に Rails を振り返る
rails new
class ArticlesController < ApplicationController #... def create @article = Article.new(title: "...", body: "...") # ... end end
<%= form_with model: @article do |form| %> <div> <%= form.label :title %><br> <%= form.text_field :title %> </div> <div> <%= form.submit %> </div> <% end %>
query GetPostWithAuthorAndComments { post(id: "123") { id content comments { id content } } }
補助輪として必要
IDE補完の生産性と安全性
(ORM嫌いな人はSQL習熟度が高いはずなので生SQL書いてもらえばいい)
https://scrapbox.io/uki00a/Node.jsのORMについて https://scrapbox.io/uki00a/TypeScriptでタイプセーフにSQLを実行する
model User { id Int @id @default(autoincrement()) Profile Profile? } model Profile { id Int @id @default(autoincrement()) user Int @unique User User @relation(fields: [user], references: [id]) }
CREATE TABLE "User" ( id SERIAL PRIMARY KEY ); CREATE TABLE "Post" ( id SERIAL PRIMARY KEY, "author" integer NOT NULL, FOREIGN KEY ("author") REFERENCES "User"(id) );
const result = await prisma.user.create({ data: { name: 'id', profile: { create: [ { title: 'How to eat an omelette' }], }, }, })
model Post { id String @id @default(cuid()) title String content String }
-- prisma/sql/addPost.sql INSERT INTO "Post" (id, title, content) VALUES ($1, $2, $3);
import { addPost } from "@prisma/client/sql"; const query = addPost(id, "Title", "Content");
prisma generate --sql
(ぶっちゃけ sqlc でもいいが、sqlc が流行る気がしない)
(ぶっちゃけ 2010年代のウェブフレームワークを、フロントエンド視点で組み立て直したものに過ぎない)