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
13
ブログを自作した話
隅田川.dev vol.1 by July 1, 2023
yud0uhu
July 01, 2023
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
210
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
4.7k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.5k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.2k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
870
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
970
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
41
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
22
Rustで自作しながら学ぶ仮想DOM
yud0uhu
1
19
Other Decks in Programming
See All in Programming
Ethereum_.pdf
nekomatu
0
180
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
160
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
Outline View in SwiftUI
1024jp
1
240
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.9k
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
490
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
700
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
470
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
17
4.2k
色々なIaCツールを実際に触って比較してみる
iriikeita
0
300
Generative AI Use Cases JP (略称:GenU)奮闘記
hideg
0
180
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
120
Featured
See All Featured
A better future with KSS
kneath
238
17k
Music & Morning Musume
bryan
46
6.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
42
2.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Unsuck your backbone
ammeep
668
57k
Facilitating Awesome Meetings
lara
49
6.1k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Code Review Best Practice
trishagee
64
17k
Raft: Consensus for Rubyists
vanstee
136
6.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 ハマりポイント②