s2s

12/14 Nihonbashi.js #3 100star以下限定！細かすぎて伝わらない自作ライブラリ選手権。

Transcript

1. s2s
   Source to Source
   

   View Slide

2. GitHubͰs2sͱ
   ݕࡧ͢Δͱग़͖ͯ·͢
   https://github.com/
   akameco/s2s
   

   View Slide

3. ͸͡Ίʹ
   

   View Slide

4. Atomͱ
   teletypeΛ࢖͍·͢ɻ
   ؀ڥ͕͋Δਓ͸
   ४උΛ͍ͯͩ͘͠͞
   

   View Slide

5. ߏ੒
   • ࣗݾ঺հ
   • σϞ 3෼
   • എܠ
   • ࢓૊Έ
   • ͦͷଞ
   • ϑΟʔυόοΫ 1෼
   

   View Slide

6. ࣗݾ঺հ
   • ͔͋Ί( @akameco )
   • ઌ݄༑ਓୡͱϨόχϥΛ৯΂
   ʹߦͬͨΒશһ΢Πϧεੑң
   ௎ԌͰ2िؒμ΢ϯ͠·ͨ͠
   • ਐḿΛग़͢ʹ͸ԿΑΓ΋݈߁
   ͕ඞཁͩͱΘ͔Γ·ͨ͠
   

   View Slide

7. ޱ಄Ͱઆ໌͢ΔΑΓ
   ݟͯ΋Β͏ํ͕
   ଎͍ͱࢥ͍·͢ͷͰɺ
   ·ͣσϞ(3෼ఔ౓)Λ͠·͢
   

   View Slide

8. AtomͷteletypeΛ࢖࣮ͬͯ
   ࡍʹίʔσΟϯά͠·͢
   Atom؀ڥ͕ͳ͍ํ͸ը໘ͷํͰ
   ·ͨɺಈ࡞͕΋ͬ͞Γͨ͠Β࿈ܞΛ੾Γ·͢
   

   View Slide

9. https://youtu.be/
   hPR0SCaz-Wg
   

   View Slide

10. എܠ
    • reduxϘΠϥʔϓϨʔτ͕ଟ͍໰୊ɻ
    • ͔͠͠อकతͳ؍఺ͰϚΫϩతͳղܾΛͨ͠
    ͘ͳ͍(Ϗϧυ࣌babelplugin౳)
    • ୹͘ॻͨ͘Ί͚ͩʹ͍ͭෆཁʹͳΔ͔Θ͔Β
    ͳ͍ϥΠϒϥϦΛಋೖͨ͘͠ͳ͍
    

    View Slide

11. Ͱ͸ɺͲ͏͢Δ͔ʁ
    • ࠓ͋Δ࣮૷ͷ··ɺߴ଎ʹॻ͘
    • ਓؒͰ͸ݶք͕͋ΔɺϓϩάϥϜʹΑͬͯϓϩάϥϜ
    Λॻ͘
    • ͜ΕΛίʔσΟϯάλΠϜίϯύΠϧͱ໋໊ͨ͠
    • ͜ͷ͋ͨΓ͸͜ͷεϥΠυ͕೤͍ͷͰΦεεϝͰ͢ ”͜Ε͔Βͷϝλϓ
    ϩάϥϛϯάJavaScriptͷਖ਼ٛΛޠΖ͏” by erukiti ͞Μ https://
    speakerdeck.com/erukiti/meta-programming-javascript-is-justice
    

    View Slide

12. ਎ۙͳΠϝʔδͩͱs2s͸fateͰ͍͏ͱ͜Ζͷ
    ౤Өຐज़Ͱ͢
    

    View Slide

13. ར఺
    • ΤσΟλͷϓϥάΠϯͰ͸ͳ͍ͨΊ؀ڥͷϩοΫΠ
    ϯ͕ͳ͍
    • λΠϙ͕ݮΔ
    • มߋʹڧ͍
    • s2sʹै͏ݶΓ୭͕ॻ͍ͯ΋ಉ͡ग़ྗʹͳΔ
    • ίʔσΟϯάͷߴ଎ԽͰ͔͠ͳ͍ͨΊs2sࣗମΛ͍ͭ
    Ͱ΋ࣺͯΒΕΔ
    

    View Slide

