SvelteコンポーネントでHTMLメールを楽に作る

HTMLメールを作る際に、Svelte5のrender関数が役立ちます。

このスライドはSvelte Japan Online Meetup #6の登壇資料です。
https://svelte-jp.connpass.com/event/337845/

Transcript

1. 4WFMUFίϯϙʔωϯτͰ
   )5.-ϝʔϧΛָʹ࡞Δ ૔஍
   ढ़ีɹ ιʔείʔυ෇͖
2. TWFMUFTFSWFS
   ͷ
   SFOEFS ΩʔϙΠϯτ
3. ૔஍
   ढ़ี ߹ಉձࣾ4IPSU#PPLͷ୅දɻ
   ࡀɻ
   4WFMUFྺ͸೥ϲ݄ɻ
   ΧϨʔͱ࠼Γ໺ࡊ͕޷͖🍛🥗 #MVF4LZ
   
   !LVSBDIJXFCCTLZTPDJBM
   -JOLFE*O
   
   !LVSBDIJXFC
   (JU)VC
   
   !LVSBDIJXFC
4. จࣈ͚ͩͷϝʔϧ͸ ັྗత͡Όͳ͍
5. )5.-ϝʔϧ͸
   ϒϥϯυͷ
   ಛ৭Λग़ͤΔ
6. )5.-ϝʔϧΛ࡞ͬͯΈΑ͏
7. 4WFMUF
   
   4WFMUF,JU
   ϝʔϧૹ৴͸
   "NB[PO
   4&4
   !BXTTELDMJFOUTFT
   Λར༻͢Δɻ୅Θ Γʹ
   4FOE(SJE
   ΍
   3FTFOE
   Λ࢖͏͜ͱ΋Ͱ͖Δɻ
   4&4ͷ৔߹ɺຊՔಇΞΫηεΛ༗ޮʹ͢Δ͔ɺࢼߦʹ࢖͏ϝʔϧΞυϨεΛೝূ͓ͯ͘͜͠ͱɻ ࠓճར༻͢Δ΋ͷ
8. 4&4ʹΑΔ
   ϝʔϧૹ৴෦෼ )UNMͱ5FYUͷ྆ํΛࢦఆ͠ɺ Ϛϧνύʔτϝʔϧͱͯ͠ૹ৴ ͢Δɻ
   ˠ
   TFOE&NBJMؔ਺
   
9. 4&4ʹΑΔ
   ϝʔϧૹ৴෦෼ ొ࿥֬ೝϝʔϧͷ
   ιʔείʔυɻ ςΩετ )5.-
10. ͜͏ͳΔ )5.-൛ ςΩετ൛
11. w ίʔυ͕৭෼͚͞Εͳ͍
    w ίʔυิ׬΋ޮ͔ͳ͍
    w จࣈͰ΋ؒҧ͑ͨ࣌ʹ ؾ͚ͮͳ͍ ໰୊఺ ௕͍ʂݟʹ͍͘ʂ
12. 4WFMUFίϯϙʔωϯτͷग़൪💪
13. ͜Ε͕
14. ͜Ε͚ͩʹ
15. )5.-෦෼ͷ
    ίϯϙʔωϯτ ผϑΝΠϧʹ੾Γग़͠ɻ
    ˠMJCFNBJMUFNQMBUFIUNMTWFMUF MJCFNBJMUFNQMBUFIUNMTWFMUF
16. ςΩετ෦෼ͷ
    ίϯϙʔωϯτ ผϑΝΠϧʹ੾Γग़͠ɻ
    ˠMJCFNBJMUFNQMBUFUFYUUT MJCFNBJMUFNQMBUFUFYUUT
17. ίϯϙʔωϯτԽͷ લ ޙ
18. ݺͼग़͠ଆ SFOEFSؔ਺ͰεοΩϦʙ
19. SFOEFSؔ਺ͱ͸ʁ
20. 4WFMUFίϯϙʔωϯτΛαʔόʔଆͰϨϯμϦϯάͯ͠ɺ)5.-จࣈྻ ͱͯ͠ग़ྗͰ͖Δɻ SFOEFSؔ਺ͱ͸ SFOEFS࣮ߦ
21. αʔόʔଆͰͷΈ࢖༻Մೳɻ$MPVE fl BSF
    8PSLFSTͳͲͷΤοδ؀ڥͰ ಈ͘ͷ͔͸ෆ໌ɻ
    4WFMUFΛΠϯετʔϧ͢Ε͹෇͍ͯ͘Δɻ SFOEFSؔ਺ͱ͸
22. ୈҾ਺
    
    4WFMUFίϯϙʔωϯτ
    ୈҾ਺
    
    ͦͷίϯϙʔωϯτʹ౉͢QSPQTͷΦϒδΣΫτ SFOEFSؔ਺ͷ࢖͍ํ
23. DPOTU
    \
    IFBE
    CPEZ
    ^
    
    SFOEFS 4WFMUF$PNQPOFOU
    \
    
    ^ 
    
    IFBE
    
    ίϯϙʔωϯτ಺ͰTWFMUFIFBEΛ࢖͍ͬͯΔ࣌ͷΈɺ)5.-ʹ ͨ͠ࡍͷIFBEཁૉ಺͕ग़ྗ͞ΕΔɻ
    CPEZ
    
    )5.-ʹͨ͠ࡍͷCPEZཁૉ಺ɺجຊతʹͪ͜ΒΛ࢖͏ɻ SFOEFSؔ਺ͷ໭Γ஋
24. SFOEFSؔ਺େ޷͖ʂ ΋ͬͱ஌໊౓্͕ͬͯ΄͍͠
25. (JU)VC
    
    LVSBDIJXFCNKNMTWFMUFIUNMFNBJM ιʔείʔυ
26. )5.-ϝʔϧͷ࢖༻཰͸೥ʑߴ͘ͳ͍ͬͯΔ ࢓ࣄͰϝʔϧͷૹड৴ʹ࢖༻͍ͯ͠Δܗࣜ
    ೔ຊϏδωεϝʔϧڠձɺ ೥
    /   ೥
    /   ೥
    /   ೥
    /   ೥
    /   ೥
    /   ೥
    /   ೥
    /   ೥
    /   ೥
    /                                 ςΩετܗࣜ )5.-ܗࣜɾϦονςΩετܗࣜ ෼͔Βͳ͍
27. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