管理画面向けUIコンポーネントの設計 - Web componentsでフレームワーク非依存を目指す

「UIT × Bonfire Front-end Meetup #1」での発表資料です。
https://uit.connpass.com/event/300284/

Transcript

1. ؅ཧը໘޲͚6*ίϯϙʔωϯτͷઃܭ 
 8FC
   DPNQPOFOUTͰϑϨʔϜϫʔΫඇґଘΛ໨ࢦ͢ 6*5ʷ#PO fi SF
   'SPOUFOE
   .FFUVQ
   WPM 
   "LJIJSP
   5BNBEB
   !TQSJOHSBJOJOH
2. "HFOEB  طଘϓϩδΣΫτ΁ͷ$44ϑϨʔϜϫʔΫಋ ೖͷ೉͠͞
    8FC
   DPNQPOFOUTΛ࢖ͬͨ6*ίϯϙʔω ϯτ࣮૷
3. "HFOEB  طଘϓϩδΣΫτ΁ͷ$44ϑϨʔϜϫʔΫಋ ೖͷ೉͠͞
    8FC
   DPNQPOFOUTΛ࢖ͬͨ6*ίϯϙʔω ϯτ࣮૷ ͕࣌ؒͳ͗͢͞ΔͷͰͪ͜ΒΛத৺ʹ࿩͠·͢
4. ϓϩμΫτ w -*/&ެࣜΞΧ΢ϯτͷ؅ཧը໘
   w 8FCͱJ04"OESPJE
   "QQ޲͚ʹϦϦʔε
   w ࣾһਓ ΞϧόΠτਓ 7/ ,3νʔϜͰ։ൃ
5. ؅ཧը໘ͷ։ൃͷಛ௃ w ͦΕͳΓʹେن໛
   w  ߦ
   
   7VFϑΝΠϧ
    ݸ
   
   +4ϑΝΠϧ ݸ
   w ػೳ͕ଟذʹΘͨΔ͕ɺ֤ػೳͷར༻ස౓͸·ͪ·ͪ
   w ಛఆͷϢʔβʔʹ͚ͩඞཁͳ؅ཧը໘͕ͨ͘͞Μ͋ΔΠϝʔδ ࠷খͷ࿑ྗͰɺͦͷը໘ͷॏཁ౓ʹ߹Θͤͨ
   ΫΦϦςΟͰ6*Λ࣮૷͢Δ͜ͱΛॏࢹ
6. ؅ཧը໘ͷ6*ϥΠϒϥϦ w #PPUTUSBQ
   ΛΧελϚΠζͨ͠ಠࣗϥΠϒϥϦ
   w #PPUTUSBQ͸աڈͷϥΠϒϥϦͱࢥΘΕ͍ͯΔ͕ʜ
   w ͋Δఔ౓੔ͬͨ6*Λ؆୯ʹ࢖͑Δ
   w ΄΅
   $44ͷΈͰߏ੒͞Ε࣮ͨ૷ͰɺͲͷΑ͏ͳ؀ڥͰ΋࢖͑Δ
7. Ͱ͸#PPUTUSBQΛ࢖͍ଓ͚Δ͔ʁ w ʮ໰୊ͳ͘࢖͑Δʯ͜ͱ͕᠘
   w Ҡߦͷ༏ઌ౓ΛԼ͛ͨ݁Ռɺগͣͭ͠$44ϑϨʔϜϫʔΫ΁ͷґଘ ΛਂΊ͍ͯ͘
   w ཁ݅ʹ߹Θͤͯ$44΁ͷύον͕૿͍͖͑ͯɺՃ଎౓తʹมߋΛࠔ ೉ʹ͍ͯͨ͠
8. ҠߦͷऔΓ૊Έ w ݕ౼ͷ݁Ռ5BJMXJOEΛ࠾༻͠ɺঃʑʹҠߦ͍ͯ͘͜͠ͱʹ
   w #PPUTUSBQͷDMBTT໊͕5BJMXJOEͷ΋ͷͱॏෳ
   😩
   w ΍Ήͳ͘5BJMXJOEͷQSF fi YΛ༗ޮԽ
   AMEA
   Λ෇༩ <div class="ld-flex ld-items-start ld-mx-200 ld-my-600"> <div class="ld-w-[130px] ld-h-[130px] ld-bg-gray-200"> <img class="ld-max-w-full ld-max-h-full" /> ...
9. 6*ίϯϙʔωϯτͷ࣮૷ w 5BJMXJOE͸
   l6UJMJUZ fi STUz
   ͳ$44ϑϨʔϜϫʔΫͳͷͰɺ׬શʹ #PPUTUSBQΛஔ͖׵͑Δʹ͸6*ίϯϙʔωϯτΛ༻ҙ͢Δඞཁ͕͋Δ
   w ௨ৗͰ͋Ε͹ͦΕͧΕͷϑϨʔϜϫʔΫ্Ͱಈ࡞͢Δίϯϙʔωϯτ ͱ࣮ͯ͠૷͍͕ͯ͘͠ʜ
10. ͞Βʹঢ়گ͕ෳࡶʹͳ͍ͬͯ͘ w ࣮͸ಉ࣌ʹ7VF
    ͔Β7VF
    ΁ͷҠߦ͕ਐߦத
    w ؅ཧը໘ͷେ౷Ұܭը
    w ࠓޙʮ-*/&ެࣜΞΧ΢ϯτʯҎ֎ͷ༷ʑͳ؅ཧը໘ͷ6*69Λڞ ௨Խ͢ΔՄೳੑ
    w ϑϨʔϜϫʔΫ͢ΒόϥόϥʹͳΔՄೳੑ͕ग़͖ͯͨ ϑϨʔϜϫʔΫʹґଘͤͣಈ࡞͢Δ6*ίϯϙʔωϯτ͕ඞཁ
11. ͜Ε·Ͱͷ·ͱΊ w #PPUTUSBQ͸͋Δఔ౓੔ͬͨϖʔδΛ࡞Δͷʹ޲͕͘ɺཁ͕݅ෳࡶʹ ͳΔʹͭΕͯύον͕૿͍͖͑ͯมߋΛࠔ೉ʹ͍ͯͬͨ͠
    w 5BJMXJOE͸༏ल
    ͕ͩ୯ମ͚ͩͰ͸#PPUTUSBQͷ୅ସʹ͸ͳΒͳ͍
    w 7VF
    
    
    7VF
    
    
    3FBDU
    ͰҰ؏ͯ͠ಈ࡞͢Δ6*ίϯϙʔωϯτΛ 
 ఏڙ͍ͨ͠
12. 8FC
    DPNQPOFOUT
13. ͳͥ8FC
    DPNQPOFOUTʁ w ϑϨʔϜϫʔΫʹґଘ͠ͳ͍6*ίϯϙʔωϯτΛఏڙͰ͖Δ
    w 4IBEPX
    %0.ʹΑΔελΠϧͷ෼཭ʹΑΓɺ$44ͷΈͷϑϨʔϜ ϫʔΫʹ͋ͬͨ໰୊͕ղফͰ͖Δ
14. ͱ͸͍͏΋ͷͷʜ w 6*ίϯϙʔωϯτͱͯ͠8FC
    DPNQPOFOUTΛ࠾༻͢Δ͜ͱʹջٙత ͳҙݟ͸ଟ͍
    w ։ൃύϥμΠϜͷҧ͍
    w طଘϑϨʔϜϫʔΫͱͷ਌࿨ੑ
    w 443΁ͷରԠ
    w ͦΕͧΕͷ՝୊ʹ͍ͭͯɺࢲͨͪͷࠓͷղܾࡦΛ࿩͠·͢
15. 8FC
    DPNQPOFOUTͷ։ൃํ๏ w ֤ίϯϙʔωϯτ͸-JUΛ࢖࣮ͬͯ૷
    w -JU&MFNFOU͸)5.-&MFNFOUͷ4VCDMBTTͱͯ͠ಈ࡞͠ɺಁաతʹ 8FC
    DPNQPOFOUTͷ"1*Λѻ͑Δ఺͕ಛ௕
    w ҰํͰɺ$MBTTϕʔεͷ"1*͸ݱ୅ͷϑϩϯτΤϯυ։ൃ͔Βͷίϯ ςΩετεΠονΛඞཁͱ͢Δ
    w ಛʹ.JYJOؔ࿈Ͱ5ZQF4DSJQU΁ͷରԠ͕ݫ͍͠
16. ;BH
17. ;BH w 6*ίϯϙʔωϯτ࣮૷ͷͨΊͷϥΠϒϥϦ
    w ϔουϨε6*ϥΠϒϥϦͷ"SLɺ$44JO+4ϑϨʔϜϫʔΫͷ 1BOEB
    $44͕;BHΛϕʔεʹ࣮૷͞Ε͍ͯΔ
    w ϑϨʔϜϫʔΫʹґଘ͠ͳ͍࣮૷ʹͳ͓ͬͯΓɺެࣜͰ3FBDU7VF 4PMJEʹରԠ 8FC
    DPNQPOFOUT
    -JU
    ʹ΋ରԠՄೳ
