Upgrade to Pro — share decks privately, control downloads, hide ads and more …

s2s

akameco
December 14, 2017

 s2s

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

akameco

December 14, 2017
Tweet

More Decks by akameco

Other Decks in Technology

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