メインコンテンツへスキップ
バージョン: 11.x

はじめに

非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました(ベータ版)。プロジェクト公式の承認はありません。 エラーを見つけましたか? 問題を報告 →

tRPCをさっと見る

tRPCのコンセプトを短い動画で確認したい方は、以下のビデオをご覧ください:

tRPCを試す

tRPCを最も手軽に試す方法は、オンラインREPLを使うことです。以下から選択できます:

  • Minimal Example - 最小構成のNode.js HTTPサーバーと、サーバーの関数を呼び出してリクエストをコンソールに記録するクライアント

  • Minimal Next.js Example - tRPCを使った最小限のNext.jsアプリ。文字列を返す単一エンドポイントと、そのエンドポイントを呼び出して結果を表示するページ

ローカル環境で始めたい場合は、サンプルアプリをスタータープロジェクトとして使用し、ローカルで試すことができます。

tRPCを使う

「tRPCを使う」とは人によって意味が異なります。このページでは、目標に応じて適切なリソースを案内します。

既存のtRPCプロジェクトで生産性を高める

新規プロジェクトを作成する

tRPCは様々なフレームワーク内で動作するため、まず使用環境を決める必要があります。

バックエンドでは、アダプターが複数のフレームワークやVanilla Node.jsに対応しています。フロントエンドでは、ReactNext.js向け公式統合、他のフレームワーク向けサードパーティ統合、JavaScriptが動作する環境ならどこでも使えるVanilla Clientが利用可能です。

スタックを決めたら、テンプレートでアプリを構築するか、選択したバックエンド/フロントエンド統合のドキュメントを参照してゼロから始められます。

既存プロジェクトにtRPCを追加する

既存プロジェクトへのtRPC追加は新規プロジェクト作成と大きく変わらないため、同じリソースが適用できます。主な課題は、既存アプリケーションにtRPCを統合する方法が分かりづらい点です。ヒントをいくつか紹介します:

  • 既存のバックエンドロジックをすべてtRPCに移植する必要はありません。一般的な移行戦略として、最初は新しいエンドポイントのみtRPCを使用し、既存エンドポイントは後で移行する方法があります。

  • どこから始めればよいかわからない場合は、バックエンドのアダプタとフロントエンド実装のドキュメント、およびサンプルアプリを参照してください。

  • 大規模なコードベースでtRPCをどのように活用できるかの参考例が必要な場合は、tRPCを採用したオープンソースプロジェクトをご覧ください。

コミュニティに参加しましょう

tRPC Discordに参加して、あなたの経験を共有したり質問したり、コミュニティからサポートを受けましょう!