フロントエンドに秩序を取り戻す方法

by fand/amagitakayosi

Slide 1

Slide 1 text

RESTORE THE  ORDER ϑϩϯτΤϯυʹடংΛऔΓ໭͢ํ๏ @amagitakayosi

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

ૣޱͰ͍͖·͢

Slide 4

Slide 4 text

ࠓ೔࿩͞ͳ͍͜ͱ

Slide 5

Slide 5 text

࠷৽ϥΠϒϥϦͷ࢖͍ํ ࠷ߴʹඒ͍͠ઃܭ /PEFKTͷ࿩

Slide 6

Slide 6 text

ࠓ೔࿩͢͜ͱ

Slide 7

Slide 7 text

ϦϑΝΫλϦϯά ίʔυن໛ͱΞʔΩςΫνϟ ϑϨʔϜϫʔΫಋೖ ςετ؀ڥߏங

Slide 8

Slide 8 text

εϐϦοτ

Slide 9

Slide 9 text

@amagitakayosi

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

IUUQCMPHIBUFOBOFKQSFHJTUFS !!!!!!!!!! ࠓ͙͢ొ࿥ʂ !!!!!!!!!!! !!!!!!!!!! !!!!!!!!!! !!!!!!!!!!! !!!!!!!!!!

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

͜͜ʹ4प೥ͷਤΛషΔ 2015-11-07 ͸ͯͳϒϩά प೥

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

͜ͷτʔΫͰ͸ ฤूը໘ϦχϡʔΞϧʹ൐͏ +4େվ଄ͷ಺༰Λ ঺հ͠·͢ʂʂʂʂ

Slide 18

Slide 18 text

͸ͯͳϒϩάͷ ઃܭࢥ૝

Slide 19

Slide 19 text

ﬁrst commitͷը૾ΛషΔ ։ൃ։࢝

Slide 20

Slide 20 text

ͳΔ΂͘ബ͘ w 1FSM w 1MBDLϕʔε03.ͳ͠ w +4 w 7BOJMMB+4

Slide 21

Slide 21 text

http://www.slideshare.net/cho45/yapc-asia-2011 ࢀߟݩ૆ઃܭऀͷεϥΠυ

Slide 22

Slide 22 text

https://speakerdeck.com/hitode909/perlfalseshang- nimosan-nian-zututoiketerusabisuwozuo-risok-keruji-shu ࢀߟαʔόαΠυઃܭͷ࿩

Slide 23

Slide 23 text

Slide 24

Slide 24 text

+ ͦͯ͠4೥͕ܦաͨ͠……

Slide 25

Slide 25 text

໰୊ൃੜ

Slide 26

Slide 26 text

໰୊1 ڊେͳ ϑΝΠϧ

Slide 27

Slide 27 text

໰୊2 ౷Ұײͷͳ͍ ελΠϧ

Slide 28

Slide 28 text

໰୊3 ςετෆՄ

Slide 29

Slide 29 text

஍ಓʹվળ ͍ͯͧ͘͠ ʂʂʂʂʂ

Slide 30

Slide 30 text

SPLIT THE  CODE Mission 1:

Slide 31

Slide 31 text

͸ͯͳϒϩάͷJS w 5PUBMMJOFT ࣌఺ w ͦΜͳʹڊେͰ͸ͳ͍͕ʜʜ

Slide 32

Slide 32 text

admin-user-blog-edit.js ߦ ࣌఺

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

