Tweet
Tweet

Slide 1

Slide 1 text

3FBDUษڧձ

Slide 2

Slide 2 text

5PQJD w /PEF OQN ZBSO w 3FBDU w 3FBDU5VUPSJBM w 4VNNBSZ !2

Slide 3

Slide 3 text

௕ஸ৔ʹͳΓ·͕͢
 ؤுΓ·͠ΐ͏ʂʂ

Slide 4

Slide 4 text

8IBUJT

Slide 5

Slide 5 text

/PEF w /PEF͸εέʔϥϒϧͳωοτϫʔΫΞϓϦέʔγϣϯΛߏங͢ΔͨΊʹઃܭ͞Εͨ
 ඇಉظܕͷΠϕϯτۦಈͷ+BWB4DSJQU؀ڥͰ͢ ެࣜ w +BWB4DSJQUͱݴ͑͹ɼϒϥ΢βͰಈ͘ݴޠͩͬͨ Ὂ αʔόαΠυͰ΋+4͕ಈ͚͹։ൃָ͕ʹͳΔͷͰ͸ʁ/PEFര஀ w ૣ͍ Ὂ $ISPNFͷ7Τϯδϯ Ὂ ඇಉظܕΠϕϯτۦಈ Ὂ γϯάϧεϨου w ͿͬͪΌ͚ࠓ೔ͷ3FBDUͷ࿩ͱ͸ؔ܎ͳ͍Ͱ͢
 3FBDU͸ΫϥΠΞϯταΠυͰಈ͘ϥΠϒϥϦ͔ͩΒ !5

Slide 6

Slide 6 text

/PO#MPDLJOH*0 w ίʔϧόοΫΛఆٛ͢Δ͜ͱͰɼ
 ඇಉظʹλεΫΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖Δ Ὂ /PEF͕γϯάϧεϨουͰ΋ૣ͍ཧ༝ !6 const fs = require('fs'); // blocks here until file is read const data = fs.readFileSync('/file.md'); console.log(data); // moreWork(); will run after console.log const fs = require('fs'); fs.readFile('/file.md', (err, data) => { if (err) throw err; console.log(data); }); // moreWork(); will run before console.log Blocking I/O Non-Blocking I/O

Slide 7

Slide 7 text

/PEFΛࢧ͑Δ1BDLBHF.BOBHFS

Slide 8

Slide 8 text

w /PEF1BDLBHF.BOBHFS w ϓϩδΣΫτ͝ͱʹґଘؔ܎Λ࡞੒͠ɼ
 OPEF@NPEVMFTҎԼʹ1BDLBHFΛΠϯετʔϧ͢Δ Ὂ ΋ͪΖΜάϩʔόϧʹΠϯετʔϧ΋Ͱ͖Δ w ։ൃʹ͚ͩඞཁͳύοέʔδΛ໌ࣔతʹ෼͚Δػೳ͕͋Δ w ґଘؔ܎͸QBDLBHFKTPOʹه࿥͞ΕΔ !8

Slide 9

Slide 9 text

w 'BDFCPPL &YQPOFOU (PPHMF 5JMEF͕த৺ͱͳͬͯ࡞ͬͨ
 OQNʹ୅ΘΔ1BDLBHF.BOBHFS w 'BTU SFMJBCMF BOETFDVSFEFQFOEFODZNBOBHFNFOU Ὂ Ұ౓Πϯετʔϧͨ͜͠ͱͷ͋Δύοέʔδ͸ϩʔΧϧʹΩϟογϡ͞Ε͍ͯΔ Ὂ ZBSOMPDLʹΑͬͯґଘؔ܎ͷ৴པੑΛ୲อ͍ͯ͠Δ Ὂ ίʔυ࣮ߦલʹΠϯετʔϧࡁΈͷύοέʔδͷ੔߹ੑΛݟ͍ͯΔ w OQNͱޓ׵ੑΛ࣋ͪͳ͕ΒɼΑΓ؆୯ʹύοέʔδ؅ཧ͕Ͱ͖Δ༏Ε΋ͷ Ὂ ͱ͍͏্͔Ґޓ׵ !9

Slide 10

Slide 10 text

