Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Bootcamp

JavaScript Bootcamp

2017年4~5月開催「ブートキャンプ特別講座」の資料になります。

Avatar for Recruit Technologies

Recruit Technologies

June 02, 2017
Tweet

More Decks by Recruit Technologies

Other Decks in Technology

Transcript

  1. JavaScript Bootcamp • ࠓ೔Ͱ JavaScript Λ࢖͍౗͢ • JavaScript Λ஌Δ •

    JavaScript ͰΫϥΠΞϯτΛ࡞Δ • JavaScript ͰαʔόΛ࡞Δ
  2. ࿩ͷલʹ • ϦΫϧʔτςΫϊϩδʔζͷ "ϑϩϯτΤϯυΤϯ δχΞ" ͷఆٛ͸޿ͯ͘ਂ͍ • HTML/CSS/JSΛۦ࢖ͯ͠ΫϥΠΞϯτΛ࡞Δ *͚ͩ Ͱ͸ͳ͍*

    • ωοτϫʔΫͷ஌ࣝ΍αʔόͷجૅ஌ࣝ΋༗͢Δ্ ʹͦΕΒΛ౿·͑ͯαΠτશମͷϢʔβϏϦςΟɾ ύϑΥʔϚϯεΛ্͛Δਓ
  3. 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; ... } undefined > test(); 2
  4. JavaScriptΛͱΓ͋͑ͣ࢖ͬͯ ΈΔɻ • ΋͏গ͠ڽͬͨ͜ͱΛͯ͠Έ·͠ΐ͏ // ϑΝΠϧͷதͰɺ࣍ͷ഑ྻΛද͢ɺม਺ pets Λఆٛ͠·͠ΐ͏ɻ const pets

    = ['cat', 'dog', 'rat']; // forϧʔϓΛ࡞ͬͯɺ഑ྻ಺ͷ֤จࣈྻ͕ෳ਺ܗʹͳΔΑ͏ʹมߋ͠·͢ɻ // forϧʔϓͷத͸࣍ͷΑ͏ʹͳΔͰ͠ΐ͏... pets[i] = pets[i] + 's'; forϧʔϓ͕ऴΘͬͨΒɺ console.log() Λ࢖ͬͯ഑ྻ pets Λλʔϛφϧʹදࣔ͠·͠ΐ͏ɻ
  5. JavaScriptΛͱΓ͋͑ͣ࢖ͬͯ ΈΔɻ • ͔͜͜Β͸ԋश໰୊Ͱ͢ɻ $ npm install @recruit-tech/javascripting -g $

    javascripting ͜ΕΛ࣮ߦ͠·͠ΐ͏ɻ ࣮ߦ͕ऴΘͬͨΒ೔ຊޠઃఆʹ্ͨ͠Ͱ্͔Βղ͍ͯΈ·͠ΐ͏ɺͳ͓ Introduction ͱ for ϧʔϓʹ͍ͭͯ͸طʹ্ͷ໰୊Ͱ΍ͬͯ·͢ͷͰɺҎԼͷ໰୊Λͱ͖·͠ΐ͏ɻ # ਖ਼نදݱΛ࢖͑ɺϧʔΫ # Arrays more # fizzbuzz 1࣌ؒҐͰʂʂʂ
  6. JavaScript ࠓੲ෺ޠ • Before JS: 1990 ೥ɺ World Wide Web

    Λݩ ʹ্࢙ͨ͠ॳͷϒϥ΢β͕Ͱ͖Δ Tim Berners Lee શͯͷGod Father ͪͳΈʹ͜ͷલ νϡʔϦϯά৆Λड৆
  7. JavaScript ࠓੲ෺ޠ • Before JS: 1994೥ Netscape 1.0 released ౰ॳ͸Mozillaͱ͍͏ίʔυ

    ωʔϜɺʮNetscape ͱॻ͍ ͯMozillaͱಡΉʯͱ΋ݴΘ Εͯͨɻ
  8. JavaScript ࠓੲ෺ޠ • 1995: Netscape 2.0 ʹ Script ݴޠϕʔεࡌͤ Δ໨తͰ։ൃ։࢝

    SchemeϕʔεͰ͍͍ͷʁ ͍΍ɺɺɺ΋͏গ͠JavaͬΆ͘ɺObject ࢦ޲ͬΆ͘པΉ
  9. JavaScript ࠓੲ෺ޠ • 1995 12݄: Netscape Navigator 2.0 beta 3

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

    Ϧ Ϧʔε ͪͳΈʹಉ࣌ظʹ ServerSide JavaScript ΋ॳϦϦʔ ε Netscape Enterprise Server ੈքॳͷServer SideͰ΋ಈ͘JavaScript
  11. ๻ͷߏஙͨ͠HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo Manager</title> </head>

    <body> <form method="POST" action="/todos"> <input type="text" > <input type="submit" > </form> <div> <ul> <li><input type="checkbox">test</li> <li><input type="checkbox">test</li> <li><input type="checkbox">test</li> <li><input type="checkbox">test</li> </ul> </div> </body> </html>
  12. ΫϥΠΞϯτΛॻ͘ # public/js ҎԼʹԼهͷεΫϦϓτΛ࡞Δ controller.js - HTML͔ΒmodelͱviewΛܨ͙΋ͷ view.js - දࣔΛ࡞Δ΋ͷ

    model.js - fetchͯ͠஋Λऔಘ͢Δ΋ͷ main.js - ΦϒδΣΫτ؅ཧɺى఺ͱ࣮ͯ͠ߦ͞ΕΔ΋ͷ ίʔυΛͪΒݟ͠ͳ͕ΒҰॹʹॻ͍͍ͯ͜͏ɻ
  13. TestΛॻ͘ • test Λॻ͘ʹ͸ͦͷ··Ͱ͸μϝͳͷͰAPI΍ constantsͷ஋͕ࠩ͠ସ͑ΒΕΔΑ͏ʹ͢Δඞ ཁ͕͋Δɻ • ͜ΕΛ Test Double

    ͱ͍͏ // globalͷ஋Ͱࠩ͠ସ͑ΒΕΔΑ͏ʹ͓ͯ͘͠ɻ const TODO_URL = global.TODO_URL || '/todos'; const fetch = global.fetch;
  14. 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 Λॻ͍ͯத਎Λॻ͘
  15. 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
  16. JavaScriptͰαʔόΛ࡞Δ • express ΛΠϯετʔϧͯ͠αʔόΛ࡞ͬͯ ΈΔ • npm install express —save

    • express ͰstaticαʔόΛ࡞Δ • express ͰϦΫΤετΛॲཧ͢Δ
  17. 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
  18. 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}`); }); ```