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
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
210
早朝の渋谷の青さ、あるいは溺れた人を助ける為に飛び込んだ海の向こう側に見る、自己覚知と自己開示の尊さ
yud0uhu
1
610
動画配信サービスのフロントエンド実装に学ぶ設計原則
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
Other Decks in Programming
See All in Programming
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
340
MLH State of the League: 2026 Season
theycallmeswift
0
230
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
190
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
340
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
130
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
testingを眺める
matumoto
1
130
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
230
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
130
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
260
時間軸から考えるTerraformを使う理由と留意点
fufuhu
14
4.5k
AI時代のUIはどこへ行く?
yusukebe
16
8.4k
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Speed Design
sergeychernyshev
32
1.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Making Projects Easy
brettharned
117
6.4k
Why Our Code Smells
bkeepers
PRO
339
57k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Invisible Side of Design
smashingmag
301
51k
Fireside Chat
paigeccino
39
3.6k
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 ハマりポイント②