JavaScript Bootcamp - Speaker Deck

Slide 1

Slide 1 text

JavaScript Bootcamp 2017, 11th April @ Recruit Technologies

Slide 2

Slide 2 text

JavaScript Bootcamp • ࠓ೔Ͱ JavaScript Λ࢖͍౗͢ • JavaScript Λ஌Δ • JavaScript ͰΫϥΠΞϯτΛ࡞Δ • JavaScript ͰαʔόΛ࡞Δ

Slide 3

Slide 3 text

࿩ͷલʹ • ϦΫϧʔτςΫϊϩδʔζͷ "ϑϩϯτΤϯυΤϯ δχΞ" ͷఆٛ͸޿ͯ͘ਂ͍ • HTML/CSS/JSΛۦ࢖ͯ͠ΫϥΠΞϯτΛ࡞Δ *͚ͩ Ͱ͸ͳ͍* • ωοτϫʔΫͷ஌ࣝ΍αʔόͷجૅ஌ࣝ΋༗͢Δ্ ʹͦΕΒΛ౿·͑ͯαΠτશମͷϢʔβϏϦςΟɾ ύϑΥʔϚϯεΛ্͛Δਓ

Slide 4

Slide 4 text

ϦΫϧʔτςΫϊϩδʔζͷ ϑϩϯτΤϯυΤϯδχΞ

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

ࠓճͷBootcampͰ͸

Slide 8

Slide 8 text

͜ͷ͋ͨΓΛڭ͑·͢ɻ

Slide 9

Slide 9 text

͜ͷ͋ͨΓ΋গ͠ڭ͑·͢ɻ

Slide 10

Slide 10 text

JavaScriptΛ஌Δ

Slide 11

Slide 11 text

JavaScriptΛ஌Δ • JavaScript ΛͱΓ͋͑ͣ࢖ͬͯΈΔ • JavaScript ʹ৮ΕΔ • JavaScript ࠓੲ෺ޠ

Slide 12

Slide 12 text

JavaScriptΛͱΓ͋͑ͣ࢖ͬͯ ΈΔɻ // ͜͜Ͱ Node.js ͕ೖͬͯΔਓ͸ terminal Λىಈͯ͠ԼهͷίϚϯυΛ࣮ߦ͍ͯͩ͘͠͞ɻ $ node -v v7.8.0 REPLΛىಈ͠·͠ΐ͏ $ node > // ͜͜Ͱ΋͏ JavaScript ͕ಈ͖·͢ɺ৭ʑ΍ͬͯΈ·͠ΐ͏ɻ > 1 + 1; 2 > var test = "abc"; test > function test() { ... var num = 2; ... return num; ... } undeﬁned > test(); 2

Slide 13

Slide 13 text

JavaScriptΛͱΓ͋͑ͣ࢖ͬͯ ΈΔɻ • ࣮ࡍʹHelloWorldΞϓϦΛ࡞ͬͯΈ·͠ΐ ͏ɻҎԼͷϑΝΠϧΛ࡞੒ͯ͠ɺ helloworld.jsͱ͍͏໊લΛ͚͍ͭͯͩ͘͞ɻ console.log('Hello World'); $ node helloworld.js Hello World

Slide 14

Slide 14 text

JavaScriptΛͱΓ͋͑ͣ࢖ͬͯ ΈΔɻ • ΋͏গ͠ڽͬͨ͜ͱΛͯ͠Έ·͠ΐ͏ // ϑΝΠϧͷதͰɺ࣍ͷ഑ྻΛද͢ɺม਺ pets Λఆٛ͠·͠ΐ͏ɻ const pets = ['cat', 'dog', 'rat']; // forϧʔϓΛ࡞ͬͯɺ഑ྻ಺ͷ֤จࣈྻ͕ෳ਺ܗʹͳΔΑ͏ʹมߋ͠·͢ɻ // forϧʔϓͷத͸࣍ͷΑ͏ʹͳΔͰ͠ΐ͏... pets[i] = pets[i] + 's'; forϧʔϓ͕ऴΘͬͨΒɺ console.log() Λ࢖ͬͯ഑ྻ pets Λλʔϛφϧʹදࣔ͠·͠ΐ͏ɻ

