SvelteでMacアプリを作りましょう！

My talk for Svelte Japan Online Meetup #1, "Let's make a Mac app using Svelte!".

Recorded here (starts at 52:11):
https://www.youtube.com/live/tCbAIWYKTSk?si=YmoonrSQ_zlzVSSt&t=3131

Transcript

1. SvelteͰMacΞϓϦΛ࡞Γ·͠ΐ͏ʂ Jamie Birch δΣΠϛʔ ό ʔ ν ໊ බ
2. όοΫάϥ΢ϯυ MacΞϓϦΛ࡞ΔࣦΘΕٕͨज़ • ݱࡏͷMacΞϓϦ͸ຆͲElectronͰͰ͖͍ͯΔʢ΢ΣϒɾϕʔεͷʣԽ͚෺ • ωΠςΟϒɾΞϓϦͱҧͬͯɺ஗ͯ͘ɺେ͖ͯɺ໨͟ΘΓ
3. ΋͏ΞϓϦΛωΠςΟϒʹ࡞Βͳ͍ͷ͔ʁ AppKitͰͰ͖͍ͯΔCotEditor
4. Ӭԕʹ ࠓͰ΋ωΠςΟϒɾΞϓϦΛʁ
5. ωΠςΟϒɾΞϓϦͷ࡞Γํ Xcode IDE Objective-C ݴޠ ʗ UIϑϨʔϜϫʔΫ AppKit UIKit SwiftUI iOS ❌ ✅ɹɹɹɹɹɹ macOS ✅ ɹ ✅ʢCatalystͰʣ ʗ ʗ
6. ࡞ͬͯΈΑ͏͔…
7. ໰୊ ωΠςΟϒɾΞϓϦΛ࡞Δͷ͸೉͍͠ • զʑ͸Svelte։ൃऀ • ωΠςΟϒͷੈք͕ා͍ • Ͳ͏͔SvelteͰMacΞϓϦΛ࡞ΕΔ͔ʁ
8. ࡞ΕΔΑ
9. SvelteͰωΠςΟϒɾΞϓϦΛ࡞Δํ๏ IDE VS Code ݴޠ ΢ΣϒɾϙϦϑΟϧ JSDOM Ϩϯμϥ UIϑϨʔϜϫʔΫ AppKit ͷ΢Σϒɾίϯϙʔωϯτ ֦ுػೳʢruntimeʣ όΠϯσΟϯά ଋറ Objective-Cͷ Ϣχοτɾςετɾ ϑϨʔϜϫʔΫͱಉ͡ʂ <ns-stackview> Obj-C: [[NSStackView alloc] init] ↪ JS: NSStackView.alloc().init()
10. ͪΐͬͱ଴ͬͯ
11. ఻तͯ͠΍Ζ͏
12. ࢥߟ࣮ݧ <button>ϩάΠϯ</button> ʢͳ͠ʣ
13. ࢥߟ࣮ݧ <ns-button title="ϩάΠϯ" /> ʢAppKit͕࢖͑ͳ͍͔Β࣮ݱͰ͖ͳ͍ʣ
14. UIΛߏங͢Δํ๏ • HTMLElementΛΤΫεςϯυ͢Δω ΠςΟϒɾϏϡʔΛͱΔϕʔεɾΫϥ εΛ࡞Δ • αϒΫϥεͰͦͷϏϡʔΛॳظԽ͢Δ • ͦΕͧΕͷDOM APIΛΦʔόʔϥΠ υ͢Δ • νϟΠϧυʹΑͬͯɺωΠςΟϒUIΛ ߏங͢Δ • ࠷ޙ͸ɺΤϨϝϯτΛొ࿥͢Δ
15. ଐੑΛ࣮ݱ͢Δํ๏ • UIπϦʔΛߏங͢Δ্ʹɺଐੑ Λެ։Ͱ͖Δ • औಘϝιουͰϓϩΩγ͢Δ • ͜͏΍ͬͯSvelteͷHTMLxͰ࢖ ͑Δ
18. ׂѪͨ͜͠ͱ • CSS • Πϕϯτॲཧ • Viteͷઃఆ • NativeScriptͷ͜ͱ • ଞͷϨϯμϥͷՄೳɿ UIKitɺCanvasɺOpenGLͱ͔ • …શ෦དྷ೥தΦʔϓϯιʔε͢Δ༧ఆʂ
19. ݁࿦ • Svelte͸DOM͑͋͞Ε͹ɺ׆ಈͰ͖Δ • ΧελϜɾΤϨϝϯτͰωΠςΟϒUIΛ࡞ΕΔ • ා͍APIΛSvelteʹมߋ͢Δͱ࢖͑΍͘͢ͳΔ
20. ϓϩϑΟʔϧ ౦ژ ͷ΢ΣϒɾΤϯδχΞ @LinguaBrowse @shirakaba ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ Jamie Birch δΣΠϛʔ ό ʔ ν ໊ බ