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
200
税理士ドットコムの 技術的挑戦 #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
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
200
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
240
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
130
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
0
140
Geospatialの世界最前線を探る [2025年版]
dayjournal
0
180
社内お問い合わせBotの仕組みと学び
nish01
1
530
Wasmのエコシステムを使った ツール作成方法
askua
0
100
三菱電機・ソニーグループ共同の「Agile Japan企業内サテライト」_2025
sony
0
120
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
570
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
78k
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
160
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Designing for Performance
lara
610
69k
Done Done
chrislema
185
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
For a Future-Friendly Web
brad_frost
180
9.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
900
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Navigating Team Friction
lara
189
15k
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ͱ͔࡞Γ͍ͨ
ご清聴 ありがとうございました \\\\(۶•̀ᴗ•́)۶////