Zodを使ったバリデーションで一番よく出てくるのが .object()
でも実際の現場では、それだけでは足りないことが多いです。

この記事では .object() と一緒によく使う構文だけにしぼって、未経験でもわかるように解説します！

でじぼう

この記事は下記の方がおすすめ！

• Zodってなに？
• .object() ってなに？
• よく使われる構文の違いが知りたい

Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち

【初心者向け】Networkタブの使い方をやさしく解説｜APIの見方や通信トラブル対処まで

F12キーで開く「Networkタブ」の基本を初心者向けに解説。通信状況の確認、APIのエラー調査、画面が動かない原因の特定に役立つ見方を紹介します。

it-bokenki.com

Zodとは？

Zodは、TypeScriptで「入力ルール（バリデーション）」を簡単に定義できるライブラリです。

• 形式チェック（文字列・数値・メールなど）
• 必須・任意の設定
• 条件付きのチェック

などが、読みやすい構文で書けるのが特徴です。
より詳細は下記のブログをご確認ください。

Zodとは？React Hook Formとの連携でバリデーション実装

TypeScriptで使えるバリデーションライブラリ「Zod」の基本と、React Hook Formとの連携方法を解説します。

it-bokenki.com

.object()とは？

フォーム全体の「入力ルール」をまとめて定義できる、Zodの土台です。

const schema = z.object({
  name: z.string(),
  email: z.string().email(),
});

コードの意味

• name は文字列の入力が必要（必須）
• email はメール形式での入力が必要（必須）

このように、.object() を使うことで複数の入力項目を1つのスキーマとしてまとめることができます。

一緒によく使う構文一覧【目的別】

.superRefine()とは？

複数項目を「まとめてチェック」したいときに利用します。

const schema = z.object({
  password: z.string(),
  confirm: z.string(),
}).superRefine((data, ctx) => {
  if (data.password !== data.confirm) {
    ctx.addIssue({
      path: ["confirm"],
      message: "パスワードが一致しません",
      code: z.ZodIssueCode.custom,
    });
  }
});

コードの意味

📘 data とは？

• z.object({...}) に渡したすべての入力値（name, email など）が入っているオブジェクトのことを指す
• React Hook Form の getValues() と同じ構造

📘 ctx.addIssue() とは？

• 条件に合致した場合に、「この項目にエラーがある」と Zod に伝える関数
• path: ["confirm"] と指定すれば、confirm にエラーメッセージが表示できる
• code: z.ZodIssueCode.custom は「独自ルールによるエラー」であることを示す
  

📘コード全体の意味

• .superRefine() は、バリデーションの対象全体（objectの中身）にアクセスできる関数
• password と confirm が一致していなければ、confirm 項目にエラーを追加

よくある使い方

• パスワード確認
• 日付の前後関係
• 条件付き入力のバリデーション

.partial()とは？

全部「任意入力」にするときに利用します。

const schema = z.object({
  title: z.string(),
  content: z.string(),
}).partial();

コードの意味

• title も content も、未入力でもエラーにならない

よくある使い方

• 入力フォームで、どれか1つだけ更新したいとき（プロフィール編集など）
• 一部だけ更新するような画面で、全項目が必須でないとき

.optional() でも同じ意味になる

下記の記載は、上記の.partial()で定義した場合と、結果はまったく同じになります。

const schema = z.object({
  title: z.string().optional(),
  content: z.string().optional(),
});

では .partial() を使うメリットは？

• プロパティがたくさんあるときに 1つずつ .optional() を書かなくて済む
• スキーマを再利用する際に、必須版と任意版を簡単に切り替えられる

✅ .optional() を個別に書いてもOK
✅ .partial() は 全部を一括で optional にしたいときに便利！

.merge()とは？

共通ルールと追加ルールを「合体する」ときに利用します。

const base = z.object({ id: z.string() });
const detail = z.object({ name: z.string() });

const schema = base.merge(detail);

コードの意味

• id と name の両方を含んだ1つのスキーマを作る

よくある使い方

• IDだけで定義した共通スキーマに、画面ごとの入力項目（詳細）を足したいとき
• 共通部分と画面ごとの違いを分けて管理したいとき（保守性アップ）

.extend()とは？

既存のスキーマに追加するときに利用します。

const user = z.object({ name: z.string() });
const extended = user.extend({ age: z.number() });

コードの意味

• user に age を追加した新しいスキーマを作る

よくある使い方

• もとのスキーマを壊さずに追加したいとき（再利用性アップ）
• 複数画面で user は共通だが、年齢が必要なのは一部だけ…という場面など

.pick()とは？

必要な項目だけ「取り出す」ときに利用します。

const full = z.object({
  name: z.string(),
  email: z.string(),
  age: z.number(),
});

const nameOnly = full.pick({ name: true });

コードの意味

• name だけを含むスキーマを作る

よくある使い方

• 一覧画面などで、一部の情報だけ使いたいとき
• 画面に表示するフィールドを限定したいとき

.omit()とは？

不要な項目だけ「除外する」ときに利用します。

const full = z.object({
  name: z.string(),
  email: z.string(),
  age: z.number(),
});

const noEmail = full.omit({ email: true });

コードの意味

• email を除外したスキーマを作る

よくある使い方

• セキュリティ上、特定の項目を外したいとき（たとえばパスワードなど）
• APIレスポンスで不要な情報を含めたくないとき

補足：.refine() は .object() の中で「項目ごと」に使う

