<section><div><div><div><a><div><img></div><div>JavaScript</div></a><a><div><img></div><div>React</div></a><a><div><img></div><div>TypeScript</div></a><a><div><img></div><div>zod</div></a><a><div><img></div><div>tech</div></a></div><div><div><p data-line="0">こんにちは!<br>
<code>satisfies</code>大好きな筆者です。</p>
<p data-line="3"><span><iframe frameborder="0" scrolling="no"></iframe></span><a>https://zenn.dev/gemcook/articles/c1916975cf6ce6</a></p>
<p data-line="5">この記事に引き続いて<code>satisfies</code>にしかできないことをもう一つ紹介したいと思います。<code>satisfies</code>のお気に入りの使い方その２。です！</p>
<h1 data-line="7">
<a aria-hidden="true"></a> 無駄な変数宣言せずに型をつける</h1>
<p data-line="9">型注釈は変数の宣言時に行うことでその変数に対し型をつけることができます。その性質上、どうしても変数は宣言する必要があります、しかし<code>satisfies</code>はそんなことありません。いつだって使えるのです。<br>
さて「変数宣言せずに型をつける」とはどういうことでしょうか。実際の使用例を見ていきましょう。</p>
<h2 data-line="12">
<a aria-hidden="true"></a> 例1: 網羅性チェックに...。</h2>
<p data-line="14"><code>switch</code>などで対象の変数が取りうるすべての型について網羅的にチェックできているか?<code>case</code>に漏れがないかをチェックするテクニックとして、<code>never</code>を用いた網羅チェックがあります。</p>
<p data-line="16">サンプルコードは以下の通りです。</p>
<div><pre><code data-line="18">type Animal = "dog" | "cat" | "pig";

const awesomeFunction = (animal: Animal) => {
  switch (animal) {
    case "cat":
      return "meow";
    case "dog":
      return "bowwow";
    case "pig":
      return "oink oink";
    default:
      const _: never = animal;
  }
};
</code></pre></div><p data-line="35"><code>default</code>節に到達する前に、<code>cat</code>・<code>dog</code>・<code>pig</code>すべての<code>case</code>について網羅し、<code>return</code>できているため、<code>const _:never = animal</code>の部分に到達する時には<code>animal</code>は<code>never</code>型となっています。すべての<code>case</code>が網羅できているため型エラーが出ません。</p>
<p data-line="37">もしも、<code>Animal</code>に新しく<code>cow</code>などが追加された場合、<code>case "cow":</code>のパターンが網羅できていないため、<code>const _:never = animal</code>部分でコンパイルエラーとなって<code>switch</code>文の修正が必要であることが検出できるわけです。</p>
<p data-line="39">筆者は、割とこのテクニックが好きで愛用しているのですが、「なんか嫌だな」と思っている部分もありました。それが、まさにタイトルにもある通り、「<strong>無駄な変数宣言してるな...。</strong>」です。<br>
この問題を解決してくれるのが<code>satisfies</code>です。</p>
<h3 data-line="42">
<a aria-hidden="true"></a> satisfiesで無駄な変数宣言撲滅</h3>
<p data-line="44"><code>satisfies</code>を使用したパターンでの実装を見てみましょう。</p>
<div><pre><code data-line="46">type Animal = "dog" | "cat" | "pig";

const awesomeFunction = (animal: Animal) => {
  switch (animal) {
    case "cat":
      return "meow";
    case "dog":
      return "bowwow";
    case "pig":
      return "oink oink";
    default:
      return animal satisfies never;
  }
};
</code></pre></div><p data-line="63">いいですねー！！無駄な変数(<code>_</code>)がなくなりました！！<br>
網羅チェックで必要なことは「<code>default</code>説まで生き残った<code>animal</code>がいるかどうか？をチェックする」ことだけです。変な変数の宣言は本来必要ないはずです。<br>
これで無駄な変数宣言をなくし、必要十分な実装になりましたね😸</p>
<aside><span>!</span><div>
<p data-line="68">ちなみに、<code>default</code>節で<code>return animal</code>していますが、<code>animal</code>は<code>never</code>なため<code>awesomeFunction()</code>の型は以下の通りです。</p>
<div><pre><code data-line="69">const awesomeFunction = (animal: Animal) => {
  switch (animal) {
    ...
    default:
      return animal satisfies never;
  }
};

