Slide 1
Slide 1 text
ཧը໘͚6*ίϯϙʔωϯτͷઃܭ
8FCDPNQPOFOUTͰϑϨʔϜϫʔΫඇґଘΛࢦ͢
6*5ʷ#PO
fi
SF'SPOUFOE.FFUVQWPM
"LJIJSP5BNBEB !TQSJOHSBJOJOH
Slide 2
Slide 2 text
"HFOEB
طଘϓϩδΣΫτͷ$44ϑϨʔϜϫʔΫಋ
ೖͷ͠͞
8FCDPNQPOFOUTΛͬͨ6*ίϯϙʔω
ϯτ࣮
Slide 3
Slide 3 text
"HFOEB
طଘϓϩδΣΫτͷ$44ϑϨʔϜϫʔΫಋ
ೖͷ͠͞
8FCDPNQPOFOUTΛͬͨ6*ίϯϙʔω
ϯτ࣮
͕࣌ؒͳ͗͢͞ΔͷͰͪ͜ΒΛத৺ʹ͠·͢
Slide 4
Slide 4 text
ϓϩμΫτ
w -*/&ެࣜΞΧϯτͷཧը໘
w 8FCͱJ04"OESPJE"QQ͚ʹϦϦʔε
w ࣾһਓ ΞϧόΠτਓ 7/ ,3νʔϜͰ։ൃ
Slide 5
Slide 5 text
ཧը໘ͷ։ൃͷಛ
w ͦΕͳΓʹେن
w
ߦ7VFϑΝΠϧ
ݸ+4ϑΝΠϧ
ݸ
w ػೳ͕ଟذʹΘͨΔ͕ɺ֤ػೳͷར༻ස·ͪ·ͪ
w ಛఆͷϢʔβʔʹ͚ͩඞཁͳཧը໘͕ͨ͘͞Μ͋ΔΠϝʔδ
࠷খͷ࿑ྗͰɺͦͷը໘ͷॏཁʹ߹Θͤͨ
ΫΦϦςΟͰ6*Λ࣮͢Δ͜ͱΛॏࢹ
Slide 6
Slide 6 text
ཧը໘ͷ6*ϥΠϒϥϦ
w #PPUTUSBQΛΧελϚΠζͨ͠ಠࣗϥΠϒϥϦ
w #PPUTUSBQաڈͷϥΠϒϥϦͱࢥΘΕ͍ͯΔ͕ʜ
w ͋Δఔͬͨ6*Λ؆୯ʹ͑Δ
w ΄΅
$44ͷΈͰߏ͞Ε࣮ͨͰɺͲͷΑ͏ͳڥͰ͑Δ
Slide 7
Slide 7 text
Ͱ#PPUTUSBQΛ͍ଓ͚Δ͔ʁ
w ʮͳ͑͘Δʯ͜ͱ͕᠘
w Ҡߦͷ༏ઌΛԼ͛ͨ݁Ռɺগͣͭ͠$44ϑϨʔϜϫʔΫͷґଘ
ΛਂΊ͍ͯ͘
w ཁ݅ʹ߹Θͤͯ$44ͷύον͕૿͍͖͑ͯɺՃతʹมߋΛࠔ
ʹ͍ͯͨ͠
Slide 8
Slide 8 text
ҠߦͷऔΓΈ
w ݕ౼ͷ݁Ռ5BJMXJOEΛ࠾༻͠ɺঃʑʹҠߦ͍ͯ͘͜͠ͱʹ
w #PPUTUSBQͷDMBTT໊͕5BJMXJOEͷͷͱॏෳ😩
w Ήͳ͘5BJMXJOEͷQSF
fi
YΛ༗ޮԽ AMEAΛ༩
![]()
...
Slide 9
Slide 9 text
6*ίϯϙʔωϯτͷ࣮
w 5BJMXJOEl6UJMJUZ
fi
STUzͳ$44ϑϨʔϜϫʔΫͳͷͰɺશʹ
#PPUTUSBQΛஔ͖͑Δʹ6*ίϯϙʔωϯτΛ༻ҙ͢Δඞཁ͕͋Δ
w ௨ৗͰ͋ΕͦΕͧΕͷϑϨʔϜϫʔΫ্Ͱಈ࡞͢Δίϯϙʔωϯτ
ͱ࣮͍͕ͯͯ͘͠͠ʜ
Slide 10
Slide 10 text
͞Βʹঢ়گ͕ෳࡶʹͳ͍ͬͯ͘
w ࣮ಉ࣌ʹ7VF͔Β7VFͷҠߦ͕ਐߦத
w ཧը໘ͷେ౷Ұܭը
w ࠓޙʮ-*/&ެࣜΞΧϯτʯҎ֎ͷ༷ʑͳཧը໘ͷ6*69Λڞ
௨Խ͢ΔՄೳੑ
w ϑϨʔϜϫʔΫ͢ΒόϥόϥʹͳΔՄೳੑ͕ग़͖ͯͨ
ϑϨʔϜϫʔΫʹґଘͤͣಈ࡞͢Δ6*ίϯϙʔωϯτ͕ඞཁ
Slide 11
Slide 11 text
͜Ε·Ͱͷ·ͱΊ
w #PPUTUSBQ͋ΔఔͬͨϖʔδΛ࡞Δͷʹ͕͘ɺཁ͕݅ෳࡶʹ
ͳΔʹͭΕͯύον͕૿͍͖͑ͯมߋΛࠔʹ͍ͯͬͨ͠
w 5BJMXJOE༏ल͕ͩ୯ମ͚ͩͰ#PPUTUSBQͷସʹͳΒͳ͍
w 7VF7VF 3FBDU
ͰҰ؏ͯ͠ಈ࡞͢Δ6*ίϯϙʔωϯτΛ
ఏڙ͍ͨ͠
Slide 12
Slide 12 text
8FCDPNQPOFOUT
Slide 13
Slide 13 text
ͳͥ8FCDPNQPOFOUTʁ
w ϑϨʔϜϫʔΫʹґଘ͠ͳ͍6*ίϯϙʔωϯτΛఏڙͰ͖Δ
w 4IBEPX%0.ʹΑΔελΠϧͷʹΑΓɺ$44ͷΈͷϑϨʔϜ
ϫʔΫʹ͕͋ͬͨղফͰ͖Δ
Slide 14
Slide 14 text
ͱ͍͏ͷͷʜ
w 6*ίϯϙʔωϯτͱͯ͠8FCDPNQPOFOUTΛ࠾༻͢Δ͜ͱʹջٙత
ͳҙݟଟ͍
w ։ൃύϥμΠϜͷҧ͍
w طଘϑϨʔϜϫʔΫͱͷੑ
w 443ͷରԠ
w ͦΕͧΕͷ՝ʹ͍ͭͯɺࢲͨͪͷࠓͷղܾࡦΛ͠·͢
Slide 15
Slide 15 text
8FCDPNQPOFOUTͷ։ൃํ๏
w ֤ίϯϙʔωϯτ-JUΛ࣮ͬͯ
w -JU&MFNFOU)5.-&MFNFOUͷ4VCDMBTTͱͯ͠ಈ࡞͠ɺಁաతʹ
8FCDPNQPOFOUTͷ"1*Λѻ͑Δ͕ಛ
w ҰํͰɺ$MBTTϕʔεͷ"1*ݱͷϑϩϯτΤϯυ։ൃ͔Βͷίϯ
ςΩετεΠονΛඞཁͱ͢Δ
w ಛʹ.JYJOؔ࿈Ͱ5ZQF4DSJQUͷରԠ͕ݫ͍͠
Slide 16
Slide 16 text
;BH
Slide 17
Slide 17 text
;BH
w 6*ίϯϙʔωϯτ࣮ͷͨΊͷϥΠϒϥϦ
w ϔουϨε6*ϥΠϒϥϦͷ"SLɺ$44JO+4ϑϨʔϜϫʔΫͷ
1BOEB$44͕;BHΛϕʔεʹ࣮͞Ε͍ͯΔ
w ϑϨʔϜϫʔΫʹґଘ͠ͳ͍࣮ʹͳ͓ͬͯΓɺެࣜͰ3FBDU7VF
4PMJEʹରԠ
8FCDPNQPOFOUT -JU
ʹରԠՄೳ
Slide 18
Slide 18 text
-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`
`;
});
Slide 19
Slide 19 text
;BHͷڧΈ
w εςʔτϚγϯΛ༻ҙ͢Δ͜ͱͰɺঢ়ଶཧʹؔ͢ΔॲཧΛۃݶ·Ͱ
நԽͰ͖Δ
w ผ్$44JO+4Λఏڙ͢Δڥ͕༻ҙͰ͖Εɺ;Δ·͍Λҡ࣋͠
ͨ··8FCDPNQPOFOUT͔Β٫͢Δ͜ͱ͢ΒՄೳ
w 8FCDPNQPOFOUϑϨʔϜϫʔΫʹґଘ࣮͔ͨ͠Β٫Ͱ͖Δ
Slide 20
Slide 20 text
طଘϑϨʔϜϫʔΫͱͷੑ
w 8FCDPNQPOFOUT୯ͳΔ)5.-λάͱͯ͠Ͳ͜ͰͰ͑Δ͕ɺ
ٯʹܽͰ͋Δ
w 3FBDU7VFͷίϯϙʔωϯτͱͯ͑ͣ͠ɺ5ZQF4DSJQUͷܕ͕ޮ͔
ͳ͍
w -JU4UFODJMͳͲϑϨʔϜϫʔΫผʹϥούʔίϯϙʔωϯτΛग़ྗ
͢Δػೳ͕༻ҙ͞Ε͍ͯΔ
Slide 21
Slide 21 text
DVTUPNFMFNFOUTNBOJGFTU
w ੜπʔϧ͕όϥόϥʹ࣮͞Ε͍ͯΔ͜ͱΛࢹͯ͠࡞ΒΕͨɺ
$VTUPNFMFNFOUͷϚχϑΣετϑΝΠϧͷ༷
w ADVTUPNFMFNFOUTKTPOAͱ͍͏໊લͷ+40/4DIFNBΛ༻ҙ
͠ɺͦͷதͰ$VTUPNFMFNFOUʹ͍ͭͯͷϝλσʔλΛએݴ͢Δ
$VTUPNFMFNFOUTNBOJGFTUΛͱʹ
3FBDU7VF͚ϥούʔΛੜ
Slide 22
Slide 22 text
ιʔείʔυ͔Β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"
}
Slide 23
Slide 23 text
ͳ͘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
Slide 24
Slide 24 text
443ͷରԠ
w ೦ͳ͕Βɺ443Λ࣮ݱ͢ΔͨΊͷΤίγεςϜ·ͩ·ͩ
w ࢲͨͪͷϓϩμΫτ͕443Λ༻͍ͯ͠ͳ͔ͬͨ8FC
DPNQPOFOUTΛ࠾༻ͨ͠ཧ༝ͷҰͭ
Slide 25
Slide 25 text
%FDMBSBUJWF4IBEPX%0.ͷظ
w ͔͠͠ʜʜ%FDMBSBUJWF4IBEPX%0.͕͍ͭʹ4BGBSJʹʂ
w 443ڥͰ4IBEPX%0.Λར༻͢ΔͨΊͷٕज़ཁૉ
w खݩͰࢼ͢ൣғͰɺ)ZESBUJPOFSSPS͕ൃੜ͢Δͷͷɺͳ͘
ίϯϙʔωϯτ͕443)ZESBUJPO͞ΕΔঢ়ଶͩͬͨ
/FYUKT /VYU
Slide 26
Slide 26 text
$PODMVTJPO
w 8FCDPNQPOFOUTϑϨʔϜϫʔΫඇґଘ
ͷ6*ίϯϙʔωϯτΛ࣮͢Δͷʹྑ͍બ
w ;BHʹΑΔ6*ͷ;Δ·͍ͷ
w কདྷੑΛߟ͑ͨΤεέʔϓϋον͕ॏཁ