#SFBLUJNF
 ؀ڥߏஙऴΘͬͯͳ͍ਓ͸ڭ͍͑ͯͩ͘͞

Slide 11

Slide 11 text

8IBUJT3FBDU

Slide 12

Slide 12 text

3FBDU w 'BDFCPPL੡ͷ7JFX༻ϥΠϒϥϦ Ὂ HJUIVCDPNGBDFCPPLSFBDU w Ծ૝%0.Λ༻͍ͨϦΞΫςΟϒͳ41"Λ࣮ݱՄೳ w ίϯϙʔωϯτࢦ޲ Ὂ ύʔπͷ࠶ར༻ੑ͕ߴ͍ !12

Slide 13

Slide 13 text

8IBUJT41"

Slide 14

Slide 14 text

4JOHMF1BHF"QQMJDBUJPO w ϖʔδͷભҠແ͠ʹίϯςϯπΛ੾Γସ͑Δ͜ͱͰ
 69Λେ͖͘޲্ͤ͞Δ8FCΞϓϦέʔγϣϯΞʔΩςΫνϟ w ϖʔδͷ੾Γସ͑͸ΫϥΠΞϯτଆͰ%0.ૢ࡞Λߦ͏͜ͱͰ࣮ݱ͢Δ w )5.-͕ਖ਼ࣜϦϦʔε͞Εͨ͋ͨΓ͔Β׆ൃʹͳ͖ͬͯͨ !14

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

ैདྷͷ8FCΞϓϦέʔγϣϯ !16 hoge.com Contents
 (html,js,css,img,etc...) hoge.com/about Contents (html,js,css,img,etc...)

Slide 17

Slide 17 text

41"ͷ8FCΞϓϦέʔγϣϯ !17 hoge.com hoge.com/about html +4 api/about jsonͱ͔ Contents
 (html,js,css,img,etc...)

Slide 18

Slide 18 text

ͭ·Γ w ඞཁͳ৘ใ͚ͩαʔόʹ໰͍߹Θͤʹ͍͘ Ὂ ฦ͖ͬͯͨ৘ใΛݩʹ%0.Λ࠶ߏங ͔͠΋ɼมߋ͕ඞཁͳͱ͜Ζ͚ͩϨϯμϦϯά w ࣮͸ࠓ೔དྷͨօ͞Μ΋ࣅͨΑ͏ͳ͜ͱΛͨ͜͠ͱ͕͋Δ͸ͣ !18

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

K2VFSZͰग़དྷΔʂ w ΋ͱ΋ͱ%0.ૢ࡞͕ಘҙͳK2VFSZΛ࢖͑͹41"͸࣮૷Մೳ !20

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

΍ͬͺπϥ͍ w มߋύʔπ͕૿͑ͯ͘Δͱɼͦͷ؅ཧ͕πϥ͍ w ͦ΋ͦ΋σʔλΛ%0.Ͱอ͍࣋ͯ͠ΔͷͰ؅ཧ͕πϥ͍ w !22

Slide 23

Slide 23 text

4P 3FBDU

Slide 24

Slide 24 text

3FBDUͷ͍͍ͱ͜Ζ w %0.Ͱ͸ͳ͘ϩδοΫଆͰঢ়ଶม਺Λอ࣋ Ὂ ঢ়ଶม਺ͷมߋΛݕ஌ͯ͠%0.ૢ࡞ w Ծ૝%0.Λ༻͍Δ͜ͱͰࠩ෼ϨϯμϦϯάΛ࣮ݱ w ύʔπ୯ҐͰίϯϙʔωϯτԽ͕༰қ Ὂ ࣮૷͠΍͢͞61ˢ Ὂ ࠶ར༻ੑ61ˢ !24

Slide 25

Slide 25 text

Ծ૝%0. !25
3
Foo
Bar
Hoge
4
Foo
Bar
Hoge
Piyo
4
Foo
Bar
Hoge
Piyo
ݱࡏͷ%0. ৽͍͠%0. ࣮ࡍͷߋ৽ Ծ૝%0. +40CKFDU ࣮ࡍͷ%0.

Slide 26

Slide 26 text