18. -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` <label ${applyProps(api.rootProps)}> <div class="checkbox" ${applyProps(api.controlProps)}></div> <input ${applyProps(api.hiddenInputProps)} /> <span ${applyProps(api.labelProps)}> <slot></slot> </span> </label> `; });
19. ;BHͷڧΈ w εςʔτϚγϯΛ༻ҙ͢Δ͜ͱͰɺঢ়ଶ؅ཧʹؔ͢ΔॲཧΛۃݶ·Ͱ ந৅ԽͰ͖Δ
    w ผ్$44JO+4Λఏڙ͢Δ؀ڥ͕༻ҙͰ͖Ε͹ɺ;Δ·͍Λҡ࣋͠ ͨ··8FC
    DPNQPOFOUT͔Β୤٫͢Δ͜ͱ͢ΒՄೳ
    w 8FC
    DPNQPOFOUϑϨʔϜϫʔΫʹґଘ࣮ͨ͠૷͔Β୤٫Ͱ͖Δ
20. طଘϑϨʔϜϫʔΫͱͷ਌࿨ੑ w 8FC
    DPNQPOFOUT͸୯ͳΔ)5.-λάͱͯ͠Ͳ͜ͰͰ΋࢖͑Δ͕ɺ ٯʹܽ఺Ͱ΋͋Δ
    w 3FBDU7VFͷίϯϙʔωϯτͱͯ͠࢖͑ͣɺ5ZQF4DSJQUͷܕ͕ޮ͔ ͳ͍
    w -JU΍4UFODJMͳͲ͸ϑϨʔϜϫʔΫผʹϥούʔίϯϙʔωϯτΛग़ྗ ͢Δػೳ͕༻ҙ͞Ε͍ͯΔ
21. DVTUPNFMFNFOUTNBOJGFTU w ੜ੒πʔϧ͕όϥόϥʹ࣮૷͞Ε͍ͯΔ͜ͱΛ໰୊ࢹͯ͠࡞ΒΕͨɺ $VTUPN
    FMFNFOUͷϚχϑΣετϑΝΠϧͷ࢓༷
    w ADVTUPNFMFNFOUTKTPOA
    ͱ͍͏໊લͷ+40/
    4DIFNBΛ༻ҙ ͠ɺͦͷதͰ$VTUPN
    FMFNFOUʹ͍ͭͯͷϝλσʔλΛએݴ͢Δ $VTUPN
    FMFNFOUT
    NBOJGFTUΛ΋ͱʹ
    3FBDU7VF޲͚ϥούʔΛੜ੒
22. ιʔείʔυ͔Β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<boolean | \"indeterminate\">" }
23. ໰୊ͳ͘3FBDU7VF͔Βར༻Ͱ͖ΔΑ͏ʹʂ <MyCheckbox :checked="checked" @changed="..."> ... </MyCheckbox> <MyCheckbox checked={checked} onChanged={...}> ... </MyCheckbox> { "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<boolean | \"indeterminate\">" } 7VF 3FBDU
24. 443΁ͷରԠ w ࢒೦ͳ͕Βɺ443Λ࣮ݱ͢ΔͨΊͷΤίγεςϜ͸·ͩ·ͩ
    w ࢲͨͪͷϓϩμΫτ͕443Λ࢖༻͍ͯ͠ͳ͔ͬͨ఺΋8FC
    DPNQPOFOUTΛ࠾༻ͨ͠ཧ༝ͷҰͭ
25. %FDMBSBUJWF
    4IBEPX
    %0.΁ͷظ଴ w ͔͠͠ʜʜ%FDMBSBUJWF
    4IBEPX
    %0.͕͍ͭʹ4BGBSJʹʂ
    w 443؀ڥͰ4IBEPX
    %0.Λར༻͢ΔͨΊͷٕज़ཁૉ
    w खݩͰࢼ͢ൣғͰ͸ɺ)ZESBUJPO
    FSSPS͕ൃੜ͢Δ΋ͷͷɺ໰୊ͳ͘ ίϯϙʔωϯτ͕443)ZESBUJPO͞ΕΔঢ়ଶͩͬͨ /FYUKT /VYU
26. $PODMVTJPO w 8FC
    DPNQPOFOUT͸ϑϨʔϜϫʔΫඇґଘ ͷ6*ίϯϙʔωϯτΛ࣮૷͢Δͷʹྑ͍બ୒
    w ;BHʹΑΔ6*ͷ;Δ·͍ͷ෼཭
    w কདྷੑΛߟ͑ͨΤεέʔϓϋον͕ॏཁ