؅ཧը໘޲͚6*ίϯϙʔωϯτͷઃܭ 
 8FCDPNQPOFOUTͰϑϨʔϜϫʔΫඇґଘΛ໨ࢦ͢ 6*5ʷ#PO fi SF'SPOUFOE.FFUVQWPM "LJIJSP5BNBEB !TQSJOHSBJOJOH

"HFOEB طଘϓϩδΣΫτ΁ͷ$44ϑϨʔϜϫʔΫಋ ೖͷ೉͠͞ 8FCDPNQPOFOUTΛ࢖ͬͨ6*ίϯϙʔω ϯτ࣮૷

"HFOEB طଘϓϩδΣΫτ΁ͷ$44ϑϨʔϜϫʔΫಋ ೖͷ೉͠͞ 8FCDPNQPOFOUTΛ࢖ͬͨ6*ίϯϙʔω ϯτ࣮૷ ͕࣌ؒͳ͗͢͞ΔͷͰͪ͜ΒΛத৺ʹ࿩͠·͢

ϓϩμΫτ w -*/&ެࣜΞΧ΢ϯτͷ؅ཧը໘ w 8FCͱJ04"OESPJE"QQ޲͚ʹϦϦʔε w ࣾһਓΞϧόΠτਓ7/,3νʔϜͰ։ൃ

؅ཧը໘ͷ։ൃͷಛ௃ w ͦΕͳΓʹେن໛ w ߦ7VFϑΝΠϧ ݸ+4ϑΝΠϧ ݸ w ػೳ͕ଟذʹΘͨΔ͕ɺ֤ػೳͷར༻ස౓͸·ͪ·ͪ w ಛఆͷϢʔβʔʹ͚ͩඞཁͳ؅ཧը໘͕ͨ͘͞Μ͋ΔΠϝʔδ ࠷খͷ࿑ྗͰɺͦͷը໘ͷॏཁ౓ʹ߹Θͤͨ ΫΦϦςΟͰ6*Λ࣮૷͢Δ͜ͱΛॏࢹ

؅ཧը໘ͷ6*ϥΠϒϥϦ w #PPUTUSBQΛΧελϚΠζͨ͠ಠࣗϥΠϒϥϦ w #PPUTUSBQ͸աڈͷϥΠϒϥϦͱࢥΘΕ͍ͯΔ͕ʜ w ͋Δఔ౓੔ͬͨ6*Λ؆୯ʹ࢖͑Δ w ΄΅ $44ͷΈͰߏ੒͞Ε࣮ͨ૷ͰɺͲͷΑ͏ͳ؀ڥͰ΋࢖͑Δ

Ͱ͸#PPUTUSBQΛ࢖͍ଓ͚Δ͔ʁ w ʮ໰୊ͳ͘࢖͑Δʯ͜ͱ͕᠘ w Ҡߦͷ༏ઌ౓ΛԼ͛ͨ݁Ռɺগͣͭ͠$44ϑϨʔϜϫʔΫ΁ͷґଘ ΛਂΊ͍ͯ͘ w ཁ݅ʹ߹Θͤͯ$44΁ͷύον͕૿͍͖͑ͯɺՃ଎౓తʹมߋΛࠔ ೉ʹ͍ͯͨ͠

ҠߦͷऔΓ૊Έ w ݕ౼ͷ݁Ռ5BJMXJOEΛ࠾༻͠ɺঃʑʹҠߦ͍ͯ͘͜͠ͱʹ w #PPUTUSBQͷDMBTT໊͕5BJMXJOEͷ΋ͷͱॏෳ😩 w ΍Ήͳ͘5BJMXJOEͷQSF fi YΛ༗ޮԽ AMEAΛ෇༩

6*ίϯϙʔωϯτͷ࣮૷ w 5BJMXJOE͸l6UJMJUZ fi STUzͳ$44ϑϨʔϜϫʔΫͳͷͰɺ׬શʹ #PPUTUSBQΛஔ͖׵͑Δʹ͸6*ίϯϙʔωϯτΛ༻ҙ͢Δඞཁ͕͋Δ w ௨ৗͰ͋Ε͹ͦΕͧΕͷϑϨʔϜϫʔΫ্Ͱಈ࡞͢Δίϯϙʔωϯτ ͱ࣮ͯ͠૷͍͕ͯ͘͠ʜ

