NeoWhisperは東京都港区を拠点とする個人事業主です。税務署へ開業届を提出済みで、ソフトウェア開発・ゲーム開発・アプリ開発・Web/コンテンツ制作・翻訳サービスを提供しています。
専門分野: Next.js • TypeScript • React • Node.js • 多言語サイト • SEO • パフォーマンス最適化
正直に言うと、昔は TypeScript が嫌いでした。 機能を作る時間よりも、コンパイラを納得させるためにコードを書いている時間の方が長い気がしていたからです。
でも、Next.js と Node.js で本番アプリを運用していくうちに、ある事実に気づきました。
TypeScript は、あなたと「深夜 3 時のデータベース崩壊」の間に立ちはだかる唯一の壁です。
問題は TypeScript ではありません。多くのチュートリアルが「型の書き方」だけを教えて、「アプリケーションの書き方」を教えていないことが問題なのです。
ここでは、TypeScript をただのお飾りではなく、強力な武器にするための方法を紹介します。
フロントエンドのフォルダに User 型があり、バックエンドのフォルダにも全く同じ User 型がある……これは間違いのもとです。
片方を変更してもう片方の更新を忘れると、バグがそのまま本番環境にデプロイされてしまいます。
解決策： コアとなるデータモデルは、共有パッケージかフォルダにまとめましょう。
// packages/types/src/user.ts
export interface User {
id: string;
email: string;
role: "admin" | "user";
}
これをすべての場所でインポートします。もし role の定義を変更すれば、プロジェクト全体のコードが赤くエラー表示されます。それが狙いです。
「このエンドポイント、何を返すんだっけ？」
もし答えが「たしかオブジェクトだったかな……」なら、危険信号です。すべてのエンドポイントが、必ず同じ「形」でデータを返すように強制しましょう。
// types/api.ts
export interface ApiResponse<T> {
data: T;
success: boolean;
error?: string;
}
使用例:
app.get("/users", async (req, res) => {
const users = await db.users.findMany();
// TypeScript がこの構造を強制します
const response: ApiResponse<User[]> = {
data: users,
success: true,
};
res.json(response);
});
よく見かける「犯罪的」なコードです：
// 悪い例
const { data } = useQuery(["user"], fetchUser);
// data は 'any' または 'unknown' になってしまう
これでは、TypeScript の恩恵を最後の最後で捨てているようなものです。こう書きましょう：
// 良い例
function useUser(id: string) {
return useQuery<User>({
queryKey: ["user", id],
queryFn: () => fetchUser(id),
});
}
これで、data. とタイプするだけで、VS Code が正しいプロパティを教えてくれます。
TypeScript は素晴らしいですが、実行時には消えてしまいます。ユーザーがいいかげんな JSON データを送ってきたら、TypeScript は無力です。Zod が必要です。
API の境界線では、必ず Zod を使って検証しましょう。
import { z } from "zod";
const UserSchema = z.object({
email: z.string().email(),
age: z.number().min(18),
});
type UserInput = z.infer<typeof UserSchema>;
app.post("/users", (req, res) => {
// 不正ならエラーを投げ、正しいなら型付きデータを返す
const body = UserSchema.parse(req.body);
saveUser(body);
});
これが「コンパイル時の安全性（TypeScript）」と「実行時の安全性（Zod）」のスイートスポットです。
良いコードを書くのに、複雑な型パズルは必要ありません。
ApiResponse<T> でラップするuseQuery をラップする）型安全なフルスタックアプリの開発支援が必要ですか？ NeoWhisperでは、TypeScript、Next.js、モダンなベストプラクティスを使った本番環境対応のアプリを開発しています。サービス詳細をご覧いただくか、お問い合わせからご相談ください。