typeof awesomeFunction = (animal: Animal) => "meow" | "bowwow" | "oink oink"
</code></pre></div>
<p data-line="81">もしも<code>default</code>節 で<code>return animal</code>しない場合の<code>awesomeFunction()</code>の型は以下のようになってしまいます...。</p>
<div><pre><code data-line="83">type Animal = "dog" | "cat" | "pig";

const awesomeFunction = (animal: Animal) => {
  switch (animal) {
    ...
    default:
      animal satisfies never;
  }
};

typeof awesomeFunction = (animal: Animal) => "meow" | "bowwow" | "oink oink" | undefined

</code></pre></div>
<p data-line="98">無駄な<code>undefined</code>が出てきちゃいますね。<code>return</code>しときましょう！</p>
</div></aside>
<h2 data-line="101">
<a aria-hidden="true"></a> 例2: 関数の引数に...。</h2>
<p data-line="103">ライブラリなどで、「引数にオブジェクトを受け取るが、keyは<code>string</code>であればなんでも良い。」という関数によく出会います。そんな時にも<code>satisfies</code>が活躍します。<br>
具体例に<code>zod</code>を使用して、下記画像のような、「名前」と「住所」を入力するだけの、簡単(雑)なフォームを実装することを考えたいと思います。</p>
<p data-line="106"><img></p>
<h3 data-line="108">
<a aria-hidden="true"></a> satisfiesのない世界でのzodスキーマの宣言</h3>
<p data-line="110">上記の"簡単なフォーム"を実装するとしたら以下のようになるでしょう。(本題に関係ないコードは色々省略しています &amp; <code>react-hook-form</code>を使用しています)</p>
<div><pre><code data-line="112">import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

const awesomeFormSchema = z.object({
  name: z.string(),
  address: z.string(),
});

type AwesomeFormSchema = z.infer<typeof awesomeFormSchema>;

const AwesomeFormPage = () => {
  const { register } = useForm({
    resolver: zodResolver(awesomeFormSchema),
  });

  return (
    <form>
      <label>
        名前
        <input . .register( name )>
      </label>
      <label>
        住所
        <input . .register( address )>
      </label>
      {/* submitボタンは割愛...。 */}
    </form>
  );
};
</typeof></code></pre></div><p data-line="145">なんだか寂しいので、<br>
2つのinputはそれぞれ必須入力として、バリデーションエラーのメッセージも出るようにしましょう。</p>
<p data-line="148"><img></p>
<p data-line="150">コードは以下のようになりました。</p>
<div><pre><code data-line="152">import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

const awesomeFormSchema = z.object({
+  name: z.string().min(1, {message: "名前は必須項目です。"}),
+  address: z.string().min(1, {message: "住所は必須項目です。"}),
});

type AwesomeFormSchema = z.infer<typeof awesomeFormSchema>;

const AwesomeFormPage = () => {
  const {
    register,
+   formState: { errors },
  } = useForm({
    resolver: zodResolver(awesomeFormSchema),
  });

  return (
    <form>
      <label>
        名前
        <input . .register( name )>
+       <p>{errors.name?.message}</p>
      </label>
      <label>
        住所
        <input . .register( address )>
+       <p>{errors.address?.message}</p>
      </label>
      {/* submitボタンは割愛...。 */}
    </form>
  );
};
</typeof></code></pre></div><p data-line="189">一応完成しました...が、「バリデーションメッセージの”名前”」と「ラベルの"名前"」がそれぞれ別々にハードコードされているのが気に入りません...。それらの共通化をしていきたいと思います。</p>
<div><pre><code data-line="191">const awesomeFormLabel = {
  name: "名前",
  address: "住所",
};