Slide 15

Slide 15 text

JavaScriptΛͱΓ͋͑ͣ࢖ͬͯ ΈΔɻ • ͔͜͜Β͸ԋश໰୊Ͱ͢ɻ $ npm install @recruit-tech/javascripting -g $ javascripting ͜ΕΛ࣮ߦ͠·͠ΐ͏ɻ ࣮ߦ͕ऴΘͬͨΒ೔ຊޠઃఆʹ্ͨ͠Ͱ্͔Βղ͍ͯΈ·͠ΐ͏ɺͳ͓ Introduction ͱ for ϧʔϓʹ͍ͭͯ͸طʹ্ͷ໰୊Ͱ΍ͬͯ·͢ͷͰɺҎԼͷ໰୊Λͱ͖·͠ΐ͏ɻ # ਖ਼نදݱΛ࢖͑ɺϧʔΫ # Arrays more # ﬁzzbuzz 1࣌ؒҐͰʂʂʂ

Slide 16

Slide 16 text

͍͍ͩͨղ͚ͨΒ࣍ͷߨٛʹ ҠΓ·͢ɻ

Slide 17

Slide 17 text

JavaScript ࠓੲ෺ޠ • JavaScript ͸ʮੈքͰ࠷΋ޡղ͞Ε͍ͯΔݴ ޠͰ͋Δʯͱ͞Ε͖ͯͨաڈ͕͋Γ·͢ɻ • ʮJavaScript ᠘ʯͱ͔Ͱݕࡧ͢Δͱͨ͘͞Μ ώοτ͢Δͱࢥ͍·͢ɻ • JavaScript͸ͲͷΑ͏ʹͯ͠Ͱ͖ͨͷ͔ɺ· ͨͲ͏ਐԽ͍ͯ͠Δͷ͔Λղઆ͠·͢ɻ

Slide 18

Slide 18 text

ΩοΫΦϑʹߦ͔ΕΔํ͸Ωο ΫΦϑʹߦ͖͍ͬͯͯͩ͘͞ɻ

Slide 19

Slide 19 text

JavaScript ࠓੲ෺ޠ • Before JS: 1990 ೥ɺ World Wide Web Λݩ ʹ্࢙ͨ͠ॳͷϒϥ΢β͕Ͱ͖Δ Tim Berners Lee શͯͷGod Father ͪͳΈʹ͜ͷલ νϡʔϦϯά৆Λड৆

Slide 20

Slide 20 text

JavaScript ࠓੲ෺ޠ • Before JS: 1993೥ ถࠃཱεʔύίϯϐϡʔλ ݚڀॴʢ௨শNCSAʣ͔ΒMosaicϒϥ΢β͕ ग़Δ ը૾ͱςΩετ͕Ұॹʹ ग़Δͱ͍͏ըظతͳ ϒϥ΢β

Slide 21

Slide 21 text

JavaScript ࠓੲ෺ޠ • Before JS: 1994೥ Netscape 1.0 released ౰ॳ͸Mozillaͱ͍͏ίʔυ ωʔϜɺʮNetscape ͱॻ͍ ͯMozillaͱಡΉʯͱ΋ݴΘ Εͯͨɻ

Slide 22

Slide 22 text

JavaScript ࠓੲ෺ޠ • ΋ͬͱϒϥ΢βʹಈ͖Λʂʂ ݺΜͩʁʁ

Slide 23

Slide 23 text

JavaScript ࠓੲ෺ޠ • ΋ͬͱϒϥ΢βʹಈ͖Λʂʂ ݺΜͩʁʁ ݺΜͰͳ͍ʂʂʂ

Slide 24

Slide 24 text

JavaScript ࠓੲ෺ޠ • ΍ͬͺΓεΫϦϓτݴޠͩΑͶʔʂ

Slide 25

Slide 25 text