࣮ࡍ͸ͪΐͬͱҧ͏ w ֤ίϯϙʔωϯτͷঢ়ଶม਺͕มΘΔ͜ͱͰɼ
 ͦͷίϯϙʔωϯτ͕୲౰͍ͯ͠Δ%0.͕࠶ϨϯμϦϯά͞ΕΔ Ὂ ͪΌΜͱ෼ׂ͠ͳ͍ͱϐϯϙΠϯτͰมߋ͸Ͱ͖ͳ͍ !26

Slide 27

Slide 27 text

3FBDU$PNQPOFOU-JGF$ZDMF w ग़యRJJUB!LBXBDIJ͞Μͷهࣄ Ὂ ͜Ε͕Ұ൪෼͔Γ΍͍͢ w ެࣜͷυΩϡϝϯτ΋ಡΈͳ͕ Βԡ͓͖͑ͯ͞·͠ΐ͏ !27

Slide 28

Slide 28 text

#SFBLUJNF ͔࣍ΒνϡʔτϦΞϧͰ͢

Slide 29

Slide 29 text

3FBDU5VUPSJBM

Slide 30

Slide 30 text

5PEPΞϓϦ w νϡʔτϦΞϧΞϓϦͱ͍͑͹5PEPΞϓϦ Ὂ Ұཡදࣔ Ὂ EPOFͷτάϧ Ὂ ௥Ճ Ὂ DMFBS w ࠓճ$44͸Ұ੾΍Γ·ͤΜ !30

Slide 31

Slide 31 text

3FBDUΞϓϦͷ࡞੒ w ADSFBUFSFBDUBQQA Ὂ 3FBDUΞϓϦ࡞੒ʹ࠷௿ݶඞཁͳύοέʔδΛ·ͱΊͨςϯϓϨʔτΛ࡞੒ͯ͘͠ΕΔ Ὂ HJUIVCDPNGBDFCPPLDSFBUFSFBDUBQQ w ඞཁͳίϚϯυ͸QBDLBHFKTPOʹ͢Ͱʹఆٛ͞Ε͍ͯΔɽ Ὂ AZBSOTUBSUAͰϒϥ΢βʹελʔτϖʔδ্ཱ͕͕ͪΔ͸ͣɽ !31 > npm install -g yarn > create-react-app todoapp > cd todoapp > yarn start

Slide 32

Slide 32 text

!32 ϓϩδΣΫτͷߏ଄ > tree -I node_modules . . "## README.md "## package.json "## public $ "## favicon.ico $ "## index.html $ %## manifest.json "## src $ "## App.css $ "## App.js $ "## App.test.js $ "## index.css $ "## index.js $ "## logo.svg $ %## registerServiceWorker.js %## yarn.lock w QVCMJD Ὂ ੩తϑΝΠϧΛஔ͘৔ॴ Ὂ NBOJGFTUKTPO͕ઃఆϑΝΠϧ w TSD Ὂ ͍ΖΜͳ։ൃίʔυΛ٧ΊࠐΉ৔ॴ

Slide 33

Slide 33 text

SFBDUTDSJQUT w SFBDUTDSJQUT Ὂ GBDFCPPLDSFBUFSFBDUBQQSFBDU TDSJQUT Ὂ CBCFM΍XFCQBDL FTMJOUͳͲɼ։ൃʹ࢖༻ ͢ΔπʔϧΛ·ͱΊͨπʔϧ Ὂ FKFDUͰશ෦ͷґଘΛు͖ग़ͯ͠ফ͢͜ͱ͕ Ͱ͖Δ ͱΓ͋͑ͣDSFBUFSFBDUBQQͰ࡞ͬͨޙɼ ΰϦΰϦΧελϚΠζ͕Ͱ͖Δ !33 > cat package.json { "name": "todoapp", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.4.2", "react-dom": "^16.4.2", "react-scripts": "1.1.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }⏎

Slide 34

Slide 34 text

ςϯϓϨΛগ͠ಡΜͰΈΑ͏
 ղઆεϥΠυ࡞Δͷ͕ΊΜͲ͔ͬͨ͘͞

Slide 35

Slide 35 text

8IBUJT&$."4DSJQU

Slide 36

Slide 36 text

