Planning for next syntagme.js #gotandajs

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

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