const awesomeFormSchema = z.object({
  name: z.string().min(1, { message: `${awesomeFormLabel.name}は必須項目です。` }),
  address: z.string().min(1, { message: `${awesomeFormLabel.address}は必須項目です。` }),
});

type AwesomeFormSchema = z.infer<typeof awesomeFormSchema>;

const AwesomeFormPage = () => {
  const {
    register,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(awesomeFormSchema),
  });

  return (
    <form>
      <label>
        {awesomeFormLabel.name}
        <input . .register( name )>
        <p>{errors.name?.message}</p>
      </label>
      <label>
        {awesomeFormLabel.address}
        <input . .register( address )>
        <p>{errors.address?.message}</p>
      </label>
      {/* submitボタンは割愛...。 */}
    </form>
  );
};
</typeof></code></pre></div><p data-line="230">のようにしてみました。<br>
しかし、<code>awesomeFormLabel</code>と、<code>awesomeFormSchema</code>に型的な繋がりがないため、自由にばらばらなkeyで値を設定できてしまいます。(気持ち悪くて天国に行けそうです👼)</p>
<div><pre><code data-line="233">const awesomeFormLabel = {
  name: "名前",
  address: "住所",
  hoge: "らせん階段", // !?
  fuga: "カブトムシ", // !?
  fizz: "廃墟の街", // !?
  ...
};

const awesomeFormSchema = z.object({
  name: z.string().min(1, { message: `${awesomeFormLabel.name}は必須項目です。` }),
  address: z.string().min(1, { message: `${awesomeFormLabel.address}は必須項目です。` }),
  wards: z.array(z.string()).length(14) // !?
});
</code></pre></div><p data-line="250"><code>zod</code>の<code>z.object()</code>は前述の「引数にオブジェクトを受け取るが、keyは<code>string</code>であればなんでも良い。」という関数であり、自由なkeyにそれぞれバリデーションを指定することになります。<br>
それぞれを型的に対応させようとすると、以下のように<code>z.object()</code>に渡すオブジェクトを変数として切り出す必要があります。</p>
<div><pre><code data-line="253">import {z, type ZodSchema } from "zod"

type SchemaKey = "name" | "address"

const awesomeFormLabel: Record<SchemaKey, string> = {
  name: "名前",
  address: "住所",
}

// 型注釈により型をつけておく。
const aweSomeFormSchemaObject: Record<SchemaKey, ZodSchema> = {
  name: z.string().min(1, { message: `${awesomeFormLabel.name}は必須項目です。`}),
  address: z.string().min(1, { message: `${awesomeFormLabel.address}は必須項目です。` }),
}

const awesomeFormSchema = z.object(aweSomeFormSchemaObject),
</code></pre></div><p data-line="272">例１でも言いましたが、筆者はこれが好きではありません。今回も<code>aweSomeFormSchemaObject</code>に対して「<strong>無駄な変数宣言してるな...。</strong>」と感じます。<br>
ではどうすればいいのか？ そうですね、<code>satisfies</code>です！</p>
<h3 data-line="275">
<a aria-hidden="true"></a> satisfiesで無駄な変数宣言撲滅</h3>
<p data-line="277">さて、前置きが長くなりましたが、以下のように<code>satisfies</code>を使用することで、前述の不要な変数はなしに、やりたいことを実現することができます。</p>
<div><pre><code data-line="279">import {z, type ZodSchema } from "zod"

type SchemaKey = "name" | "address"

const awesomeFormLabel= {
  name: "名前",
  address: "住所",
} as const satisfies Record<SchemaKey, string> 

