Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
フロントエンドの秩序は保たれているか?
masawada
July 12, 2017
Technology
0
3.7k
フロントエンドの秩序は保たれているか?
Hatena Engineer Seminar #8
https://connpass.com/event/60276/
masawada
July 12, 2017
Tweet
Share
More Decks by masawada
See All by masawada
よりよいレビュー環境を求めて / A code review odyssey
masawada
0
2.6k
Getting Started with ScratchX
masawada
0
500
GyaPC::Asia Tokyo 2015 LT
masawada
0
1.2k
Privileged Apps with Vue.js
masawada
0
130
Chikubeam
masawada
1
1.2k
Git講習 2014.04.15
masawada
1
290
Hack U at UEC 2014.03.27
masawada
0
1.3k
Firefox OS勉強会 4th Untitled
masawada
0
1k
C Lecture 2013.09.19
masawada
0
120
Other Decks in Technology
See All in Technology
5分で完全理解するGoのiota
uji
3
2.1k
AWS CLI入門_20220513
suzakiyoshito
0
3.8k
JAWS-UG 朝会 #33 登壇資料
takakuni
0
380
jaws-ug-asa-datasync-20220510
hiashisan
0
480
AWS Control TowerとAWS Organizationsを活用した組織におけるセキュリティ設定
fu3ak1
2
630
Team building programs for Engineering Team at Torana, Inc
memory1994
PRO
0
120
runn is a package/tool for running operations following a scenario. / golang.tokyo #32
k1low
1
160
エンジニアと気軽に繋がれるプラットフォーム「ハッカー飯」で行った セキュリティ・モニタリングに関する取り組みについて
nobuakikikuchi
0
350
実験!カオスエンジニアリング / How to Chaos Engineering
oracle4engineer
PRO
0
140
srenext2022-skaru
mixi_engineers
1
520
SRE_チーム立ち上げから1年_気づいたら_SRE_っぽくない仕事まで貢献しちゃってる説
bitkey
PRO
0
2.1k
LINE WORKS API 2.0について
mmclsntr
0
110
Featured
See All Featured
Design by the Numbers
sachag
271
17k
Embracing the Ebb and Flow
colly
73
3.3k
Become a Pro
speakerdeck
PRO
3
780
KATA
mclloyd
7
8.6k
The Art of Programming - Codeland 2020
erikaheidi
31
5.8k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
125
8.5k
Web Components: a chance to create the future
zenorocha
303
40k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Designing for humans not robots
tammielis
241
23k
Teambox: Starting and Learning
jrom
121
7.6k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
The Power of CSS Pseudo Elements
geoffreycrofte
46
3.9k
Transcript
IS THE ORDER MAINTAINED? ϑϩϯτΤϯυͷடং อͨΕ͍ͯΔ͔ʁ @masawada
id:masawada
None
ࠓ͙͢ొʂ IUUQCMPHIBUFOBOFKQSFHJTUFS !!!!!!!!!!!!!! !!!!!!!!!!!!!! !!!!!!!!!!!!!!! !!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!!! !!!!!!!!!!!!!!! !!!!!!!!!!!!!!!
None
ͯͳϒϩά प
ख़͞Εͨ +4ίʔυ܈
/PEFֶԂࡇͰͷൃද
,ZPUPKTͰͷൃද
ࠓ͜ΕҎ߱ ͷ͜ͱΛ͠· ͢ʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
ͷલʹ
લճ·Ͱͷ ͋Β͢͡
+4ͷׂ w ݹ͖ྑ͖DPODBU͔ΒCSPXTFSJGZʹ w Ұ෦ͷϑΝΠϧߦ͘Β͍͋ͬͨʜ w ˠߦʹ
None
$*ͰςετΛճ͢ w ͪΌΜͱϏϧυͰ͖Δ͔ w &4-JOUͰνΣοΫ w Ϣχοτςετ
$*ͰςετΛճ͢ +4ςετͷ࣮ߦ݁Ռ
OQNΞοϓσʔτσʔͷಋೖ w ຖ݄ୈҰ݄༵Λ OQNΞοϓσʔτσʔʹ w ಉ࣌ʹ/PEFKTͷΞοϓσʔτ ߦͳ͏
OQNΞοϓσʔτσʔͷಋೖ
ΦϨΦϨ'MVYΛ3FEVYʹدͤΔ w ͜Ε·ͰಠࣗܰྔϥΠϒϥϦͰ 'MVY w 3FBDU'MVYք۾ͷ͕ࣝඞཁ w νʔϜͷΤϯδχΞʹ ϑϩϯτΤϯυઐډͳ͍
ΦϨΦϨ'MVYΛ3FEVYʹدͤΔ w ಠࣗ'MVY࣮ΛϦϑΝΫλϦϯά w 3FEVYΞʔΩςΫνϟʹ͚ۙͮΔ w 3FEVYΘͳ͍
·ͩ·ͩ ൃల్্
ࠓޙͷվળʹඞཁͳͷ w νʔϜϝϯόʔͱͷ૬ஊ w ࣮ํ๏ͷυΩϡϝϯτԽ w
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
ͱ͜Ζ͕
None
None
ࠓ͢͜ͱ
݄·Ͱʹͬͨ͜ͱ w ࠷৽ใΛΩϟονΞοϓ͢Δ ମ੍Λ͑Δ w ςετվળ w OQNΞοϓσʔτσʔͷഇࢭ w 3FBDUͷར༻ൣғΛ͛Δ
Mission 1: INPUT & OUTPUT
+4൪ෆࡏ
࠷৽ใͷऩूͱڞ༗ w ऩू w ϑϩϯτΤϯυϥϯν w ࣾ֎ަྲྀ w ڞ༗ w
υΩϡϝϯτͷඋ w '8(ͷ։࠵ ݱࡏഇࢭ
υΩϡϝϯτͷඋ Ҿ͖ܧ͗
υΩϡϝϯτͷඋ Ҿ͖ܧ͗ w ٧·ΓͲ͜ΖΛͳ͘͢ w ࢦͷڞ༗ w ελΠϧͷࢦఠͳͲ&4-JOUʹͤΔ
υΩϡϝϯτͷඋ Ҿ͖ܧ͗
'8(ͷ։࠵
'8(ͱ w ϑϩϯτΤϯυϫʔΩϯάάϧʔϓ w ϑϩϯτΤϯυʹؔ͢Δ Α͠ͳ͠͝ͱΛ͠߹͏ w 18(ͱซ࠵
18(ͱ w ύϑΥʔϚϯεϫʔΩϯάάϧʔϓ w ΠϯϑϥपΓͷ༷ࢠΛఆظతʹ؍ w ରԠ͕ඞཁͰ͋Ε *TTVFͷ༏ઌΛ্͛ΒΕΔ
18(ͱ
None
1BHF4QFFE*OTJHIUT
'8( w Ұϲ݄͝ͱ։࠵ w ৽ͨʹಋೖٕͨ͠ज़Λࣗຫ w ࠔΓ͝ͱΛڞ༗ w ͷʹΑͬͯ༏ઌΛ্͛Δ
'8(
'8( w ࠷ۙഇࢭ͞Ε·ͨ͠ w ͋Δఔҙࣝͷڞ༗͕Ͱ͖ͨ w ใڞ༗ࣾάϧʔϓ PSJTTVF Ͱ
IMPROVE THE TEST ENVIRONMENT Mission 2:
ςετڥͷվળ w 'MPXಋೖ w QPXFSBTTFSUಋೖ w &O[ZNFಋೖ
QPXFSBTTFSU CBCFMQMVHJOFNQPXFSBTTFSU
QPXFSBTTFSU require(‘assert’); ↓ require(‘power-assert’); উखʹஔ͖͑ͯ͘ΕΔ
&O[ZNF 3FBDU$PNQPOFOUͷ ςετ͍͍ײ͡ʹ ॻ͚ΔΑ͏ʹ͢Δͭ
None
ςετڥͷվળ w ςετΛॻ͖͍͢ڥΛ࡞Δ w ϨϏϡʔΑΓલʹؒҧ͍ʹ ؾ͚ΔڥΛ࡞Δ w ࡉ͔͘ೖΕ͍ͯํΛνʔϜʹڞ༗
Mission 3: MODULE UPDATING STRATEGY
OQNΞοϓσʔτσʔͷಋೖ
OQNΞοϓσʔτσʔͭΒ͍ w $)"/(&-0(Λ୳͢ͷʹ͕͔͔࣌ؒΔ w ࡞ۀऀʹϨϏϡΞʔʹෛ୲͕͔͔Δ w ϨϏϡʔࣗମʹख͕͔͔ؒΔ w ຊʹҰϲ݄͝ͱʹΔͷͳͷ͔
w ͲΕ͘Β͍ͷϖʔεͰݹͼ͍ͯ͘ͷ͔Γ͍ͨ
ZBSOPVUEBUFEGPSNBUUFS
$ yarn outdated --json
ZBSOPVUEBUFEGPSNBUUFS w $)"/(&-0(Λ.BSLEPXOʹؚΊͯग़ྗ w ύοέʔδͱ$)"/(&-0(ͷରΛ :".-ʹอଘ w .BDLFSFMʹݹ͍ύοέʔδΛߘͰ͖Δ w ແࢹ͢ΔϑΝΠϧΛࢦఆͰ͖Δ
w K2VFSZͷΞοϓσʔτͳͲ͚͍ͨ
None
None
IUUQEFWFMPQFSIBUFOBTUB⒎DPNFOUSZ
'"2 2(SFFOLFFQFSݕ౼ͨ͠
'"2 "ͯ͠·ͤΜ
(SFFOLFFQFS w ͢Έ·ͤΜΒͳ͔ͬͨ w ݕ౼ͯ͠Θͳ͔͔ͬͨͳɺɺ w ϒϩάͰ(JU)VC&OUFSQSJTFΛ͍ͬͯͯ ؾܰʹ͓ࢼ͠Ͱ͖ͳͦ͞͏ w ZBSOPVUEBUFEGPSNBUUFS͘Β͍ͳΒ
ίετ গͳͯ͘Ͱ͖Δ
Mission 4: REACTIZE VIEW
कΓ
߈Ί
3FBDUBTB5FNQMBUF&OHJOF
3FBDUBTB5FNQMBUF&OHJOF w 9TMBUFͷ55FSTFΛ͍ͬͯΔ w 1FSMͷςϯϓϨʔτΤϯδϯ w ૉ
[% IF element.selected %] class=“active” [% END %] 3FBDUBTB5FNQMBUF&OHJOF
3FBDUBTB5FNQMBUF&OHJOF 3FBDUʹدͤΔ
3FBDUBTB5FNQMBUF&OHJOF w 1FSM • $r->embed_state(‘pro’, $json) w +BWB4DSJQU • const
state = InitialState.get(‘pro’)
None
None
None
None
3FBDUBTB5FNQMBUF&OHJOF 2443͠ͳ͍ͷ
3FBDUBTB5FNQMBUF&OHJOF "ݱঢ়Ͱ443ʹ͢Δ ϝϦοτΛݟੵ͍ͬͯͳ͍
1FSMPO3FBDUPO443 w ·ͩେʑతʹਐΊ͍ͯΔΘ͚Ͱͳ͍ w ͦͦ1FSMͰ443ͷ࣮͕গͳ͍ w ఫୀՄೳͳܗͰਐΊ͍ͯΔ
IS THE ORDER MAINTAINED? ϑϩϯτΤϯυͷடং อͨΕ͍ͯΔ͔ʁ @masawada
ࠓͨ͜͠ͱ w +4൪͕͍ͳ͍͚ͯͬͯ͘Δ νʔϜͮ͘Γ w ςετ͕ॻ͖͍͢ྑ͘ͳ͍͕ ͔Γ͍͢ڥͮ͘Γ w ৽ͨͳ͜ͱΛ͢Δͱ͖ఫୀ͘͢͠
ͨΓલͷ͜ͱ Λॗʑͱͬͯ ͍͘εϐϦοτ
·ͩ·ͩ Δ՝
ࠓޙΓ͍ͨ w ͞ΒͳΔςετվળ w 1IBOUPN+4ग़ w &&ςετ$*Ͱճ͢ w υΩϡϝϯτͷߋ৽
ಓʹվળΛଓ ͚͍ͯͧ͘ʂʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