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
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.2k
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
540
KubeConにproposalを送りたい人へのアドバイス
sat
PRO
3
260
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
300
アクセス制御にまつわる改善 / Improving access control
itkq
0
550
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
250
VSCodeの拡張機能を作っている話
ebarakazuhiro
1
550
自己改善からチームを動かす! 「セルフエンジニアリングマネージャー」のすゝめ
shoota
6
780
MapLibreとAmazon Location Service
dayjournal
1
160
JAWS-UG Bedrock Claude Night
yamahiro
3
610
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Facilitating Awesome Meetings
lara
42
5.6k
Designing for humans not robots
tammielis
248
25k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
2
3.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
How to name files
jennybc
65
93k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
How to train your dragon (web standard)
notwaldorf
73
5.2k
Building Applications with DynamoDB
mza
88
5.6k
Rails Girls Zürich Keynote
gr2m
91
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
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 Ͱॻ͖ͯ͠ΈΑ͏