2017/07/14 #gotandajsの発表資料です
Planning for nextsyntagmejs2017/07/14 Gotanda.js #8@mizuki_r
View Slide
@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ͱը໘ભҠΛϖʔύʔϓϩτ• ͜ͷஈ֊ͰϢʔβ͕Ͳ͏͍͏ʮߦಈʯΛΞϓϦͰߦ͏͔͕ચ͍ग़ͤΔ• 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ͱ͔࡞Γ͍ͨ
ご清聴ありがとうございました\\\\(۶•̀ᴗ•́)۶////