&$."4DSJQU w +BWB4DSJQUͷඪ४࢓༷ Ὂ ੈͷதͷϒϥ΢βͰ͸͜ͷ࢓༷ʹج͍ͮͨ+BWB4DSJQU͕ಈ͍͍ͯΔ Ὂ ຖ೥݄͘Β͍ʹϦϦʔε͞ΕΔ Ὂ IUUQTHJUIVCDPNUDFDNB w ADSFBUFSFBDUBQQAͰ͸σϑΥϧτͰ&$."4DSJQU &4 Ͱ
 ॻ͔ΕͨϓϩδΣΫτ͕ग़དྷ্͕Δ ͍ͭ·Ͱ&4ͳΜͩ w จ๏ͷઆ໌͸͍Γ·͔͢ʁ !36

Slide 37

Slide 37 text

BSSPXؔ਺ w &$."4DSJQU͔Β௥Ճ͞Εͨػೳ Ὂ ؔ਺Λ୹ॖͰ͖Δ Ὂ UIJTΛଋറͰ͖Δ w Ͳ͏͍͏͜ͱʁ Ὂ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC+BWB4DSJQU 3FGFSFODFBSSPX@GVODUJPOT w ࣮ࡍʹॻ͘ͱ͖͸BSSPXؔ਺Ͱ౷Ұ͢Δͷ͕Φεεϝ Մಡੑ΋্͕Δ͠ !37

Slide 38

Slide 38 text

#SFBLUJNF ͔࣍ΒίʔσΟϯάͰ͢

Slide 39

Slide 39 text

$PEJOH
 HJUIVCDPNUBYJP3FBDU4UVEZ

Slide 40

Slide 40 text

TSD"QQKT w .BJO$PNQPOFOU w SFOEFS ͰSFUVSO͍ͯ͠Δͷ͕ඳը͞ΕΔIUNMΈ͍ͨͳ ΋ͷ Ὂ ͜͜ʹଞͷ$PNQPOFOUΛ഑ஔ͢Δ͜ͱ͕Ͱ͖Δ w ·ͩ5PEP-JTUͷ$PNQPOFOUΛ࡞͍ͬͯͳ͍ͷͰɼ
 Τϥʔ͕ग़Δ !40 import React, {Component} from 'react'; import TodoList from './TodoList'; class App extends Component { constructor(props) { super(props); this.state = { todos: [ { id: 1, text: 'Hello, world', done: false, }, ], }; } render() { return (

Todo App

); } } export default App;

Slide 41

Slide 41 text

4UBUF w ͦͷ$PNQPOFOUͷঢ়ଶม਺Λอ͍࣋ͯ͠Δ Ὂ ঢ়ଶม਺Λม͑Ε͹ɼͦΕʹԠͯ͡%0.΋࠶ϨϯμϦϯά͞ΕΔ Ὂ UIJTTFU4UBUF Λ࢖ͬͯॻ͖׵͑ͳ͍ͱ࠶ϨϯμϦϯά͞Εͳ͍ !41

Slide 42

Slide 42 text

TSD5PEP-JTUKT w ਌$PNQPOFOU "QQKT ͔Βड͚औͬͨ
 UPEPϦετΛࢠίϯϙʔωϯτͷ5PEPʹ
 ͦΕͧΕड͚౉͍ͯ͠Δɽ !42 import React, {Component} from 'react'; import Todo from './Todo'; class TodoList extends Component { render() { const todos = this.props.todos.map(todo => ( )); return
    {todos}
; } } export default TodoList;

Slide 43

Slide 43 text

1SPQT w 3FBE0OMZ w ਌$PNQPOFOU͔Βࢠ$PNQPOFOU΁ϓϩύςΟΛ౉͢ػೳ w ड͚औͬͨϓϩύςΟ͸QSPQTͷதʹೖ͍ͬͯΔ !43 class TodoList extends Component { render() { const todos = this.props.todos.map(todo => ( )); return
    {todos}
; } } class App extends Component { ... render() { return (

Todo App

); } } src/App.js src/TodoList.js

Slide 44

Slide 44 text