.refine() は単体の項目に対して使い、複数項目にまたがるときは .superRefine() を使います。

z.object({
  username: z.string().refine(val => val !== "admin", {
    message: "admin は使えません",
  }),
});

コードの意味

• username が “admin” だったらエラーになる、という1つの項目に対する条件

【初心者向け】Networkタブの使い方をやさしく解説｜APIの見方や通信トラブル対処まで

F12キーで開く「Networkタブ」の基本を初心者向けに解説。通信状況の確認、APIのエラー調査、画面が動かない原因の特定に役立つ見方を紹介します。

it-bokenki.com

The post Zodの .object() とセットで使うバリデーション構文まとめ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.

開発をすると SMTP って言葉よく聞きますよね。
実際よくわかっていない人、集まってください！ご説明します。

でじぼう

この記事は下記の方がおすすめ！

• SMTPってなに？
• どう実装するのかわからない
• エラーが出ても解読できない

Instagramフォロワー数9,500人を越える人気のもち・大福店 えにかいたもち

SMTPとは？

SMTP（Simple Mail Transfer Protocol）とは、メールを送るときに使われる通信ルールのことです。

「プロトコル」とは「決まりごと」という意味なので、SMTPは「メール送信用の決まりごと」と覚えるとシンプルです。

SMTPはどんなときに使われる？

Gmailなどでメールを送るとき、その裏側ではSMTPが働いて、「どこに」「誰が」「何を」送ったかを伝えています。

例えるなら、SMTPは「郵便局の配達員」のような存在です。
書いた手紙（メール）を相手の住所（メールアドレス）に届けてくれる役割です。

メール送信の流れ

SMTPでよく出る用語と設定項目

下記に、SMTP関連でよく利用する用語をまとめました。

どっちのポート番号を使えばいいの？【465 or 587】

基本的には 587（STARTTLS）を使うのが推奨 です。

多くのメールサービス（Gmail、SendGrid、Outlook など）でも推奨されています。

465（SSL）を使ってもいいの？

使ってもOKです。ただし注意点もあります。

SMTPとPOP/IMAPの違いを比較

メールの送受信には、それぞれ役割の違うプロトコルが使われています。
特に、SMTP・POP・IMAPの3つはよく登場しますが、それぞれ役割がまったく異なります。
下の表で、その違いを比べてみましょう。

404？500? ステータスコードとは？よく見るコード厳選まとめ

開発エンジニアが現場でよく使うHTTPステータスコードを、意味・原因・使われる場面とともにわかりやすく解説！

it-bokenki.com

SMTPを使った開発実装の例

Web開発では、例えば「お問い合わせフォーム」からの自動返信メールなどにSMTPが使われます。

フォーム入力 → SMTP経由で自動返信メールを送信する流れです。

Node.js + nodemailer の実装例

.env にSMTP情報を記載し、それをNode.jsで読み込んでメール送信を行うコード例です。

SMTP_HOST=smtp.gmail.com
SMTP_PORT=587
SMTP_USER=your-email@gmail.com
SMTP_PASS=your-app-password

import nodemailer from "nodemailer";

// .env.local に記載した SMTP情報を読み込む
const transporter = nodemailer.createTransport({
  // 接続先のSMTPサーバー
  host: process.env.SMTP_HOST,

  // 使用するポート番号
  port: Number(process.env.SMTP_PORT),

  // ポートが465ならSSL通信（secure: true）、それ以外ならSTARTTLS（secure: false）
  secure: Number(process.env.SMTP_PORT) === 465,

  // 認証情報（メールアドレスとアプリパスワードなど）
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
});

// メールの内容
const mailOptions = {
  from: "your-email@gmail.com",
  to: "receiver@example.com",
  subject: "お問い合わせありがとうございます",
  text: "これは自動返信メールです。",
};

// 送信
async function sendEmail() {
  try {
    await transporter.sendMail(mailOptions);
    console.log("メール送信に成功しました");
  } catch (error) {
    console.error("メール送信に失敗しました:", error);
  }
}

sendEmail(); // 関数を実行

よくある設定ミス：「secureを省略」

SMTP設定で以下のように書いている場合：

port: Number(process.env.SMTP_PORT),
secure: Number(process.env.SMTP_PORT) === 465,

この secure の指定は省略せず、明示するのが推奨です。
なぜなら、ポート番号だけでは nodemailer はどの暗号化方式（SSLかSTARTTLS）を使うか判断できないからです。

port: 465,
secure: false  // ← ポート465なのにSSLを使わない ⇒ エラーになる可能性大

上記のように設定が矛盾していると、connect error や SSL wrong version number のようなエラーになります。

正しい設定例

// SSL（465番）で送信する場合
port: 465,
secure: true,

// STARTTLS（587番）で送信する場合
port: 587,
secure: false,

SMTPエラーと確認方法

エラーの種類・確認方法の例をご紹介します。

エラー確認方法

• 開発環境：VSCodeのターミナルに表示
• 本番環境：ログファイルに記載される等

例
認証エラーの場合、ターミナルに下記のようにエラー文が表示されます。

Error: Invalid login: 535-5.7.8 Username and Password not accepted.

エンジニアなら押さえたい！基本用語5選

現場でよく聞く「ライブラリ」や「フック」などの用語、意味を説明できますか？初心者向けにわかりやすく解説します。

it-bokenki.com

The post SMTPとは？メール送信の仕組みと実装・エラー内容まとめ first appeared on てんハロ｜未経験エンジニアのIT学習ログ.