JavaScript ࠓੲ෺ޠ • ୭͔ʔ୭͔ࢯʔʔʂʂʂʂϒϥ΢βʹεΫϦ ϓτݴޠΛ࡞Γ͍ͨ୭͔ʔʔʔʂʂʂʂʂ ݺΜͩʁʁ

Slide 26

Slide 26 text

JavaScript ࠓੲ෺ޠ • 1995: Netscape 2.0 ʹ Script ݴޠϕʔεࡌͤ Δ໨తͰ։ൃ։࢝ SchemeϕʔεͰ͍͍ͷʁ ͍΍ɺɺɺ΋͏গ͠JavaͬΆ͘ɺObject ࢦ޲ͬΆ͘པΉ

Slide 27

Slide 27 text

JavaScript ࠓੲ෺ޠ • ৽εΫϦϓτݴޠ͸ Scheme ͱ Self (Smalltalk༝དྷͷݴޠ)ΛࠞͥͯJavaͷॻ͖ຯ Λਅࣅͨ΋ͷ ໊લԿʹ͠Α͏ɻɻɻ

Slide 28

Slide 28 text

JavaScript ࠓੲ෺ޠ • ৽εΫϦϓτݴޠ͸ Scheme ͱ Self (Smalltalk༝དྷͷݴޠ)ΛࠞͥͯJavaͷॻ͖ຯ Λਅࣅͨ΋ͷ ໊લԿʹ͠Α͏ɻɻɻ

Slide 29

Slide 29 text

JavaScript ࠓੲ෺ޠ • ৽εΫϦϓτݴޠ͸ Scheme ͱ Self (Smalltalk༝དྷͷݴޠ)ΛࠞͥͯJavaͷॻ͖ຯ Λਅࣅͨ΋ͷ Java͔ΒདྷͯΔ͠ɺ Mocha ʹ͠Α͏ɻ

Slide 30

Slide 30 text

JavaScript ࠓੲ෺ޠ • Mocha => LiveScript ΁ɺެࣜͳ໊લ͸ͬ͜ ͪʹܾఆʂʂʂ ΋͏ͪΐͬͱScriptݴޠͬΆ͍ํ͕ྑ͍ ͔ɻ

Slide 31

Slide 31 text

JavaScript ࠓੲ෺ޠ • 1995 9݄: Netscape Navigator 2.0 beta ϦϦ ʔε LiveScriptϦϦʔεͨͧ͠ʔʂʂʂʂ

Slide 32

Slide 32 text

JavaScript ࠓੲ෺ޠ • 1995 12݄: Netscape Navigator 2.0 beta 3 Ϧ Ϧʔε LiveScript ͸ JavaScript ʹվ໊͠·͢ʢओʹϚʔέ ςΟϯά໨తͰɺJavaͷ஌໊౓ར༻ʣ

Slide 33

Slide 33 text

JavaScript ࠓੲ෺ޠ • 1995 12݄: Netscape Navigator 2.0 beta 3 Ϧ Ϧʔε ͪͳΈʹಉ࣌ظʹ ServerSide JavaScript ΋ॳϦϦʔ ε Netscape Enterprise Server ੈքॳͷServer SideͰ΋ಈ͘JavaScript

Slide 34

Slide 34 text

JavaScript ࠓੲ෺ޠ • 1996: Netscape Navigator 2.0 ϦϦʔε!!! ϦϦʔεͨͧ͠ʂʂʂʂʂ

Slide 35

Slide 35 text

௚ޙ

Slide 36

Slide 36 text

JavaScript ࠓੲ෺ޠ • 1996: Netscape Navigator 2.01 ϦϦʔε!!! ϦϦʔεͨͧ͠ʂʂʂʂʂ Ͱ΋JavaScript ͸σϑΥϧτͰ͸ແޮ

Slide 37

Slide 37 text

JavaScript ࠓੲ෺ޠ • 1996: Netscape Navigator 2.01 ϦϦʔε!!! ϦϦʔεͨͧ͠ʂʂʂʂʂ Ͱ΋JavaScript ͸σϑΥϧτͰ͸ແޮ JavaScript͕ϒϥ΢β಺Ͱಈ͔ͤΔ͜ͱʹ

