Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Planning for next syntagme.js #gotandajs
Search
mizuki_r
July 14, 2017
Technology
0
400
Planning for next syntagme.js #gotandajs
2017/07/14 #gotandajsの発表資料です
mizuki_r
July 14, 2017
Tweet
Share
More Decks by mizuki_r
See All by mizuki_r
FrontendUp_新規事業で_Remixを採用した理由と対策.pdf
rymizuki
0
160
税理士ドットコムの 技術的挑戦 #tapioca_lt
rymizuki
0
270
PHPを始めて1年、レガシーシステムにどう向き合っているか #phpstudy
rymizuki
1
700
モダンとレガシー #gotandaem
rymizuki
0
550
Vuexに型を付けるパターンを調べた #gotandajs
rymizuki
0
120
DockerでNodeの開発は厳しいのか? #gotandajs
rymizuki
3
380
マネージャー!きみは何者だ! #gotandaem
rymizuki
0
1.7k
物語を楽しむための物語論
rymizuki
0
510
失敗と向き合う
rymizuki
0
1.4k
Other Decks in Technology
See All in Technology
Model Mondays S2E03: SLMs & Reasoning
nitya
0
350
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
350
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
210
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.6k
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
260
5min GuardDuty Extended Threat Detection EKS
takakuni
0
190
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
120
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
motoyoshi_kakaku
2
930
本が全く読めなかった過去の自分へ
genshun9
0
920
OPENLOGI Company Profile for engineer
hr01
1
34k
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
430
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6.8k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Optimizing for Happiness
mojombo
379
70k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Making Projects Easy
brettharned
116
6.3k
Scaling GitHub
holman
459
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
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ͱ͔࡞Γ͍ͨ
ご清聴 ありがとうございました \\\\(۶•̀ᴗ•́)۶////