タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
この記事は 「個人開発Advent Calendar 2022」 8日目の記事です。 はじめに 先日リリースされた、SplarateというWebサービスの開発をお手伝いしています。そこで導入したtRPCが驚くほど便利だったので、実際の体験を交えてその使いやすさを紹介します。 tRPCとは？ tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation. https://trpc.io/docs/ tRPCは、スキーマやコード生成なしで型安全なAPIを簡単に構築し、呼び出すことのできるライブラリです。 tRPC is for full-stack TypeScript developers. と謳われているように、TypeScriptに特化して作られており、Ty
新年あけましておめでとうございます。 昨年はあっという間に過ぎ去ってしまったので、2023年はたくさん開発していきたいです。 はじめに はじめまして、kosei28という者です。 普段は大学に通いながら個人開発している19歳です。 この度、Chatockという掲示板のようなWebアプリを開発したので、紹介させてください。 つくったもの スレッドを作って、その中に投稿することができます。 スレッドにはタグをつけることができて、タグによってスレッドを検索することができます。 いいねをすることもでき、いいねしたスレッドや投稿は自分のライブラリページから見返すことができます。 背景 さて、皆さんはSvelteKitを知っていますか？ SvelteKitとは、SvelteのWebアプリを開発するためのフレームワークで、ReactにおけるNext.jsのようなものです。 ルーティングやSSRなどができ
Move Fast and Break Nothing. End-to-end typesafe APIs made easy.Experience the full power of TypeScript inference to boost productivity for your full-stack application.
trpcって知ってますか？
はじめに みなさんはAPIの定義を何で行なってますか？ Swagger？ GraphQL？ gRPC？ 私もGraphQLでアプリとBFFのAPI定義をしたり、gRPCで定義してそれを無理やりRESTAPIの型定義として使っていたりします。 方法はどうであれAPIの型定義はやっぱり欲しいですよね。 いくらTypeScriptとかGoとか型のある言語を使っていても、それをつなぐAPIのインターフェースに型を決めておかないといくらでも事故れますよね… 特にフロントエンドとバックエンドで開発するエンジニアが違うと、こういった定義ファイルがないと思ってたのと違うパラメータが返ってきたり、リクエストボディに入れる型を間違ってしまったりという事故が起きたりすると思います。 なので何かしらの定義ファイルをフロントバック両者で定めておいてこういった事故を起きないようにしているわけです。 定義ファイルがある
Next.jsのウェブアプリをサーバーサイドAPI部分も含めてデスクトップアプリとしてElectron内で動くようにtRPCで頑張る - Qiita
Next.jsのウェブアプリをサーバーサイドAPI部分も含めてデスクトップアプリとしてElectron内で動くようにtRPCで頑張るTypeScriptElectronNext.jsVerceltRPC 最近、Next.js/Vercelでちょっとしたウェブアプリケーションのツールを個人的に作っているのですが、これをデスクトップアプリケーションとしても動かしたいなと思うようになりました。私のようなふだんウェブばかりやってる人間にとっては、デスクトップアプリは憧れなのです。 このアプリケーションは、ブラウザ側で動く部分と、サーバー側(Vercel)上のNode環境で動く部分とに分かれているわけですが、Webの技術でクロスプラットフォームなデスクトップアプリケーションを作れるElectron上でもこれの全体が動くように頑張っていきたいと思います。ここでやりたいのは、ブラウザ部分だけをElect
TSKaigi 2024 14:40~ トラック2
tRPC と MSW の統合
tRPC は Next.js プロジェクトの生産性を向上させるライブラリです。サーバー側定義の型推論が API Client にダイレクトに伝搬するだけでなく、Zod スキーマによる入力値制約が施せます。そのため、Client ⇄ API Routes 間の疎通がEnd-to-end typesafeになる、便利なライブラリです。 tRPC と MSW の統合要点 筆者はテスト・Storybook をコミットする際に MSW をよく利用しています。次の様に任意の URL リクエストをインターセプトして、スタブを返却できます。 import { rest } from 'msw' export const handlers = [ rest.get('https://api.github.com/user/:login', (req, res, ctx) => { return res(ct
Ever wondered how tRPC works? Maybe you want to start contributing to the project but you're frightened by the internals? The aim of this post is to familiarize you with the internals of tRPC by writing a minimal client that covers the big parts of how tRPC works. infoIt's recommended that you understand some of the core concepts in TypeScript such as generics, conditional types, the extends keywo
tRPC をちょっとだけやってみたので、やる前に自分が知りたかったことやセットアップ時にわかりにくかったことを整理して、ふんわりざっくり大味でまとめておきます ついでなので gRPC についても簡単に整理します まず RPC とは RPC ( Remote Procedure Call ) とは、ネットワークで繋がっている別のコンピュータのプログラムを実行できるようにする技術のことです 呼ぶ側 ( = クライアントサイド ) が呼ばれる側 ( = サーバサイド ) を実行するときに、具体的な通信手段やプロトコルについて自分で実装する必要がない点が特徴です イメージを見てみましょう 普段行っているメソッド呼び出しは、RPC に対して LPC ( Local Procedure Call ) と言います このようなコードです、カタログはローカルにあるということにします
tRPCの便利だった機能
nextと組み合わせるのをやりながら見つけた便利だった部分についての列挙 マージ機能 https://trpc.io/docs/merging-routers Routerの部分が肥大化してしまいそうだなというのが結構懸念だったが、mergeする機能があるのでこれは便利そうだった。 const appRouter = createRouter() .merge('user.', users) .merge('post.', posts) Infering Types https://trpc.io/docs/infer-types Routerなどの各種定義からTypeScriptの型を取り出す機能。 ちょっと記述が面倒なところはあるが、AppRouterの返り値や入力値が抽出できるので、一通り覚えておくと便利。 （とはいえinputについてはzodのinferを利用する方がスッキリするよ
tRPCとは？TypeScriptでAPIの型安全性を高める注目のRPCフレームワーク｜TSD公式エンジニアブログ「TSD CoLab」
TypeScriptによる静的型付けがWebアプリケーションのベストプラクティスの1つになりつつある昨今ですが、フロントエンドとバックエンド、もしくはBFF (Backends for Frontends)とのやりとりにおいて型を安全に保つ必要性が求められています。 この課題を解決するため、APIに静的な型をつけることができるtRPCというフレームワークが最近人気を博しているそうです。 そこで、今回はtRPCについて調べてみました。 RPC（Remote Procedure Call：リモートプロシージャコール）とは そもそもRPCとは、ネットワークで接続された他のコンピューターでプログラムを呼び出し実行させるための手法、あるいはそのプロトコルのことを言います。 ネットワーク経由でプログラムの処理を呼び出し・実行することで、遠隔地にあるコンピューターが処理を行い、その処理結果を受け取ること
アプリ開発をしながらtRPCとZodを学ぶ
はじめに 今回はtRPCについて周辺の用語解説及び整理に加え、簡易的なTODOアプリを開発しながら、具体的な使い方を解説していきます。 この記事の主な対象者 tRPCやZodについて基礎から学びたい人 API開発及びフロントエンドとの繋ぎ込みを担当している人 tRPCを使ってアプリ開発をしてみたい人 本記事の目標 tRPCやZodを含むその他周辺技術の用語の整理 簡易的なTODOアプリ開発を通してtRPCの使い方を学ぶ 用語解説 tRPCを理解するためにその周辺知識の整理と今回作成するTODOアプリで登場する用語の解説をしていきます。 T3 Stack 今回は開発する簡易アプリではT3 Stackは採用していませんが、tRPCの周辺用語でもあるので、簡単に解説をします。 T3 Stackは下記の3つの思想をもとにTheo氏によって作成されたWeb開発スタックです。 simplicity(簡
ちまたで噂の tRPCとは。 - Qiita
概要 こんにちは。 KDDIアジャイル開発センターの小板橋です。 本記事は、KDDIアジャイル開発センター Engineer & Designer Advent Calendar 2022の2日目の記事です。 今回は、巷で噂の tRPC についてをまとめつつ、検証してみたというものになります。 tRPCとは？？ 例えば、3層のwebアプリケーションや、BFF(Backend For Frontend) を使用した複数のバックエンド API を吸収するようなものを配置したアプリケーションを考えた時に、フロントから REST API などでやりとりさせようとすると API における型定義がとても重要なのは想像しやすいでしょう。 そのために、例えば OpenAPI によるAPIの型定義ファイルを用いて開発を進めることで、事故をなるべく防止しようと努めると思います。 ただ、このAPIの定義ファイル
GitHub - trpc/trpc: 🧙♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
App Router で API Routes 相当の実装を施すには Route Handlers を使用します。Next.js に限らず React 実装では今後 fetch を使用したいというニーズが多くなると思うのですが、fetch は型推論がほとんどダメです。また、Client/Server で実装が散らばっているため、リクエスト・レスポンスのずれが生じる懸念があります。Route Handlers でも tRPC のような実装ができればと考え、それっぽい実装ができたので紹介します。 愚直に実装する場合 「書籍販売するサイトの詳細ページで、クリックログを送信する機能を実装する」と仮定して、詳細をみていきましょう。まず、クライアント側はこのようになります。ボタンコンポーネントを作成し、fetch を実行します。 "use client"; type Props = { bookId:
【T3 Stack 入門】認証機能付き ToDo アプリを作成しよう（Next.js & tRPC & NextAuth & Prisma）
【T3 Stack 入門】認証機能付き ToDo アプリを作成しよう（Next.js & tRPC & NextAuth & Prisma） Theo 氏によって提唱された技術スタック「T3 Stack」をご存知でしょうか。T3 Stack とは、simplicity（シンプルさ）、modularity（モジュール性）、full-stack type safety（フルスタックの型安全）を追求した思想です。 そしてこれらの思想を実現するために T3 Stack では次の六つの技術を採用しています。 ✅ Next.js ✅ tRPC ✅ NextAuth.js ✅ Prisma ✅ Tailwind CSS ✅ Typescript 今回は、これらの技術に加えて 🚀 Supabase 🚀 Vercel 🚀 Docker を使って ToDo アプリを作成します。 2023 年現在、最もモ
GraphQLはオワコンですか?これからはtRPCの時代ですか?REST APIの位置づけは何ですか? いやー良いですね、このズバッとした質問。 特に流行というものに敏感な方なのかなーと言う印象ですね。 何が流行って何が廃れてるのかとかもはや少しずつゆるく置いていかれてる自分のような人間に聞かれても難しいですが、GraphQLをオワコンと称するにはまだ早いと思います。同じくtRPCもその時代になってるかと問われると微妙です。 GraphQLも現代でまだ戦えるツールですし、tRPCと比較すると仕様がオープンに残ってたりするのでオワコンですかと聞かれるとそうじゃないと思います。 tRPC は流行の兆しはあるものの、まだ自分が見てる範囲だと "兆し" のレベルを出ていないと思います。自分の見ている範囲で言えば、使ってる人が GraphQL よりも少ない状況だと思います。ただ GraphQL より
JSer.info #620 - ESMetaというECMAScript Specification Metalanguageツールが公開されています。 es-meta/esmeta: ECMAScript Specification (ECMA-262) Metalanguage 主にECMAScriptの仕様を扱う人向けのツールです。 ECMAScriptの言語/仕様書のパーサとインタープリタを実装することで、仕様書から自動的にECMAScriptの処理系を生成するメタ的なツールです。 仕様書のアルゴリズムをステップ実行したり、デバッガーでBreak Pointを貼ったり、仕様書における内部状態を可視化できるデバッグ機能が実装されています。 WebAssemblyの処理系であるWasmer 3.0がリリースされました。 Announcing Wasmer 3.0 wasmer/migr
NTTテクノクロスの上原です。 この記事はNTTテクノクロスアドベントカレンダー2022、19日目の記事です。昨日は@kanaza-sさんの記事「PostgreSQL15のロジカルレプリケーションを触ってみる」でした。 tRPCとは何か 最近話題のtRPCですが、あらためて簡単に説明します。 tRPCは、TypeScriptの静的型指定情報を積極的に利用した、遠隔プロシージャ呼び出しのライブラリです。つまり別のサーバ上のコードの呼び出しを、プロシージャ呼び出しのように書くことができる機能です。 tRPCの特徴は、TypeScriptに依存していることと、スタブ・スケルトンといったコード生成を行わないことです。設定ファイルやIDLもありません。コードだけです。 tRPCとは何でないか RESTではない POST,GET,PUT,DELETEなどHTTPのメソッドを使いわけない。使いわけは、q
はじめに この記事でいう雑APIを定義。 見切り発車でスクラップ&ビルドしながらつくる とりあえず動けばいい、スピード命 検証目的で、お金は安くしたい 個人開発や技術素掘りでとにかく手を動かしながら試行錯誤したいときに、適当なAPIを作りたいことがあります。そしてある程度角度が上がったところで、再設計する。思いついた時にすぐに形にしたい。 そんな時に、Fargateやk8sは、捨てコードのためにつくるのは大袈裟すぎるし、AppRunnerは気軽で良いけど時間課金なので消しわすれが怖いし、高くなりやすい。AppSyncはGraphQLで型を自動生成してくれるけど、Resolerが独特、ローカルサーバーたてたり、型が再生成がめんどくさい。単にEC2を一時的にたてるのもVPCだったり繋ぐまで長かったりやっぱりめんどくさい。 また雑APIはリクエスト単位での課金ほうが安くすむケースが多いです。自分
怠け者エンジニアがtRPCに入門してみた！
tRPCとは？ tRPC allows you to easily build & consume fully typesafe APIs, without schemas or code generation. stRPCを使えばスキーマ設計やらSQL文なんかが無しでも、型セーフティーなAPIをつくれるんだぜ★ 若干、意訳が入ってますが、こんなノリかと思います。 正直、何言っちゃんてんの状態。 SQL文を書かなくてもgraphQLのように必要なデータだけとってこれて、それで型まで決まってるので typeセーフ。 挙句の果てにserver側もTypeScriptでも作れるよってんだから、そんな楽なライブラリあるんかい状態。 きっかけは、RestAPIに疲れ、graphQL学習に頓挫したこと 私は正直、かなりのへなちょこエンジニアです。 恐らく優秀な皆さんなら当てはまらないかもしれないです。
tRPC これから流行るかもしれないBFFフレームワークの紹介 ｜Offers Tech Blog
はじめに こんにちは!! プロダクト開発人材の副業転職プラットフォーム Offers を運営する株式会社 overflow 普通のバックエンドエンジニアの takkun7171 でございます。 最近 netflix で サイバーパンク エッジランナー を見て、やっぱりサイバーパンクいいなあと思って、PS5 のサイバーパンク 2077 を衝動買いしました w まああんなディストピアで幸せに生きていける気がしないけどね w tRPCとは こちらの記事で紹介されているのですが、 Theo 氏が提唱した最近話題の T3 Stac という技術スタックがあります。 この中の1つとして紹介されている tRPC が、 これから流行るかもしれない BFF フレームワークです。 何が良いの？ next.js の素の API よりも、TypeScript との親和性が高く、 型安全な API 開発が可能です。(
next.jsのAPI周りは気軽に使えて便利なのだが、型周りを考えるとちょこちょこ事故が起きやすい箇所になる。 tRPCを利用するとかなり堅牢なAPIを作ることができる ざっくりtRPCとnext.jsにおける利用について 軽くtRPCとnext.jsとの組み合わせについてかいつまむと、下記のような形になる 名前の通りTypeScriptを利用したRPCを行うためのライブラリ エンドポイントを一つに固定してクライアントでも利用することで型を共有できるもの next対応についてはUsage with Next.jsとしてドキュメント化されてるぐらいがっちりサポートされている next.jsの普通のAPIのルーティングとは異なるため、/api/trpc/[trpc]のような形でエンドポイントを一つに絞って利用する Contextのような機能もあって、複数のAPIの共通処理を一括管理できるところ
GitHub - blefnk/relivator-nextjs-template: ⭐ Next.js 14: Store, Landing, Admin Dashboard ▲ i18n, Stripe, Shadcn Tailwind, Drizzle Zod Trpc TypeScript Auth Page, Lucide CSS Radix UI, Responsive React Server Components, MySQL and Neon Postgre TS ORM, Intl A
⭐ Next.js 14: Store, Landing, Admin Dashboard ▲ i18n, Stripe, Shadcn Tailwind, Drizzle Zod Trpc TypeScript Auth Page, Lucide CSS Radix UI, Responsive React Server Components, MySQL and Neon Postgre TS ORM, Intl App Router, Mdx Docs User Actions Kit, SaaS Commerce Shop Pricing Payments, Dark Mode, Modern Full Stack, Free ▲ more stars → more features
【概要】 tRPCを用いたWebアプリケーションの開発技法について解説した書籍となります。 本書ではTwitterクローンのアプリケーションを実装しながら、tRPCやその周辺技術を活用する方法について触れていきます。 【目次】 1章 tRPCとは何か 2章 tRPC入門（サーバー） 3章 tRPC入門（クライアント） 4章 tRPCによるWebアプリケーション実装 5章 次のステップ 【対象読者（本文より抜粋）】 本書は以下のような方にオススメです。 - tRPC を用いた実践的な Web アプリケーションの構築方法が知りたい方 - 個人開発、もしくはある程度自由に技術スタックが選べる環境で開発をしている方 - ある程度の Web 開発の知識がある方（HTML、CSS、React、TypeScript、npm など） 特に、tRPC は個人開発者にオススメの技術となっています。API の作
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tRPCを導入したら爆速でWebサービスをリリースできた話
SvelteKitが正式リリースされたのでtRPCとPrismaを使ってWebアプリを開発してみた
tRPC - Move Fast and Break Nothing. End-to-end typesafe APIs made easy. | tRPC
tRPCを実務に導入して分かった旨味と苦味
Writing a tiny tRPC client | tRPC
ふんわりざっくり大味で gRPC と tRPC の雰囲気を知る
Next.js Route Handlers でも tRPC 風の実装がしたい
GraphQLはオワコンですか?これからはtRPCの時代ですか?REST APIの位置づけは何ですか? | mond
2022-11-29のJS: ESMeta、Wasmer 3.0、tRPC v10
流行り始めたtRPCでAPI通信を型にはめて開発しよう - Qiita
雑なAPIはtRPCで作り、ApiGatewayでデプロイでいいかもしれない | DevelopersIO
tRPCとnext.jsの組み合わせで、withTRPCを使うほどでもない時のライトに使う方法
tRPC入門―型安全なWebアプリケーションを効率よくつくる
sirabee.com
pazusoku.com
developer.hatenastaff.com
anigala-rew.jp
mikiki.tokyo.jp
prtimes.jp