Slide 38

Slide 38 text

Ұํͦͷࠒ

Slide 39

Slide 39 text

JavaScript ࠓੲ෺ޠ • 1995: Microsoft ͕ Internet Explorer 1.0 ߏ ங Netscape௥ܸͩʂʂʂʂʂ

Slide 40

Slide 40 text

JavaScript ࠓੲ෺ޠ • 1995: IE 3.0 Ͱ JScript Λ࣮૷ Scriptݴޠͬͪ͜΋࡞ͬͨͧʔ

Slide 41

Slide 41 text

ୈҰ࣍ϒϥ΢βઓ૪

Slide 42

Slide 42 text

JavaScript ࠓੲ෺ޠ • Netscape vs IE vs

Slide 43

Slide 43 text

IEଆɿJScript࡞ͬͨͥɺ͜Ε ͔ΒNetscape͓͔͚ͬΔͥ ώϟοϋʔ

Slide 44

Slide 44 text

Netscapeଆɿ ΍͹͍ɺJavaScript͕ಠࣗߏ จͩΒ͚ʹͳΔ

Slide 45

Slide 45 text

MSͷ໠௥Ͱ๷ӴઓΛషΔ Netscape

Slide 46

Slide 46 text

ඪ४Խ΁ W3C Ͱ͸ͳ͘ɺ Ϥʔϩού ͷ ECMA ஂମͰنఆ

Slide 47

Slide 47 text

͔ͯ͘͠ 1997೥ ECMAScript version 1 ੜ஀

Slide 48

Slide 48 text

1998 ECMAScript version 2 جຊతʹͪΐͬͱͨ͠ﬁx

Slide 49

Slide 49 text

1999/12 ECMAScript v3: ਖ਼نදݱɺจࣈྻؔ਺ɺ try- catchߏจɺ਺ࣈϑΥʔϚο τ etc

Slide 50

Slide 50 text

ES v4 2000೥͔Βࡦఆ

Slide 51

Slide 51 text

JavaScript ࠓੲ෺ޠ vs ૒ํશ͘·ͱ·Βͣɾɾɾɾ

Slide 52

Slide 52 text

ES v4 2000೥͔Βࡦఆ => ࢮ๢

Slide 53

Slide 53 text

ES v5 => ES3 ͔Βͷ࠷খݶ ηοτͰ࠶ߏ੒

Slide 54

Slide 54 text

2009೥: ES v5 => ES3 ͔Βͷ࠷খݶ ηοτͰ࠶ߏ੒ JSON, strict mode, getter/ setter,

Slide 55

Slide 55 text

ES v6 (ίʔυωʔϜ harmony)

Slide 56

Slide 56 text

JavaScript ࠓੲ෺ޠ ΈΜͳͰௐ࿨ΛऔΓ·͠ΐ͏ͱ͍͏ҙຯͰharmony

Slide 57

Slide 57 text

2015: ECMAScript 6 ൃץ

Slide 58

Slide 58 text

2015: ECMAScript 6 ൃץ ΫϥεɺϞδϡʔϧɺΠςϨʔλɺ for/ofϧʔϓɺPythonελΠϧͷδΣ ωϨʔλɺΞϩʔؔ਺ɺ2ਐ਺͓Αͼ 8ਐ਺ͷ੔਺ϦςϥϧɺMapɺSetɺ WeekMapɺWeekSetɺϓϩΩγɺς ϯϓϨʔτจࣈྻɺletɺconstɺܕ෇ ͖഑ྻɺσϑΥϧτҾ਺ɺSymbolɺ Promiseɺ෼ׂ୅ೖɺՄม௕Ҿ਺

Slide 59

Slide 59 text

ΊͪΌଟ͍

Slide 60

Slide 60 text

ࠓޙ͸೥ؒͰversionΛ্͛ͯ ͘ɺࠓ೥͸ES2017

Slide 61

Slide 61 text

ಘΒΕΔࣄɿ harmonyΛେ੾ʹ͠·͠ΐ͏