ฤूը໘ͷJS w GPSNΛ؅ཧ͢ΔΫϥε w ه๏͝ͱͷػೳ  8:4*8:( .BSLEPXO ͸ͯͳه๏ w αΠυόʔ౳ͷίϯϙʔωϯτ

Slide 35

Slide 35 text

ैདྷͷJS෼ׂ w ໊લۭؒͰϞδϡʔϧԽ w ϑΝΠϧΛDPODBUͯ͠഑৴

Slide 36

Slide 36 text

໊લۭؒ in JS w ϞδϡʔϧΛ0CKFDUʹ·ͱΊΔ w άϩʔόϧม਺ͷཞ༻Λආ͚Δ  ݹͷϕετϓϥΫςΟε

Slide 37

Slide 37 text

໊લۭؒΛ༻ҙͯ͠

Slide 38

Slide 38 text

໊લۭؒʹಥͬࠐΜͰ

Slide 39

Slide 39 text

JOEFYKT 'PPKT #BSKT

Slide 40

Slide 40 text

ฤूը໘ͷ+4 ෼ׂ͍ͨ͠ʜʜ

Slide 41

Slide 41 text

໰୊ൃੜ

Slide 42

Slide 42 text

ґଘؔ܎Ή͔͍ͣ͠ w DPODBUͷॱ൪ม͑ͨΒյΕΔ w ม਺໊Λม͑ΔͱյΕΔ

Slide 43

Slide 43 text

Foo͕ະఆٛͩͱ Τϥʔ

Slide 44

Slide 44 text

JOEFYKT 'PPKT #BSKT

Slide 45

Slide 45 text

JOEFYKT #BSKT 'PPKT

Slide 46

Slide 46 text

JOEFYKT #BSKT 'PPKT

Slide 47

Slide 47 text

ະఆٛͷม਺Λݕग़Ͱ͖ͳ͍

Slide 48

Slide 48 text

ະఆٛͷglobalม਺͸ lintͰνΣοΫͰ͖Δ͚Ͳ…… ະఆٛͷม਺Λݕग़Ͱ͖ͳ͍

Slide 49

Slide 49 text

໊લۭؒͷத͸ lintͰνΣοΫͰ͖ͳ͍ʂ ະఆٛͷม਺Λݕग़Ͱ͖ͳ͍

Slide 50

Slide 50 text

࣮ߦ͢Δ·Ͱ όά͕Θ͔Βͳ͍ʂ

Slide 51

Slide 51 text

DPODBUͭΒ͍ʜʜ

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

browserify w $PNNPO+4ܗࣜͰϞδϡʔϧΛ؅ཧ w ڝ߹ͱൺ΂ɺγϯϓϧʹ࢖͑Δ w 3FRVJSF+4ॻ͖ํ͕໘౗ w 8FCQBDLେ؋ڊ๒ओٛ

Slide 54

Slide 54 text

ґଘ؅ཧָ͕ʹͳΔ w DPODBUॱΛߟ͑ͳ͍Ͱྑ͍ w ଘࡏ͠ͳ͍ϑΝΠϧΛϩʔυ͢Δͱ  Τϥʔు͍ͯ͘ΕΔ

Slide 55

Slide 55 text

Ϗϧυ࣌ʹΤϥʔग़ͯ͘͠ΕΔʂ

Slide 56

Slide 56 text

browserifyಋೖ w ಋೖ։࢝ w গͣͭ͠$PNNPO+4ʹม׵ w Ϗϧυͨ͠+4Λ  طଘͷ+4ͱDPODBU

Slide 57

Slide 57 text

$PNNPO+4ܗࣜʹ ॻ͖௚ͯ͠

Slide 58

Slide 58 text

໊લۭؒʹͭͬ͜ΜͰ

Slide 59

Slide 59 text

ઓུ Ϗϧυͨ͠+4Λ ͜Ε·Ͱͷ+4ͱDPODBU Ϗϧυͨ͠+4 ͜Ε·Ͱͷ+4

Slide 60

Slide 60 text

མͱ݀͠

Slide 61

Slide 61 text

ڞ௨Խ͸ਖ਼͘͠ߦ͏

Slide 62

Slide 62 text

ڞ௨Խ͸ਖ਼͘͠ߦ͏

Slide 63

Slide 63 text

ڞ௨Խ͸ਖ਼͘͠ߦ͏ w ଞͷ໊લۭؒΛࢀরͯ͠Δͱ  ෼ׂͮ͠Β͍ w ઌʹϦϑΝΫλϦϯά͢΂͠

Slide 64

Slide 64 text

ݱࡏͷঢ়گ

Slide 65

Slide 65 text

admin-user-blog-edit.js ߦ ߦ

Slide 66

Slide 66 text

ʙʙ

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

browserify؅ཧԼͷ ϑΝΠϧ਺ concatͯ͠ΔϑΝΠϧ਺

Slide 69

Slide 69 text

browserify؅ཧԼͷ ϑΝΠϧ਺ concatͯ͠ΔϑΝΠϧ਺ ࡉ͔͘ϞδϡʔϧԽ͢Δͱ ݩϑΝΠϧΑΓଟ͘ͳΔ

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

browserify؅ཧԼͷ ϑΝΠϧ਺ concatͯ͠ΔϑΝΠϧ਺ ࡉ͔͘ϞδϡʔϧԽ͢Δͱ ݩϑΝΠϧΑΓଟ͘ͳΔ Զୡͷઓ͍͸ ͜Ε͔Βͩ ʂʂʂʂʂʂʂ

Slide 72

Slide 72 text

KEEP THE  STYLE Mission 2:

Slide 73

Slide 73 text

ઃܭελΠϧ ίʔσΟϯάελΠϧ

Slide 74

Slide 74 text

Vanilla  Architecture VanillaJSͰͷίϯϙʔωϯτઃܭ

Slide 75

Slide 75 text

طଘJSͷ໰୊఺ w σʔλͱ%0.͕ີ݁߹ w ίϯϙʔωϯτؒͷ࿈ܞ͕Ϝζ͍ w αʔόͱͷ࿈ܞ͕μϧ͍

Slide 76

Slide 76 text

σʔλͱDOM͕ີ݁߹ w %0.ଐੑʹσʔλΛอଘ w ͋ͪͪ͜Ͱ%0.ૢ࡞ w σʔλؒͷ੔߹ੑ͕յΕ΍͍͢

Slide 77

Slide 77 text

ίϯϙʔωϯτؒͷ࿈ܞ w σʔλϑϩʔʹܾ·Γ͕ͳ͍ w ॥؀ࢀরͰݺͼ߹ͬͨΓ w ࠷ѱ%0.ΠϕϯτΛ࢖͏

Slide 78

Slide 78 text

αʔόͱͷ࿈ܞ w )5.-ߏ଄͔ΒσʔλΛ࡞Δ w +40/ͱ͔Ͱ͸ͳ͍ w %#ߋ৽ͷ౓ʹαʔόଆͰඳը

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