const awesomeFormSchema = z.object({
  name: z.string().min(1, { message: `${awesomeFormLabel.name}は必須項目です。`}),
  address: z.string().min(1, { message: `${awesomeFormLabel.address}は必須項目です。` }),
} satisfies Record<SchemaKey, ZodSchema>),
</code></pre></div><p data-line="295">無駄な変数が消え、スッキリしつつも<code>awesomeFormLabel</code>と、<code>awesomeFormSchema</code>の間に型的な繋がりを作ることができました。</p>
<p data-line="297"><code>z.object()</code>の引数として渡すオブジェクトに一時的な型をつけています。例１でも同様ですが<code>satisfies</code>を使用する際は必ずしも<code>const</code>などで変数を宣言する必要はないということですね。</p>
<p data-line="299">このように、<code>satisfies</code>は変数宣言時その末尾につけることで「推論による具体的な型を保ったまま一時的な型をつける」だけでなく、上記の様に「別に変数に切り出したくないけど、型で縛りたい...。」といったときに使用することで、無駄な変数宣言を削減できることがわかっていただけたかと思います。</p>
<p data-line="301">...便利ですね！好き！</p>
<h1 data-line="303">
<a aria-hidden="true"></a> まとめ</h1>
<p data-line="305">今回は、<code>satisfies</code>の利用によって、不要な変数宣言の削減が可能なことを紹介しました。<br>
例にあげた以外にも色々と活躍の場がある<code>satisfies</code>です。<br>
まだあまり使ってない方は是非使ってみてくださいー！！</p>
</div></div><div><span></span><aside><header><a><img alt height="26" referrerPolicy="no-referrer" width="26"></a><div>Gemcook Tech Blog により固定</div></header><div><div><p><strong>Gemcookと一緒に熱く楽しくエンジニアリングしませんか？</strong></p>
<ul>
<li><a>フロントエンドエンジニア募集</a></li>
<li><a>バックエンドエンジニア募集</a></li>
</ul>
</div></div></aside></div><span></span><aside><div><a><img alt="ひょぷて" height="80" referrerPolicy="no-referrer" width="80"></a><div><a>ひょぷて</a></div><div><p><span>誇り高きJSON色付け係。

