{"id":6946,"date":"2025-09-25T19:28:03","date_gmt":"2025-09-25T19:28:03","guid":{"rendered":"https:\/\/pokecon.jp\/job\/?p=6946"},"modified":"2025-09-25T19:28:03","modified_gmt":"2025-09-25T19:28:03","slug":"zod-codecs-%e3%81%a7-use-client-%e3%82%92%e4%bb%8b%e3%81%97%e3%81%9f-server-client-%e9%96%93%e3%83%87%e3%83%bc%e3%82%bf%e8%bb%a2%e9%80%81%e3%82%92%e5%bc%b7%e5%8c%96%e3%81%99%e3%82%8b","status":"publish","type":"post","link":"https:\/\/pokecon.jp\/job\/6946\/","title":{"rendered":"Zod Codecs \u3067 &#8216;use client&#8217; \u3092\u4ecb\u3057\u305f Server-Client \u9593\u30c7\u30fc\u30bf\u8ee2\u9001\u3092\u5f37\u5316\u3059\u308b"},"content":{"rendered":"\n<\/p>\n<div>\n<aside class=\"msg message\"><span class=\"msg-symbol\">!<\/span><\/p>\n<div class=\"msg-content\">\n<p data-line=\"1\" class=\"code-line\"><strong>\u5229\u7528\u3057\u305f\u4e3b\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30d0\u30fc\u30b8\u30e7\u30f3<\/strong><\/p>\n<ul data-line=\"3\" class=\"code-line\">\n<li data-line=\"3\" class=\"code-line\">\n<code>\"next\"<\/code>: 15.5.3 (App Router \u3092\u5229\u7528)<\/li>\n<li data-line=\"4\" class=\"code-line\">\n<code>\"react\"<\/code>: 19.x \u7cfb (Next.js \u306e\u4e8b\u60c5\u304c\u3042\u308b\u306e\u3067\u3001\u5177\u4f53\u7684\u306a\u30d0\u30fc\u30b8\u30e7\u30f3\u306f\u6562\u3048\u3066\u4f0f\u305b\u308b)<\/li>\n<li data-line=\"5\" class=\"code-line\">\n<code>\"temporal-polyfill\"<\/code>: 0.3.0<\/li>\n<li data-line=\"6\" class=\"code-line\">\n<code>\"zod\"<\/code>: 4.1.9<\/li>\n<\/ul>\n<\/div>\n<\/aside>\n<p data-line=\"9\" class=\"code-line\"><strong><code>'use client'<\/code> \u306f\u3001\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u3078\u3068\u3001\u63cf\u753b\u7528\u30c7\u30fc\u30bf\u3092\u9001\u4fe1\u3059\u308b\u5883\u754c\u3092\u8868\u3059\u30de\u30fc\u30ab\u30fc\u3067\u3042\u308b<\/strong> \u3068\u3044\u3046\u3053\u3068\u306f\u3001\u5e83\u304f\u77e5\u3089\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n<p data-line=\"11\" class=\"code-line\"><span class=\"embed-block zenn-embedded zenn-embedded-card\"><iframe id=\"zenn-embedded__28e670ea161c4\" src=\"https:\/\/embed.zenn.studio\/card#zenn-embedded__28e670ea161c4\" data-content=\"https%3A%2F%2Fzenn.dev%2Fyumemi_inc%2Farticles%2Fuse-client-directive-explained-with-gssp\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\"><\/iframe><\/span><a target=\"_blank\" href=\"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-directive-explained-with-gssp\" style=\"display:none\" target=\"_blank\">https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-directive-explained-with-gssp<\/a><\/p>\n<p data-line=\"13\" class=\"code-line\">\u4e0a\u8a18\u306e\u8a18\u4e8b\u306e\u4e2d\u3067\u306f\u8efd\u304f\u89e6\u308c\u308b\u3060\u3051\u306b\u3068\u3069\u3081\u307e\u3057\u305f\u304c\u3001\u5b9f\u306f\u3001 <code>'use client'<\/code> \u306f\u300c\u7d20\u306e JSON\u300d\u3088\u308a\u3082\u591a\u7a2e\u591a\u69d8\u306a\u30c7\u30fc\u30bf\u306e\u8ee2\u9001\u306b\u5bfe\u5fdc\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p data-line=\"15\" class=\"code-line\"><strong>RSC \u304c\u300c\u30b5\u30fc\u30d0\u30fc\u5074 \/ \u30d6\u30e9\u30a6\u30b6\u5074 \u306e\u30b3\u30fc\u30c9\u3092\u30b7\u30fc\u30e0\u30ec\u30b9\u306b\u7e4b\u304e\u5408\u308f\u305b\u308b\u300d\u6280\u8853\u3067\u3042\u308b\u3053\u3068\u304c\u826f\u304f\u308f\u304b\u308a\u307e\u3059\u306d\u3002<\/strong><\/p>\n<blockquote data-line=\"17\" class=\"code-line\">\n<p data-line=\"17\" class=\"code-line\">\u30b5\u30fc\u30d0\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304b\u3089\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6e21\u3055\u308c\u308b props \u306e\u5024\u306f\u3001\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u53ef\u80fd (serializable) \u3067\u3042\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p data-line=\"19\" class=\"code-line\">\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u53ef\u80fd\u306a props \u306b\u306f\u4ee5\u4e0b\u306e\u3082\u306e\u304c\u3042\u308a\u307e\u3059\uff1a<\/p>\n<p data-line=\"41\" class=\"code-line\">\u51fa\u5178:<\/p>\n<p><span class=\"embed-block zenn-embedded zenn-embedded-card\"><iframe id=\"zenn-embedded__b373c554c8c19\" src=\"https:\/\/embed.zenn.studio\/card#zenn-embedded__b373c554c8c19\" data-content=\"https%3A%2F%2Fja.react.dev%2Freference%2Frsc%2Fuse-client%23serializable-types\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\"><\/iframe><\/span>\n<\/p><\/blockquote>\n<h2 id=\"'use-client'-%E3%81%A0%E3%81%91%E3%81%A7-date-%E3%82%92%E9%80%81%E3%82%8C%E3%82%8B\" data-line=\"44\" class=\"code-line\">\n <code>'use client'<\/code> \u3060\u3051\u3067 Date \u3092\u9001\u308c\u308b<\/h2>\n<p data-line=\"46\" class=\"code-line\">\u5148\u307b\u3069\u8ff0\u3079\u305f\u901a\u308a\u3001 <code>'use client'<\/code> \u3067\u30de\u30fc\u30af\u3055\u308c\u305f Client Component \u306b\u3001Server Component \u304b\u3089 Date \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6e21\u3059\u3053\u3068\u306f\u53ef\u80fd\u3067\u3059\u3002<\/p>\n<p data-line=\"48\" class=\"code-line\">\u4ee5\u4e0b\u306e\u4f8b\u3067\u306f\u3001 <code>Date<\/code> \u3092\u30b5\u30fc\u30d0\u30fc\u304b\u3089\u30af\u30e9\u30a4\u30a2\u30f3\u30c8\u306b\u9001\u308b\u53e3\u5b9f\u3068\u3057\u3066\u3001\u300c\u30b5\u30fc\u30d0\u30fc\u5074\u3067\u73fe\u5728\u6642\u523b\u3092\u53d6\u5f97\u3057\u3066\u3001\u30d6\u30e9\u30a6\u30b6\u5074\u3067\u305d\u308c\u3092\u7aef\u672b\u306e\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u306b\u57fa\u3065\u3044\u3066\u8868\u793a\u3059\u308b\u300d\u3068\u3044\u3046\u3001Client Component \u629c\u304d\u3067\u306f\u5b9f\u88c5\u3057\u3065\u3089\u3044\u6a5f\u80fd\u3092\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p data-line=\"51\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--Ao1Sqkax--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/ca31c2e2e95ae43a1a4b9401.png%3Fsha%3D662ebd9db32b352e7dc84ef0323acbf0d006d48f\" alt=\"ISO: 2025-09-25T08:15:34.840Z \u30d6\u30e9\u30a6\u30b6\u5074\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u3067\u306e\u6642\u523b: Thursday, September 25, 2025 at 1:15:34 AM PDT\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>\u5b9f\u969b\u306e\u753b\u9762\u306e\u69d8\u5b50: \u4e16\u754c\u5354\u5b9a\u6642\u306e\u6642\u523b\u3068\u3001PDT\uff08\u30d6\u30e9\u30a6\u30b6\u5074\u306e\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u3067\u3042\u308b\u30b5\u30f3\u30d5\u30e9\u30f3\u30b7\u30b9\u30b3\u306e\u73fe\u5730\u6642\u523b\uff09\u304c\u8868\u793a\u3055\u308c\u3066\u3044\u308b<\/em><\/p>\n<p data-line=\"54\" class=\"code-line\"><em>\u25bc\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u9593\u3067\u30c7\u30fc\u30bf\u304c\u53d7\u3051\u6e21\u3055\u308c\u308b\u69d8\u5b50\u306e\u6982\u7565\u56f3<\/em><\/p>\n<p><span class=\"embed-block zenn-embedded zenn-embedded-mermaid\"><iframe id=\"zenn-embedded__e2a4ee4a4e157\" src=\"https:\/\/embed.zenn.studio\/mermaid#zenn-embedded__e2a4ee4a4e157\" data-content=\"sequenceDiagram%0A%20%20box%20rgba(0%2C120%2C255%2C0.05)%20Client%20%E7%92%B0%E5%A2%83%3Cbr%2F%3ELocaleAwareDate%0A%20%20participant%20C1%20as%20Date%0A%20%20end%0A%20%20box%20rgba(255%2C0%2C80%2C0.05)%20Server%20%E7%92%B0%E5%A2%83%3Cbr%2F%3EPage%0A%20%20participant%20S1%20as%20Date%0A%20%20end%0A%0A%20%20S1-%3E%3ES1%3A%20%E7%8F%BE%E5%9C%A8%E6%99%82%E5%88%BB%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%0A%20%20note%20over%20S1%3A%20new%20Date()%0A%20%20S1--%3E%3EC1%3A%20%F0%9F%92%8C%20RSC%20Payload%0A%20%20note%20over%20S1%2CC1%3A%20'use%20client'%20%E3%82%92%E4%BB%8B%E3%81%97%E3%81%A6%E5%A2%83%E7%95%8C%E3%82%92%E8%B6%8A%E3%81%88%E3%82%8B\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\"><\/iframe><\/span><\/p>\n<div class=\"code-block-container\">\n<p><span class=\"code-block-filename\">(\u629c\u7c8b) src\/app\/rsc-date\/date\/page.tsx<\/span><\/p>\n<pre class=\"language-tsx\"><code class=\"language-tsx code-line\" data-line=\"71\">\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> <span class=\"token maybe-class-name\">LocaleAwareDate<\/span> <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/locale-aware-date\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">Page<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">PageProps<\/span><span class=\"token operator\"><span class=\"token string\">\"\/rsc-date\/date\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">await<\/span> <span class=\"token function\">connection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">container<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">section<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">h2<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\u30a2\u30af\u30bb\u30b9\u3057\u305f\u6642\u523b:<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>h2<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><span class=\"token class-name\">LocaleAwareDate<\/span><\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>section<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<div class=\"code-block-container\">\n<p><span class=\"code-block-filename\">(\u629c\u7c8b) src\/app\/rsc-date\/date\/locale-aware-date.tsx<\/span><\/p>\n<pre class=\"language-tsx\"><code class=\"language-tsx code-line\" data-line=\"90\"><span class=\"token string\">\"use client\"<\/span><span class=\"token punctuation\">;<\/span>\n\n\n\n<span class=\"token keyword\">const<\/span> formatter <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Intl<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\"><span class=\"token maybe-class-name\">DateTimeFormat<\/span><\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">undefined<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n  \n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">type<\/span> <span class=\"token class-name\">Props<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n  value<span class=\"token operator\">:<\/span> <span class=\"token known-class-name class-name\">Date<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">LocaleAwareDate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> value <span class=\"token punctuation\">}<\/span><span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">Props<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  \n  \n  <span class=\"token keyword\">const<\/span> localDate <span class=\"token operator\">=<\/span> <span class=\"token function\">useSyncExternalStore<\/span><span class=\"token punctuation\">(<\/span>\n    <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> formatter<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">format<\/span><span class=\"token punctuation\">(<\/span>value<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token keyword\">undefined<\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">root<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">span<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">prefix<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\u30d6\u30e9\u30a6\u30b6\u5074\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u3067\u306e\u6642\u523b: <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">span<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">time<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token punctuation\">{<\/span>localDate<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<details>\n<summary>\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u5168\u6587<\/summary>\n<div class=\"details-content\">\n<div class=\"code-block-container\">\n<p><span class=\"code-block-filename\">src\/app\/rsc-date\/date\/page.tsx<\/span><\/p>\n<pre class=\"language-tsx\"><code class=\"language-tsx code-line\" data-line=\"124\"><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">Metadata<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"next\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> connection <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"next\/server\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token maybe-class-name\">Link<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"next\/link\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> <span class=\"token maybe-class-name\">LocaleAwareDate<\/span> <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/locale-aware-date\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\">styles<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/page.module.scss\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> metadata<span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">Metadata<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n  title<span class=\"token operator\">:<\/span> <span class=\"token string\">\"Date \u306e\u632f\u308b\u821e\u3044\u30c6\u30b9\u30c8\"<\/span><span class=\"token punctuation\">,<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">Page<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">PageProps<\/span><span class=\"token operator\"><span class=\"token string\">\"\/rsc-date\/date\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">await<\/span> <span class=\"token function\">connection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">container<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">nav<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">nav<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><span class=\"token class-name\">Link<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\/rsc-date<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">navLink<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n          \u2190 Back to RSC Date Examples\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/><span class=\"token class-name\">Link<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>nav<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">h1<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\u73fe\u5730\u6642\u523b\u306e\u632f\u308b\u821e\u3044\u30c6\u30b9\u30c8<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>h1<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">section<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">h2<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\u30a2\u30af\u30bb\u30b9\u3057\u305f\u6642\u523b:<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>h2<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><span class=\"token class-name\">LocaleAwareDate<\/span><\/span> <span class=\"token attr-name\">value<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Date<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><\/span> <span class=\"token punctuation\">\/&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>section<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<div class=\"code-block-container\">\n<p><span class=\"code-block-filename\">src\/app\/rsc-date\/date\/locale-aware-date.tsx<\/span><\/p>\n<pre class=\"language-tsx\"><code class=\"language-tsx code-line\" data-line=\"156\"><span class=\"token string\">\"use client\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> useSyncExternalStore <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"react\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\">styles<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/locale-aware-date.module.scss\"<\/span><span class=\"token punctuation\">;<\/span>\n\n\n<span class=\"token keyword\">const<\/span> formatter <span class=\"token operator\">=<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\">Intl<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\"><span class=\"token maybe-class-name\">DateTimeFormat<\/span><\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">undefined<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span>\n  weekday<span class=\"token operator\">:<\/span> <span class=\"token string\">\"long\"<\/span><span class=\"token punctuation\">,<\/span>\n  year<span class=\"token operator\">:<\/span> <span class=\"token string\">\"numeric\"<\/span><span class=\"token punctuation\">,<\/span>\n  month<span class=\"token operator\">:<\/span> <span class=\"token string\">\"long\"<\/span><span class=\"token punctuation\">,<\/span>\n  day<span class=\"token operator\">:<\/span> <span class=\"token string\">\"numeric\"<\/span><span class=\"token punctuation\">,<\/span>\n  hour<span class=\"token operator\">:<\/span> <span class=\"token string\">\"numeric\"<\/span><span class=\"token punctuation\">,<\/span>\n  minute<span class=\"token operator\">:<\/span> <span class=\"token string\">\"numeric\"<\/span><span class=\"token punctuation\">,<\/span>\n  second<span class=\"token operator\">:<\/span> <span class=\"token string\">\"numeric\"<\/span><span class=\"token punctuation\">,<\/span>\n  timeZoneName<span class=\"token operator\">:<\/span> <span class=\"token string\">\"short\"<\/span><span class=\"token punctuation\">,<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">type<\/span> <span class=\"token class-name\">Props<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n  value<span class=\"token operator\">:<\/span> <span class=\"token known-class-name class-name\">Date<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">LocaleAwareDate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> value <span class=\"token punctuation\">}<\/span><span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">Props<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  \n  \n  <span class=\"token keyword\">const<\/span> localDate <span class=\"token operator\">=<\/span> <span class=\"token function\">useSyncExternalStore<\/span><span class=\"token punctuation\">(<\/span>\n    <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> formatter<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">format<\/span><span class=\"token punctuation\">(<\/span>value<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token keyword\">undefined<\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  \n  \n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">root<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">span<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">prefix<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">ISO: <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">time<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">time<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token punctuation\">{<\/span>value<span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">toISOString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>time<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">span<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">prefix<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\u30d6\u30e9\u30a6\u30b6\u5074\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u3067\u306e\u6642\u523b: <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">span<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">time<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token punctuation\">{<\/span>localDate<span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/details>\n<h2 id=\"zod-codecs-%E3%81%A8%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8C%E3%81%B0-temporal-%E3%82%82%E9%80%81%E3%82%8C%E3%82%8B\" data-line=\"209\" class=\"code-line\">\n Zod Codecs \u3068\u7d44\u307f\u5408\u308f\u305b\u308c\u3070 Temporal \u3082\u9001\u308c\u308b<\/h2>\n<p data-line=\"211\" class=\"code-line\">Temporal \u306e\u65e5\u4ed8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306f\u3069\u3046\u3067\u3057\u3087\u3046\u304b\uff1f\u3053\u3053\u3067\u306f <code>Temporal.PlainDateTime<\/code> \u578b\u3067\u8a66\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p data-line=\"213\" class=\"code-line\">\uff08\u5c11\u306a\u304f\u3068\u3082\uff092025\/09\/24 \u73fe\u5728\u3067\u306f\u3001 <code>'use client'<\/code> \u3067\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u53ef\u80fd\u306a\u30ea\u30b9\u30c8\u306b\u5217\u6319\u3055\u308c\u3066\u304a\u3089\u305a\u3001\u305d\u306e\u307e\u307e\u3067\u306f\u9001\u4fe1\u3067\u304d\u307e\u305b\u3093\u3002<\/p>\n<p data-line=\"215\" class=\"code-line\">\u7121\u7406\u3084\u308a\u6e21\u305d\u3046\u3068\u3059\u308b\u3068\u3001\u3053\u306e\u3088\u3046\u306a\u30a8\u30e9\u30fc\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p data-line=\"217\" class=\"code-line\">\uff08<code>page.tsx<\/code> \u306f Server Component \u3067\u3001<code>ShowPlainDateTime<\/code> \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u306f <code>'use client'<\/code> \u30c7\u30a3\u30ec\u30af\u30c6\u30a3\u30d6\u3092\u8a2d\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002\uff09<\/p>\n<p data-line=\"219\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--Wta0GMnC--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/5c5e158455dc4bbafdf2022a.png%3Fsha%3Dd6dd309718d80449c867287ea503638061280ece\" alt=\"Only plain objects can be passed to Client Components from Server Components. Temporal.PlainDateTime objects are not supported.&#10;\" class=\"md-img\" loading=\"lazy\"\/><\/p>\n<p data-line=\"222\" class=\"code-line\">\u3057\u304b\u3057\u3001\u3053\u308c\u3067\u7d42\u308f\u308a\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n<h3 id=\"%E3%82%B7%E3%83%AA%E3%82%A2%E3%83%A9%E3%82%A4%E3%82%BA%E5%8F%AF%E8%83%BD%E3%81%AA%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%97%E3%81%A6%E9%80%81%E4%BF%A1%E3%81%99%E3%82%8B\" data-line=\"224\" class=\"code-line\">\n \u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u53ef\u80fd\u306a\u30c7\u30fc\u30bf\u306b\u5909\u63db\u3057\u3066\u9001\u4fe1\u3059\u308b<\/h3>\n<ul data-line=\"228\" class=\"code-line\">\n<li data-line=\"228\" class=\"code-line\">Server Component \u5074\u3067\u306f\u3001\u300a<code>'use client'<\/code> \u3067\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u53ef\u80fd\u306a\u30c7\u30fc\u30bf\u578b\u300b\u306b\u5909\u63db\u3057\u3066\u3001Props \u306b\u6e21\u3059\u3002\n<ul data-line=\"229\" class=\"code-line\">\n<li data-line=\"229\" class=\"code-line\">\u30a8\u30f3\u30b3\u30fc\u30c9\uff08encode\uff09<\/li>\n<\/ul>\n<\/li>\n<li data-line=\"230\" class=\"code-line\">Client Component \u5074\u3067\u306f\u3001\u305d\u308c\u3092\u53d7\u3051\u53d6\u3063\u3066\u3001\u5143\u306e\u578b\u306b\u5fa9\u5143\u3059\u308b\n<\/li>\n<\/ul>\n<p data-line=\"233\" class=\"code-line\">\u3068\u3044\u3046\u5c11\u3057\u306e\u624b\u9593\u3092\u639b\u3051\u3055\u3048\u3059\u308c\u3070\u3001\u3068\u308a\u3042\u3048\u305a\u5bfe\u5fdc\u3067\u304d\u307e\u3059\u3002<\/p>\n<aside class=\"msg message\"><span class=\"msg-symbol\">!<\/span><\/p>\n<div class=\"msg-content\">\n<p data-line=\"236\" class=\"code-line\">\u3053\u308c\u4ee5\u964d\u30012\u3064\u306e\u578b\u5909\u6570 Shaped \/ Underlying \u306e\u540d\u79f0\u3092\u4f7f\u3063\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n<ul data-line=\"238\" class=\"code-line\">\n<li data-line=\"238\" class=\"code-line\">Shaped\uff08\u5b9f\u969b\u306b\u30d3\u30b8\u30cd\u30b9\u30ed\u30b8\u30c3\u30af\u3092\u66f8\u304f\u305f\u3081\u306b\u5229\u7528\u3059\u308b\u578b\uff09\n<ul data-line=\"239\" class=\"code-line\">\n<li data-line=\"239\" class=\"code-line\">\n<code>Temporal.PlainDateTime<\/code> \u578b<\/li>\n<\/ul>\n<\/li>\n<li data-line=\"240\" class=\"code-line\">Underlying\uff08<code>'use client'<\/code> \u3067\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u53ef\u80fd\u306a\u30c7\u30fc\u30bf\u578b\uff09\n<\/li>\n<\/ul>\n<\/div>\n<\/aside>\n<p><span class=\"embed-block zenn-embedded zenn-embedded-mermaid\"><iframe id=\"zenn-embedded__dc8a071aba09a\" src=\"https:\/\/embed.zenn.studio\/mermaid#zenn-embedded__dc8a071aba09a\" data-content=\"sequenceDiagram%0A%20%20box%20rgba(0%2C120%2C255%2C0.05)%20Client%20%E7%92%B0%E5%A2%83%3Cbr%2F%3EShowPlainDateTime%0A%20%20participant%20C1%20as%20PlainDateTime%3Cbr%2F%3E(Shaped)%0A%20%20participant%20C2%20as%20string%3Cbr%2F%3E(Underlying)%0A%20%20end%0A%20%20box%20rgba(255%2C0%2C80%2C0.05)%20Server%20%E7%92%B0%E5%A2%83%3Cbr%2F%3EPage%0A%20%20participant%20S2%20as%20string%3Cbr%2F%3E(Underlying)%0A%20%20participant%20S1%20as%20PlainDateTime%3Cbr%2F%3E(Shaped)%0A%20%20end%0A%0A%20%20S1-%3E%3ES1%3A%20%E7%8F%BE%E5%9C%A8%E6%99%82%E5%88%BB%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%0A%20%20note%20over%20S1%3A%20Temporal.Now%3Cbr%2F%3E.plainDateTimeISO()%0A%20%20S1-%3E%3ES2%3A%20encode%0A%20%20S2--%3E%3EC2%3A%20%F0%9F%92%8C%20RSC%20Payload%0A%20%20note%20over%20S2%2CC2%3A%20'use%20client'%20%E3%82%92%E4%BB%8B%E3%81%97%E3%81%A6%E5%A2%83%E7%95%8C%E3%82%92%E8%B6%8A%E3%81%88%E3%82%8B%0A%20%20C2-%3E%3EC1%3A%20decode\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\"><\/iframe><\/span><\/p>\n<p data-line=\"264\" class=\"code-line\">\u3068\u308a\u3042\u3048\u305a\u3053\u308c\u3067\u76ee\u7684\u306f\u679c\u305f\u305b\u307e\u3059\u304c\u3001\u3057\u304b\u3057\u3001\u5b9f\u88c5\u3059\u308b\u3068\u306a\u308b\u3068\u3001\u306a\u3093\u304b\u30b4\u30c1\u30e3\u30c3\u3068\u3057\u3066\u4f7f\u3044\u306b\u304f\u3044\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u30fc\u306b\u306a\u308b\u5302\u3044\u304c\u3057\u307e\u3059\u3002<\/p>\n<p data-line=\"266\" class=\"code-line\">JavaScript\/TypeScript \u306f\u540d\u524d\u7a7a\u9593\u6a5f\u80fd\u304c\u306a\u304f\u3001\u95a2\u6570\u306e\u540d\u524d\u306f\u9577\u301c\u301c\u3044\u52d5\u8a5e\u53e5\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u3001\u3044\u308d\u3044\u308d\u306a\u60c5\u5831\u3092\u63d0\u4f9b\u3057\u3088\u3046\u3068\u3059\u308b\u3068\u3001\u305d\u308c\u305e\u308c\u30d0\u30e9\u30d0\u30e9\u306a\u540d\u524d\u306b\u306a\u3063\u3066\u3057\u307e\u3046\u306e\u3067\u3001\u3053\u3093\u306a\u611f\u3058\u306b\u306a\u3063\u3066\u3057\u307e\u3044\u307e\u3059\u3002<\/p>\n<div class=\"code-block-container\">\n<pre class=\"language-tsx\"><code class=\"language-tsx code-line\" data-line=\"268\">\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> encodeFromPlainDateTime <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"#\/utils\/react\/codecs\/plain-date-time\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> decodeIntoPlainDateTime <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"#\/utils\/react\/codecs\/plain-date-time\"<\/span><span class=\"token punctuation\">;<\/span>\n\n\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">PlainDateTime<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">PlainDateTimeUnderlying<\/span><span class=\"token punctuation\">,<\/span> \n<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"#\/utils\/react\/codecs\/plain-date-time\"<\/span><span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<\/div>\n<p data-line=\"281\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--xrfrf81n--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/77a4f367ec07afacd5fc80ce.png%3Fsha%3D4c6eecb7b448243d34ae99bb915f621a822e3cfb\" alt=\"VSCode \u306e\u753b\u9762\u3002plainDateTime \u3068\u5165\u529b\u3057\u305f\u3068\u3053\u308d\u3001ShowPlainDateTime, SharablePlainDatTime, decodeToPlainDateTime, encodeFromPlainDateTime \u306e 4\u3064\u3092import \u88dc\u5b8c\u306e\u5019\u88dc\u3068\u3057\u3066\u898b\u305b\u3066\u304f\u308c\u3066\u3044\u308b\u3002\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>import \u81ea\u52d5\u88dc\u5b8c\u304c\u5168\u304f\u5f79\u306b\u7acb\u305f\u306a\u3044\u8a33\u3067\u306f\u306a\u3044\u304c\u2026<\/em><\/p>\n<p data-line=\"284\" class=\"code-line\">\u300c\u52d5\u8a5e\u304c\u6700\u521d\u306b\u6765\u3066\u3001\u305d\u306e\u5f8c\u306b\u76ee\u7684\u8a9e\u304c\u6765\u308b\u300d\u3053\u306e\u30d1\u30bf\u30fc\u30f3\u306f\u3001UI \u30c7\u30b6\u30a4\u30f3\u306e\u6587\u8108\u3067\u306f\u300c\u30bf\u30b9\u30af\u6307\u5411 UI\u300d\u3001\u3064\u307e\u308a\u30e6\u30fc\u30b6\u30fc\u306b\u300c\u4f5c\u308b\u5074\u306e\u90fd\u5408\u300d\u3092\u62bc\u3057\u4ed8\u3051\u308b\u3001\u60aa\u3044 UI \u306e\u8a2d\u8a08\u3068\u3055\u308c\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n<p data-line=\"286\" class=\"code-line\">\uff08\u5bfe\u7fa9\u8a9e\u306f\u300c\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u6307\u5411 UI\u300d\uff08OOUI\uff09\u3067\u3001\u4f5c\u308a\u624b\u306e\u90fd\u5408\u3092\u5ec3\u3057\u3066\u3001\u30e6\u30fc\u30b6\u30fc\u306e\u8133\u5185\u306e\u30a4\u30e1\u30fc\u30b8\u306b\u5408\u308f\u305b\u3066\u4f5c\u308b\u3001\u7406\u60f3\u7684\u306a\u8a2d\u8a08\u3092\u6307\u3057\u3066\u3044\u307e\u3059\u3002\uff09<\/p>\n<p data-line=\"288\" class=\"code-line\">\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u95a2\u6570\u306e\u305f\u3050\u3044\u3082\u3001\u5b9f\u88c5\u8005\u3067\u3042\u308b\u540c\u50da etc. \u3092\u30e6\u30fc\u30b6\u30fc\u3068\u8003\u3048\u308b\u3068\u4e00\u7a2e\u306e UI \u306a\u306e\u3067\u3001\u300c\u3088\u3044 UI\u300d\u3092\u76ee\u6307\u305b\u308b\u306a\u3089\u76ee\u6307\u3057\u305f\u3044\u3067\u3059\u3088\u306d\uff1f<\/p>\n<aside class=\"msg message\"><span class=\"msg-symbol\">!<\/span><\/p>\n<div class=\"msg-content\">\n<h4 id=\"%E6%9C%80%E6%82%AA%E3%81%AA%E3%81%AE%E3%81%AF-%E3%80%87%E3%80%87to%E2%96%B2%E2%96%B2-%2F-%E2%96%B2%E2%96%B2to%E3%80%87%E3%80%87\" data-line=\"291\" class=\"code-line\">\n \u6700\u60aa\u306a\u306e\u306f <code>\u3007\u3007To\u25b2\u25b2<\/code> \/ <code>\u25b2\u25b2To\u3007\u3007<\/code><br \/>\n<\/h4>\n<blockquote data-line=\"293\" class=\"code-line\">\n<p data-line=\"293\" class=\"code-line\"><code>plainDateTimeToString()<\/code> \/ <code>stringToPlainDateTime<\/code> \u3058\u3083\u3060\u3081\u306a\u306e\uff1f<\/p>\n<\/blockquote>\n<p data-line=\"295\" class=\"code-line\">\u3068\u3044\u3046\u7591\u554f\u3082\u3042\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p data-line=\"297\" class=\"code-line\">\u50d5\u306e\u610f\u898b\u3068\u3057\u3066\u306f\u3001\u60aa\u3044\u3068\u307e\u3067\u306f\u8a00\u308f\u306a\u3044\u304c\u3001\u5c11\u3057\u52a3\u3063\u3066\u3044\u308b\u3068\u601d\u3044\u307e\u3059\u3002 <strong>\u3053\u306e\u3088\u3046\u306a\u540d\u524d\u306f\u76ee\u7684\u4e0d\u5728\u3067\u3001\u624b\u6bb5\u3060\u3051\u304c\u9732\u51fa\u3057\u3066\u3044\u308b\u304b\u3089\u3067\u3059<\/strong>\u3002<\/p>\n<ul data-line=\"299\" class=\"code-line\">\n<li data-line=\"299\" class=\"code-line\">\u76ee\u7684:\u300c<code>PlainDateTime<\/code> \u3092 Server -&gt; Client \u3067\u306a\u308b\u3079\u304f\u30b7\u30fc\u30e0\u30ec\u30b9\u306b\u5171\u6709\u3057\u3066\u4f7f\u3044\u305f\u3044\u300d<\/li>\n<li data-line=\"300\" class=\"code-line\">\u624b\u6bb5:\u300c<code>PlainDateTime<\/code> \u3092 <code>string<\/code> \u306b\u5909\u63db\u3059\u308b\u300d\uff08\u304a\u3088\u3073\u3001\u305d\u306e\u9006\u65b9\u5411\u306e\u5909\u63db\uff09<\/li>\n<\/ul>\n<p data-line=\"302\" class=\"code-line\">\u3082\u3061\u308d\u3093\u3001\u624b\u6bb5\u304c\u5927\u4e8b\u306a\u5834\u9762\u3082\u3042\u308a\u307e\u3059\u304c\u3001\u4eca\u56de\u306e\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u306f\u3001\u76ee\u7684\u99c6\u52d5\u3067\u8a2d\u8a08\u30fb\u5b9f\u88c5\u3057\u305f\u3082\u306e\u306a\u306e\u3067\u3001\u540d\u524d\u3082\u305d\u308c\u306b\u8ffd\u5f93\u3057\u3066\u300c\u76ee\u7684\u300d\u30d9\u30fc\u30b9\u306b\u3057\u307e\u3059\u3002<\/p>\n<p data-line=\"304\" class=\"code-line\">\uff08\u3082\u3061\u308d\u3093\u3001\u5185\u90e8\u3067\u624b\u6bb5\u306b\u57fa\u3065\u3044\u305f\u540d\u524d\u306e\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u304c\u3042\u3063\u3066\u3082\u826f\u3044\u3067\u3059\u304c\u3001\u300c\u8868\u306b\u51fa\u3059\/\u5185\u90e8\u7684\u306b\u3068\u3069\u3081\u308b\u300d\u306e\u3088\u3046\u306a\u30e1\u30ea\u30cf\u30ea\u304c\u5fc5\u8981\u3067\u3059\u3002<strong>\u30e1\u30ea\u30cf\u30ea\u304c\u306a\u3044 <code>utils<\/code> \u306f\u3001\u3069\u3053\u306b\u3069\u306e\u6a5f\u80fd\u304c\u3042\u308b\u306e\u304b\u63a2\u3057\u3065\u3089\u304f\u3001\u30e6\u30fc\u30b6\u30fc\u306b\u6df7\u4e71\u3092\u3082\u305f\u3089\u3057\u307e\u3059\u3002<\/strong>\uff09<\/p>\n<\/div>\n<\/aside>\n<h3 id=\"ssot-%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AB%E5%85%A8%E3%81%A6%E3%82%92%E9%9B%86%E7%B4%84%E3%81%99%E3%82%8B\" data-line=\"307\" class=\"code-line\">\n SSoT \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u5168\u3066\u3092\u96c6\u7d04\u3059\u308b<\/h3>\n<p data-line=\"309\" class=\"code-line\">\u3067\u306f OOUI \u7684\u306b\u3059\u308b\u305f\u3081\u306b\u30011\u3064\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u60c5\u5831\u3092\u96c6\u7d04\u3057\u3066\u3001\u305d\u306e SSoT\uff08\u4fe1\u983c\u3067\u304d\u308b\u552f\u4e00\u306e\u60c5\u5831\u6e90\uff09\u304b\u3089\u60c5\u5831\u3092\u5f15\u304d\u51fa\u3059\u305f\u3081\u306e\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u3068\u7d44\u307f\u5408\u308f\u305b\u3066\u5229\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<p data-line=\"311\" class=\"code-line\">\uff08\u30c4\u30ea\u30fc\u30b7\u30a7\u30a4\u30ad\u30f3\u30b0\u306f\u72a0\u7272\u306b\u306a\u308a\u307e\u3059\u304c\u3001\u305d\u308c\u307b\u3069\u5927\u304d\u306a\u30b3\u30fc\u30c9\u91cf\u306b\u306f\u306a\u3089\u306a\u3044\u306e\u3067\u59a5\u5354\u3059\u308b\u3053\u3068\u306b\u3057\u307e\u3059\u3002\uff09<\/p>\n<div class=\"code-block-container\">\n<p><span class=\"code-block-filename\">utils\/react\/codecs\/_codec<\/span><\/p>\n<pre class=\"language-ts\"><code class=\"language-ts code-line\" data-line=\"313\"><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">Codec<span class=\"token operator\"><span class=\"token keyword\">in<\/span> out <span class=\"token constant\">S<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">in<\/span> out <span class=\"token constant\">U<\/span><span class=\"token operator\">&gt;<\/span><\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token function-variable function\">decode<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span>u<span class=\"token operator\">:<\/span> <span class=\"token constant\">U<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token constant\">S<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token function-variable function\">encode<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span>s<span class=\"token operator\">:<\/span> <span class=\"token constant\">S<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token constant\">U<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">ShapedType<span class=\"token operator\"><span class=\"token constant\">C<\/span><span class=\"token operator\">&gt;<\/span><\/span> <span class=\"token operator\">=<\/span> <span class=\"token constant\">C<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Codec<span class=\"token operator\"><span class=\"token keyword\">infer<\/span> <span class=\"token constant\">S<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">infer<\/span> _<span class=\"token operator\">&gt;<\/span><\/span> <span class=\"token operator\">?<\/span> <span class=\"token constant\">S<\/span> <span class=\"token operator\">:<\/span> <span class=\"token builtin\">never<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">UnderlyingType<span class=\"token operator\"><span class=\"token constant\">C<\/span><span class=\"token operator\">&gt;<\/span><\/span> <span class=\"token operator\">=<\/span> <span class=\"token constant\">C<\/span> <span class=\"token keyword\">extends<\/span> <span class=\"token class-name\">Codec<span class=\"token operator\"><span class=\"token keyword\">infer<\/span> _<span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">infer<\/span> <span class=\"token constant\">U<\/span><span class=\"token operator\">&gt;<\/span><\/span>\n  <span class=\"token operator\">?<\/span> <span class=\"token constant\">U<\/span>\n  <span class=\"token operator\">:<\/span> <span class=\"token builtin\">never<\/span><span class=\"token punctuation\">;<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<div class=\"code-block-container\">\n<p><span class=\"code-block-filename\">utils\/react\/sharable\/plain-date-time<\/span><\/p>\n<pre class=\"language-ts\"><code class=\"language-ts code-line\" data-line=\"325\"><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> Temporal <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"temporal-polyfill\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token keyword\">type<\/span> <span class=\"token punctuation\">{<\/span> Codec <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/_codec\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> SharablePlainDateTime<span class=\"token operator\">:<\/span> Codec<span class=\"token operator\">Temporal<span class=\"token punctuation\">.<\/span>PlainDateTime<span class=\"token punctuation\">,<\/span> <span class=\"token builtin\">string<\/span><span class=\"token operator\">&gt;<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token function-variable function\">decode<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token builtin\">string<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> Temporal<span class=\"token punctuation\">.<\/span>PlainDateTime<span class=\"token punctuation\">.<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span><span class=\"token builtin\">string<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token function-variable function\">encode<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span>dateTime<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> dateTime<span class=\"token punctuation\">.<\/span><span class=\"token function\">toString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n<span class=\"token punctuation\">}<\/span> \n<\/span><\/code><\/pre>\n<\/div>\n<div class=\"code-block-container\">\n<pre class=\"language-tsx\"><code class=\"language-tsx code-line\" data-line=\"335\"><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">ShapedType<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">UnderlyingType<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token string\">\"#\/utils\/react\/sharable\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> <span class=\"token maybe-class-name\">SharablePlainDateTime<\/span> <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"#\/utils\/react\/sharable\/plain-date-time\"<\/span><span class=\"token punctuation\">;<\/span>\n\n\n<span class=\"token maybe-class-name\">SharablePlainDateTime<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">encode<\/span><span class=\"token punctuation\">(<\/span>plainDateTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token maybe-class-name\">SharablePlainDateTime<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">decode<\/span><span class=\"token punctuation\">(<\/span>underlying<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n\n<span class=\"token keyword\">type<\/span> <span class=\"token class-name\">Props<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n  now<span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">UnderlyingType<\/span><span class=\"token operator\"><span class=\"token keyword\">typeof<\/span> <span class=\"token maybe-class-name\">SharablePlainDateTime<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">,<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">type<\/span> <span class=\"token class-name\">PlainDateTime<\/span> <span class=\"token operator\">=<\/span> <span class=\"token maybe-class-name\">ShapedType<\/span><span class=\"token operator\"><span class=\"token keyword\">typeof<\/span> <span class=\"token maybe-class-name\">SharablePlainDateTime<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">;<\/span>\n<\/span><\/span><\/code><\/pre>\n<\/div>\n<p data-line=\"351\" class=\"code-line\">\u3053\u3046\u3059\u308c\u3070\u3001<\/p>\n<ul data-line=\"353\" class=\"code-line\">\n<li data-line=\"353\" class=\"code-line\">\u30a8\u30f3\u30b3\u30fc\u30c9\u95a2\u6570<\/li>\n<li data-line=\"354\" class=\"code-line\">\u30c7\u30b3\u30fc\u30c9\u95a2\u6570<\/li>\n<li data-line=\"355\" class=\"code-line\">Shaped \u578b\u306e\u60c5\u5831<\/li>\n<li data-line=\"356\" class=\"code-line\">Underlying \u578b\u306e\u60c5\u5831<\/li>\n<\/ul>\n<p data-line=\"358\" class=\"code-line\">\u304c\u5168\u3066\u3001SSoT \u305f\u308b <code>PlainDateTimeCodec<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304b\u3089\u6d3e\u751f\u7684\u306b\u5f97\u3089\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002\u3053\u308c\u306f\u304b\u306a\u308a OOUI \u7684\u3067\u308f\u304b\u308a\u3084\u3059\u3044\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p data-line=\"360\" class=\"code-line\"><code>\"#\/utils\/react\/sharable\"<\/code> \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u306e\u4f7f\u3044\u65b9\u3092\u30e6\u30fc\u30b6\u30fc\u304c\u77e5\u3063\u3066\u304a\u304f\u5fc5\u8981\u304c\u3042\u308b\u306e\u306f\u4e0d\u4fbf\u306b\u601d\u308f\u308c\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u304c\u3001\u60c5\u5831\u304c\u3046\u307e\u304f\u96c6\u7d04\u3055\u308c\u305f\u3053\u3068\u3068\u6bd4\u3079\u308c\u3070\u3001\u5fc5\u8981\u306a\u5b66\u7fd2\u30b3\u30b9\u30c8\u3060\u3068\u5272\u308a\u5207\u3063\u3066\u3082\u826f\u3044\u3067\u3057\u3087\u3046\u3002<\/p>\n<h3 id=\"zod-codecs-%E3%81%AE%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3%E3%81%AB%E4%B9%97%E3%81%A3%E3%81%8B%E3%82%8B\" data-line=\"362\" class=\"code-line\">\n Zod Codecs \u306e\u30d1\u30bf\u30fc\u30f3\u306b\u4e57\u3063\u304b\u308b<\/h3>\n<p data-line=\"364\" class=\"code-line\">\u4e0a\u8a18\u3067\u306f\u3001\u304a\u624b\u88fd\u306e <code>Codec<\/code> \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u3092\u4f7f\u3063\u3066\u3001\u30b7\u30ea\u30a2\u30e9\u30a4\u30bc\u30fc\u30b7\u30e7\u30f3\u306e\u305f\u3081\u306e\u53cc\u65b9\u5411\u306e\u578b\u5909\u63db\u306b\u30d1\u30bf\u30fc\u30f3\u3092\u898f\u5b9a\u3057\u3066\u3042\u3052\u3066\u3001\u53d6\u308a\u6271\u3044\u3092\u5bb9\u6613\u306b\u3057\u307e\u3057\u305f\u3002<\/p>\n<p data-line=\"366\" class=\"code-line\">\u3057\u304b\u3057\u3001\u5b9f\u306f\u3001\u3053\u306e\u30d1\u30bf\u30fc\u30f3\u3092\u63d0\u4f9b\u3057\u3066\u304f\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u30e9\u30a4\u30d6\u30e9\u30ea\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p data-line=\"368\" class=\"code-line\">\u305d\u308c\u304c Zod \u3067\u3059\u3002<\/p>\n<p data-line=\"370\" class=\"code-line\">Zod \u306f v4.1 \u304b\u3089\u3001Codecs \u3068\u3044\u3046\u53cc\u65b9\u5411\u306e\u578b\u5909\u63db\u3092\u30b5\u30dd\u30fc\u30c8\u3059\u308b\u4ed5\u7d44\u307f\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002\uff08\u5f93\u6765\u306e\u30b9\u30ad\u30fc\u30de\u306f\u3001\u5358\u4e00\u65b9\u5411\u306e\u578b\u5909\u63db\u306e\u307f\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u307e\u3057\u305f\u3002\uff09<\/p>\n<p data-line=\"372\" class=\"code-line\"><span class=\"embed-block zenn-embedded zenn-embedded-card\"><iframe id=\"zenn-embedded__f11f03eb28dc5\" src=\"https:\/\/embed.zenn.studio\/card#zenn-embedded__f11f03eb28dc5\" data-content=\"https%3A%2F%2Fzod.dev%2Fcodecs\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\"><\/iframe><\/span><a target=\"_blank\" href=\"https:\/\/zod.dev\/codecs\" style=\"display:none\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/zod.dev\/codecs<\/a><\/p>\n<p data-line=\"375\" class=\"code-line\">\u3053\u306e Codec \u306e\u4ed5\u7d44\u307f\u306f\u3001\u305d\u306e\u307e\u307e\u4eca\u56de\u306e\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u306b\u63a1\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n<aside class=\"msg message\"><span class=\"msg-symbol\">!<\/span><\/p>\n<div class=\"msg-content\">\n<h4 id=\"%E6%97%A2%E5%AD%98%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%82%92%E4%BD%BF%E3%81%86%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88\" data-line=\"378\" class=\"code-line\">\n \u65e2\u5b58\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u3046\u30e1\u30ea\u30c3\u30c8<\/h4>\n<p data-line=\"380\" class=\"code-line\">Codec \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u306f\u3001\u300c<strong>\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u306e\u305f\u3081\u306e\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3<\/strong>\u300d\u3068\u8a00\u3048\u308b\u3088\u3046\u306a\u5b58\u5728\u3067\u3059\u3002<code>#\/utils\/react\/sharable\/plain-date-time<\/code> \u306e\u3088\u3046\u306a\u3001\u500b\u3005\u306e\u300a\u5177\u4f53\u7684\u306a\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u300b\u306b\u5236\u7d04\u3092\u52a0\u3048\u3066\u3001\u305d\u306e\u54c1\u8cea\u3092\u5b89\u5b9a\u3055\u305b\u308b\u50cd\u304d\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<hr data-line=\"382\" class=\"code-line\"\/>\n<p data-line=\"384\" class=\"code-line\"><strong>\u300c\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u300d\u3068\u306f<\/strong>\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30b3\u30fc\u30c9\u306e\u4e2d\u306b\u7e70\u308a\u8fd4\u3057\u767b\u5834\u3057\u3066\u30011\u3064\u306e\u90e8\u54c1\u3068\u3057\u3066\u6210\u308a\u7acb\u3064\u3088\u3046\u306a\u30ab\u30bf\u30de\u30ea\u3092\u53d6\u308a\u51fa\u3057\u3066\u3066\u3067\u304d\u308b\u30e2\u30ce\u3067\u3059\u3002<\/p>\n<p data-line=\"386\" class=\"code-line\">\u7b4b\u306e\u826f\u3044\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u306f\u3001\u30b3\u30fc\u30c9\u5168\u4f53\u306e\u7d71\u4e00\u611f\u3084\u3001\u3072\u3044\u3066\u306f\u54c1\u8cea\u306e\u5b89\u5b9a\u306b\u7e4b\u304c\u308a\u307e\u3059\u3002<\/p>\n<p data-line=\"388\" class=\"code-line\">\u3057\u304b\u3057\u3001\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u306e\u8a2d\u8a08\u304c\u30d8\u30bf\u30af\u30bd\u3060\u3068\u3001<\/p>\n<ul data-line=\"390\" class=\"code-line\">\n<li data-line=\"390\" class=\"code-line\">\u9006\u306b\u3001\u30e6\u30fc\u30b6\u30fc\u5074\u306e\u30dc\u30a4\u30e9\u30fc\u30d7\u30ec\u30fc\u30c8\u304c\u5897\u3048\u308b<\/li>\n<li data-line=\"391\" class=\"code-line\">\u7570\u5e38\u7cfb\u3092\u63e1\u308a\u3064\u3076\u3057\u3066\u3057\u307e\u3044\u3001\u578b\u60c5\u5831\u304b\u3089\u6d88\u3048\u3066\u3057\u307e\u3044\u3002\u30e6\u30fc\u30b6\u30fc\u5074\u304b\u3089\u306f\u5206\u304b\u308a\u3065\u3089\u3044<\/li>\n<\/ul>\n<p data-line=\"393\" class=\"code-line\">\u3068\u3044\u3046\u3053\u3068\u306b\u7e4b\u304c\u308a\u3001\u304b\u3048\u3063\u3066\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u54c1\u8cea\u306e\u4f4e\u4e0b\u306b\u7e4b\u304c\u308a\u307e\u3059\u3002<\/p>\n<hr data-line=\"395\" class=\"code-line\"\/>\n<p data-line=\"397\" class=\"code-line\">\u3067\u3042\u308c\u3070\u3001 <strong>\u300c\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u306e\u305f\u3081\u306e\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u300d\u306e\u7b4b\u304c\u60aa\u3044\u3068\u3001\u30b3\u30fc\u30c9\u5168\u4f53\u3078\u306e\u60aa\u5f71\u97ff\u306f\u3001\u3082\u3063\u3068\u5927\u304d\u3044\u3082\u306e\u306b\u306a\u308b<\/strong> \u3053\u3068\u306f\u660e\u3089\u304b\u3067\u3059\u3002<\/p>\n<p data-line=\"399\" class=\"code-line\">\u30e9\u30a4\u30d6\u30e9\u30ea\u3092\u4f7f\u304a\u3046\u3068\u3044\u3046\u8a71\u984c\u306b\u306a\u308b\u3068\u300c\u30ed\u30c3\u30af\u30a4\u30f3\u3057\u305f\u304f\u306a\u3044\u301c\u300d\u3068\u7d0b\u5207\u308a\u578b\u306e\u53cd\u767a\u30b3\u30e1\u30f3\u30c8\u304c\u76ee\u306b\u3064\u304d\u307e\u3059\u304c\u3001<\/p>\n<p data-line=\"401\" class=\"code-line\">\u300c<strong>\u8a2d\u8a08\u529b\u306e\u4f4e\u3044\u4eba\u304c\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3 or \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u3092\u81ea\u4f5c\u3057\u3088\u3046\u3068\u3057\u3066\u3001\u5207\u308a\u51fa\u3057\u65b9\u3092\u9593\u9055\u3063\u3066\u7b4b\u306e\u60aa\u3044\u306e\u3092\u4f5c\u308a\u8fbc\u3093\u3067\u3057\u307e\u3044\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u304c\u3081\u3061\u3083\u304f\u3061\u3083\u306b\u306a\u308b<\/strong>\u300d\u3068\u3044\u3046\u640d\u5931\u3092\u8003\u3048\u305f\u3089\u3001\u65e2\u5b58\u306e\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u4f7f\u3048\u308b\u6a5f\u80fd\u3092\u898b\u3064\u3051\u3066\u3001\u305d\u308c\u3092\u4f7f\u3046\u307b\u3046\u304c\u78ba\u5b9f\u3060\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p data-line=\"403\" class=\"code-line\">\u3069\u3046\u3057\u3066\u3082\u5fc3\u914d\u306a\u3089\u3001<code>Codec<\/code> \u3092\u81ea\u4f5c\u3057\u305f\u3088\u3046\u306b\u3001\u8a2d\u8a08\u610f\u56f3\u3060\u3051\u3092\u30d1\u30af\u3063\u3066\u81ea\u524d\u306e\u5185\u90e8\u7684\u306a\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u3068\u3057\u3066\u5b9f\u88c5\u3057\u306a\u304a\u3057\u3066\u3082\u826f\u3044\u3067\u3059\u3002<\/p>\n<\/div>\n<\/aside>\n<p data-line=\"406\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s---hK0jtN4--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/17fa4b5f186d3e4429cebbb4.png%3Fsha%3De8ec9c5fa194efbd6c56eaab1a16c6fff0a4c06d\" alt=\"\u30a2\u30af\u30bb\u30b9\u6642\u306e\u30b5\u30fc\u30d0\u30fc\u5185\u90e8\u306e\u73fe\u5728\u6642\u523b \u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u6e08\u307f: 2025\u5e749\u670825\u65e5 17:15:43\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>\u5b8c\u6210\u54c1\u3002\u30d6\u30e9\u30a6\u30b6\u5074\u306e\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\uff08\u300c\u30b5\u30f3\u30d5\u30e9\u30f3\u30b7\u30b9\u30b3\u300d\u306b\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\uff09\u306b\u5de6\u53f3\u3055\u308c\u305a\u3001\u30a2\u30af\u30bb\u30b9\u6642\u306e\u30b5\u30fc\u30d0\u30fc\u5185\u90e8\uff08JST\uff09\u306e\u73fe\u5728\u6642\u523b\u3092\u8868\u793a\u3067\u304d\u3066\u3044\u308b\u3002<\/em><\/p>\n<p data-line=\"409\" class=\"code-line\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/zenn\/image\/fetch\/s--Ao1Sqkax--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200\/https:\/\/storage.googleapis.com\/zenn-user-upload\/deployed-images\/ca31c2e2e95ae43a1a4b9401.png%3Fsha%3D662ebd9db32b352e7dc84ef0323acbf0d006d48f\" alt=\"ISO: 2025-09-25T08:15:34.840Z \u30d6\u30e9\u30a6\u30b6\u5074\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u3067\u306e\u6642\u523b: Thursday, September 25, 2025 at 1:15:34 AM PDT\" class=\"md-img\" loading=\"lazy\"\/><br \/><em>\u6bd4\u8f03\u7528: Date \u306e\u4f8b\u3067\u306f\u3001\u4e16\u754c\u5354\u5b9a\u6642\u306e\u6642\u523b\u3068\u3001PDT\uff08\u30d6\u30e9\u30a6\u30b6\u5074\u306e\u30bf\u30a4\u30e0\u30be\u30fc\u30f3\u3067\u3042\u308b\u30b5\u30f3\u30d5\u30e9\u30f3\u30b7\u30b9\u30b3\u306e\u73fe\u5730\u6642\u523b\uff09\u3092\u8868\u793a\u3057\u3066\u3044\u305f<\/em><\/p>\n<h4 id=\"%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89\" data-line=\"413\" class=\"code-line\">\n \u30bd\u30fc\u30b9\u30b3\u30fc\u30c9<\/h4>\n<p data-line=\"415\" class=\"code-line\">\u4ee5\u4e0b\u306b\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u914d\u7f6e\u304a\u3088\u3073\u305d\u306e\u672c\u6587\u3092\u793a\u3057\u307e\u3059\u3002\uff08CSS Module \u30d5\u30a1\u30a4\u30eb\u306b\u3064\u3044\u3066\u306f\u3001\u7701\u7565\uff09<\/p>\n<div class=\"code-block-container\">\n<pre class=\"language-txt\"><code class=\"language-txt code-line\" data-line=\"417\">src\/app\/rsc-date\/temporal\/\n\u251c\u2500\u2500 _utils\/\n\u2502   \u2514\u2500\u2500 share-value-by-codec.ts        # Codec \u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\n\u251c\u2500\u2500 _sharable-plain-date-time.ts       # Zod Codec \u306e\u5b9a\u7fa9\n\u251c\u2500\u2500 page.tsx                           # \u30da\u30fc\u30b8\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08Server\uff09\n\u251c\u2500\u2500 page.module.scss                   # \u540c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\n\u251c\u2500\u2500 show-plain-date-time.tsx           # \u65e5\u4ed8\u8868\u793a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\uff08`'use client'` \u3042\u308a\uff09\n\u2514\u2500\u2500 show-plain-date-time.module.scss   # \u540c\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30b9\u30bf\u30a4\u30eb\n<\/code><\/pre>\n<\/div>\n<div class=\"code-block-container\">\n<p><span class=\"code-block-filename\">src\/app\/rsc-date\/temporal\/_utils\/share-value-by-codec.ts<\/span><\/p>\n<pre class=\"language-ts\"><code class=\"language-ts code-line\" data-line=\"428\"><span class=\"token keyword\">import<\/span> <span class=\"token operator\">*<\/span> <span class=\"token keyword\">as<\/span> z <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"zod\/mini\"<\/span><span class=\"token punctuation\">;<\/span>\n\n\n<span class=\"token keyword\">export<\/span> <span class=\"token punctuation\">{<\/span> codec <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"zod\/mini\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">export<\/span> <span class=\"token punctuation\">{<\/span> encode<span class=\"token punctuation\">,<\/span> decode <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"zod\/mini\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">UnderlyingType<span class=\"token operator\"><span class=\"token constant\">T<\/span><span class=\"token operator\">&gt;<\/span><\/span> <span class=\"token operator\">=<\/span> z<span class=\"token punctuation\">.<\/span>input<span class=\"token operator\"><span class=\"token constant\">T<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">ShapedType<span class=\"token operator\"><span class=\"token constant\">T<\/span><span class=\"token operator\">&gt;<\/span><\/span> <span class=\"token operator\">=<\/span> z<span class=\"token punctuation\">.<\/span>output<span class=\"token operator\"><span class=\"token constant\">T<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">;<\/span>\n<\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<div class=\"code-block-container\">\n<p><span class=\"code-block-filename\">src\/app\/rsc-date\/temporal\/_sharable-plain-date-time.ts<\/span><\/p>\n<pre class=\"language-ts\"><code class=\"language-ts code-line\" data-line=\"445\"><span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> z <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"zod\/mini\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> Temporal <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"temporal-polyfill\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> codec <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/_utils\/share-value-by-codec\"<\/span><span class=\"token punctuation\">;<\/span>\n\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> SharablePlainDateTime <span class=\"token operator\">=<\/span> <span class=\"token function\">codec<\/span><span class=\"token punctuation\">(<\/span>\n  z<span class=\"token punctuation\">.<\/span><span class=\"token function\">string<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n  z<span class=\"token punctuation\">.<\/span><span class=\"token function\">instanceof<\/span><span class=\"token punctuation\">(<\/span>Temporal<span class=\"token punctuation\">.<\/span>PlainDateTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">{<\/span>\n    <span class=\"token function-variable function\">decode<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token builtin\">string<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> Temporal<span class=\"token punctuation\">.<\/span>PlainDateTime<span class=\"token punctuation\">.<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span><span class=\"token builtin\">string<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n    <span class=\"token function-variable function\">encode<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span>dateTime<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> dateTime<span class=\"token punctuation\">.<\/span><span class=\"token function\">toString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token punctuation\">}<\/span>\n<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<\/code><\/pre>\n<\/div>\n<div class=\"code-block-container\">\n<p><span class=\"code-block-filename\">src\/app\/rsc-date\/temporal\/page.tsx<\/span><\/p>\n<pre class=\"language-tsx\"><code class=\"language-tsx code-line\" data-line=\"464\"><span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> <span class=\"token maybe-class-name\">Temporal<\/span> <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"temporal-polyfill\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">Metadata<\/span> <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"next\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> connection <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"next\/server\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token maybe-class-name\">Link<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\"next\/link\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> <span class=\"token maybe-class-name\">ShowPlainDateTime<\/span> <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/show-plain-date-time\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> <span class=\"token maybe-class-name\">SharablePlainDateTime<\/span> <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/_sharable-plain-date-time\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> encode <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/_utils\/share-value-by-codec\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\">styles<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/page.module.scss\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">const<\/span> metadata<span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">Metadata<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n  title<span class=\"token operator\">:<\/span> <span class=\"token string\">\"Temporal.PlainDateTime \u306e\u632f\u308b\u821e\u3044\u30c6\u30b9\u30c8\"<\/span><span class=\"token punctuation\">,<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">Page<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">PageProps<\/span><span class=\"token operator\"><span class=\"token string\">\"\/rsc-date\/temporal\"<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">await<\/span> <span class=\"token function\">connection<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">const<\/span> nowPlain <span class=\"token operator\">=<\/span> <span class=\"token maybe-class-name\">Temporal<\/span><span class=\"token punctuation\">.<\/span><span class=\"token property-access\"><span class=\"token maybe-class-name\">Now<\/span><\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">plainDateTimeISO<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">container<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">nav<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">nav<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><span class=\"token class-name\">Link<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>\/rsc-date<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">navLink<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n          \u2190 Back to RSC Date Examples\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/><span class=\"token class-name\">Link<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>nav<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">h1<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">Temporal.PlainDateTime \u306e\u632f\u308b\u821e\u3044\u30c6\u30b9\u30c8<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>h1<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">h2<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\u30a2\u30af\u30bb\u30b9\u6642\u306e\u30b5\u30fc\u30d0\u30fc\u5185\u90e8\u306e\u73fe\u5728\u6642\u523b<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>h2<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">cluster<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n        <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><span class=\"token class-name\">ShowPlainDateTime<\/span><\/span>\n          <span class=\"token attr-name\">nowPlainDateTime<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span><span class=\"token function\">encode<\/span><span class=\"token punctuation\">(<\/span><span class=\"token maybe-class-name\">SharablePlainDateTime<\/span><span class=\"token punctuation\">,<\/span> nowPlain<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><\/span>\n        <span class=\"token punctuation\">\/&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<div class=\"code-block-container\">\n<p><span class=\"code-block-filename\">src\/app\/rsc-date\/temporal\/show-plain-date-time.tsx<\/span><\/p>\n<pre class=\"language-tsx\"><code class=\"language-tsx code-line\" data-line=\"502\"><span class=\"token string\">\"use client\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\"><span class=\"token punctuation\">{<\/span> <span class=\"token maybe-class-name\">SharablePlainDateTime<\/span> <span class=\"token punctuation\">}<\/span><\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/_sharable-plain-date-time\"<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span>\n  decode<span class=\"token punctuation\">,<\/span>\n  <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">ShapedType<\/span><span class=\"token punctuation\">,<\/span>\n  <span class=\"token keyword\">type<\/span> <span class=\"token class-name\">UnderlyingType<\/span><span class=\"token punctuation\">,<\/span>\n<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/_utils\/share-value-by-codec\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">import<\/span> <span class=\"token imports\">styles<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">\".\/show-plain-date-time.module.scss\"<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">type<\/span> <span class=\"token class-name\">Props<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">{<\/span>\n  nowPlainDateTime<span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">UnderlyingType<\/span><span class=\"token operator\"><span class=\"token keyword\">typeof<\/span> <span class=\"token maybe-class-name\">SharablePlainDateTime<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n\n<span class=\"token keyword\">export<\/span> <span class=\"token keyword\">function<\/span> <span class=\"token function\">ShowPlainDateTime<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span>\n  nowPlainDateTime<span class=\"token operator\">:<\/span> _nowPlainDateTime<span class=\"token punctuation\">,<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">Props<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> nowPlainDateTime <span class=\"token operator\">=<\/span> <span class=\"token function\">decode<\/span><span class=\"token punctuation\">(<\/span><span class=\"token maybe-class-name\">SharablePlainDateTime<\/span><span class=\"token punctuation\">,<\/span> _nowPlainDateTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n\n  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">div<\/span> <span class=\"token attr-name\">className<\/span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">card<\/span><span class=\"token punctuation\">}<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u6e08\u307f: <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n      <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token punctuation\">{<\/span><span class=\"token function\">formatDateTime<\/span><span class=\"token punctuation\">(<\/span>nowPlainDateTime<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>span<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token plain-text\">\n    <\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"\/>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span>\n\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">formatDateTime<\/span> <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span>d<span class=\"token operator\">:<\/span> <span class=\"token maybe-class-name\">ShapedType<\/span><span class=\"token operator\"><span class=\"token keyword\">typeof<\/span> <span class=\"token maybe-class-name\">SharablePlainDateTime<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token arrow operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span>\n  <span class=\"token keyword\">const<\/span> year <span class=\"token operator\">=<\/span> d<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">year<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">const<\/span> month <span class=\"token operator\">=<\/span> d<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">month<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">const<\/span> day <span class=\"token operator\">=<\/span> d<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">day<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">const<\/span> hour <span class=\"token operator\">=<\/span> d<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">hour<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">toString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">padStart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"0\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">const<\/span> minute <span class=\"token operator\">=<\/span> d<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">minute<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">toString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">padStart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"0\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">const<\/span> second <span class=\"token operator\">=<\/span> d<span class=\"token punctuation\">.<\/span><span class=\"token property-access\">second<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">toString<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token method function property-access\">padStart<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token string\">\"0\"<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span>\n  <span class=\"token keyword\">return<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>year<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\u5e74<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>month<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\u6708<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>day<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">\u65e5 <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>hour<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">:<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>minute<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token string\">:<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>second<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">;<\/span>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span>\n<\/span><\/span><\/span><\/span><\/span><\/code><\/pre>\n<\/div>\n<h4 id=\"%E4%BB%96%E3%81%AB%E3%82%82%E3%81%84%E3%82%8D%E3%81%84%E3%82%8D%E3%81%AA-codec-%E3%81%8C%E3%81%82%E3%82%8B%E3%82%88\" data-line=\"542\" class=\"code-line\">\n \u4ed6\u306b\u3082\u3044\u308d\u3044\u308d\u306a Codec \u304c\u3042\u308b\u3088<\/h4>\n<p data-line=\"544\" class=\"code-line\">Zod \u306e Codec \u3068\u3057\u3066\u306f\u3001\u4ed6\u306b\u3082\u3044\u308d\u3044\u308d\u306a\u30e2\u30ce\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p data-line=\"546\" class=\"code-line\"><span class=\"embed-block zenn-embedded zenn-embedded-card\"><iframe id=\"zenn-embedded__3ed06fce52e01\" src=\"https:\/\/embed.zenn.studio\/card#zenn-embedded__3ed06fce52e01\" data-content=\"https%3A%2F%2Fzod.dev%2Fcodecs%3Fid%3Dstringtourl%23useful-codecs\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\"><\/iframe><\/span><a target=\"_blank\" href=\"https:\/\/zod.dev\/codecs?id=stringtourl#useful-codecs\" style=\"display:none\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https:\/\/zod.dev\/codecs?id=stringtourl#useful-codecs<\/a><\/p>\n<p data-line=\"548\" class=\"code-line\">\u5148\u8ff0\u306e\u901a\u308a\u3001<code>'use client'<\/code> \u306f Date \u3068\u304b\u3082\u30b5\u30dd\u30fc\u30c8\u3057\u3066\u3044\u308b\u306e\u3067\u3001Codec \u304c\u5fc5\u8981\u306b\u306a\u308b\u30b1\u30fc\u30b9\u306f\u591a\u304f\u306a\u3044\u3068\u601d\u3044\u307e\u3059\u304c\u3001<a target=\"_blank\" href=\"https:\/\/zod.dev\/codecs?id=stringtourl#stringtourl\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">URL \u3092 string \u306b\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u3059\u308b codec <\/a> \u306a\u3093\u304b\u306f <code>'use client'<\/code> \u3068\u5408\u308f\u305b\u3066\u4f7f\u3048\u308b\u304b\u3082\u3057\u308c\u307e\u305b\u3093\u3002<\/p>\n<p data-line=\"550\" class=\"code-line\">Codec\u3001\u9762\u767d\u305d\u3046\u306a\u306e\u3067\u3001\u5fc5\u8981\u306a\u5834\u9762\u304c\u3042\u308c\u3070\u4f7f\u3063\u3066\u307f\u305f\u3044\u3068\u3053\u308d\u3067\u3059\u306d\uff01<\/p>\n<h2 id=\"%E3%81%BE%E3%81%A8%E3%82%81\" data-line=\"552\" class=\"code-line\">\n \u307e\u3068\u3081<\/h2>\n<p data-line=\"554\" class=\"code-line\"><code>'use client'<\/code> \u3067\u306e\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u51e6\u7406\u306b\u304a\u3044\u3066\u306f\u3001Date \u306a\u3069\u3001JSON \u3088\u308a\u3082\u5e83\u3044\u7bc4\u56f2\u306e\u30c7\u30fc\u30bf\u304c\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u304a\u308a\u3001<strong>RSC \u306e\u300c\u30b5\u30fc\u30d0\u30fc\u5074 \/ \u30d6\u30e9\u30a6\u30b6\u5074 \u306e\u30b3\u30fc\u30c9\u3092\u30b7\u30fc\u30e0\u30ec\u30b9\u306b\u7e4b\u304e\u5408\u308f\u305b\u308b\u300d\u3068\u3044\u3046\u30b3\u30f3\u30bb\u30d7\u30c8<\/strong> \u3092\u4f53\u73fe\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p data-line=\"556\" class=\"code-line\">Temporal \u306e\u5404\u578b\u306e\u3088\u3046\u306b\u3001\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u306a\u3044\u30c7\u30fc\u30bf\u578b\u3082\u3042\u308a\u307e\u3059\u304c\u3001<strong>Zod \u306e Codecs \u6a5f\u80fd<\/strong> \u3092\u4f7f\u3048\u3070\u3001\u308f\u305a\u304b\u306a\u30dc\u30a4\u30e9\u30fc\u30d7\u30ec\u30fc\u30c8\u3060\u3051\u3067\u300c\u30b7\u30ea\u30a2\u30e9\u30a4\u30ba\u53ef\u80fd\u306a\u5f62\u306b\u5909\u63db \/ \u305d\u3053\u304b\u3089\u3082\u3068\u306b\u623b\u3059\u300d\u51e6\u7406\u3092\u8ffd\u8a18\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u3042\u308b\u7a0b\u5ea6\u306e\u300c\u30b7\u30fc\u30e0\u30ec\u30b9\u3055\u300d\u3092\u30ad\u30fc\u30d7\u3067\u304d\u307e\u3059\u3002<\/p>\n<p data-line=\"558\" class=\"code-line\">\u3082\u3063\u3068\u5e83\u3044\u8996\u70b9\u3067\u307f\u308b\u3068\u3001Zod \u3084 Valibot \u306e\u3088\u3046\u306a\u30b9\u30ad\u30fc\u30de\u30e9\u30a4\u30d6\u30e9\u30ea\u306f\u3001\u5358\u306a\u308b\u30d5\u30a9\u30fc\u30e0\u3084JSON\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u691c\u8a3c\u3060\u3051\u3067\u306a\u304f\u3001\u300cOpaque Type \u306e\u3088\u3046\u306b\u3001\u5358\u4e00\u306e\u5024\u3092\u30e9\u30c3\u30d7\u3059\u308b\u300d\u307f\u305f\u3044\u306a\u4f7f\u3044\u65b9\u307e\u3067\u53ef\u80fd\u3060\u3068\u8003\u3048\u3066\u3044\u307e\u3059\u3002<\/p>\n<p data-line=\"560\" class=\"code-line\">\u3044\u308f\u3086\u308b &#8220;Parse, don&#8217;t validate&#8221; \u539f\u5247\u306b\u5f93\u3063\u3066\u904b\u7528\u3059\u308b\u3053\u3068\u3088\u3063\u3066\u3001\u751f\u306e TS \u306e\u578b\u30c1\u30a7\u30c3\u30af\u3088\u308a\u3082\u5f37\u529b\u306a\u300c\u9759\u7684\u306a\u30c1\u30a7\u30c3\u30af\u300d\u3092\u5c0e\u5165\u3057\u3066\u3001\u5b9f\u884c\u6642\u30a8\u30e9\u30fc\u306e\u767a\u751f\u3057\u3046\u308b\u7bc4\u56f2\u3092\u9650\u5b9a\u3059\u308b\u3053\u3068\u306b\u3088\u3063\u3066\u3001\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u3092\u8aad\u307f\u3084\u3059\u304f\u3059\u308b\u529b\u304c\u3042\u308b\u3068\u8003\u3048\u3066\u3044\u307e\u3059\u3002<\/p>\n<p data-line=\"562\" class=\"code-line\">Codecs \u306b\u9650\u3089\u305a\u3001\u30b9\u30ad\u30fc\u30de\u30e9\u30a4\u30d6\u30e9\u30ea\u306e\u30dd\u30c6\u30f3\u30b7\u30e3\u30eb\u304c\u6700\u5927\u9650\u306b\u6d3b\u7528\u3055\u308c\u3001\u4e16\u754c\u4e2d\u306e\u30b3\u30fc\u30c9\u304c\u3082\u3063\u3068\u5805\u7262\u306b\u306a\u308b\u3053\u3068\u3092\u9858\u3063\u3066\u3001\u3053\u306e\u8a18\u4e8b\u3092\u7de0\u3081\u304f\u304f\u308a\u307e\u3059\u3002<\/p>\n<aside class=\"msg message\"><span class=\"msg-symbol\">!<\/span><\/p>\n<div class=\"msg-content\">\n<p data-line=\"565\" class=\"code-line\">\u500b\u4eba\u7684\u306b\u306f valibot \u6d3e\u306a\u306e\u3067\u3001valibot \u306b\u3082 Codecs \u6a5f\u80fd\u304c\u4ed8\u304f\u306e\u3092\u671f\u5f85\u3057\u3066\u3044\u307e\u3059\u304c\u3001<a target=\"_blank\" href=\"https:\/\/github.com\/fabian-hiller\/valibot\/issues\/658#issuecomment-3218071443\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Issue \u304c\u7acb\u3063\u3066\u3044\u308b\u3082\u306e\u306e\u3001\u307e\u3060\u8abf\u67fb\u4e2d\u306e\u3088\u3046\u3067\u3059<\/a><\/p>\n<\/div>\n<\/aside>\n<h2 id=\"%E9%96%A2%E9%80%A3%E8%A8%98%E4%BA%8B\" data-line=\"568\" class=\"code-line\">\n \u95a2\u9023\u8a18\u4e8b<\/h2>\n<p data-line=\"570\" class=\"code-line\"><span class=\"embed-block zenn-embedded zenn-embedded-card\"><iframe id=\"zenn-embedded__6de7eb4451c11\" src=\"https:\/\/embed.zenn.studio\/card#zenn-embedded__6de7eb4451c11\" data-content=\"https%3A%2F%2Fzenn.dev%2Fterrierscript%2Farticles%2F2023-06-05-temporal\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\"><\/iframe><\/span><a target=\"_blank\" href=\"https:\/\/zenn.dev\/terrierscript\/articles\/2023-06-05-temporal\" style=\"display:none\" target=\"_blank\">https:\/\/zenn.dev\/terrierscript\/articles\/2023-06-05-temporal<\/a><\/p>\n<p data-line=\"572\" class=\"code-line\"><span class=\"embed-block zenn-embedded zenn-embedded-card\"><iframe id=\"zenn-embedded__74f0424f8fde8\" src=\"https:\/\/embed.zenn.studio\/card#zenn-embedded__74f0424f8fde8\" data-content=\"https%3A%2F%2Fzenn.dev%2Fterrierscript%2Fbooks%2F2023-01-typed-zod\" frameborder=\"0\" scrolling=\"no\" loading=\"lazy\"><\/iframe><\/span><a target=\"_blank\" href=\"https:\/\/zenn.dev\/terrierscript\/books\/2023-01-typed-zod\" style=\"display:none\" target=\"_blank\">https:\/\/zenn.dev\/terrierscript\/books\/2023-01-typed-zod<\/a><\/p>\n<\/div>\n\n<br \/><a href=\"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer\">\u5143\u306e\u8a18\u4e8b\u3092\u78ba\u8a8d\u3059\u308b <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"! \u5229\u7528\u3057\u305f\u4e3b\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30d0\u30fc\u30b8\u30e7\u30f3 \"next\": 15.5.3 (App Router \u3092\u5229\u7528) \"react\": 19.x \u7cfb (Next.js \u306e\u4e8b\u60c5\u304c\u3042\u308b\u306e\u3067\u3001\u5177\u4f53\u7684\u306a\u30d0\u30fc\u30b8\u30e7\u30f3\u306f\u6562\u3048\u3066\u4f0f\u305b\u308b) \"tempo [&hellip;]","protected":false},"author":1,"featured_media":6947,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-6946","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-company-tec"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Zod Codecs \u3067 &#039;use client&#039; \u3092\u4ecb\u3057\u305f Server-Client \u9593\u30c7\u30fc\u30bf\u8ee2\u9001\u3092\u5f37\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Zod Codecs \u3067 &#039;use client&#039; \u3092\u4ecb\u3057\u305f Server-Client \u9593\u30c7\u30fc\u30bf\u8ee2\u9001\u3092\u5f37\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"og:description\" content=\"! \u5229\u7528\u3057\u305f\u4e3b\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30d0\u30fc\u30b8\u30e7\u30f3 &quot;next&quot;: 15.5.3 (App Router \u3092\u5229\u7528) &quot;react&quot;: 19.x \u7cfb (Next.js \u306e\u4e8b\u60c5\u304c\u3042\u308b\u306e\u3067\u3001\u5177\u4f53\u7684\u306a\u30d0\u30fc\u30b8\u30e7\u30f3\u306f\u6562\u3048\u3066\u4f0f\u305b\u308b) &quot;tempo [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer\" \/>\n<meta property=\"og:site_name\" content=\"\u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-25T19:28:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/1758828483_og-base-w1200-v2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"info@pokecon.jp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"info@pokecon.jp\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/zenn.dev\\\/yumemi_inc\\\/articles\\\/use-client-and-zod-codec-for-data-transfer#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/6946\\\/\"},\"author\":{\"name\":\"info@pokecon.jp\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"headline\":\"Zod Codecs \u3067 &#8216;use client&#8217; \u3092\u4ecb\u3057\u305f Server-Client \u9593\u30c7\u30fc\u30bf\u8ee2\u9001\u3092\u5f37\u5316\u3059\u308b\",\"datePublished\":\"2025-09-25T19:28:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/6946\\\/\"},\"wordCount\":198,\"image\":{\"@id\":\"https:\\\/\\\/zenn.dev\\\/yumemi_inc\\\/articles\\\/use-client-and-zod-codec-for-data-transfer#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/1758828483_og-base-w1200-v2.png\",\"articleSection\":[\"\u4f01\u696d\u30c6\u30c3\u30af\"],\"inLanguage\":\"ja\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/6946\\\/\",\"url\":\"https:\\\/\\\/zenn.dev\\\/yumemi_inc\\\/articles\\\/use-client-and-zod-codec-for-data-transfer\",\"name\":\"Zod Codecs \u3067 'use client' \u3092\u4ecb\u3057\u305f Server-Client \u9593\u30c7\u30fc\u30bf\u8ee2\u9001\u3092\u5f37\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/zenn.dev\\\/yumemi_inc\\\/articles\\\/use-client-and-zod-codec-for-data-transfer#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/zenn.dev\\\/yumemi_inc\\\/articles\\\/use-client-and-zod-codec-for-data-transfer#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/1758828483_og-base-w1200-v2.png\",\"datePublished\":\"2025-09-25T19:28:03+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/zenn.dev\\\/yumemi_inc\\\/articles\\\/use-client-and-zod-codec-for-data-transfer#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/zenn.dev\\\/yumemi_inc\\\/articles\\\/use-client-and-zod-codec-for-data-transfer\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/zenn.dev\\\/yumemi_inc\\\/articles\\\/use-client-and-zod-codec-for-data-transfer#primaryimage\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/1758828483_og-base-w1200-v2.png\",\"contentUrl\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/1758828483_og-base-w1200-v2.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/zenn.dev\\\/yumemi_inc\\\/articles\\\/use-client-and-zod-codec-for-data-transfer#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Zod Codecs \u3067 &#8216;use client&#8217; \u3092\u4ecb\u3057\u305f Server-Client \u9593\u30c7\u30fc\u30bf\u8ee2\u9001\u3092\u5f37\u5316\u3059\u308b\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\",\"name\":\"\u30dd\u30b1\u30b3\u30f3\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\",\"name\":\"info@pokecon.jp\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"caption\":\"info@pokecon.jp\"},\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/author\\\/infopokecon-jp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Zod Codecs \u3067 'use client' \u3092\u4ecb\u3057\u305f Server-Client \u9593\u30c7\u30fc\u30bf\u8ee2\u9001\u3092\u5f37\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer","og_locale":"ja_JP","og_type":"article","og_title":"Zod Codecs \u3067 'use client' \u3092\u4ecb\u3057\u305f Server-Client \u9593\u30c7\u30fc\u30bf\u8ee2\u9001\u3092\u5f37\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3","og_description":"! \u5229\u7528\u3057\u305f\u4e3b\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30d0\u30fc\u30b8\u30e7\u30f3 \"next\": 15.5.3 (App Router \u3092\u5229\u7528) \"react\": 19.x \u7cfb (Next.js \u306e\u4e8b\u60c5\u304c\u3042\u308b\u306e\u3067\u3001\u5177\u4f53\u7684\u306a\u30d0\u30fc\u30b8\u30e7\u30f3\u306f\u6562\u3048\u3066\u4f0f\u305b\u308b) \"tempo [&hellip;]","og_url":"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer","og_site_name":"\u30dd\u30b1\u30b3\u30f3","article_published_time":"2025-09-25T19:28:03+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/1758828483_og-base-w1200-v2.png","type":"image\/png"}],"author":"info@pokecon.jp","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"info@pokecon.jp","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"5\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer#article","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/6946\/"},"author":{"name":"info@pokecon.jp","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"headline":"Zod Codecs \u3067 &#8216;use client&#8217; \u3092\u4ecb\u3057\u305f Server-Client \u9593\u30c7\u30fc\u30bf\u8ee2\u9001\u3092\u5f37\u5316\u3059\u308b","datePublished":"2025-09-25T19:28:03+00:00","mainEntityOfPage":{"@id":"https:\/\/pokecon.jp\/job\/6946\/"},"wordCount":198,"image":{"@id":"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/1758828483_og-base-w1200-v2.png","articleSection":["\u4f01\u696d\u30c6\u30c3\u30af"],"inLanguage":"ja"},{"@type":"WebPage","@id":"https:\/\/pokecon.jp\/job\/6946\/","url":"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer","name":"Zod Codecs \u3067 'use client' \u3092\u4ecb\u3057\u305f Server-Client \u9593\u30c7\u30fc\u30bf\u8ee2\u9001\u3092\u5f37\u5316\u3059\u308b - \u30dd\u30b1\u30b3\u30f3","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/#website"},"primaryImageOfPage":{"@id":"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer#primaryimage"},"image":{"@id":"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer#primaryimage"},"thumbnailUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/1758828483_og-base-w1200-v2.png","datePublished":"2025-09-25T19:28:03+00:00","author":{"@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"breadcrumb":{"@id":"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer"]}]},{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer#primaryimage","url":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/1758828483_og-base-w1200-v2.png","contentUrl":"https:\/\/pokecon.jp\/job\/wp-content\/uploads\/2025\/09\/1758828483_og-base-w1200-v2.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/zenn.dev\/yumemi_inc\/articles\/use-client-and-zod-codec-for-data-transfer#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/pokecon.jp\/job\/"},{"@type":"ListItem","position":2,"name":"Zod Codecs \u3067 &#8216;use client&#8217; \u3092\u4ecb\u3057\u305f Server-Client \u9593\u30c7\u30fc\u30bf\u8ee2\u9001\u3092\u5f37\u5316\u3059\u308b"}]},{"@type":"WebSite","@id":"https:\/\/pokecon.jp\/job\/#website","url":"https:\/\/pokecon.jp\/job\/","name":"\u30dd\u30b1\u30b3\u30f3","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pokecon.jp\/job\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997","name":"info@pokecon.jp","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","caption":"info@pokecon.jp"},"url":"https:\/\/pokecon.jp\/job\/author\/infopokecon-jp\/"}]}},"_links":{"self":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/6946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/comments?post=6946"}],"version-history":[{"count":1,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/6946\/revisions"}],"predecessor-version":[{"id":6948,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/6946\/revisions\/6948"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media\/6947"}],"wp:attachment":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media?parent=6946"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/categories?post=6946"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/tags?post=6946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}