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
28
ブログを自作した話
隅田川.dev vol.1 by July 1, 2023
yud0uhu
July 01, 2023
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
早朝の渋谷の青さ、あるいは溺れた人を助ける為に飛び込んだ海の向こう側に見る、自己覚知と自己開示の尊さ
yud0uhu
1
580
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
320
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.5k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.8k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.8k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
1k
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.2k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
180
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
44
Other Decks in Programming
See All in Programming
AWS発のAIエディタKiroを使ってみた
iriikeita
1
110
tool ディレクティブを導入してみた感想
sgash708
1
160
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
110
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
160
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
220
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
120
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
990
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.7k
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
390
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
For a Future-Friendly Web
brad_frost
179
9.9k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Faster Mobile Websites
deanohume
309
31k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
KATA
mclloyd
32
14k
Fireside Chat
paigeccino
39
3.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Visualization
eitanlees
147
16k
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 ハマりポイント②