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
44k
JavaScript Bootcamp 2019
2019年度リクルート新人ブートキャンプ エンジニアコースの講義資料です
Recruit Technologies
June 24, 2019
Tweet
Share
More Decks by Recruit Technologies
See All by Recruit Technologies
障害はチャンスだ! 障害を前向きに捉える
rtechkouhou
1
570
Flutter移行の苦労と、乗り越えた先に得られたもの
rtechkouhou
3
10k
ここ数年間のタウンワークiOSアプリのエンジニアのチャレンジ
rtechkouhou
1
1.4k
大規模環境をAWS Transit Gatewayで設計/移行する前に考える3つのポイントと移行への挑戦
rtechkouhou
1
1.8k
【61期 新人BootCamp】TOC入門
rtechkouhou
3
40k
【RTC新人研修 】 TPS
rtechkouhou
1
39k
Android Boot Camp 2020
rtechkouhou
0
40k
HTML/CSS
rtechkouhou
10
48k
TypeScript Bootcamp 2020
rtechkouhou
9
44k
Other Decks in Technology
See All in Technology
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.4k
VS CodeでAWSを操作しよう
smt7174
7
1.6k
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
150
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
440
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
280
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
260
WebアプリケーションにおけるPDOの使い方入門 / phpcon odawara 2024
meihei3
2
440
Oracle Cloud Infrastructure:2024年4月度サービス・アップデート
oracle4engineer
PRO
1
170
生産性向上チームの紹介
cybozuinsideout
PRO
1
840
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
170
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
430
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
250
Featured
See All Featured
Faster Mobile Websites
deanohume
298
30k
The Illustrated Children's Guide to Kubernetes
chrisshort
30
46k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Thoughts on Productivity
jonyablonski
57
3.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
Principles of Awesome APIs and How to Build Them.
keavy
120
16k
Bash Introduction
62gerente
604
210k
Designing for Performance
lara
601
67k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Designing for humans not robots
tammielis
248
25k
What's in a price? How to price your products and services
michaelherold
237
11k
Writing Fast Ruby
sferik
620
60k
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 Ͱॻ͖ͯ͠ΈΑ͏