TSD5PEPKT w 5PEPΛදࣔ͢Δ$PNQPOFOU w ΫϦοΫ͞ΕΔͱTUBUFͷEPOFΛ τάϧ͢Δ Ὂ TUBUF͕ߋ৽͞ΕΔͷͰɼ
 %0.΋࠶ϨϯμϦϯά͞ΕΔ !44 import React, {Component} from 'react'; class Todo extends Component { constructor(props) { super(props); this.state = { done: this.props.done, }; } onClick() { this.setState({done: !this.state.done}); } render() { return (
  • this.onClick(e)} style={{textDecoration: this.state.done ? 'line-through' : 'none'}}>

    {this.props.id}: {this.props.text}

    • ); } } export default Todo;

    Slide 45

    Slide 45 text

    ಈ͖·͔ͨ͠ʁ

    Slide 46

    Slide 46 text

    /FYU
 50%0Λ௥Ճ͢Δ

    Slide 47

    Slide 47 text

    ํ਑ JOQVUͱCVUUPOΛ࣋ͭ'PSNDPNQPOFOUΛ࡞Δ "QQͷTUBUFʹ௥Ճ͢ΔͨΊʹɼ"QQଆͰBEENFUIPEΛ࡞ͬͯ
 QSPQTܦ༝Ͱ'PSNʹ౉͢ !47

    Slide 48

    Slide 48 text

    TSD"QQKT w "QQͷTUBUFΛมߋͯ͠ࢠ$PNQPOFOUʹ ఻ൖ͍ͤͯ͘͞ Ὂ TUBUFมߋ༻ͷNFUIPEΛ'PSNTʹ౉͢ !48 class App extends Component { constructor(props) {...} addTodo(text) { const newTodo = { id: Math.max(...this.state.todos.map(obj => obj.id)) + 1, text, done: false, }; this.setState({ todos: [...this.state.todos, newTodo], }); } render() { return (

    Todo App

    this.addTodo(e)}/>
    ); } } export default App;

    Slide 49

    Slide 49 text

    TSD'PSNTKT w JOQVUʹೖྗ͞ΕͨจࣈྻΛTUBUFʹඥ͚ͮΔͨ ΊʹPO$IBOHFͰTFU4UBUF͍ͯ͠Δ Ὂ BEEͷ͔࣌͠஋͕ඞཁͳ͍ͷͰɼ
 3FGTΛ࢖͏ͱ΋ͬͱεϚʔτʹॻ͚Δ Ὂ SFBDUKTPSHEPDTSFGTBOEUIFEPNIUNM Ὂ #VU⚠%POU0WFSVTF3FGT⚠ !49 import React, {Component} from 'react'; class Forms extends Component { constructor(props) { super(props); this.state = { text: '', }; } add() { this.props.addTodo(this.state.text); this.setState({text: ''}); } render() { return (
    this.setState({text: e.target.value})} value={this.state.text}/> this.add()}>Add
    ); } } export default Forms;

    Slide 50

    Slide 50 text

    ಈ͖·͔ͨ͠ʁ

    Slide 51

    Slide 51 text

    /FYU
 EPOFUSVFʹͳͬͨ50%0Λফ͢

    Slide 52

    Slide 52 text

    Ͳ͏΍ͬͯফ͢ʁ w EPOFͷঢ়ଶ͸5PEP$PNQPOFOU͕อ͍࣋ͯ͠Δ w "QQ$PNQPOFOUͰ࡟আϘλϯΛ࣮૷ͯ͠΋ɼݱঢ়EPOF͸ݕ஌Ͱ͖ͳ͍ Ὂ ͭ·Γɼࢠ$PNQPOFOU਌$PNQPOFOU΁ͷ఻ൖ͕ඞཁ Ὂ ਌͔ΒࢦఆͷJEΛ࣋ͭUPEPͷEPOFΛτάϧ͢ΔίʔϧόοΫΛ
 QSPQTܦ༝Ͱ౉͢ !52

    Slide 53

    Slide 53 text

    -JWF$PEJOH εϥΠυ࡞Δͷ͕ΊΜͲ͔ͬͨ͘͞

    Slide 54

    Slide 54 text

    ͏ʔΜ

    Slide 55

    Slide 55 text

    $PNQPOFOUؒͷ΍ΓͱΓ w 3FBDU։ൃͰ໰୊ʹͳΓ͕ͪͳ$PNQPOFOUؒͰͷσʔλͷ΍ΓͱΓ w ΞϓϦͷ֊૚ߏ଄͕૿͑Δ΄ͲɼQSPQTͷόέπϦϨʔʹ Ὂ தؒͷ$PNQPOFOUͰ͸ͦͷQSPQTͷ಺༰Λඞཁͱͯ͠ͳ͍Մೳੑ΋ !55

    Slide 56

    Slide 56 text

    4UPSF

    Slide 57

    Slide 57 text

    8IBUJT4UPSF w άϩʔόϧͳ4UBUFͱ͍͏ೝࣝ ϚαΧϦ͸ࢭΊ͍ͯͩ͘͞ w 'MVY3FEVYΞʔΩςΫνϟ͕Ұൠత͕ͩɼ3FBDUW͔Β$POUFYUͱ ͍͏"1*͕ಋೖ͞ΕɼެࣜػೳͰ4UPSF͕࣮૷Ͱ͖ΔΑ͏ʹͳͬͨ Ὂ IUUQTSFBDUKTPSHEPDTDPOUFYUIUNM Ὂ ਖ਼͘͠͸ٖࣅ4UPSF 'MVYͷ֓೦ͳͷͰ w ࠓճ͸$POUFYUͰ࣮૷ Ὂ 'MVY3FEVY͸·ͨผͷػձʹ !57

    Slide 58

    Slide 58 text

    -JWF$PEJOH εϥΠυ࡞Δͷ͕ΊΜͲ͔ͬͨ͘͞

    Slide 59

    Slide 59 text

    ಈ͖·͔ͨ͠ʁ

    Slide 60

    Slide 60 text

    ͞Βʹ޲͜͏΁1MVT6MUSB "1*Λୟ͍ͯඇಉظʹ4UBUFΛมߋ

    Slide 61

    Slide 61 text

    'FUDI"1* w 9.-)UUQ3FRVFTUʹ୅ΘΔ"1* Ὂ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC"1*'FUDI@"1* w 1SPNJTF͕ฦͬͯ͘ΔͷͰUIFODBUDI͕࢖͑Δ !61

    Slide 62

    Slide 62 text

    1SPNJTF w ඇಉظॲཧͷ࠷ऴతͳ׬ྃ·ͨ͸ࣦഊΛද͢ΦϒδΣΫτ Ὂ IUUQTEFWFMPQFSNP[JMMBPSHKBEPDT8FC+BWB4DSJQU(VJEF6TJOH@QSPNJTFT w ίʔϧόοΫͷ੍ޚ͕ͱͯ΋௚ײతʹͳΔ w UIFOΛܨ͛Δ͜ͱͰ࿈ଓͯ͠ඇಉظॲཧͷ࣮ߦ͕ߦ͑Δ 1SPNJTFνΣʔϯ !62 doSomething() .then((result) => successCallback(result)) .catch((error) => failureCallback(error))

    Slide 63

    Slide 63 text

    -JWF$PEJOH εϥΠυ࡞Δͷ͕ΊΜͲ͔ͬͨ͘͞

    Slide 64

    Slide 64 text

    ಈ͖·͔ͨ͠ʁ

    Slide 65

    Slide 65 text

    νϡʔτϦΞϧऴྃʂ ͓ർΕ༷Ͱͨ͠ʂ

    Slide 66

    Slide 66 text

    4VNNBSZ w 3FBDUΛ࢖͑͹ࣗ༝౓ͷߴ͍8FCΞϓϦέʔγϣϯΛ࡞Δ͜ͱ͕Ͱ͖Δʂ !66

    Slide 67

    Slide 67 text

    ࠓ೔࿩ͯ͠ͳ͍͜ͱ w'MVY3FEVY w5FTU GBDFCPPLKFTU w%FQMPZ wSEQBSUZMJCSBSJFT w3PVUJOH wXJUI&MFDUSPO !67 wXJUI5ZQF4DSJQU w4FSWFS4JEF3FOEFSJOH w1FSGPSNBODFUVOJOH w$44 w3FBDU/BUJWF w&UD

    Slide 68

    Slide 68 text

    ྑ͍3FBDUϥΠϑΛʂ