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
21
ブログを自作した話
隅田川.dev vol.1 by July 1, 2023
yud0uhu
July 01, 2023
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
260
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
5.1k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.6k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.5k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
940
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
1.1k
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
110
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
28
Rustで自作しながら学ぶ仮想DOM
yud0uhu
1
27
Other Decks in Programming
See All in Programming
Introduction to C Extensions
sylph01
3
150
良いコードレビューとは
danimal141
10
10k
OUPC2024 Day 1 解説
kowerkoint
0
360
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
230
Gunma.web #55
tinykitten
0
100
「その気にさせる」エンジニアが 最強のリーダーになる理由
gimupop
3
400
保守性を高める AWS CDK のセオリー・ベストプラクティス
yamanashi_ren01
5
690
Go言語での実装を通して学ぶ、高速なベクトル検索を支えるクラスタリング技術/fukuokago-kmeans
monochromegane
1
110
RecSys2024 参加報告
unonao
1
160
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
500
Google Cloudとo11yで実現するアプリケーション開発者主体のDB改善
nnaka2992
1
200
読もう! Android build ドキュメント
andpad
1
180
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Fireside Chat
paigeccino
37
3.3k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
A Tale of Four Properties
chriscoyier
158
23k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing Experiences People Love
moore
140
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
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 ハマりポイント②