Branded Typesで日時の複雑さと戦う

3ZVTFJ4BKJLJ!TBKJLJY #SBOEFE5ZQFTͰ೔࣌ͷෳࡶ͞ͱઓ͏

೔࣌೉͍͠Ͱ͢ΑͶʁ

ࣗ෼ͷνʔϜͰ΋՝୊ͩͬͨ

໰୊ҙࣝΛڞ༗͢ΔͨΊʹ ؆୯ʹLJOUPOFͷઆ໌

LJOUPOFʹ͍ͭͯ LJOUPOF͸ɺϓϩάϥϛϯάͷ஌͕ࣝͳͯ͘΋ۀ຿ʹ߹ΘͤͨγεςϜΛ͢͹ ΍͘։ൃͰ͖Δϊʔίʔυɾϩʔίʔυ੡඼Ͱ͢ɻ σʔλΛ஝ੵɾҰཡɾݕࡧͰ͖Δσʔλϕʔεػೳͱɺۀ຿Λԁ׈ʹਐΊΔͨ Ίͷίϛϡχέʔγϣϯػೳ͕උΘ͍ͬͯ·͢ɻ

LJOUPOFͷʮΞϓϦʯػೳʹ͍ͭͯ LJOUPOFͷϝΠϯػೳʹʮΞϓϦػೳʯͱݺ͹ΕΔ΋ͷ͕͋Δ w ̎࣍ݩతʹ༷ʑͳϑΟʔϧυΛ഑ஔͯ͠ɺϑΥʔϜΛ࡞੒ w Ϣʔβʔ͸σʔλΛཷΊ͍ͯ͘͜ͱ͕Ͱ͖Δ w ଞʹ΋ɺϓϩηε؅ཧίϝϯτଞΞϓϦͷࢀরͳͲ͕Ͱ͖Δ w ݱࡏɺ$MPTVSF-JCSBSZ+4ˠ3FBDU54ʹ࡮৽த

LJOUPOFʮΞϓϦʯͷೖྗը໘

LJOUPOFͷʮΞϓϦʯʹ͋Δ೔࣌ܥͷϑΟʔϧυ ҎԼͷϑΟʔϧυ͕͋Δ w ೔෇ϑΟʔϧυ೔෇ΛೖྗͰ͖ΔϑΟʔϧυ w ࣌ࠁϑΟʔϧυ࣌ࠁΛೖྗͰ͖ΔϑΟʔϧυ w ೔࣌ϑΟʔϧυ೔෇ͱ࣌ࠁΛ߹ΘͤͯೖྗͰ͖ΔϑΟʔϧυ w ࡞੒೔࣌
૊ΈࠐΈϑΟʔϧυ σʔλΛ࡞੒ͨ͠೔͕࣌ࣗಈͰೖΔ w ߋ৽೔࣌ ૊ΈࠐΈϑΟʔϧυ σʔλΛߋ৽ͨ͠೔͕࣌ࣗಈͰೖΔ

LJOUPOFͷʮΞϓϦʯʹ͋Δ೔࣌ܥͷϑΟʔϧυ

೔࣌ܥͷϑΟʔϧυ࣮૷ͷ՝୊ ΞϓϦͷϑΥʔϜͷঢ়ଶΛ؅ཧ͢Δ࣌ʹɺશ෦4USJOHܕͰ஋Λ؅ཧ͍ͯͨ͠ export type DateFieldValue = { type: typeof FORM_INPUT_FIELD_TYPE.DATE;
value: string; }; export type TimeFieldValue = { type: typeof FORM_INPUT_FIELD_TYPE.TIME; value: string; };

શ෦ಉ͡ܕͩͱ౎߹͕ѱ͍ʁ

ಉ͡ੑ࣭ͷσʔλ͡Όͳ͍ ؾ͕͢ΔΜͩΑͳ͊

෼ྨͷ؍఺͕ͭ͋Δͱߟ͑ͨ

؍఺ಛఆͷҰॠΛࢦ͢σʔλ͔ʁ ೔࣌ͷσʔλʹ͸ಛఆͷҰॠΛʮࢦ͢΋ͷʯͱʮࢦ͞ͳ͍΋ͷʯ͕͋Δ ྫʮ஀ੜ݄ʯͱ͍͏৘ใ͸೔࣌ͷσʔλ͕ͩɺಛఆͷҰॠ͸ࢦ͞ͳ͍ ͦΕͧΕผͷ֓೦Ͱ͋Γɺม׵ʹෆՄٯੑ͕͋Δ 2025-11-23 2025-11-23 16:40 16:40 ❌ ❌

؍఺ϢʔβʔͷೖྗΛ൐͏͔ʁ Ϣʔβʔ͸ϩʔΧϧ࣌ؒʹੜ͖͍ͯΔ w Ϣʔβʔ͕ೖྗ͢Δͷ͸ৗʹϩʔΧϧ࣌ؒ w Ͳ͔͜ͰϑΥʔϜͷঢ়ଶˠ65$΁ͷม׵͕ඞཁʹͳΔ ٯʹϢʔβʔͷೖྗ มߋ ͕ͳ͍ͷͰ͋Ε͹ w
දࣔલʹϩέʔϧͱλΠϜκʔϯΛՃຯͨ͠ϑΥʔϚοτΛ͢Δ͚ͩ w format(datetime)

݁࿦શવಉ͡ੑ࣭ͷσʔλͰ͸ͳ͍ ؍఺ಛఆͷҰॠΛࢦ͢σʔλ͔ʁ w ಛఆͷҰॠΛࢦ͢೔࣌ߋ৽೔࣌࡞੒೔࣌ w ಛఆͷҰॠΛࢦ͞ͳ͍೔෇࣌ࠁ ؍఺ɿϢʔβʔೖྗΛ൐͏σʔλ͔ʁ w ೖྗΛ൐͏೔࣌೔෇࣌ࠁ w
ೖྗΛ൐Θͳ͍ߋ৽೔࣌࡞੒೔࣌

݁࿦ಉ͡ੑ࣭ͷσʔλͰ͸ͳ͍ ಛఆͷҰॠΛࢦ͢ ಛఆͷҰॠΛࢦ͞ͳ͍ ϢʔβʔೖྗΛ൐͏ ೔࣌ϑΟʔϧυ ࣌ࠁϑΟʔϧυ೔෇ϑΟʔϧυ ϢʔβʔೖྗΛ൐Θͳ͍ ߋ৽೔࣌࡞੒೔࣌ϑΟʔϧυ

͡Ό͋෼͚Α͏

ϧʔϧ೔࣌ͱͯ͠ѻ͏σʔλΛ෼ྨ͠ݶఆ͢Δ ೔࣌ͱͯ͠ѻ͏ อ࣋͢Δ σʔλΛҎԼͷͭʹݶఆͨ͠ 65$*404USJOH"2025-11-23T07:40:00.000Z" %BUF4USJOH"2025-11-23" 5JNF4USJOH"16:40"
-PDBM%BUF5JNF0CKFDU{date: "2025-11-23", time: "16:40"} w %BUF4USJOHͱ5JNF4USJOHΛ߹Θͤͨ΋ͷ

ϧʔϧ೔࣌ͱͯ͠ѻ͍͍ͬͯσʔλ ಛఆͷҰॠΛࢦ͢ ಛఆͷҰॠΛࢦ͞ͳ͍ ϢʔβʔೖྗΛ൐͏ -PDBM%BUF5JNF0CKFDU ˣ 65$*404USJOH %BUF4USJOH5JNF4USJOH ϢʔβʔೖྗΛ൐Θͳ͍ 65$*404USJOH

ؒ࿩ %BUF͸μϝͳͷ %BUFͷ··σʔλͷอ࣋΍΍ΓऔΓ͢Δ͜ͱ͸ඇਪ঑ʹͯ͠Δ ཧ༝ w ͦ΋ͦ΋γεςϜλΠϜκʔϯ ↔︎ 65$͔͠αϙʔτ͍ͯ͠ͳ͍ w ೖग़ྗΛ65$γεςϜͷͲͬͪͰѻ͏͔͕҉໧త
w จࣈྻͷύʔε͕͔ͳΓτϦοΩʔ w ͜͜ʹօ͞Μͷࢥ͏೚ҙͷ%BUFͷෆຬΛೖΕΔ

ܕͰ΋෼͚͍ͨʂ

#SBOEFE5ZQFTͩʂ #SBOEFE5ZQFTͱ͸ w ʮߏ଄͕ಉ͡ͳΒಉ͡ܕͱ͢Δʯͱ͍͏54ͷݪଇΛճආ͠ɺ w ߏ଄͕ಉ͡ܕͰ΋ޓ͍ʹ۠ผ͕ͭ͘Α͏ʹ͢Δख๏ ࣗ෼͸ͳΜͰ͔ΜͰ΋ಋೖ͢Δͷʹ͸৻ॏ೿ɻͰ΋೔࣌ʹؔͯ͠͸ w ಘΒΕΔԸܙ ೔࣌ͷ΍΍͜͠͞
#SBOEFE5ZQFTʹΑΔσϝϦοτ ͱࢥͬͯΔ

࣮ࡍͷίʔυ #SBOEFE5ZQFͷఆٛ ྫUTCISOStringܕ const utcisoStringBrand = Symbol('for UTCISOStringBrand'); export
type UTCISOString = string & { [utcisoStringBrand]: unknown; };