͜͜ΛΫϦοΫ͢Δͱ %#͕ߋ৽͞Εͯ

Slide 81

Slide 81 text

αʔόͰ)5.-Λඳը͠ BKBYͰड͚औͬͯ SFQMBDF8JUI ͢Δ

Slide 82

Slide 82 text

εςʔτϨεͰ ඒ͍͠ઃܭ

Slide 83

Slide 83 text

+4Ͱඳը͢Ε͹ ຊདྷ͸ෆཁ

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

VanillaJSͷ··࠶ઃܭ w σʔλͱ%0.Λ෼཭ w ػೳຖʹ7JFX.PEFMΛ࡞Δ w ػೳಉ࢜͸ΠϕϯτͰ΍ΓͱΓ

Slide 86

Slide 86 text

σʔλͱDOMΛ෼཭ w ॳظԽ࣌ʹσʔλΛશͯ༻ҙ w %0.ૢ࡞͸ઐ༻ϝιουͰߦ͏

Slide 87

Slide 87 text

%0.Λ౎౓͞ΘΒͣʹ

Slide 88

Slide 88 text

%0.Λ౎౓͞ΘΒͣʹ

Slide 89

Slide 89 text

ॳظԽ࣌ʹσʔλΛ༻ҙ

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

DOMૢ࡞͸ઐ༻ϝιουͰ w +4ͰϨϯμϦϯά w σʔλมߋͷ౓ʹશ෦࠶ඳը w ੔߹ੑɺϝϯς͠΍͢͞Λ༏ઌ w ύϑΥʔϚϯε͸౓֎ࢹ

Slide 92

Slide 92 text

No content

Slide 93

Slide 93 text

