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

@mizuki_r • シニアフロントエンドエンジニア • エンジニア 2 #javascript #gotandajs #meguroes #perl #kichijojipm 五反田のM社で位置ゲー開発に携わる。
 最近まじでJSどころかコードをほとん ど書いてない生活。 about me こんな人です

本日のお題

最近コード書いてないな… (´・ω・｀)

なんか書くか (´・ω・｀)

… (´・ω・｀)

なに書こう… (´・ω・｀)

よし、なに書くか考えよう！ (๑•̀Ŷ•́๑)ｿﾚﾀﾞ!

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

SyntagmeJS

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

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

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 } }) })

1年運用してみて

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

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

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

改善したい！

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

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

考える時間を削減

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

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

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

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

そして、こうなる 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' })

書く時間の削減

いま 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) } })

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

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

デバッグ時間を削減

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

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

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

ん… まてよ…

app.action('FETCH')

validationできるじゃん！

まとめ

こんな感じになりました 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' })

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

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

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