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
ブログを自作した話
Search
yud0uhu
July 01, 2023
Programming
1
24
ブログを自作した話
隅田川.dev vol.1 by July 1, 2023
yud0uhu
July 01, 2023
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
300
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.4k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.8k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.7k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
980
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.2k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
170
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
40
Rustで自作しながら学ぶ仮想DOM
yud0uhu
1
33
Other Decks in Programming
See All in Programming
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
PipeCDのプラグイン化で目指すところ
warashi
1
270
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
86
28k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
How to Ace a Technical Interview
jacobian
278
23k
BBQ
matthewcrist
89
9.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Gamification - CAS2011
davidbonilla
81
5.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Raft: Consensus for Rubyists
vanstee
140
7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
ブログを自作した話 0Yu 隅田川.dev vol.1
0yu(おゆ,ぜろゆー) • 北海道出身 好きな技術 • Webフロントエンド、Rust 趣味 • 映画鑑賞・旅行・ゲーム etc
• 最近はハイラルの勇者をしています 自己紹介 っっっz yud0uhu 2
• 自作マークダウンパーサーで動く技術ブログを自作した はじめに
フロントエンド • Next.js/Type Script • Apollo Client • styled-components +
emotion(mantine) 技術仕様
バックエンド • Rust+WebAssembly(マークダウンパーサー) • Express • GraphQL Yoga • Prisma
Photos • Vercel Postgress 技術仕様
ホスティング • Vercel 認証・認可 • NextAuth 技術仕様
Introduction to Apollo Client 特徴 • GraphQLを使用してローカルデータとリモートデータを管理する JavaScript向けの包括的な状態管理ライブラリ メリット •
クライアント側でデータのキャッシュやクエリの結果の追跡し、デー タフェッチと更新を効率化 ◦ クライアント側のデータの変更に応じて自動的に再レンダリング を行ったり、必要なデータのみフェッチを行う Apollo Client
Vercel Postgres: Scalable SQL for the web 特徴 • 2023年5月1日に発表された新機能のStorageサービスの一つ
• Vercelが提供するPostgreSQLベースのサーバレスデータベース メリット • Vercelのデプロイメントフローと統合されているため、アプリケー ションとデータベースのデプロイが一括管理可能 • オートスケーリングによりリソースの調整が容易 Vercel Postgres
NextAuth.js 特徴 • Next.jsアプリケーション上で認証・セッション管理を行うためのラ イブラリ • Google・Twitter・GitHubなど、OAuthを使った認証サービスが利 用可能 • サーバーレス環境以外に、AWS
Lambda、Docker、Herakuなど主要 なホスティングプロバイダ上で動作する NextAuth
GraphQLサーバーを開発する際に検討すること • schema-firstかcode-firstか? schema-first • スキーマを先に書き、スキーマから言語固有のコードを生成する code-first • 言語固有のコードを先に書き、コードからスキーマを生成する code-first+TypeScriptなGraphQLライブラリ
GraphQL Nexus Nexus • Apollo Serverに対応する型安全なGraphQLスキーマビルダーライブ ラリ • スキーマ定義やリゾルバをもとにGraphQLスキーマを生成 •
拡張性に優れており、カスタムスカラーやディレクティブ、中間オブ ジェクトタイプなどを簡単に追加できる • Photosに移行する動きがある code-first+TypeScriptなGraphQLライブラリ
Prisma plugin for Pothos GraphQL Pothos • prismaのデータモデリング言語を使用して、DBスキーマとGraphQL スキーマを自動的に生成 •
GiraphQL→視認性・検索性の観点から改名 メリット • ランタイムのオーバーヘッドがなく軽量で高速 • Nexusよりも型チェックが俊敏 code-first+TypeScriptなGraphQLライブラリ
• prismaObject でオブジェクトを、prismaField でフィールドを定義 する Pothosでスキーマを定義する
• Queryを投げて、データが取得できることを確認する 疎通確認
• Queryを投げて、データが取得できることを確認する 疎通確認
• Mutationを投げて、データが取得できることを確認する 疎通確認
• フロントエンドで記事のfeedを取得する
• submoduleで紐付けする • クライアントでWASMを扱えるように、next.config.jsでWebPackの 設定を行う • クライアントでsubmoduleのpkgをimportして使う 自作マークダウンパーサーの導入
• WASMビルド on Vercel ハマりポイント①
• Next AuthとVercel Hostingの噛み合わせの悪さ ◦ Options | NextAuth.js ハマりポイント②