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
200
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
4.7k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.4k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
yud0uhu
2
2.1k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
850
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
940
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
33
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
21
Rustで自作しながら学ぶ仮想DOM
yud0uhu
1
19
Other Decks in Programming
See All in Programming
LangChain & LangServeでAPIを爆速作成
kijitorabuti
2
350
How to debug Xdebug... or any other weird bug in PHP
dunglas
2
1.5k
게임 개발하던 학생이이 세계에선 안드로이드 개발자?
pangmoo
0
120
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
160
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
1
120
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
140
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
7
1.9k
ActiveRecordの力でDBのメタデータを迅速に解析する
lnit
5
1.8k
個人開発で使ってるやつを紹介する回
yohfee
1
730
sqlcを利用してsqlに型付けを
kamiyam
0
250
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
2
670
Why I Choose NetBeans for Jakarta EE
ivargrimstad
0
740
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Happy Clients
brianwarren
97
6.7k
Designing for Performance
lara
604
68k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
46
4.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
How STYLIGHT went responsive
nonsquared
95
5.1k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Speed Design
sergeychernyshev
23
540
How to Ace a Technical Interview
jacobian
275
23k
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 ハマりポイント②