ػೳຖʹViewModel w ίϯϙʔωϯτΛ਌ͱࢠʹ෼ׂ w 4NBSU%VNC$PNQPOFOU

Slide 94

Slide 94 text

਌ίϯϙʔωϯτ w σʔλɺϏδωεϩδοΫΛ؅ཧ w &WFOU&NJUUFSΛܧঝ w %0.&WFOUΛۃྗ͔ͭΘͳ͍ʂ

Slide 95

Slide 95 text

ࢠίϯϙʔωϯτ w ਌΁ͷࢀরΛ࣋ͭ w σʔλͷඳըͱΠϕϯτൃߦͷΈ

Slide 96

Slide 96 text

ྫ4JEFCBS

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

Sidebar SidebarButtons Conﬁg

Slide 99

Slide 99 text

4JEFCBS #VUUPOT $POpH

Slide 100

Slide 100 text

4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ

Slide 101

Slide 101 text

4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλมߋ + emit(‘change’)

Slide 102

Slide 102 text

4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλ൓ө σʔλมߋ + emit(‘change’)

Slide 103

Slide 103 text

ίϯϙʔωϯτؒͷ΍ΓͱΓ Fotolife MarkdownEditor

Slide 104

Slide 104 text

ίϯϙʔωϯτؒͷ΍ΓͱΓ w ্Ґͷ7JFX.PEFMΛͭͬͯ͘  ΠϕϯτΛൃੜͤ͞Δ w ·ͨ͸$window.trigger()

Slide 105

Slide 105 text

্Ґͷ7JFX.PEFMΛ࡞੒ Fotolife MarkdownEditor Editor

Slide 106

Slide 106 text

&EJUPS .BSLEPXO 'PUPMJGF 'PUP-JTU 'PPUFS ϘλϯΫϦοΫ ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε 5FYU"SFB ૠೖ

Slide 107

Slide 107 text

ந৅తͳΠϕϯτ໊ʹ͢Δ ' buttonClicked ( insertImage

Slide 108

Slide 108 text

.BSLEPXO 'PUPMJGF 'PUP-JTU 'PPUFS ϘλϯΫϦοΫ ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε 5FYU"SFB ૠೖ &EJUPS

Slide 109

Slide 109 text

&EJUPS .BSLEPXO 'PUPMJGF 'PUP-JTU 'PPUFS ϘλϯΫϦοΫ ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε 5FYU"SFB ૠೖ ந৅తͳΠϕϯτ .BSLEPXO 'PUPMJGF ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε &EJUPS

Slide 110

Slide 110 text

σʔλͱ%0.ͷ ෆ੔߹͸ ى͖ʹ͘͘ͳͬͨʂ

Slide 111

Slide 111 text

Slide 112

Slide 112 text

͚ͬ͜͏େม w ઃܭͷ߹ҙͱΔͷ͕େม w %0.ૢ࡞μϧ͍ w ϥΠϒϥϦʹ΍ͬͯ΄͍͠

Slide 113

Slide 113 text

7JFXϑϨʔϜϫʔΫ ࢖͍͍ͨʜʜʂ

Slide 114

Slide 114 text

Slide 115

Slide 115 text

Vue.js ✔ݹ͖ྑ͖7JFX.PEFM ✔೔ຊޠυΩϡϝϯτ ✗͍ΖΜͳॻ͖ํͰ͖Δ

Slide 116

Slide 116 text

React ✔֮͑Δ͜ͱ͕গͳ͍ ✔৘ใ͕๛෋ ✗+49

Slide 117

Slide 117 text

1ϲ݄΄Ͳٞ࿦ w ֶशίετ͸ʁ w ඞཁͳ࣌ʹࣺͯΒΕΔ͔ʁ w ৽ػೳΛ྆ํͰ࣮૷ͨ͠Γ

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

ReactΛ࠾༻ w ΑΓγϯϓϧʹॻ͚Δ w 3FBDUˠ7VF͸؆୯ͦ͏

Slide 121

Slide 121 text

σβΠφʔ͕৮Εͳ͍ʁ w +49͘Β͍৮ΕΔ͸ͣ w $44ͰࣗࡏʹελΠϧͰ͖Δ  Α͍ઃܭΛ໨ࢦ͢