いろんなエンジニアにレビューして欲しいので投稿してます。だからみんな気軽にコメントしてね！</span></p><div><span></span><a aria-label="@kana-chan" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" xml:space="preserve" aria-label="GitHub"><path fill="currentColor" d="M13.4,1.2C7,1,1.8,6,1.7,12.4c0,0.1,0,0.4,0,0.5c0,5.1,3.2,9.8,8.2,11.5c0.6,0.1,0.7-0.2,0.7-0.6s0-1.8,0-2.9 c0,0-3.3,0.6-4-1.5c0,0-0.6-1.3-1.3-1.8c0,0-1.1-0.7,0.1-0.7c0.7,0.1,1.5,0.6,1.8,1.2c0.6,1.2,2.2,1.7,3.4,1h0.1 c0.1-0.6,0.4-1.2,0.7-1.6C8.7,17.1,6,16.9,6,12.3c0-1.1,0.5-2.1,1.2-2.8c0-1.1,0-2.2,0.3-3.2c1-0.4,3.3,1.3,3.3,1.3c2-0.6,4-0.6,6,0 c0,0,2.2-1.6,3.2-1.2c0.5,1,0.5,2.2,0.1,3.2c0.7,0.7,1.2,1.8,1.2,2.8c0,4.5-2.8,5-5.5,5.2c0.6,0.6,0.9,1.3,0.7,2.2c0,1.7,0,3.5,0,4 s0.2,0.6,0.7,0.6c4.9-1.7,8.2-6.2,8-11.5c0.1-6.4-5.1-11.6-11.6-11.6C13.5,1.2,13.4,1.2,13.4,1.2z"></path></svg></a><a aria-label="@kaaaaanata1" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg width="27" height="28" viewBox="0 0 27 28" fill="none" aria-label="X(Twitter)"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></a></div></div></div></aside><div><div><a><img alt="Gemcook Tech Blog" height="80" referrerPolicy="no-referrer" width="80"></a><div><a>Gemcook Tech Blog</a><span><button><svg viewBox="0 0 24 24" fill="currentColor" height="21" width="21"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd"></path></svg><span>Publication Pro</span></button></span></div><div><p><span>「好きな人を喜ばせるプロダクトを作る」をMissionに日々開発しています。モバイル/Webアプリの企画・UI/UX設計・開発・運用までサポート。TypeScript、React、React Native、Next.js、Go、Hono、AWS、Cloudflare、TiDB、Bun ← この辺が好きな会社です🐿️</span></p><div><span></span><a aria-label="@gemcook" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg x="0px" y="0px" viewBox="0 0 27 27" xml:space="preserve" aria-label="GitHub"><path fill="currentColor" d="M13.4,1.2C7,1,1.8,6,1.7,12.4c0,0.1,0,0.4,0,0.5c0,5.1,3.2,9.8,8.2,11.5c0.6,0.1,0.7-0.2,0.7-0.6s0-1.8,0-2.9 c0,0-3.3,0.6-4-1.5c0,0-0.6-1.3-1.3-1.8c0,0-1.1-0.7,0.1-0.7c0.7,0.1,1.5,0.6,1.8,1.2c0.6,1.2,2.2,1.7,3.4,1h0.1 c0.1-0.6,0.4-1.2,0.7-1.6C8.7,17.1,6,16.9,6,12.3c0-1.1,0.5-2.1,1.2-2.8c0-1.1,0-2.2,0.3-3.2c1-0.4,3.3,1.3,3.3,1.3c2-0.6,4-0.6,6,0 c0,0,2.2-1.6,3.2-1.2c0.5,1,0.5,2.2,0.1,3.2c0.7,0.7,1.2,1.8,1.2,2.8c0,4.5-2.8,5-5.5,5.2c0.6,0.6,0.9,1.3,0.7,2.2c0,1.7,0,3.5,0,4 s0.2,0.6,0.7,0.6c4.9-1.7,8.2-6.2,8-11.5c0.1-6.4-5.1-11.6-11.6-11.6C13.5,1.2,13.4,1.2,13.4,1.2z"></path></svg></a><a aria-label="@gemcookofficial" data-tooltip-for-desktop="true" data-tooltip-position="bottom" role="tooltip"><svg width="27" height="28" viewBox="0 0 27 28" fill="none" aria-label="X(Twitter)"><g clip-path="url(#clip0_1_18)"><path d="M16.0687 11.7356L26.12 0H23.7382L15.0106 10.1899L8.03988 0H0L10.5411 15.4089L0 27.7155H2.38199L11.5985 16.9546L18.9601 27.7155H27L16.0681 11.7356H16.0687ZM12.8062 15.5447L11.7382 14.0103L3.24025 1.80106H6.89884L13.7568 11.6543L14.8248 13.1887L23.7393 25.9963H20.0807L12.8062 15.5452V15.5447Z" fill="currentColor"></path></g><defs><clipPath><rect width="27" height="27.7297" fill="white"></rect></clipPath></defs></svg></a></div></div></div></div><div><span></span><aside><header><span>Gemcook Tech BlogからのPR</span><button><span aria-label="詳細を確認する">？</span></button></header><ol><li><a><img alt="コーポレートサイト" height="60" width="60"><span>コーポレートサイト</span></a></li><li><a><img alt="採用情報" height="60" width="60"><span>採用情報</span></a></li></ol></aside></div><span></span></div></div><div><div></div></div></section>

変数の型を強制的に変更できる

関数の戻り値を常にundefinedにする

すべてのcaseが網羅できていることを確認するため

型の安全性を完全に無視するため