Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −

Slide 1

Slide 1 text

ͱϑϩϯτΤϯυ ஌͓͔ͬͯͳ͚Ε͹ͳΒͳ͍ɺࠓͱະདྷͷ࿩ @axross

Slide 2

Slide 2 text

࿩͢ਓ ,PIFJ"TBJ !BYSPTT 5SJGPSU *OD 6*69EFTJHOEJWJTJPO $MJFOUTJEF+4 /PEF 3FBDU "OHVMBS+4 FYQSFTT FUD

Slide 3

Slide 3 text

Nodeͱ͸

Slide 4

Slide 4 text

Α͋͘Δצҧ͍ 'Node.js' === 'ϦΞϧλΠϜʹڧ͍JavascriptαʔόαΠυॲཧܥ' // false ·ͩ͜Μͳஏ͔͍ͣ͠צҧ͍ͯ͠Δਓɺ͍·ͤΜΑͶʁ

Slide 5

Slide 5 text

(ͦΕͳΓʹ) ਖ਼͍͠ೝࣝ 'Node.js' === ‘ϊϯϒϩοΩϯάI/OΛ࣋ͭJavascript CLI࣮ߦ؀ڥ' w $-*ɺ(PPHMF7 w γϯάϧεϨουΠϕϯτϧʔϓ w ϊϯϒϩοΩϯά*0 w ߴ͍࣍ݩͰͷϞδϡʔϥϏϦςΟ w ϦΞϧλΠϜ ؔ܎ͳ͍

Slide 6

Slide 6 text

Ͳ͏Ͱ΋͍͍஌ࣝ ਖ਼໊ࣜশ͸ʮ/PEFʯͰ͢ When referring to the software or the project in general, it's Node.js or simply Node. It is a proper noun, so capitalize it. The .js appears with the first use, to disambiguate from other things called "Node", and Node (without the .js) afterwards. One way to think of this is that Node.js is the full name, and Node is the more familiar first name.

Slide 7

Slide 7 text

ͳͥ ϑϩϯτΤϯυΤϯδχΞͰ΋ Nodeͳͷ͔

Slide 8

Slide 8 text

ͳͥ ϑϩϯτΤϯυΤϯδχΞͰ΋ Nodeͳͷ͔ w /PEFͷ"1*΍ΤίγεςϜ͕ΫϥΠΞϯταΠυ+4Ͱ ΋ར༻Ͱ͖Δ Α͏ʹͳΔ έʔε૿͖͑ͯͨ w +BWBTDSJQUͱ͍͏ط஌ͷݴޠʹΑΔ--ͱͯ͠ͷར༻ w *TPNPSQIJD+BWBTDSJQUͱ͍͏ະདྷ

Slide 9

Slide 9 text

Nodeͷϊ΢ϋ΢͕ ΫϥΠΞϯταΠυJSͰ΋ ར༻Ͱ͖ΔΑ͏ʹͳΔ

Slide 10

Slide 10 text

require()ͱ͔ɺ ΋͏࢖ͬͯΔͰ͠ΐʁ $PNNPO+4ελΠϧͷϞδϡʔϧͷ࢓૊Έ

Slide 11

Slide 11 text

npmͰ΋ OQNʹެ։͞Ε͍ͯΔύοέʔδͷதʹ͸ɺ /PEFͰ΋ΫϥΠΞϯταΠυ+4Ͱ΋ ಉ͡Α͏ʹ࢖͑Δ΋ͷ͕૿͖͑ͯͨ

Slide 12

Slide 12 text

ωΠςΟϒAPI͢Β΋ 4USFBN"1* /PEFͰϑΝΠϧͷྲྀΕΛѻ͏ ΫϥΠΞϯταΠυ+4ʹ΋࣮૷͢΂͘ɺ ࢓༷ࡦఆதͱͷ͜ͱɻ ৄ͍͠࿩͸·ͨࠓ౓

Slide 13

Slide 13 text

LLͱͯ͠ͷར༻

Slide 14

Slide 14 text

JavascriptɺಘҙͰ͠ΐʁ զʑ͸+BWBTDSJQUͱͱ΋ʹۤ͠Έɺ ࣌ʹ͸.JDSPT˔GUΛഃΓɺ ͍ΖΜͳۤ೰ͷ຤ʹ΍͖ͬͯͨ͸ͣ ΋͸΍+BWBTDSJQU͸ɺࣗ෼ͷख଍ͷΑ͏ʹಈ͔ͤΔ

Slide 15

Slide 15 text

ࣗಈԽ͍ͨ͜͠ͱ͸ ͨ͘͞Μ͋Δ w "1*ୟ͖·ͬͯ͘σʔλΛऔΔ w 8FCεΫϨΠϐϯάɺαϯϓϧσʔλͷ࡞੒ w ઃఆͷ੔උͱ͔ w ։ൃ؀ڥΛΑ͠ͳʹ

Slide 16

Slide 16 text