Slide 122

Slide 122 text

ಋೖ w +49ͷͨΊʹಋೖͱ͍͏ޱ࣮ w TUBHFҎԼ͸࢖༻ېࢭ w ษڧձ JTTVFͰ஌ݟΛγΣΞ

Slide 123

Slide 123 text

http://azu.github.io/slide-what-is-ecmascript/ ࢀߟ&$."4DSJQUͱ͸Կ͔  CZ!B[V͞Μ

Slide 124

Slide 124 text

ࣾ಺ษڧձͷΑ͏͢

Slide 125

Slide 125 text

No content

Slide 126

Slide 126 text

JTTVFͰ஌ݟΛूΊΔ

Slide 127

Slide 127 text

React  Architecture React࢖༻࣌ͷίϯϙʔωϯτઃܭ

Slide 128

Slide 128 text

جຊతͳߟ͑ํ w 'MVYϑϨʔϜϫʔΫ͸࢖͍ͨ͘ͳ͍ w &WFOU&NJUUFS͚ͩͰؤுΔ w ن໛ʹΑͬͯɺஈ֊తʹ  'MVYͬΆ͍ͯ͘͘͠

Slide 129

Slide 129 text

খ͞ͳػೳͷͱ͖ w 7JFX.PEFM͚ͩͰ׬݁ w ҎલͷίʔυͷSFOEFS Λ  ஔ͖׵͑Δ͚ͩ

Slide 130

Slide 130 text

େ͖ͳػೳͷͱ͖ w &WFOU&NJUUFSͰ෦෼తʹ'MVY w 4UPSF "DUJPO$SFBUPS͕ෳ਺ͳΒ  %JTQBUDIFSΛಋೖ

Slide 131

Slide 131 text

.PEFM খن໛ : ViewModel 7JFX.PEFM Πϕϯτ ൓ө σʔλมߋ

Slide 132

Slide 132 text

"DUJPO $SFBUPS தن໛ : Flux෩ Πϕϯτ ൓ө 4UPSF Action σʔλมߋ

Slide 133

Slide 133 text

େن໛ : DispatcherΛಋೖ Πϕϯτ ൓ө Action σʔλมߋ %JTQBUDIFS

Slide 134

Slide 134 text

Coding  Convention ίʔσΟϯάελΠϧͷνΣοΫ

Slide 135

Slide 135 text

ैདྷ͸JSHintͰνΣοΫ ಠࣗϧʔϧ͸1FSMͰॻ͍ͯͨ ✗ϧʔϧΛඍௐ੔͠ʹ͍͘ ✗+49&4ʹඇରԠ

Slide 136

Slide 136 text

No content

Slide 137

Slide 137 text

✔ඪ४ϧʔϧ͕ॆ࣮ ✔ઃఆ͕ΧελϚΠζ͠΍͍͢ ✔ಠࣗϧʔϧ͕؆୯ʹॻ͚Δ

Slide 138

Slide 138 text

https://gist.github.com/fand/c13213f81bfce11f4132 ࢀߟಠࣗϧʔϧྫ

Slide 139

Slide 139 text

ಋೖͷํ਑ w શͯͷඪ४ϧʔϧͰ  Τϥʔ͕ग़ΔΑ͏ʹઃఆ w طଘίʔυͰΤϥʔফ͑Δ·Ͱ  ϧʔϧΛ؇ΊΔ

Slide 140

Slide 140 text

˔ͷ͍ͭͨߦ͸ શ෦ܯࠂ

Slide 141

Slide 141 text

No content

Slide 142

Slide 142 text

ౖΒΕͯศརʂ

Slide 143

Slide 143 text

TEST THE  COMPONENT Mission 3:

Slide 144

Slide 144 text

4݄·ͰͷJSςετ w $BTQFS+4ͷ&&ͷΈ w هࣄ౤ߘɺ޿ࠂͷද͚ࣔͩ

Slide 145

Slide 145 text

