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
710
Flutter移行の苦労と、乗り越えた先に得られたもの
rtechkouhou
3
12k
ここ数年間のタウンワーク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
46k
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
10
75k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
2
1.1k
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
880
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
S3アクセス制御の設計ポイント
tommy0124
3
200
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
490
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
430
Android Audio: Beyond Winning On It
atsushieno
0
2.4k
まずはマネコンでちゃちゃっと作ってから、それをCDKにしてみよか。
yamada_r
2
120
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
22
12k
Featured
See All Featured
Docker and Python
trallard
46
3.6k
KATA
mclloyd
32
14k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Code Reviewing Like a Champion
maltzj
525
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Done Done
chrislema
185
16k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
How GitHub (no longer) Works
holman
315
140k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Side Projects
sachag
455
43k
GitHub's CSS Performance
jonrohan
1032
460k
Making Projects Easy
brettharned
117
6.4k
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 Ͱॻ͖ͯ͠ΈΑ͏