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

Planning for next syntagme.js #gotandajs

Planning for next syntagme.js #gotandajs

2017/07/14 #gotandajsの発表資料です

mizuki_r

July 14, 2017
Tweet

More Decks by mizuki_r

Other Decks in Technology

Transcript

  1. Planning for next
    syntagmejs
    2017/07/14 Gotanda.js #8
    @mizuki_r

    View Slide

  2. @mizuki_r
    • シニアフロントエンドエンジニア
    • エンジニア
    2
    #javascript #gotandajs
    #meguroes #perl #kichijojipm
    五反田のM社で位置ゲー開発に携わる。

    最近まじでJSどころかコードをほとん
    ど書いてない生活。
    about me
    こんな人です

    View Slide

  3. 本日のお題

    View Slide

  4. 最近コード書いてないな…
    (´・ω・`)

    View Slide

  5. なんか書くか
    (´・ω・`)

    View Slide


  6. (´・ω・`)

    View Slide

  7. なに書こう…
    (´・ω・`)

    View Slide

  8. よし、なに書くか考えよう!
    (๑•̀Ŷ•́๑)ソレダ!

    View Slide

  9. SyntagmeJS
    アップデートを計画する話

    View Slide

  10. SyntagmeJS

    View Slide

  11. SyntagmeJSて?
    • https://github.com/rymizuki/syntagmejs
    • ࣗ࡞ͷFluxϑϨʔϜϫʔΫ
    • 2016/04/27͔ΒฐࣾͰ࢖ͬͯ·͢

    View Slide

  12. SyntagmeJSて?
    • AngularJS(1.x)Ͱ΋࢖͑Δ
    • Vueͱ͔ʹ΋Ҡ২͠΍͍͢
    • reduxΛઆ໌͢Δͷ͕ΊΜͲ͍
    • fluxͷงғؾ஌ͬͯΕ͹ͳΜͱͳ͘࢖͑Δ

    View Slide

  13. const app = syntagme()
    app.reducer(({ action }, state = {}) => {
    switch (actio.type) {
    case 'FETCH':
    return _.defaults({ message: null }, state)
    case 'FETCH_RESOLVE':
    return _.defaults({ message: action.message }, state)
    case 'FETCH_REJECT':
    return _.defaults({ error: action.rejection }, state)
    }
    })
    app.listen()
    app.subscribe((state) => {
    console.log('state', state)
    })
    app.ac('FETCH', () => {
    return http.get('/api/messages/greeting')
    .then(({ body }) => { return { message: body.message } })
    })

    View Slide

  14. 1年運用してみて

    View Slide

  15. 思うところ
    • reducer…?
    • ac…?
    • ͦΕͳΜͰactionCreatorͰॻ͘ͷʁ
    • ͦΕͳΜͰreducerͰॻ͘ͷʁ

    View Slide

  16. 思うところ
    • fluxͷ֓ཁ͸஌͍ͬͯͯ΋ɺ࣮ࡍॻ͜͏ͱ͢
    Δͱʮ͋Εʁʯʮ͓΍ʁʯͱͳΔ…

    View Slide

  17. 思うところ
    • reducerॻ͘ͷΊΜͲ͍
    • actionCreatorͳͷ͔actionͳͷ͔Կͳͷ͔
    • actionCreator͔Βreducer·ͰͷྲྀΕ͕Θ͔Γʹ͘
    ͍
    • action.typeͷtypoͭΒ

    View Slide

  18. 改善したい!

    View Slide

  19. 改善方針
    • ߟ͑Δ࣌ؒͷ࡟ݮ
    • ॻ࣌ؒ͘ͷ࡟ݮ
    • σόοά࣌ؒͷ࡟ݮ

    View Slide

  20. 考える時間の削減
    • ·ͣ͸ɺԿʹ͕͔͔࣌ؒΔͷ͔ʁΛ஌Δ
    • UIΛ࡞ΔϑϩʔΛݟΔ
    • Α͘಄Λֻ͔ΔϙΠϯτͷ೺Ѳ

    View Slide

  21. 考える時間を削減

    View Slide

  22. 考える時間の削減
    • ·ͣ͸ɺԿʹ͕͔͔࣌ؒΔͷ͔ʁΛ஌Δ
    • UIΛ࡞ΔϑϩʔΛݟΔ
    • Α͘಄Λֻ͔ΔϙΠϯτͷ೺Ѳ

    View Slide

  23. UIを作るときのフロー
    • UIͱը໘ભҠΛϖʔύʔϓϩτ
    • ͜ͷஈ֊ͰϢʔβ͕Ͳ͏͍͏ʮߦಈʯΛΞϓϦͰߦ͏͔͕ચ͍ग़ͤΔ
    • HTMLʹ৘ใຒΊࠐΈɺը໘ભҠΛߏங
    • ஋͸ϕλͩͬͨΓಈతͩͬͨΓɺͱʹ͔͘ભҠͰ͖Δ͜ͱ͕ॏཁ
    • ΍Γͳ͕ΒreducerʹدͤΔ৘ใʹ໨੕Λ͚ͭͯ͘
    • ભҠʹඞཁͳΞΫγϣϯΛ૊Έ࢝ΊΔ
    • ಈతͳσʔλΛreducerʹدͤΔ
    • stateʹ͋Δ΋ͷɺແ͍΋ͷ͔ΒAPIΛઃܭͨ͠Γ౎߹ͨ͠Γͯ͠actionCreatorͷ಺෦Λ
    ૊Ή
    • શମͷΞʔΩςΫνϟΛ੔͑Δ
    • actionCreatorͰAPI͔ΒσʔλΛड͚औΓɺreducerͰॲཧ͢Δ

    View Slide

  24. syntagme的には
    • actionCreator͕ಡΈऔΓʹ͍͘
    • Կʹରͯ͠ԿΛ͍ͯ͠Δͷ͔
    • ߦಈͷϦετ͸ઌʹ࡞ΕΔͷʹɺ࣮૷͸ʮߦಈʯ
    ͷ಺༰͕ओମ
    • ؔ਺໊͕ͦ΋ͦ΋Θ͔Γʹ͍͘
    • actionCreatorΛҙຯ͢Δacɺॲཧ͸ʮdispatchʯ
    • reducerɺॲཧ͸ʮregisterʯ

    View Slide

  25. ならば、こうしよう
    • ΞϓϦʹରͯ͠ͷʮߦಈʯͰ͋Δ͜ͱΛࣔ͢
    • app.action(‘FETCH’) Έ͍ͨͳ
    • ࣮ߦͱొ࿥ͷI/FΛ෼͚Δ
    • ໊ࢺͱಈࢺΛ࢖͍෼͚Δ
    • ໊ࢺ͸ʮregisterʯ
    • ಈࢺ͸ʮdispatchʯ

    View Slide

  26. そして、こうなる
    app.actionCreator('FETCH', ({ key }) => {
    return http.get(`/api/messages/${ key }`)
    .then(({ body }) => { return { message: body.message } })
    })
    app.reducer(({ action }, state = {}) => {
    switch (actio.type) {
    case 'FETCH':
    return _.defaults({ message: null }, state)
    case 'FETCH_RESOLVE':
    return _.defaults({ message: action.message }, state)
    case 'FETCH_REJECT':
    return _.defaults({ error: action.rejection }, state)
    }
    })
    app.listen()
    app.action('FETCH', { key: 'greeting' })

    View Slide

  27. 書く時間の削減

    View Slide

  28. いま
    app.reducer(({ action }, state = {}) => {
    switch (actio.type) {
    case 'FETCH':
    return _.defaults({ message: null }, state)
    case 'FETCH_RESOLVE':
    return _.defaults({ message: action.message }, state)
    case 'FETCH_REJECT':
    return _.defaults({ error: action.rejection }, state)
    }
    })

    View Slide

  29. めんどくさい
    • switch-caseจ
    • (payload, state = {})
    • _.defaults, Object.assign
    • ൓෮͞ΕΔίʔυ͕ଟ͍

    View Slide

  30. 削ろう
    app.reducer({
    FETCH ({ action }) { return { message: null } },
    FETCH_RESOLVE ({ action }) { return { message: action.message } },
    FETCH_REJECT ({ action }) { return { error: action.rejection } }
    })

    View Slide

  31. デバッグ時間を削減

    View Slide

  32. ハマりどころ
    • Τϥʔ΋ग़ͯͳ͍ͷʹԿނ͔State͕ߋ৽͞Ε
    ͳ͍
    • app.ac(‘FETH’) ←͜͜Ͱtypo
    • case ‘FECH’ ← ͜͜Ͱtypo

    View Slide

  33. 謎にハマるのは大体typo
    • dispatch, subscribeͰconsole.logు͍ͯΔ
    • devToolsԽ͠Α͏ͱͯ͠৺ંΕͨ
    • typoʹ͸ͳ͔ͳ͔ؾ͚ͮແ͍
    • ͨ͘͞ΜActionు͍ͯΔ͠
    • reducer΋ίʔυଟ͍͠
    • TypeͷࣙॻΛ࡞Δͷ͸໘౗…
    • ໘౗(´ɾТɾʆ)

    View Slide

  34. ぁあ〜
    せめてどっちでtypoしてるの
    かさえわかれば〜〜

    View Slide

  35. ん… まてよ…

    View Slide

  36. app.action('FETCH')

    View Slide

  37. validationできるじゃん!

    View Slide

  38. まとめ

    View Slide

  39. こんな感じになりました
    const app = syntagme()

    app.actionCreator('FETCH', ({ key }) => {
    return http.get(`/api/messages/${ key }`)
    .then(({ body }) => { return { message: body.message } })
    })
    app.reducer({
    FETCH ({ action }) { return { message: null } },
    FETCH_RESOLVE ({ action }) { return { message: action.message } },
    FETCH_REJECT ({ action }) { return { error: action.rejection } },
    })
    app.listen()
    app.subscribe((state) => {
    console.log('state', state)
    })
    app.action('FETCH', { key: 'greeting' })

    View Slide

  40. 今日のお話
    • ࣗ࡞FluxϑϨʔϜϫʔΫͷվमͷ͓࿩Λ͠·ͨ͠
    • ීஈߟ͑ͯΔ͚Ͳ͋·ΓݴޠԽͯ͠ͳ͍෦෼Λ
    ࿩ͯ͠Έͨ
    • ఻Θ͔ͬͨͳ…ʁ
    • ݁ہίʔυॻ͍ͯͶ͑ͷ͔Α͍ͬͯ͏

    View Slide

  41. 今後の展望
    • ͜ΕΛݩʹίʔυΛॻ͘
    • ͍ͭͰʹlistenࣗಈԽ͍ͨ͠
    • ࢠΠϯελϯε࡞ͬͯ࿈ܞͰ͖ΔΑ͏ʹ͍ͨ͠
    • VuePluginͱ͔࡞Γ͍ͨ

    View Slide

  42. ご清聴
    ありがとうございました
    \\\\(۶•̀ᴗ•́)۶////

    View Slide