͞Βʹঢ়گ͕ෳࡶʹͳ͍ͬͯ͘ w ࣮͸ಉ࣌ʹ7VF͔Β7VF΁ͷҠߦ͕ਐߦத w ؅ཧը໘ͷେ౷Ұܭը w ࠓޙʮ-*/&ެࣜΞΧ΢ϯτʯҎ֎ͷ༷ʑͳ؅ཧը໘ͷ6*69Λڞ ௨Խ͢ΔՄೳੑ w ϑϨʔϜϫʔΫ͢ΒόϥόϥʹͳΔՄೳੑ͕ग़͖ͯͨ ϑϨʔϜϫʔΫʹґଘͤͣಈ࡞͢Δ6*ίϯϙʔωϯτ͕ඞཁ

͜Ε·Ͱͷ·ͱΊ w #PPUTUSBQ͸͋Δఔ౓੔ͬͨϖʔδΛ࡞Δͷʹ޲͕͘ɺཁ͕݅ෳࡶʹ ͳΔʹͭΕͯύον͕૿͍͖͑ͯมߋΛࠔ೉ʹ͍ͯͬͨ͠ w 5BJMXJOE͸༏ल͕ͩ୯ମ͚ͩͰ͸#PPUTUSBQͷ୅ସʹ͸ͳΒͳ͍ w 7VF7VF 3FBDU ͰҰ؏ͯ͠ಈ࡞͢Δ6*ίϯϙʔωϯτΛ 
 ఏڙ͍ͨ͠

8FCDPNQPOFOUT

ͳͥ8FCDPNQPOFOUTʁ w ϑϨʔϜϫʔΫʹґଘ͠ͳ͍6*ίϯϙʔωϯτΛఏڙͰ͖Δ w 4IBEPX%0.ʹΑΔελΠϧͷ෼཭ʹΑΓɺ$44ͷΈͷϑϨʔϜ ϫʔΫʹ͋ͬͨ໰୊͕ղফͰ͖Δ

ͱ͸͍͏΋ͷͷʜ w 6*ίϯϙʔωϯτͱͯ͠8FCDPNQPOFOUTΛ࠾༻͢Δ͜ͱʹջٙత ͳҙݟ͸ଟ͍ w ։ൃύϥμΠϜͷҧ͍ w طଘϑϨʔϜϫʔΫͱͷ਌࿨ੑ w 443΁ͷରԠ w ͦΕͧΕͷ՝୊ʹ͍ͭͯɺࢲͨͪͷࠓͷղܾࡦΛ࿩͠·͢

8FCDPNQPOFOUTͷ։ൃํ๏ w ֤ίϯϙʔωϯτ͸-JUΛ࢖࣮ͬͯ૷ w -JU&MFNFOU͸)5.-&MFNFOUͷ4VCDMBTTͱͯ͠ಈ࡞͠ɺಁաతʹ 8FCDPNQPOFOUTͷ"1*Λѻ͑Δ఺͕ಛ௕ w ҰํͰɺ$MBTTϕʔεͷ"1*͸ݱ୅ͷϑϩϯτΤϯυ։ൃ͔Βͷίϯ ςΩετεΠονΛඞཁͱ͢Δ w ಛʹ.JYJOؔ࿈Ͱ5ZQF4DSJQU΁ͷରԠ͕ݫ͍͠

;BH

;BH w 6*ίϯϙʔωϯτ࣮૷ͷͨΊͷϥΠϒϥϦ w ϔουϨε6*ϥΠϒϥϦͷ"SLɺ$44JO+4ϑϨʔϜϫʔΫͷ 1BOEB$44͕;BHΛϕʔεʹ࣮૷͞Ε͍ͯΔ w ϑϨʔϜϫʔΫʹґଘ͠ͳ͍࣮૷ʹͳ͓ͬͯΓɺެࣜͰ3FBDU7VF 4PMJEʹରԠ 8FCDPNQPOFOUT -JU ʹ΋ରԠՄೳ

-JU޲͚ͷϔϧύʔΛ༻ҙ͢Δ͜ͱͰ໰୊ͳ͘ಈ࡞ import * as checkbox from '@zag-js/checkbox'; import { useController } from 'haunted'; import { html } from 'lit'; import { MachineController, applyProps, createElement } from '~util'; export const Checkbox = createElement((element) => { const machine = useController( (host) => new MachineController(host, checkbox) ); const api = machine.connect(); return html` `; });

;BHͷڧΈ w εςʔτϚγϯΛ༻ҙ͢Δ͜ͱͰɺঢ়ଶ؅ཧʹؔ͢ΔॲཧΛۃݶ·Ͱ ந৅ԽͰ͖Δ w ผ్$44JO+4Λఏڙ͢Δ؀ڥ͕༻ҙͰ͖Ε͹ɺ;Δ·͍Λҡ࣋͠ ͨ··8FCDPNQPOFOUT͔Β୤٫͢Δ͜ͱ͢ΒՄೳ w 8FCDPNQPOFOUϑϨʔϜϫʔΫʹґଘ࣮ͨ͠૷͔Β୤٫Ͱ͖Δ

طଘϑϨʔϜϫʔΫͱͷ਌࿨ੑ w 8FCDPNQPOFOUT͸୯ͳΔ)5.-λάͱͯ͠Ͳ͜ͰͰ΋࢖͑Δ͕ɺ ٯʹܽ఺Ͱ΋͋Δ w 3FBDU7VFͷίϯϙʔωϯτͱͯ͠࢖͑ͣɺ5ZQF4DSJQUͷܕ͕ޮ͔ ͳ͍ w -JU΍4UFODJMͳͲ͸ϑϨʔϜϫʔΫผʹϥούʔίϯϙʔωϯτΛग़ྗ ͢Δػೳ͕༻ҙ͞Ε͍ͯΔ

DVTUPNFMFNFOUTNBOJGFTU w ੜ੒πʔϧ͕όϥόϥʹ࣮૷͞Ε͍ͯΔ͜ͱΛ໰୊ࢹͯ͠࡞ΒΕͨɺ $VTUPNFMFNFOUͷϚχϑΣετϑΝΠϧͷ࢓༷ w ADVTUPNFMFNFOUTKTPOAͱ͍͏໊લͷ+40/4DIFNBΛ༻ҙ ͠ɺͦͷதͰ$VTUPNFMFNFOUʹ͍ͭͯͷϝλσʔλΛએݴ͢Δ $VTUPNFMFNFOUTNBOJGFTUΛ΋ͱʹ 3FBDU7VF޲͚ϥούʔΛੜ੒

ιʔείʔυ͔ΒQSPQTTMPUTFNJUTͷܕΛநग़ import { defineComponentEmits, defineComponentProps, defineComponentSlots, } from '~util'; export const tagName = 'my-checkbox'; export const props = defineComponentProps<{ checked: boolean; }>({ checked: false, }); export const slots = defineComponentSlots<{ default: () => void; }>(); export const emit = defineComponentEmits<{ changed: boolean | 'indeterminate'; }>(); { "schemaVersion": "1.0.0", "modules": [ { "kind": "javascript-module", "declarations": [ { "kind": "class", "customElement": true, "tagName": "my-checkbox", "attributes": [ { "name": "checked", "fieldName": "checked", "type": { "text": "boolean" }, "default": "false" } ], "slots": [], "events": [ { "name": "changed", "type": { "text": "CustomEvent" }

໰୊ͳ͘3FBDU7VF͔Βར༻Ͱ͖ΔΑ͏ʹʂ ... ... { "schemaVersion": "1.0.0", "modules": [ { "kind": "javascript-module", "declarations": [ { "kind": "class", "customElement": true, "tagName": "my-checkbox", "attributes": [ { "name": "checked", "fieldName": "checked", "type": { "text": "boolean" }, "default": "false" } ], "slots": [], "events": [ { "name": "changed", "type": { "text": "CustomEvent" } 7VF 3FBDU

443΁ͷରԠ w ࢒೦ͳ͕Βɺ443Λ࣮ݱ͢ΔͨΊͷΤίγεςϜ͸·ͩ·ͩ w ࢲͨͪͷϓϩμΫτ͕443Λ࢖༻͍ͯ͠ͳ͔ͬͨ఺΋8FC DPNQPOFOUTΛ࠾༻ͨ͠ཧ༝ͷҰͭ

%FDMBSBUJWF4IBEPX%0.΁ͷظ଴ w ͔͠͠ʜʜ%FDMBSBUJWF4IBEPX%0.͕͍ͭʹ4BGBSJʹʂ w 443؀ڥͰ4IBEPX%0.Λར༻͢ΔͨΊͷٕज़ཁૉ w खݩͰࢼ͢ൣғͰ͸ɺ)ZESBUJPOFSSPS͕ൃੜ͢Δ΋ͷͷɺ໰୊ͳ͘ ίϯϙʔωϯτ͕443)ZESBUJPO͞ΕΔঢ়ଶͩͬͨ /FYUKT /VYU

$PODMVTJPO w 8FCDPNQPOFOUT͸ϑϨʔϜϫʔΫඇґଘ ͷ6*ίϯϙʔωϯτΛ࣮૷͢Δͷʹྑ͍બ୒ w ;BHʹΑΔ6*ͷ;Δ·͍ͷ෼཭ w কདྷੑΛߟ͑ͨΤεέʔϓϋον͕ॏཁ