๻Βʹ΋Ͱ͖Δʂ 3VCZJTU΍1ZUIPOJTUBɺ ൴Β͸ͦ͏͍͏λεΫΛίʔυͰߦ͍ͬͯΔ ԿͰ๻ͨͪ͸Ͱ͖ͳ͍ͷ͔ʁͰ͖ΔͩΖʁʂ ͦ͏ɺ/PEF͕͋Δʂ

Slide 17

Slide 17 text

Isomorphic Javascript

Slide 18

Slide 18 text

Javascript Lv.999 +BWBTDSJQU͸΋͸΍ɺ ʮ૷০ͷͨΊͷεΫϦϓτʯͰ͸ͳ͍ "KBYͷྲྀߦΛڥʹɺ%0.Λಈཱ͔͢৔ʹ ͦͯ͠΋͸΍ɺ%0.ͷੈքͷࢧ഑ऀͱ΋ݴ͑Δ

Slide 19

Slide 19 text

MVWͳ ΫϥΠΞϯταΠυWAFͷོ੝ #BLDCPOFKT ,OPDLPVUKT &NCFSKT "OHVMBS+4 7VFKT "VSFMJB 3FBDUKT ͪΐͬͱҧ͏͚Ͳ 3JPUKT ͪΐͬͱҧ͏͚Ͳ

Slide 20

Slide 20 text

Javascript Application ͦΕ͸ɺ ͢΂ͯͷ%0.ૢ࡞ )551ϦΫΤετͷऔΓѻ͍ ͢΂ͯΛ+BWBTDSJQU͕ߦ͍ɺ ΞϓϦέʔγϣϯΛߏ੒͢Δະདྷ

Slide 21

Slide 21 text

αʔόαΠυ΋NodeͩͬͨΒ ΫϥΠΞϯταΠυͱαʔόαΠυͷ֞ࠜΛഉআ ͍·ͭʹ෼͔Εͯ͠·͍ͬͯΔ ϏδωεϩδοΫΛͭʹͰ͖Δ ࠶ར༻ੑʂอकੑʂεέʔϥϏϦςΟΟΟʂʂʂ ๻ͨͪͷ8FC͸ݩདྷɺͦ͏͍͏΋ͷͩͬͨ͸ͣͩʂ

Slide 22

Slide 22 text

Isomorphicͳྫ w 7BMJEBUPS΍4FSWJDFͷ࢖͍ճ͠ w ಉ͡΋ͷΛSFRVJSF ͢Δ͚ͩ w ಉ͡ϩδοΫ͕ผͷ࣮૷Ͱͭ͋Δͬͯͦ΋ͦ΋ ͓͔͍͠ͷͰ͸ w .PEFM૚ͷڞ௨Խ w αʔόʔͱΫϥΠΞϯτͰΠϯλʔϑΣʔε͕ ౷Ұ͞ΕΔ w 4&0తͳΞϨ w +4"QQMJDBUJPOͷαʔόʔαΠυϨϯμϦϯά

Slide 23

Slide 23 text

ະདྷͩʂʂʂʂʂʂʂ1111

Slide 24

Slide 24 text

΋͸΍ݴ͍༁͸ڐ͞Εͳ͍

Slide 25

Slide 25 text

ಀ͍͛ͯͨΒɺࢮ͵͚ͩ

Slide 26

Slide 26 text

GitHubͷσβΠφʔͷ࿩ lσβΠφʔͱσϕϩούʔ͕ ෼͔Ε͍ͯΔ࣌୅͸ ͍ͣΕऴΘΔz

Slide 27

Slide 27 text

GitHubͷσβΠφʔͷ࿩ (2) ๻ͷதͰ͸ উखʹ ༗໊ͳ࿩ ͢΂ͯΛͰ͖Ζɺͱ͸ݴΘͳ͍ ΫϥΠΞϯταΠυɺαʔόαΠυͰ΋͍͍ ͓ޓ͍ͷ෼໺Λ஌Γ߹͏͜ͱ͕େࣄ

Slide 28

Slide 28 text

GitHubͷσβΠφʔͷ࿩ (3) ΋ͬͱίϛϡχέʔγϣϯ͸͠΍͘͢ͳΔɺ ΋ͬͱ଎͘࡞ΕΔΑ͏ʹͳΔ ΋ͬͱνϟϨϯδϯάͰ ΋ͬͱΤΩαΠςΟϯάͰ Ձ஋͋ΔϓϩμΫτʹऔΓ૊ΊΔΑ͏ʹͳΔ

Slide 29

Slide 29 text

͋͞ɺNodeΛ͸͡ΊΑ͏

Slide 30

Slide 30 text

ͱ͸͍͑ɺ ٸʹͦΜͳ͜ͱ ݴΘΕͯ΋ࠔΔ..

Slide 31

Slide 31 text

Node ϫʔΫγϣοϓ ΍Γ·͢ʂʂʂʂʂʂ ద౰ͳπʔϧ࡞ͬͯ/PEFͷجૅΛֶͿ ۙ೔༧ఆɺৄࡉະఆɺଞσΟϰΟδϣϯ׻ܴ ڵຯͷ͋Δਓ͸͝Ұใ͍ͩ͘͞ 6*69EJW๻·Ͱ

Slide 32

Slide 32 text

͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