࣮ࡍͷίʔυ "TTFSUJPOؔ਺΋ηοτͰ࡞Δͱศར export function createUTCISOString( rawString: string, strict: boolean =
true ): UTCISOString { if (strict && !UTC_ISO_DATE_TIME_REGEX.test(rawString)) { throw new Error(`Invalid UTC ISO String : ${rawString}`); } return rawString as UTCISOString; }

'&Ͱ#SBOEFE5ZQFTʹҠߦ͢Δ࣌ͷίπ ֎෦͔ΒͷσʔλɾϢʔβʔೖྗɾ4UBUFͷ̏ํ͔ΒݫີԽ͢Δͱྑ͍ ίʔυ ϕʔε ֎෦σʔλ "1*౳ 4UBUF Ϣʔβʔೖྗύʔπ ;PE4DIFNB "TTFSUJPO7BMJEBUJPO
ܕఆٛݫີԽ

#SBOEFE5ZQFTΛ೔࣌σʔλʹಋೖͯ͠Έͯ ܕΛݟΔ͚ͩͰɺԿΛͯ͘͠ΕΔͷ͔Ұ໨ྎવ w ྫҾ਺͕-PDBM%BUF5JNF0CKFDUฦΓ஋͕65$*404UJOH w ˠ*40ܗࣜͳΜͩͳʂฦΓ஋65$ͳͷͰ࣌ࠩม׵΋ͯ͠Δʂ ܕΤϥʔ͕ग़ΔͷͰؒҧͬͯ࢖͍ͦ͏ͳͱ͜ΖΛൃݟɾ༧๷Ͱ͖Δ w ೔࣌ͷυϝΠϯʹৄ͘͠ͳ͍δϡχΞϝϯόʔͰ΋҆৺ νʔϜͰͷڞ௨ݴޠʹͳΔ
Α͏ʹؤுͬͯΔͱ͜Ζ

͜͜·ͰͰ΋े෼ศར͚ͩͲ

কདྷΛݟਾ͑Δ

೔࣌Yকདྷ

೔࣌Yকདྷ5FNQPSBM

5FNQPSBMΛҙࣝͯ͠Δ ࣮͸͜ͷ෼ྨ͸5FNQPSBMΛࢀߟʹ͍ͯ͠Δ ͱ͍͏͔͓ͷͣͱͦ͏ͳΔ 5FNQPSBMͱͷରԠؔ܎ w 65$*404USJOHTemporal.Instant w %BUF4USJOHTeporal.PlainDate w
5JNF4USJOHTeporal.PlainTime w -PDBM%BUF5JNF0CKFDUTeporal.PlainDateTime

5FNQPSBMΛҙࣝͯ͠Δ UTCISOString LocalDateTimeObj DateStiring TimeString

5FNQPSBM΁ͷ෍ੴ ݁ہ͸5FNQPSBM͕ղܾ͔ͨͬͨ͜͠ͱͱಉࠜͷ໰୊ͩͬͨ w ͦΕΛ#SBOEFE5ZQFͰղܾͯ͠Δ w ·ͩ5FNQPSBM͸͔͔࣌ؒΓͦ͏ͳͷͰ ٯʹݴ͑͹ɺ5FNQPSBMҠߦ͸؆୯ʹͳΔ͸ͣͰ͢Ͷʂ w ରରԠͯ͠ΔͷͰม׵ͯ͠΍Δ͚ͩͰ͍͍

·ͱΊ ೔࣌ͷσʔλΛѻ͏ͷ͸೉͍͠ w ಛʹಠཱͨ͠೔෇΍࣌ࠁΛѻ͏৔߹%BUFͷ࢖͍উख͕ LJOUPOFͷΞϓϦը໘࡮৽Ͱ͸#SBOEFE5ZQFTͰ೔࣌σʔλΛ෼ྨɾ੍ݶͯ͠Δ w ϝϦοτ΋ڗडͰ͖ͯΔ ͱࢥ͏ ೔࣌σʔλͷ෼ྨ͸5FNQPSBMΛࢀߟʹ
ݟӽͯ͠ ࡞͍ͬͯΔ w ૣ͘5FNQPSBM͕͘Ε͹ղܾ͢Δͷʹͳ͊ ೔࣌σʔλͷ؅ཧͰࠔͬͨͱ͖͸#SBOEFE5ZQFT͕ॿ͚ʹͳΔ͔΋͠Εͳ͍

4BKJ3ZVTFJ4BKJLJ 'SPOUFOE%FWFMPQFSBU$ZCP[V JOD 𝕏 !TBKJLJY

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

Branded Typesで日時の複雑さと戦う

Branded Typesで日時の複雑さと戦う

More Decks by Saji

Featured

Transcript