Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JavaScript Bootcamp 2019
Search
Recruit Technologies
June 24, 2019
Technology
0
45k
JavaScript Bootcamp 2019
2019年度リクルート新人ブートキャンプ エンジニアコースの講義資料です
Recruit Technologies
June 24, 2019
Tweet
Share
More Decks by Recruit Technologies
See All by Recruit Technologies
障害はチャンスだ! 障害を前向きに捉える
rtechkouhou
1
670
Flutter移行の苦労と、乗り越えた先に得られたもの
rtechkouhou
3
11k
ここ数年間のタウンワークiOSアプリのエンジニアのチャレンジ
rtechkouhou
1
1.5k
大規模環境をAWS Transit Gatewayで設計/移行する前に考える3つのポイントと移行への挑戦
rtechkouhou
1
1.9k
【61期 新人BootCamp】TOC入門
rtechkouhou
3
42k
【RTC新人研修 】 TPS
rtechkouhou
1
41k
Android Boot Camp 2020
rtechkouhou
0
41k
HTML/CSS
rtechkouhou
10
51k
TypeScript Bootcamp 2020
rtechkouhou
9
45k
Other Decks in Technology
See All in Technology
短縮URLをお手軽に導入しよう
nakasho
0
140
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
570
組織におけるCCoEの役割とAWS活用事例
nrinetcom
PRO
4
120
(機械学習システムでも) SLO から始める信頼性構築 - ゆる SRE#9 2025/02/21
daigo0927
0
260
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
110
偏光画像処理ライブラリを作った話
elerac
1
160
サイト信頼性エンジニアリングとAmazon Web Services / SRE and AWS
ymotongpoo
7
1.3k
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
4.5k
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
8
3.3k
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
140
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
130
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Documentation Writing (for coders)
carmenintech
67
4.6k
Building an army of robots
kneath
303
45k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Designing for humans not robots
tammielis
250
25k
Building Applications with DynamoDB
mza
93
6.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
How to Ace a Technical Interview
jacobian
276
23k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
430
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Transcript
JavaScript Bootcamp 2019 2019, 12th April @ Recruit Technologies Kento
TSUJI @maxmellon
ࣗݾհ • Github: @maxmellon • Twitter: @maxmellon_9039 • ϦΫϧʔτςΫϊϩδʔζ 18
৽ଔೖࣾ • ࠷ۙ Apex ͬͯΔΑʙ
Δ͜ͱɺΒͳ͍͜ͱ Δ͜ͱ Βͳ͍͜ͱ ɾ ɾ جຊతͳه๏ ɾ ΫϥΠΞϯτ࣮ ɾ αʔόʔ࣮
ɾ ςετίʔυ࣮ ɾ σϓϩΠ ޙͰݟ͓ͯ͘ͱྑͦ͞͏ͳͷ https://github.com/asciidwango/js-primer js-primer Ͱݕࡧ
ϑϩϯτΤϯυΤϯδχΞͱ JavaScript • ϦΫϧʔτςΫϊϩδʔζͷ “ϑϩϯτΤϯυΤϯδχΞ” ͷఆٛͯ͘ਂ͍ • HTML/CSS/JSΛ۶ࢦͯ͠ΫϥΠΞϯτΛ ࡞Δ͚ͩͰͳ͍
• ϑϩϯτΤϯυͷͨΊͷαʔόʔύϑΥʔϚϯ ενϡʔχϯάɺϢʔβϏϦςΟ্ͳͲ༷ʑ
ϦΫϧʔτͷ ϑϩϯτΤϯδχΞͬͯ ͳʹ͢Δͷʁ
ࣗͷ߹
ۀ༰ • Airγϑτͱ͍͏αʔϏεͷ ϑϩϯτΤϯυΛ։ൃ͍ͯ͠Δ • ࠷ۙओʹύϑΥʔϚϯενϡʔϯϯά • ώΞϦϯάߦͬͨΓ͢Δ͠ Ϣʔβʔମݧ࠷େԽͷͨΊʹͳΜͰΔ
Airγϑτ ͱ
None
None
None
"JSγϑτར༻͍ͯ͠ΔͷͰ͕͢ Ξοϓσʔτ͕͔͋ͬͯΒ ͘͢͝ॏ͍ΜͰ͢ΑͶʜ Ͳ͏ʹ͔ͯ͠ ૣ͘ͳΒͳ͍Ͱ͠ΐ͏͔ʁ ͳΔ΄Ͳʜ ࣗͷύιίϯ͕ѱ͍ͷͰ͠ΐ͏͔ʁ ΫϥΠΞϯτ ΅͘ ↓
͋Δ
࣮ࡍʹݟʹߦ͘ͷࣄ
- ͍ݪҼαʔόʔͰͳ͔ͬͨ - ΫϥΠΞϯτͷPC͕εϖοΫͩͬͨ - ։ൃऀʹൺͯεϖοΫͳPC͕ଟ͘ར༻͞Ε͍ͯΔ ݹ͍ ͍ ฉ͍ͯΈΔͱ
• γϑτͷྔ͕༧ΑΓଟ͔ͬͨ • άϧʔϓػೳͰళฮͷछผΛ͍ͯͨ͠ • HTMLͷඳըΑΓJavaScriptͷ࣮ߦ͕͔ͬͨ ϘτϧωοΫͷ΄ͱΜͲ͕ +BWB4DSJQUͷ࣮ߦ ˋ 9.8ඵ
1.1ඵ 3.5ඵ 0.1ඵ JavaScriptͷ࣮ߦ HTMLͷඳը CSSͷద༻ ͦͷଞ ࣮ࡍʹ๚͢Δͱ
ώΞϦϯάͱσʔλ͔Β ௐࠪͯ͠ϘτϧωοΫΛಛఆ
ͨ͘͞ΜͷΛ ಛఆɺղܾ ϝϯόʔζϒϩάʹ ܝࡌࡁΈ
13.5 ඵ͔Β 2.6ඵʹվળ After Before 2.6ඵ 13.5ඵ ౦ژNodeֶԂࡇ ‘18 HTML5
Conferenceʹͯ հ 11ඵ ແବΛΧοτ ඳըྃ ඳըྃ ܭࢉϦιʔεͷऔಘ ݁Ռ 50%ͷϢʔβʔͰ 5.0ඵ͔Β1.5ඵʹऩ·ΔΑ͏ʹ
ߴ͍ٕज़ͱ ͍ܰϑοτϫʔΫ Λࢦ͕ͯ͠Μͬͯ·͢
ࠓͷྲྀΕ 1. JavaScript ΛͱΓ͍͋ͣ৮ͬͯΈΔ 2. JavaScript Ͱ؆୯ͳΞϓϦέʔγϣϯΛ ࡞ͬͯΈΔ
৮ͬͯΈΑ͏
ͱΓ͋͑ͣಈ͔ͯ͠ΈΔ
$ node -v v11.10.1 $ node > // ͜͜ͰJavaScriptΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖·͢ undefined
> 1 + 1; 2 > var test = "hoge"; undefined > test 'hoge' > function sample() { ... var num = 5; ... return num; ... } undefined > sample() 5
Hello World
Hello World
$ touch helloworld.js $ code helloworld.js $ node helloworld.js Hello
World 01 02 console.log('Hello World');
JavaScript ͷ͋Ε͜Ε • Variable declaration • function • object •
class • promise
Variable declaration
Variable declaration είʔϓ ࠶ೖ Մมෆม DPOTU MFU WBS
Variable declaration είʔϓ ࠶ೖ Մมෆม DPOTU ϒϩοΫ ෆՄ Մม MFU
ϒϩοΫ Մೳ Մม WBS ؔ Մೳ Մม
είʔϓ let a = 1; if (a === 1) {
let a = 2; console.log(a); // 2 } console.log(a); // 1 ϒϩοΫ var a = 1; if (a === 1) { var a = 2; console.log(a); // 2 } console.log(a); // 2 ؔ (άϩʔόϧ)
࠶ೖ ͱ ՄมɺෆՄม ؔ (άϩʔόϧ) const ࠶ೖෆՄೳ const a
= 1 a = 2 Uncaught SyntaxError: Identifier 'a' has already been declared const ࠶ೖ͕Ͱ͖ͳ͍͚ͩͰॻ͖͑ΕΔ const a = [] a.push(1) console.log(a) // [1] a.pop() console.log(a) // []
ͲΕ͔͍͍ͭ͑ͷʁ • ࠶ೖϩδοΫΛෳࡶԽͤ͞Δ͜ͱ͕ଟ͍ → جຊతʹ const • Ͳ͏ͯ͠࠶ೖ͍ͨ͠ͱ͖ ˠ let
• var lint Ͱېࢭ͢Δ͜ͱଟ͍
function
ؔએݴͱؔࣜ function Greeting() { console.log('hello') } const Greeting = function()
{ console.log('hello') } • syntax Α͘ࣅ͍ͯΔ • એݴ ר্͖͕͛ى͖Δ
ؔࣜͱΞϩʔϑΝϯΫγϣϯ const Greeting = function() { console.log('hello') } const Greeting
= () => { console.log('hello') } • ͔͚͘Δ • ΞϩʔϑΝϯΫγϣϯ this Λଋറ͠ͳ͍ ؔࣜͱΞϩʔϑΝϯΫγϣϯͷҧ͍ ͔͚͘ΔͷͰΞϩʔϑΝϯΫγϣϯΛ͏໘ଟ͍
JavaScript ʹ͓͚Δ this • ΞϩʔؔҎ֎ͷؔ • Ϋϥε • ΦϒδΣΫτ •
bindؔ thisͷίϯςΩετ͕มΘΔ໘ ҰൠతͳݴޠͱUIJT͕ҧ͏ͱݴΘΕΔͷ UIJTͷίϯςΩετ͕มΘͬͯ͠·͏͔Β https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/this
ΞϩʔϑΝϯΫγϣϯ const foo = (a, b) => { return a
+ b } ΞϩʔϑΝϯΫγϣϯͰ͕ࣜҰͭͷͱ͖ʹݶΓϒϩοΫΛলུ͔͚ͯ͠Δ const foo = (a, b) => a + b // ·ͨ const foo = (a, b) => ( a + b ) ϒϩοΫΛলུͨ͠߹ɼͦͷࣜΛ࣮ߦͨ݁͠Ռ͕ return ͞ΕΔ
Ҿ function doSomeThing(a, b, c = 0) { console.log('a %o',
a) console.log('b %o', b) console.log('c %o', c) } doSomeThing(1, 2) // a 1 // b 2 // c 0 doSomeThing(...[1, 2, 3]) // a 1 // b 2 // c 3 function doSomeThing(...args) { console.log('args %o', args) } doSomeThing(1, 2, 3) // args [1, 2, 3] doSomeThing([1], 2, 3) // args [[1], 2, 3] doSomeThing(...[1, 2, 3]) // args [1, 2, 3] σϑΥϧτҾ Մม
object
Objectͱ • σʔλͱػೳͷू߹ • ϓϩύςΟͱϝιου͕ઃఆͰ͖Δ
ྫ const person = { name: ['Bob', 'Smith'], age: 32,
gender: 'male', interests: ['music', 'skiing'], bio() { alert(`${this.name.join(' ')} is ${this.age} years old.`); }, greeting() { alert('Hi! I\'m ' + this.name[0] + '.'); } };
objectʹ͓͚Δmethod const person = { greeting() { alert('Hi!'); } };
const person = { greeting: function() { alert('Hi!'); } }; • ӈͷํ͕͔͚͘Δ • ҙຯશ͘ಉ͡
const person = { _age: 25, _name: 'maxmellon', get age()
{ return this._age; }, get name() { return this._name; } }; ObjectͰήολʔηολʔ͕͑Δ • private ͕ͳ͔ͬͨ࣌ ͜͏͍͏ײ͡ͰΧϓηϧԽͯͨ͠
Object Λ࡞Δ const age = 23 const name = 'Kento
TSUJI' const parson = { age: age, name: name, } ͜Ε ͜͏͔͚Δ const age = 23 const name = 'Kento TSUJI' const parson = { age, name, }
Object ͔ΒΛऔΓग़͢ const age = parson.age const name = parson.name
͜Ε const { age, name } = parson ͜͏͔͚Δ
Object Λίϐʔ͢Δ const copied = { ...parson } const copied
= Object.assign({}, parson) Shallow Copy جຊతʹͬͪ͜ͷॻ͖ํͰॻ͘ Object ͕ωετͨ͠ͱ͖ɼ ࢠͷObjectͷࢀরมԽ͠ͳ͍͜ͱʹҙ ͜ΕΛάάΔͱ͖ `spread operator` ͱ͔ εϓϨουԋࢉࢠͱ͔
Object ΛϚʔδ͢Δ const a = { foo: 1, hoge: 'a',
} const b = { hoge: 'b', poge: 2, } const merged = { ...a, ...b } { foo: 1, hoge: 'b', poge: 2, } ϚʔδͰ `spread operator` ͕͑Δ
class
ΫϥεએݴͱΫϥεࣜ class Hoge { method() { } } const
Hoge = class { method() { } } • Ϋϥεએݴ ר্͖͕͛ى͖ͳ͍ const Hoge = class Hoge { method() { } } Ϋϥεએݴ Ϋϥεࣜ ໊લ͖Ϋϥεࣜ
class Rectangle { constructor(height, width) { this.height = height; this.width
= width; } // ήολʔ get area() { return this.calcArea(); } // ϝιου calcArea() { return this.height * this.width; } } const square = new Rectangle(10, 10); console.log(square.area); // 100 square.height = 20; // 'aaaa' https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes ϝιουఆٛ
Tips • JavaScriptprototypeϕʔεͷݴޠ • class prorotypeͱObjectΛͬͨ දݱΛ؆ܿʹΘ͔Γ͘͢ॻͨ͘Ίͷͷ • ͳͷͰ͍ΘΏΔΠϯελϯεϝιου
AnyClass.ptototype.method ͷΑ͏ʹදݱ͢Δ ↑ ͜Ε new AnyClass().method() • ελςΟοΫؔAnyClass.staticMethod
༨ஊ private class field
ϞμϯͳϒϥβͰprivate field ͕͑Δ • ϨΨγʔϒϥβͰ͏ʹ transpile ͳͲͷϓϦϓϩηε͕ඞཁ https://github.com/tc39/proposal-private-fields/blob/master/OLD_README.md class Point
{ #x = 0; #y = 0; constructor(x = 0, y = 0) { this.#x = +x; this.#y = +y; } get x() { return this.#x } set x(value) { this.#x = +value } get y() { return this.#y } set y(value) { this.#y = +value } }
ϞμϯͳϒϥβͰprivate field ͕͑Δ • ϨΨγʔϒϥβͰ͏ʹ transpile ͳͲͷϓϦϓϩηε͕ඞཁ https://github.com/tc39/proposal-private-fields/blob/master/OLD_README.md class Point
{ #x = 0; #y = 0; constructor(x = 0, y = 0) { this.#x = +x; this.#y = +y; } get x() { return this.#x } set x(value) { this.#x = +value } get y() { return this.#y } set y(value) { this.#y = +value } }
ಉظ / ඇಉظ
͠ඇಉظ͕ͳ͔ͬͨΒͲ͏ͳΔ͔ • αʔόʔ͔ΒσʔλΛड͚औΔ·Ͱ ଞͷૢ࡞͕Ͱ͖ͳ͍ • ΫϦοΫ͢Δͱϒϥβ͕ݻ·Δ • ॲཧ͕Ұ͔ͭͣͭ͠Ͱ͖ͳ͍
callbackʹΑΔඇಉظ taskA(() => { taskB(() => { taskC(() => {
… }) }) }) ͲΜͲΜωετ͕ਂ͘ͳ͍ͬͯͬͯ͠·͏
promise
promise new Promise((resolve, reject) => { asynchronizedTask((err, result) => {
if (err) reject(err) resolve(result) }) }).then(res => console.log(res)) .catch(err => console.error(err)) • ඇಉظॲཧͷநԽ • then Ͱ ޭͨ͠ͱ͖ͷϋϯυϥΛ ༩͢Δ ৽͍͠PromiseΛฦ͢ (ݫີʹࣦഊϋϯυϥՃͰ͖Δʣ • catch Ͱ ࣦഊϋϯυϥͷίʔϧόοΫΛ༩͢Δ
taskA(() => { taskB(() => { taskC(() => { …
}) }) }) taskA() .then(() => taskB()) .then(() => taskC()) callbackΑΓΘ͔Γ͘͢ॻ͘͜ͱ͕Ͱ͖Δ
promise QSPNJTF UIFO IBOEMFS UIFO IBOEMFS DBUDI PO3FKFDUJPO
FSSPSIBOEMJOH QSPNJTF UIFO IBOE UIFO IBOE DBUDI PO3FKF ػঢ়ଶ ޭ ࣦഊ promise͕ࣦഊͨ͠ͱ͖ thenͷୈೋҾͷhandlerͰྫ֎͕ग़ͨͱ͖ return return ޭ ࣦഊ thenͷϋϯυϥඞͣPromiseΛฦ͢ͷͰ chainͰ͖Δ chainͰ͖Δ
example new Promise((resolve) => { // 1ඵޙʹ ୈ1ҾͷؔΛ࣮ߦ͢Δ setTimeout(() =>
resolve(1), 1000) }).then((res) => { console.log(res) return res + 1 }).then((res) => { console.log(res) return res + 1 }).then((res) => { console.log(res) return res + 1 }) ࣮ߦ͢ΔͱͲΜͳϩάग़ྗ͞ΕΔʁ
fetch API const url = 'https://hacker-news.firebaseio.com/v0/item/2921983.json? print=pretty' fetch(url) .then(resp =>
resp.json()) .then(resp => console.log(resp)) • ྫ͑ɼhacker news ͷ API Λୟ͘ͱ͢Δ { "by" : "norvig", "id" : 2921983, "kids" : [ 2922097, 2922429, 2924562, 2922709, 2922573, 2922140, 2922141 ], "parent" : 2921506, "text" : "Aw shucks, guys ... you make me blush with your compliments.<p>Tell you what, Ill make a deal: I'll keep writing if you keep reading. K?", "time" : 1314211127, "type" : "comment" }
async / await
async function function resolveAfter2Seconds() { return new Promise(resolve => {
setTimeout(() => { resolve('resolved'); }, 2000); }); } async function asyncCall() { console.log('calling'); const result = await resolveAfter2Seconds(); console.log(result); // expected output: 'resolved' } ಉظؔͷΑ͏ʹPromiseΛѻ͏
const doSomeThing = () => { taskA() .then(() => taskB())
.then(() => taskC()) } callbackΑΓΘ͔Γ͘͢ॻ͘͜ͱ͕Ͱ͖Δ const doSomeThing = async () => { await taskA() await taskB() await taksC() }
ԋश
४උ $ npm install @recruit-tech/javascripting -g $ javascripting ↑ ͜ΕΛ࣮ߦ
↓ Έ͍ͨͳը໘͕ͰΕ OK
ຊޠͷม͑ํ
ΨϯΨϯ ਐΊͪΌ͍ͬͯͩ͘͞ (1h ΄ͲऔΓ·͢)
ޙ
ԋश 1. JavaScript ΛͱΓ͍͋ͣ৮ͬͯΈΔ 2. JavaScript Ͱ؆୯ͳΞϓϦέʔγϣϯΛ ࡞ͬͯΈΔ
ࠔͬͨͱ͖ • ҰൠతͳهࣄͷલʹυΩϡϝϯτΛಡΉบΛ ͚ͭ·͠ΐ͏ • ͠OSSΛར༻͍ͯ͠ΔͷͰ͋Εɺ ιʔείʔυಡΉΑ͏ʹҙࣝ͠·͠ΐ͏ • ࠓճͷ߹ɺMDN͕࠷ࢀߟʹͳΔͱ ͓͍·͢
ex. JavaScript ͔Β DOMΛ࡞Γ͍ͨ
͜͜Ͱ͑ͦ͏ͳAPI • Document.createElement https://developer.mozilla.org/ja/docs/Web/API/Document/createElement • Document.querySelector https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector • Array.prototype.forEach https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
• Array.prototype.map https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
JavaScript͔ΒDOMΛૢ࡞͢Δ • DOMπϦʔͷ࡞ํ๏ https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree
0. ༻ҙ • https://github.com/MaxMEllon/todo-mvc/ Λfork • git clone • npm
install • npm start • ϒϥβͰ http://localhost:3000 ʹΞΫηεʂ
1. APIΛઃܭ͢Δ • create (GET) read (POST) update (PATCH) delete
(DELETE) ͷ4ͭ • read TODO Λશ݅औಘ • TODO ໊લͱ͔ྃͨ͠ Ͳ͏͔ͷεςʔλε͔Βߏ ͻͱ·ͣ Read ͚ͩ Agreed Λͬͯ ઃܭͯ͠ΈΑ͏
2. API͔ΒTODOҰཡΛඳը͢Δ ͖ͬ͞࡞ͬͨ agreed ͔Βऔಘʂ
3. Form͔ΒจࣈྻΛೖྗͯ͠TODOΛ ࡞Ͱ͖ΔΑ͏ʹ͢Δ
4. TODOΛྃঢ়ଶʹͰ͖ΔΑ͏ʹ͢Δ (API௨৴ࠐͰ)
5. TODOΛআͰ͖ΔΑ͏ʹ͢Δ
6. TODOͷDONEʹͳͬͨ݅Λ͑Δ
7. Server Λ࣮͢Δ
Φϓγϣφϧͳ՝ • TODOͷ໊લΛฤूͰ͖ΔΑ͏ʹͯ͠ΈΑ͏ • σβΠϯΛม͑ͯΈΑ͏ • MVVMFluxͰॻ͖ͯ͠ΈΑ͏ • WebComponents Ͱॻ͖ͯ͠ΈΑ͏