JS͕յΕ΍͍͢ w ϦϑΝΫλϦϯάͰΤϯόά w ϦϦʔεޙΤϥʔͰ·ͬͯ͘  3FWFSUͨ͠ࣄ΋ʜʜ

Slide 146

Slide 146 text

http://0-9.sakura.ne.jp/pub/frontrend/start.html

Slide 147

Slide 147 text

ʮE2E͔Β࢝ΊΖʯͱݴ͏͚ΕͲ…… w γφϦΦ͕ෳࡶ ʮ͋ΔॱংͰϖʔδભҠͨ࣌͠ʹ  উखʹλϒ͕ดͯ͡͠·͏ʯ όάͷςετͨ͘͠ͳ͍ʜʜ

Slide 148

Slide 148 text

ςετ͍ͨ͠ʂ

Slide 149

Slide 149 text

୯ମςετ͔Β͸͡ΊΑ͏

Slide 150

Slide 150 text

Unit Test ୯ମςετ؀ڥߏங

Slide 151

Slide 151 text

http://0-9.sakura.ne.jp/pub/frontrend/start.html

Slide 152

Slide 152 text

ཧ૝

Slide 153

Slide 153 text

ςετॻ͘ ςετམͪͳ͍Α͏ʹ ϦϑΝΫλϦϯά

Slide 154

Slide 154 text

ݱ࣮

Slide 155

Slide 155 text

ςελϒϧͳઃܭͰ ϦϑΝΫλϦϯά ςετॻ͘

Slide 156

Slide 156 text

ςελϒϧͳઃܭΛ৺͕͚Δ w ίʔυ෼ׂ͸େલఏ w 7JFXૢ࡞͸෼཭͢Δ w %0.৮ΔϞδϡʔϧ͸  ςετͮ͠Β͍

Slide 157

Slide 157 text

w ݩ͸"OHVMBS༻ͷςετϥϯφʔ w ϒϥ΢βΛ࢖ͬͯςετͰ͖Δ w ୯ମςετ޲͚ w ϒϥ΢βૢ࡞͸ॆ࣮͍ͯ͠ͳ͍

Slide 158

Slide 158 text

গͣͭ͠ςετ૿΍͢ w ৽͍͠Ϟδϡʔϧ͸ςετඞਢ w ϦϑΝΫλϦϯάˠςετ௥Ճ w 6UJMܥϞδϡʔϧΛ༏ઌ

Slide 159

Slide 159 text

Viewͷςετ w &WFOU&NJUUFSͷ͓͔͛Ͱ  ςετ͠΍͘͢ͳͬͨʂ w Πϕϯτ͸ൃߦ͞ΕΔ͔ʁ w %0.ཁૉ͕ඳը͞ΕͯΔ͔ʁ

Slide 160

Slide 160 text

4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλ൓ө σʔλมߋ + emit(‘change’)

Slide 161

Slide 161 text

4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλ൓ө σʔλมߋ + emit(‘change’) $POpH ϘλϯΫϦοΫ Πϕϯτ͕ ਖ਼͘͠ൃߦ͞ΕΔ͔ʁ

Slide 162

Slide 162 text

4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλ൓ө σʔλมߋ + emit(‘change’) 4JEFCBS σʔλมߋ + emit(‘change’) Πϕϯτʹର͠ σʔλ͕มߋ͞ΕΔ͔ʁ

Slide 163

Slide 163 text

4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλ൓ө σʔλมߋ + emit(‘change’) σʔλ͸ ਖ਼͘͠ඳը͞ΕΔ͔ʁ #VUUPOT σʔλ൓ө

Slide 164

Slide 164 text

ςετॻ͚Δ

Slide 165

Slide 165 text

ςετϑΝΠϧ਺

Slide 166

Slide 166 text

No content

Slide 167

Slide 167 text

·ͩ·ͩ ൃల్্

Slide 168

Slide 168 text

E2E Test E2Eςετ؀ڥͷϦχϡʔΞϧ

Slide 169

Slide 169 text

୤CasperJS w 3FBDUΛ࢖͏ͱ  1IBOUPN+4ͰΤϥʔग़Δʂ w 1IBOUPN+4ɺ೉͍͠