Slide 62

Slide 62 text

͜ͷߨٛͰ஌ͬͨ͜ͱ

Slide 63

Slide 63 text

✔

Slide 64

Slide 64 text

ͦΖͦΖΩοΫΦϑ΋ऴΘͬ ͨࠒͩ͠ɺ࣍ߦ͖·͠ΐ͏

Slide 65

Slide 65 text

JavaScriptͰΫϥΠΞϯτΛ ࡞Δ

Slide 66

Slide 66 text

✔

Slide 67

Slide 67 text

͜Ε͔ΒTODO؅ཧπʔϧͷ WebΫϥΠΞϯτΛHTML/ CSS/JSͰ࡞ͬͯ΋Β͍·͢ɻ

Slide 68

Slide 68 text

࠷ऴܗଶ https://todo-manager- server.now.sh

Slide 69

Slide 69 text

JavaScript ͰΫϥΠΞϯτΛ࡞ Δ • Todoͷ֎؍Λ࡞Δ(HTML/CSS) • Todoʹಈ͖Λ༩͑Δ(JavaScript/DOM) • ΫϥΠΞϯτͷςετΛॻ͘

Slide 70

Slide 70 text

·ͣ͸؀ڥߏங

Slide 71

Slide 71 text

؀ڥߏங $ git clone https://github.com/recruit- tech/todo-manager.git $ cd todo-manager $ npm install $ npm start

Slide 72

Slide 72 text

HTML/CSS

Slide 73

Slide 73 text

HTML • ͱΓ͋͑ͣ TODO؅ཧ༻ͷHTMLΛ࡞ͬͯΈ ·͠ΐ͏ɻ $ cd public $ vim index.html

Slide 74

Slide 74 text

๻ͷߏஙͨ͠HTML Todo Manager

test
test
test
test

Slide 75

Slide 75 text

CSS • TODO؅ཧ༻ͷCSSΛ࡞ͬͯΈ·͠ΐ͏ɻ • ࠷ॳʹϒϥ΢βͰσϑΥϧτͰద༻͞ΕͯΔ cssΛ֎ͨ͢Ίͷreset.cssΛॻ͖·͢ɻ • ࣍ʹtodo.cssΛॻ͖·͢ɻ $ vim public/css/reset.css $ vim public/css/todo.css

Slide 76

Slide 76 text

๻ͷߏஙͨ͠CSS $ git checkout css $ cat public/css/todo.css ֬ೝ͚ͨ͠Ε͹ https://todo-manager-miiijpronq.now.sh

Slide 77

Slide 77 text

deployͷͨΊʹ $ npm run deploy ͰσϓϩΠͰ͖·͢ɻ ΋͠΋ϔϏʔʹ࢖͍͍ͨ৔߹͸ $ npm install now -g ͬͯ΍͓ͬͯ͘ͱศརͰ͢ɻ

Slide 78

Slide 78 text

ΈΜͳ࡞্ͬͯ͛ͯΈ·͠ΐ ͏ɻ Ͱ͖ͨΒ npm run deploy Ͱ deployͰ͖·͢ɻ

Slide 79

Slide 79 text

͍Α͍Αຊ୊

Slide 80

Slide 80 text

JavaScript ͰΫϥΠΞϯτΛ ࡞Δɻ

Slide 81

Slide 81 text

JavaScriptͰΫϥΠΞϯτΛ࡞ Δɻ • Ұ୴ਖ਼ղ͸ݟͣʹɻී௨ʹ࡞ͬͯΈ·͠ΐ͏ • ͱ͸͍ͬͯ΋ํ਑͸͋ͬͨํ͕ྑ͍ͱࢥ͏ͷ Ͱํ਑͚ͩͰ΋ɻ • view ͱ controller ͱ logic ͸෼͚·͠ΐ͏ɻ $ git checkout javascript // ਖ਼ղ

Slide 82

Slide 82 text

