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
210
税理士ドットコムの 技術的挑戦 #tapioca_lt
rymizuki
0
280
PHPを始めて1年、レガシーシステムにどう向き合っているか #phpstudy
rymizuki
1
740
モダンとレガシー #gotandaem
rymizuki
0
560
Vuexに型を付けるパターンを調べた #gotandajs
rymizuki
0
130
DockerでNodeの開発は厳しいのか? #gotandajs
rymizuki
3
390
マネージャー!きみは何者だ! #gotandaem
rymizuki
0
1.8k
物語を楽しむための物語論
rymizuki
0
520
失敗と向き合う
rymizuki
0
1.5k
Other Decks in Technology
See All in Technology
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
340
Railsの話をしよう
yahonda
0
160
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
220
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
110
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
950
Contract One Engineering Unit 紹介資料
sansan33
PRO
0
8.8k
20251010_HCCJP_AdaptiveCloudUpdates
sdosamut
0
140
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.7k
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
4.6k
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
CoRL 2025 Survey
harukiabe
1
210
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
Featured
See All Featured
Practical Orchestrator
shlominoach
190
11k
Automating Front-end Workflow
addyosmani
1371
200k
Producing Creativity
orderedlist
PRO
347
40k
Why Our Code Smells
bkeepers
PRO
340
57k
How to Think Like a Performance Engineer
csswizardry
27
2k
A Modern Web Designer's Workflow
chriscoyier
697
190k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Bash Introduction
62gerente
615
210k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
We Have a Design System, Now What?
morganepeng
53
7.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
A Tale of Four Properties
chriscoyier
161
23k
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ͱ͔࡞Γ͍ͨ
ご清聴 ありがとうございました \\\\(۶•̀ᴗ•́)۶////