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
700
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
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
180
ClaudeCodeにキレない技術
gtnao
1
860
ロールが細分化された組織でSREは何をするか?
tgidgd
1
420
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
310
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
580
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
fujie
0
270
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
〜『世界中の家族のこころのインフラ』を目指して”次の10年”へ〜 SREが導いたグローバルサービスの信頼性向上戦略とその舞台裏 / Towards the Next Decade: Enhancing Global Service Reliability
kohbis
3
1.5k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
cdk initで生成されるあのファイル達は何なのか/cdk-init-generated-files
tomoki10
1
670
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
1
390
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Done Done
chrislema
184
16k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Documentation Writing (for coders)
carmenintech
72
4.9k
Fireside Chat
paigeccino
37
3.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Facilitating Awesome Meetings
lara
54
6.5k
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 Ͱॻ͖ͯ͠ΈΑ͏