JavaScriptͰΫϥΠΞϯτΛ࡞ Δɻ • HTML͔ΒDOMΛ࢖ͬͯlogicΛݺͼग़͢૚Λ ਖ਼֬ʹ͸ControllerͱݴͬͨΓ͢Δɻ • HTMLΛߏங͢Δॴ͸ViewͱݺͿ͜ͱ͕ଟ ͍ɻ • Logic͸७ਮʹॲཧΛද͢ɺݟͨ໨Ҏ֎ͷ෦෼

Slide 83

Slide 83 text

JavaScriptͰΫϥΠΞϯτΛ࡞ Δɻ • ཁ͸ݟͨ໨ʹؔ͢Δ෦෼ͱݟͨ໨Ҏ֎ͷ෦෼ ʹ͖ͪΜͱ෼͚Δ͜ͱ͕ॏཁ • MVCͩͷMVVMͩͷFluxͩͷݴ͏ͷ͸ͦͷޙ • ԿͰ͜ΕΛ෼͚Δͷ͕ॏཁͳͷ͔͸ޙͰड़΂ Δ

Slide 84

Slide 84 text

ͱΓ͋͑ͣ΍ͬͯΈΑ͏ɻ

Slide 85

Slide 85 text

ΫϥΠΞϯτΛॻ͘ # public/js ҎԼʹԼهͷεΫϦϓτΛ࡞Δ controller.js - HTML͔ΒmodelͱviewΛܨ͙΋ͷ view.js - දࣔΛ࡞Δ΋ͷ model.js - fetchͯ͠஋Λऔಘ͢Δ΋ͷ main.js - ΦϒδΣΫτ؅ཧɺى఺ͱ࣮ͯ͠ߦ͞ΕΔ΋ͷ ίʔυΛͪΒݟ͠ͳ͕ΒҰॹʹॻ͍͍ͯ͜͏ɻ

Slide 86

Slide 86 text

https://todo-manager- mqcdoklvtw.now.sh

Slide 87

Slide 87 text

TestΛॻ͘

Slide 88

Slide 88 text

TestΛॻ͘ • ͖ͬ͞ݟͨ໨ͱݟͨ໨Ҏ֎ͷ෦෼ʹ෼͚Ζͱ ݴͬͨͷ͸ςετͷͨΊ • ݟͨ໨ͷ෦෼͸ςετ͠ʹ͍͘ʢ͞Βʹසൟ ʹมߋ͕͋Δʣ • ݟͨ໨ͷςετ͸ϖΠ͠ͳ͍ࣄ͕ଟ͍ͷͰɺ ݟͨ໨Ҏ֎Λςετ͢Δ

Slide 89

Slide 89 text

TestΛॻ͘ • ݟͨ໨Ҏ֎ɺͭ·Γ model ͷ૚͸ςετͰ͖ Δɻ • ςετ͠ʹ͍͘ίʔυΛॻ͔ͳ͍Α͏ʹ͢Δɻ $ git checkout test // ਖ਼ղ

Slide 90

Slide 90 text

TestΛॻ͘ • test Λॻ͘ʹ͸ͦͷ··Ͱ͸μϝͳͷͰAPI΍ constantsͷ஋͕ࠩ͠ସ͑ΒΕΔΑ͏ʹ͢Δඞ ཁ͕͋Δɻ • ͜ΕΛ Test Double ͱ͍͏ // globalͷ஋Ͱࠩ͠ସ͑ΒΕΔΑ͏ʹ͓ͯ͘͠ɻ const TODO_URL = global.TODO_URL || '/todos'; const fetch = global.fetch;

Slide 91

Slide 91 text

ͱΓ͋͑ͣ΍ͬͯΈΑ͏ɻ

Slide 92

Slide 92 text

TestΛॻ͘ # test ϥϯφʔΛೖΕΔ $ npm install eater --save-dev # mock ͷ fetch ΛೖΕΔ $ npm install node-fetch --save-dev # package.json ͷ scripts.test ͷͱ͜ΖΛҎԼͷΑ͏ʹ͢Δ ``` "test": "eater", ``` # test/client/todo.model.js Λॻ͍ͯத਎Λॻ͘

Slide 93

Slide 93 text