14. ࢓૊Έ
    

    View Slide

15. v0.1~
    

    View Slide

16. typescriptʹ΋ରԠͯ͠΄͍͠
    

    View Slide

17. ϋϯυϥʔ
    ϑοΫ(੔ܗ)
    v0.14~ݱࡏ
    

    View Slide

18. ϋϯυϥʔΛಋೖ
    

    View Slide

19. ϋϯυϥʔΛಋೖ
    • ίʔυΛड͚औͬͯίʔυΛฦ͢ͱ͍͏৚݅Λຬ
    ͨؔ͢਺Ͱ͋Ε͹ԿͰ΋͍͍
    • σϑΥϧτͰ͸ɺjsͩͬͨΒBabel͕࣮ߦ͞Εɺts
    ͩͬͨΒBabel7+TypeScriptPlugin͕࣮ߦ͞ΕΔ
    • ͜ΕʹΑͬͯɺ࣮ࡍͲΜͳϑΝΠϧͰ͋ΕίʔσΟ
    ϯά࣌ʹॲཧ͕Մೳʹͳͬͨ(md,css,html,...)
    

    View Slide

20. Hookʹ͍ͭͯ
    • ͳͥ͜ͷඞཁ͕͋Δ͔ͱ͍͏ͱBabelͷग़ྗ͸σ
    ϑΥϧτͰμϒϧίʔςʔγϣϯͩͬͨΓɺηϛί
    ϩϯ͕෇͍ͯͨΓ͢Δ͔Β
    • ओʹίʔυΛग़ྗͨ͠ޙͷ੔ܗΛߦ͏
    • σϑΥϧτͰ͸prettierɻϓϩδΣΫτͷrcʹै͏
    • ઌ೔tslintʹ΋ରԠ by kamijin-fanta ͞Μ
    

    View Slide

21. ϓϩδΣΫτʹͲ͏ಋೖ͢Δ͔ʁ
    • ࣗ෼ͷϓϩδΣΫτʹಠࣗͷϓϥάΠϯΛಋೖ͍ͨ͠৔߹ɺ৽ͨʹ
    ϓϥάΠϯΛެ։͢Δඞཁ͸ͳ͘ɺs2s.config.js͔Β૬ରతʹ
    requireͰ͖Δ
    • ྫ͑͹ erukiti͞Μͷ https://github.com/erukiti/spike-react-redux-
    using-s2s Ͱ͸scriptsσΟϨΫτϦҎԼʹϓϥάΠϯΛ഑ஔͯ͠ར
    ༻͍ͯ͠Δ
    

    View Slide

22. ͪΐ͏Ͳ͍͍νϡʔτϦΞϧ͸ʁ
    • cndlhvn ͞Μͷhttps://github.com/cndlhvn/s2s-redux-actions-
    sample ͕Φεεϝ (redux-saga + redux-actions)
    • ਖ਼௚ެࣜͷ100ഒ͙Β͍ஸೡͳreadme͕༻ҙͯ͋͠Γެࣜͷα
    ϯϓϧΑΓΦεεϝ
    • ͦͯ͠ؾ͍ͮͨͱ͖ʹ͸ࣗ෼ΑΓcndlhvn͞Μͷํ͕s2s-plugin
    Λެ։ͯͨ͠
    • ৽͘͠ManagerPluginͱݺ͹ΕΔ֓೦Λಋೖ͍ͯͯ͠໘ന͍
    

    View Slide

23. ·ͱΊ
    

    View Slide

24. ࣭໰΋ͱ͍
    ϑΟʔυόοΫλΠϜ
    

    View Slide

25. ࠓճͷΦν
    teletypeΛ࢖ͬͯσϞ͢Δ͜ͱͰɺAtom
    ʹϩοΫΠϯ͢Δ͜ͱͰ؀ڥʹϩοΫΠ
    ϯ͞ΕΔ͜ͱ͸Ͳ͏͍͏͜ͱ͔Λ࣮ԋ͠
    ͯΈ·ͨ͠
    s2sʹ͸ϩοΫΠϯ͸͋Γ·ͤΜΑʁ
    Ͳ͏΋͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide