Planning for next syntagme.js #gotandajs

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

Transcript

1. Planning for next syntagmejs 2017/07/14 Gotanda.js #8 @mizuki_r
2. @mizuki_r • シニアフロントエンドエンジニア • エンジニア 2 #javascript #gotandajs #meguroes #perl #kichijojipm 五反田のM社で位置ゲー開発に携わる。
 最近まじでJSどころかコードをほとん ど書いてない生活。 about me こんな人です
3. 本日のお題
4. 最近コード書いてないな… (´・ω・｀)
5. なんか書くか (´・ω・｀)
6. … (´・ω・｀)
7. なに書こう… (´・ω・｀)
8. よし、なに書くか考えよう！ (๑•̀Ŷ•́๑)ｿﾚﾀﾞ!
9. SyntagmeJS アップデートを計画する話
10. SyntagmeJS
11. SyntagmeJSて？ • https://github.com/rymizuki/syntagmejs • ࣗ࡞ͷFluxϑϨʔϜϫʔΫ • 2016/04/27͔ΒฐࣾͰ࢖ͬͯ·͢
12. SyntagmeJSて？ • AngularJS(1.x)Ͱ΋࢖͑Δ • Vueͱ͔ʹ΋Ҡ২͠΍͍͢ • reduxΛઆ໌͢Δͷ͕ΊΜͲ͍ • fluxͷงғؾ஌ͬͯΕ͹ͳΜͱͳ͘࢖͑Δ
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 } }) })
14. 1年運用してみて
15. 思うところ • reducer…? • ac…? • ͦΕͳΜͰactionCreatorͰॻ͘ͷʁ • ͦΕͳΜͰreducerͰॻ͘ͷʁ
16. 思うところ • fluxͷ֓ཁ͸஌͍ͬͯͯ΋ɺ࣮ࡍॻ͜͏ͱ͢ Δͱʮ͋Εʁʯʮ͓΍ʁʯͱͳΔ…
17. 思うところ • reducerॻ͘ͷΊΜͲ͍ • actionCreatorͳͷ͔actionͳͷ͔Կͳͷ͔ • actionCreator͔Βreducer·ͰͷྲྀΕ͕Θ͔Γʹ͘ ͍ • action.typeͷtypoͭΒ
18. 改善したい！
19. 改善方針 • ߟ͑Δ࣌ؒͷ࡟ݮ • ॻ࣌ؒ͘ͷ࡟ݮ • σόοά࣌ؒͷ࡟ݮ
20. 考える時間の削減 • ·ͣ͸ɺԿʹ͕͔͔࣌ؒΔͷ͔ʁΛ஌Δ • UIΛ࡞ΔϑϩʔΛݟΔ • Α͘಄Λֻ͔ΔϙΠϯτͷ೺Ѳ
21. 考える時間を削減
22. 考える時間の削減 • ·ͣ͸ɺԿʹ͕͔͔࣌ؒΔͷ͔ʁΛ஌Δ • UIΛ࡞ΔϑϩʔΛݟΔ • Α͘಄Λֻ͔ΔϙΠϯτͷ೺Ѳ
23. UIを作るときのフロー • UIͱը໘ભҠΛϖʔύʔϓϩτ • ͜ͷஈ֊ͰϢʔβ͕Ͳ͏͍͏ʮߦಈʯΛΞϓϦͰߦ͏͔͕ચ͍ग़ͤΔ • HTMLʹ৘ใຒΊࠐΈɺը໘ભҠΛߏங • ஋͸ϕλͩͬͨΓಈతͩͬͨΓɺͱʹ͔͘ભҠͰ͖Δ͜ͱ͕ॏཁ • ΍Γͳ͕ΒreducerʹدͤΔ৘ใʹ໨੕Λ͚ͭͯ͘ • ભҠʹඞཁͳΞΫγϣϯΛ૊Έ࢝ΊΔ • ಈతͳσʔλΛreducerʹدͤΔ • stateʹ͋Δ΋ͷɺແ͍΋ͷ͔ΒAPIΛઃܭͨ͠Γ౎߹ͨ͠Γͯ͠actionCreatorͷ಺෦Λ ૊Ή • શମͷΞʔΩςΫνϟΛ੔͑Δ • actionCreatorͰAPI͔ΒσʔλΛड͚औΓɺreducerͰॲཧ͢Δ
24. syntagme的には • actionCreator͕ಡΈऔΓʹ͍͘ • Կʹରͯ͠ԿΛ͍ͯ͠Δͷ͔ • ߦಈͷϦετ͸ઌʹ࡞ΕΔͷʹɺ࣮૷͸ʮߦಈʯ ͷ಺༰͕ओମ • ؔ਺໊͕ͦ΋ͦ΋Θ͔Γʹ͍͘ • actionCreatorΛҙຯ͢Δacɺॲཧ͸ʮdispatchʯ • reducerɺॲཧ͸ʮregisterʯ
25. ならば、こうしよう • ΞϓϦʹରͯ͠ͷʮߦಈʯͰ͋Δ͜ͱΛࣔ͢ • app.action(‘FETCH’) Έ͍ͨͳ • ࣮ߦͱొ࿥ͷI/FΛ෼͚Δ • ໊ࢺͱಈࢺΛ࢖͍෼͚Δ • ໊ࢺ͸ʮregisterʯ • ಈࢺ͸ʮdispatchʯ
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' })
27. 書く時間の削減
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) } })
29. めんどくさい • switch-caseจ • (payload, state = {}) • _.defaults, Object.assign • ൓෮͞ΕΔίʔυ͕ଟ͍
30. 削ろう app.reducer({ FETCH ({ action }) { return { message: null } }, FETCH_RESOLVE ({ action }) { return { message: action.message } }, FETCH_REJECT ({ action }) { return { error: action.rejection } } })
31. デバッグ時間を削減
32. ハマりどころ • Τϥʔ΋ग़ͯͳ͍ͷʹԿނ͔State͕ߋ৽͞Ε ͳ͍ • app.ac(‘FETH’) ←͜͜Ͱtypo • case ‘FECH’ ← ͜͜Ͱtypo
33. 謎にハマるのは大体typo • dispatch, subscribeͰconsole.logు͍ͯΔ • devToolsԽ͠Α͏ͱͯ͠৺ંΕͨ • typoʹ͸ͳ͔ͳ͔ؾ͚ͮແ͍ • ͨ͘͞ΜActionు͍ͯΔ͠ • reducer΋ίʔυଟ͍͠ • TypeͷࣙॻΛ࡞Δͷ͸໘౗… • ໘౗(´ɾТɾʆ)
34. ぁあ〜 せめてどっちでtypoしてるの かさえわかれば〜〜
35. ん… まてよ…
36. app.action('FETCH')
37. validationできるじゃん！
38. まとめ
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' })
40. 今日のお話 • ࣗ࡞FluxϑϨʔϜϫʔΫͷվमͷ͓࿩Λ͠·ͨ͠ • ීஈߟ͑ͯΔ͚Ͳ͋·ΓݴޠԽͯ͠ͳ͍෦෼Λ ࿩ͯ͠Έͨ • ఻Θ͔ͬͨͳ…ʁ • ݁ہίʔυॻ͍ͯͶ͑ͷ͔Α͍ͬͯ͏
41. 今後の展望 • ͜ΕΛݩʹίʔυΛॻ͘ • ͍ͭͰʹlistenࣗಈԽ͍ͨ͠ • ࢠΠϯελϯε࡞ͬͯ࿈ܞͰ͖ΔΑ͏ʹ͍ͨ͠ • VuePluginͱ͔࡞Γ͍ͨ
42. ご清聴 ありがとうございました ＼＼\\(۶•̀ᴗ•́)۶//／／