Slide 170

Slide 170 text

ଞͷखஈΛݕ౼

Slide 171

Slide 171 text

&MFDUSPOϕʔεͷεΫϨΠύʔ ✔γϯϓϧͳ"1* ✗ࡉ͔͍"1*͕଍Γͳ͍ ✗ϝιουνΣʔϯ͕໘౗

Slide 172

Slide 172 text

ݩ͸"OHVMBS+4ͷςετ༻ ✔Ϣʔβʔɺ৘ใ͕ଟ͍ ✔ಉظతʹॻ͚Δ ✗"OHVMBSઐ༻"1*͸ෆཁ Protractor

Slide 173

Slide 173 text

4FMFOJVNͷόΠϯσΟϯά ✔ಉظతʹॻ͚Δ ✔ׂͱ υΩϡϝϯτॆ࣮ ♨$-*ςετϥϯφʔ෇͖

Slide 174

Slide 174 text

4FMFOJVNͷόΠϯσΟϯά ✔ಉظతʹॻ͚Δ ✔ׂͱ υΩϡϝϯτॆ࣮ ♨$-*ςετϥϯφʔ෇͖ ࠾༻

Slide 175

Slide 175 text

Ұ൪ͷཧ༝ w 4FMFOJVNܥͳͷͰ  ଞϥΠϒϥϦʹ৐Γ׵͑΍͍͢͸ͣ w 1SPUSBDUPS UFTUJVN౳

Slide 176

Slide 176 text

&4HFOFSBUPSͰ ςετΛॻ͘

Slide 177

Slide 177 text

&4HFOFSBUPSͰ ςετΛॻ͘

Slide 178

Slide 178 text

No content

Slide 179

Slide 179 text

ςετಈ͍ͨʂ

Slide 180

Slide 180 text

http://amagitakayosi.hatenablog.com/entry/2015/10/30/083000 ࢀߟ͓΋͠ΖΤϐιʔυ

Slide 181

Slide 181 text

RESTORE THE  ORDER ϑϩϯτΤϯυʹடংΛऔΓ໭͢ํ๏ @amagitakayosi

Slide 182

Slide 182 text

͔ͯ͘͠ டং͸ कΒΕͨ

Slide 183

Slide 183 text

ࠓ೔࿩ͨ͜͠ͱ w ϦϑΝΫλϦϯάצॴ w ઴ਐతʹΞʔΩςΫνϟΛਐԽͤ͞Δ w ϑϨʔϜϫʔΫಋೖ w ςετ؀ڥߏங

Slide 184

Slide 184 text

ࠓ೔࿩ͨ͜͠ͱ w ϦϑΝΫλϦϯάצॴ w ઴ਐతʹΞʔΩςΫνϟΛਐԽͤ͞Δ w ϑϨʔϜϫʔΫಋೖ w ςετ؀ڥߏங ྑ͍ઃܭΛ ໨ࢦͨ͢Ίͷ ౔୆࡞Γ

Slide 185

Slide 185 text

ࠓ೔࿩͞ͳ͔ͬͨ͜ͱ w ඒ͍͠ϥΠϒϥϦઃܭͷڞ༗ w ඇΤϯδχΞͱͷઃܭ w ര଎ͰαʔϏεͭ͘Δ։ൃϑϩʔ

Slide 186

Slide 186 text

ࠓ೔࿩͞ͳ͔ͬͨ͜ͱ w ͸ͯͳϒϩάνʔϜͷ։ൃϑϩʔ w ࣾ಺ϥΠϒϥϦͷઃܭํ๏ w αʔόଆݴޠͱͷઃܭͷڞ༗ ·ͩ·ͩ ൃల్্

Slide 187

Slide 187 text

Ί͛ͣʹ վળ͢Δ εϐϦοτ

Slide 188

Slide 188 text

ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ

Slide 189

Slide 189 text

͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 190

Slide 190 text

גࣜձࣾ͸ͯͳͰ͸ ࠷ߴͷΞʔΩςΫνϟΛ໨ࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