Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

本日のお題

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

… (´・ω・`)

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

SyntagmeJS

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

1年運用してみて

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

改善したい!

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

考える時間を削減

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

書く時間の削減

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

デバッグ時間を削減

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

ん… まてよ…

Slide 36

Slide 36 text

app.action('FETCH')

Slide 37

Slide 37 text

validationできるじゃん!

Slide 38

Slide 38 text

まとめ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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