TestΛॻ͘ # test/client/todo.model.js Λॻ͍ͯத਎Λॻ͘ const assert = require('assert'); const test = require('eater/runner').test; const agreedServer = require('agreed-server'); const fetch = require('node-fetch'); test('check todo instance', () => { global.todo = {}; require('../../public/js/model'); assert(global.todo.model) }); # npm test $ npm test

Slide 94

Slide 94 text

͜ͷߨٛͰ஌ͬͨ͜ͱ

Slide 95

Slide 95 text

✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔

Slide 96

Slide 96 text

✔

Slide 97

Slide 97 text

Կ͔࡞Δͷ͕Ұ൪໾ʹཱͭ

Slide 98

Slide 98 text

JavaScriptͰαʔόΛ࡞Δ

Slide 99

Slide 99 text

✔ ࢒Γ2ͭɺͪΌͬͪΌͱ΍Γ·͠ΐ͏ɻ

Slide 100

Slide 100 text

TodoͰ࡞ͬͨMockͷαʔό Λຊ෺ʹม͑Δ

Slide 101

Slide 101 text

JavaScriptͰαʔόΛ࡞Δ • express ΛΠϯετʔϧͯ͠αʔόΛ࡞ͬͯ ΈΔ • npm install express —save • express ͰstaticαʔόΛ࡞Δ • express ͰϦΫΤετΛॲཧ͢Δ

Slide 102

Slide 102 text

expressͱ͸ʁ • Web Application Framework ͷҰͭ • ॳظͷNode.jsͰҰੈΛ෩ᴆͨ͠ • ࠓͰ΋͔ͳΓݱ໾Ͱ࢖ΘΕͯΔ

Slide 103

Slide 103 text

expressͱ͸ʁ • جຊతʹ͸ϧʔλͷػೳͱmiddlewareͷػೳ • ࣮͸ϧʔλͷػೳ͸middlewareͷػೳͷҰ෦ • పఈͨ͠middlewareϞσϧͱ͍͔ͭ͘ͷEasy ͳؔ਺͕૊Έ߹Θͬͨ͞΋ͷ

Slide 104

Slide 104 text

JavaScriptͰαʔόΛ࡞Δ $ npm install express --save $ vim app.js ``` 'use strict'; const express = require('express'); const app = express(); const PORT = process.env.PORT || 3000; app.use(express.static('./public/')); app.listen(PORT, () => { console.log(`Listening in ${PORT}`); }); ``` $ node app.js

Slide 105

Slide 105 text

JavaScriptͰαʔόΛ࡞Δ # APIͷ஋Λฦ͢ $ npm install body-parser --save ``` 'use strict'; const express = require('express'); const bodyParser = require('body-parser'); const todoRouter = require('./server/todo-router'); const app = express(); const PORT = process.env.PORT || 3000; app.use(bodyParser.json()); app.use(express.static('./public/')); app.use('/todos', todoRouter); app.listen(PORT, () => { console.log(`Listening in ${PORT}`); }); ```

Slide 106

Slide 106 text

࠷ऴܗଶ https://todo-manager- server.now.sh

Slide 107

Slide 107 text

͜ͷߨٛͰ஌ͬͨ͜ͱ

Slide 108

Slide 108 text

✔ ✔ ✔

Slide 109

Slide 109 text

૯ׅ

Slide 110

Slide 110 text

✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔

Slide 111

Slide 111 text

✔ ✔ ✔

Slide 112

Slide 112 text

͔ͳΓଟ͘ͷ࿩ͱࠓ೔Ұ೔Ͱ ͸ॲཧ͖͠Εͳ͍࿩͕ೖͬͨ ͸ͣɻ

Slide 113

Slide 113 text

͜ͷࢿྉ͸ΈΜͳʹ഑Δͷͱɺ githubͰ͍ͭͰ΋ݟΕΔΑ͏ ʹ͓ͯ͘͠ͷͰ֬ೝͯͩ͘͠ ͍͞ɻ

Slide 114

Slide 114 text

1೔໨׬ ໌೔͸ git ճͰ͢ɻ