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
Search
Recruit
PRO
August 18, 2021
Technology
1
11k
JavaScript
2021年度リクルート エンジニアコース新人研修の講義資料です
Recruit
PRO
August 18, 2021
Tweet
Share
More Decks by Recruit
See All by Recruit
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
2
220
Datadog による 自己完結的アプリケーションモニタリング
recruitengineers
PRO
3
250
プロデザ! BY リクルートvol.17_『じゃらんnet』公式アプリの高速リニューアル事例を大公開
recruitengineers
PRO
5
190
自己完結な開発者組織を支える プラットフォーム作り
recruitengineers
PRO
2
290
検索エンジニアが考える、 生成AI時代の人間の付加価値とは
recruitengineers
PRO
2
110
エンジニア思考で解決! 家事育児を劇的に進化させる開発プロセス応用術
recruitengineers
PRO
2
100
GraphQL「良さ」・「難しさ」再探訪 〜スタディサプリにおける実例〜 / StudySapuri with GraphQL
recruitengineers
PRO
21
4.6k
プロデザ番外編_リクルートのデザイン組織のご紹介
recruitengineers
PRO
2
190
プロダクトプラットフォーム開発におけるフィー ドバックループの回し方
recruitengineers
PRO
4
570
Other Decks in Technology
See All in Technology
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
Oracle Exadata Database Service on Cloud@Customer (ExaDB-C@C) - UI スクリーン・キャプチャ集
oracle4engineer
PRO
1
1.1k
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
180
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
22
13k
The CloudCompare project by Dr. Daniel Girardeau-Montaut
kentaitakura
0
490
コンパウンドスタートアップのためのスケーラブルでセキュアなInfrastructure as Codeパイプラインを考える / Scalable and Secure Infrastructure as Code Pipeline for a Compound Startup
yuyatakeyama
3
1.8k
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
110
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
Amplify Gen2を 拡張してみよう JAWS-UG北陸新幹線 ( 福井開催 ) 2024-04-06/Let's extend Amplify Gen2
fossamagna
0
280
コードを書く隙間を見つけて生きていく技術/Findy 思考の現在地
fujiwara3
23
4.6k
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
4
1.7k
2024-04-06 AMeDAS to Lagoon SORACOM UG 2024-04-06
anysonica
0
120
Featured
See All Featured
What's new in Ruby 2.0
geeforr
336
31k
How to Ace a Technical Interview
jacobian
272
22k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.3k
A Tale of Four Properties
chriscoyier
150
22k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Code Reviewing Like a Champion
maltzj
513
39k
Building Effective Engineering Teams - LeadDev
addyosmani
26
1.8k
Atom: Resistance is Futile
akmur
258
25k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
Why Our Code Smells
bkeepers
PRO
331
56k
Transcript
JavaScript Bootcamp 2021 2021, 26 April @ Recruit Kento TSUJI
@maxmellon
Δ͜ͱɺΒͳ͍͜ͱ Δ͜ͱ Βͳ͍͜ͱ ɾ ϥΠϒϥϦͷ͍ํ ɾ buildpreprocessपΓ ɾ ϨΨγʔͳه๏ͷৄࡉ (͓ͬͯ͘͜ͱॏཁ)
ɾ جຊతͳه๏ ɾ ΫϥΠΞϯτ࣮ ɾ View ͱ ϩδοΫͷ Γ͚ ޙͰݟ͓ͯ͘ͱྑͦ͞͏ͳͷ https://github.com/asciidwango/js-primer js-primer Ͱݕࡧ
ࠓͷྲྀΕ 1. JavaScript ͷجຊ 2. ԋश
৮ͬͯΈΑ͏
ͱΓ͋͑ͣಈ͔ͯ͠ΈΔ PDF ͰΈ͍ͯΔํ : gifΞχϝͳͷͰදࣔ͞Ε·ͤΜ
$ node -v v14.16.1 $ node > // ͜͜ͰJavaScriptΛ࣮ߦ͢Δ͜ͱ͕Ͱ͖·͢ undefined
> 1 + 1; 2 > var test = "hoge"; undefined > test 'hoge' > function sample() { ... var num = 5; ... return num; ... } undefined > sample() 5
ϒϥβͰಈ͔ͯ͠ΈΔ
Chrome Devtools ΞυϨεόʔ͔Β http://example.com ΞΫηε ͜Ε
Node.js ͷ REPLͷΑ͏ʹ ࣮ߦͰ͖Δ ϩάग़ྗʹՃ͑ͯ࠷ޙͷࣜͷ݁Ռ͕දࣔ͞ΕΔ
௨৴༰ΛΈͯΈΔ
Chrome Devtools ͜Ε
͕͘͜͜ͳ͍ͬͯΔͷΛ֬ೝ͔ͯ͠ΒϦϩʔυ͢Δ C
JavaScript ͷ ϑΝΠϧΛ ࡞ͬͯಈ͔ͯ͠ΈΔ
Hello World PDF ͰΈ͍ͯΔํ : gifΞχϝͳͷͰදࣔ͞Ε·ͤΜ
$ touch helloworld.js $ code helloworld.js $ node helloworld.js Hello
World 01 02 console.log('Hello World');
αʔόʔαΠυͷ JavaScript ͱ ΫϥΠΞϯταΠυͷ JavaScript • Ұൠతʹ Node.js Ͱಈ͔͢ JavaScript
Λ αʔόʔαΠυͷ JavaScript • ϒϥβͰಈ͔͢ JavaScript Λ ΫϥΠΞϯταΠυͷ JavaScript
JavaScript ͷ Syntax
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 Ͱېࢭ͢Δ͜ͱଟ͍
ࣜͱจ
ࣜͱจ • JavaScript จ (Statement) ͱ ࣜ (Expression) ͔Βߏ͞Ε͍ͯΔ
• ࣜධՁ͢Δͱ݁Ռͷ͕͋Δ • จॲཧͷ̍εςοϓ • ࣜจʹͳΕΔ
ࣜ • ؆୯ʹݴ͏ͱมʹೖͰ͖Δͷ • 13 ‘foo’ ͱ͍ͬͨϦςϥϧ • bar
ͱ͍͏ ม • ؔࣜ (ޙड़) ͳͲͳͲ
ࣜ // 1 ͔ࣜͩΒೖͰ͖Δ const a = 1 // JavaScript
ͷੈքͰؔࣜ const doSomeThing = function() { console.log('doSomeThing') } // ͕ؔೖ͞Ε͍ͯΔͷͰݺͼग़͢͜ͱ͕Ͱ͖Δ doSomeThing()
จ • จॲཧ͢Δ 1 εςοϓ • จʹ ; Λ͚ͭΔͱ จͷ۠ΓʹͳΔ
• ; Λ͚ͭͳͯ͘ ASI ͕উखʹ ; Λ͍ΕΔ • if จ for จ จ͔ͩΒೖͰ͖ͳ͍ ΦʔτηϛίϩϯΠϯαʔγϣϯ
ϒϩοΫจ • {, } ΛͬͯෳͷจΛؚΉจΛॻ͚Δ { console.log("hoge"); console.log("poge"); } if
(true) { console.log("hoge"); console.log("poge"); } • ྫ : if จͱϒϩοΫจͷΈ߹Θͤ
function
ؔએݴͱؔࣜ function Greeting() { console.log('hello') } • จͱࣜͱ͍͏͜ͱ͕ҧ͏ • એݴר্͖͕͛ى͖Δ
const Greeting = function() { console.log('hello') } ؔએݴ ؔࣜ
ؔࣜͱΞϩʔϑΝϯΫγϣϯ • ͔͚͘Δ • ΞϩʔϑΝϯΫγϣϯ this Λଋറ͠ͳ͍ ؔࣜͱΞϩʔϑΝϯΫγϣϯͷҧ͍ ͔͚͘ΔͷͰΞϩʔϑΝϯΫγϣϯΛ͏໘ଟ͍ const
Greeting = function() { console.log('hello') } const Greeting = () => { console.log(‘hello') }
ଋറͱ 5IJT 8JOEPX %PDVNFOU *OTUBODF" • ϝϞϦ্ͷ object ͱࣝผࢠ Λඥ͚Δ͜ͱ
• JavaScript ͷΞϩʔؔͰͳ͍ؔ this ͱ͍͏ࣝผࢠʹ ର࣮ͯ͠ߦ͢ΔίϯςΩετʹԠͯ͡ඥ͚Δ object ͕มΘΔ
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 Λ࡞Δ const age = 26 const name = 'Kento
TSUJI' const parson = { age: age, name: name, } ͜Ε ͜͏͔͚Δ const age = 26 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) Object.assign ʹΑΔ Shallow Copy εϓϨου ʹΑΔ Shallow Copy Object ͕ωετͨ͠ͱ͖ɼ ࢠͷObjectͷࢀরมԽ͠ͳ͍͜ͱʹҙ ԋࢉࢠ͡Όͳ͍͚ͲԿނ͔ εϓϨουԋࢉࢠͱΑ͘ݴΘΕ͕ͪ (MDN্Ұ࣌ظԋࢉࢠදهͩͬͨ) Object.assign ͱ εϓϨουߏจ Ұݟྨࣅ͍ͯ͠Δ͕ҧ͍͕͋ΔͷͰҙ ಛʹ Object.prototype ͕ॻ͖͑ΒΕ͍ͯΔ߹ ಘΒΕΔͷ͕มΘ͖ͬͯ·͢ JavaScript ͷ༷ ϨϕϧͰ શ͘ผͷૢ࡞Λߦ͍ͬͯ·͢ (assign Set, spread CreateDataPropertyOrThrow
Object ΛϚʔδ͢Δ const a = { foo: 1, hoge: 'a',
} const b = { hoge: 'b', poge: 2, } const merged = { ...a, ...b } { foo: 1, hoge: 'b', poge: 2, } ϚʔδͰ `spread` ͕͑Δ
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.prototype.method ͷΑ͏ʹදݱ͢Δ ↑ ͜Ε new AnyClass().method() • ελςΟοΫؔAnyClass.staticMethod ࣮࣭తʹҥߏจ͚ͩͲɼclassߏจͰॻ͔ΕͨͷΛ prototype Ͱਖ਼֬ʹ࠶ݱ͢Δͷͪΐͬͱେม
༨ஊ 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 } }
ಉظ / ඇಉظ
͠ඇಉظ͕ͳ͔ͬͨΒͲ͏ͳΔ͔ • αʔόʔ͔ΒσʔλΛड͚औΔ·Ͱ ଞͷૢ࡞͕Ͱ͖ͳ͍ • ΫϦοΫ͢Δͱϒϥβ͕ݻ·Δ • ॲཧ͕Ұ͔ͭͣͭ͠Ͱ͖ͳ͍ • ϒϥβͷ
JavaScript ݪଇγϯάϧεϨου (main thread) Ͱ࣮ߦ͞ΕΔ (worker ͳͲ͋Δ) Α͋͘Δצҧ͍ : γϯάϧεϨου === ಉظॲཧ͔͠ͳ͍ ࣮ࡍʹΠϕϯτϧʔϓͱ͍͏ͷͰλεΫΛΩϡʔͰཧͯ͠ ͦͷ࣌࣌Ͱಈ͔͖͢ॲཧΛΩϡʔ͔ΒऔΓग़ͯ͠ॲཧ͍ͯ͠Δ
Πϕϯτϧʔϓ ֓ཁ 4DSJQU 5JNFS &WFOU DMJDL NPVTFNPWF .JDSPUBTL 3FOEFS .JDSPUBTL
3FOEFS <script src=”…”> ϒϥβͷ rendering ͳʹ͔͠ΖͷλεΫ࣮ߦத rendering ͞Εͳ͍ .addEventListener(…) ͷ callback setTimeout(() => {}) ͷ callback Promise ɾɾɾ
callback ʹΑΔඇಉظ taskA(() => { taskB(() => { taskC(() =>
{ }) }) }) • ͍ͭऴΘΔ͔Θ͔Βͳ͍ taskA ʹ callback ؔΛ ͯ͠ऴΘ͔ͬͯΒ࣮ߦ͢ΔॲཧΛҠৡ͢Δ ωετ͕ͲΜͲΜਂ͘ͳͬͯ͠·͏
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 Ͱ ࣦഊϋϯυϥͷίʔϧόοΫΛ༩͢Δ
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) }) ࣮ߦ͢ΔͱͲΜͳϩάग़ྗ͞ΕΔʁ
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 const url = 'https://hacker-news.firebaseio.com/v0/item/ 2921983.json?print=pretty' const fetchAsync =
async () => { try { const resp = await fetch(url) return resp.json() } catch (err) { console.error(err) } } await fetchAsync() ಉظؔͷΑ͏ʹPromiseΛѻ͏ Promise Λ async / await Ͱॻ͚Δ
Module
Ϟδϡʔϧͷྺ࢙ • <script> λά prototype.js ͳͲ…. • AMD (RequireJS)
• Browserify • UMD • ESModules ࠓશͳཧղ͡Όͳͯ͘ྑ͍ ͢ͱΩϦ͕ແ͘ͳΔ ͍Ζ͍Ζ ͋ͬͨ
ࠓͷԋशͰ͏ͷ Webଆ : ESModules APIଆ : CommonJS import doSomeThing from
'./doSomeThing.js' const a = 1 export default a const doSomeThing = require('./doSomeThing') const a = 1 module.exports = a Import / export ಛʹෳࡶɼ໊લ͖ default, as ͳͲ৭ʑͰ͖Δෳࡶ ࡉ͔͘ԋशͰ͍ͳ͕Βղઆ
DOM
DOM ͷ ૠೖ const parent = document.createElement("div"); const child =
document.createElement("span"); parent.appendChild(child); console.log(parent); // <div><span></span></div> ଞʹ insertBefore, replaceChild ͕͋Δ
DOM ͷআ // ཁૉ͕ෆ໌ɺෆఆͷ߹ͷํ๏ const node = document.getElementById("nested"); if (node.parentNode)
{ node.parentNode.removeChild(node); } DOM ʹؔ͢Δ API https://qiita.com/uhyo/items/1c565b61d934cbb88c2e ͳͲ͕Θ͔Γ͍͢
SPA Λ࡞Δ্Ͱ େͳ͜ͱ
SPAΛ࡞Δ্Ͱॏཁͳ͜ͱ • View ͱ ϩδοΫΛΓ͢ 7JFX ϩδοΫ มߋස : ߴ
มߋස : ςετ : ߴ ςετ : ViewͱϩδοΫ͕ີ݁߹ʹͳΔͱ ςετ͕ॻ͖ʹ͔ͬͨ͘Γ มߋʹऑ͘ͳͬͨΓ͢Δ
View ͱ ϩδοΫΛΓ͢ • MVC (Model-View-Controller) • MVVM (Model-View-ViewModel) •
Flux • ͳͲͳͲ… ViewͱϩδοΫΛΓͨ͢Ίʹ༷ʑͳΞʔΩςΫνϟύλʔϯ͕༗Δ
ࠔͬͨͱ͖Ͳ͏͢Δ͔
ࠔͬͨͱ͖ • ׂ͍͔ͭ͘Ѫͨ͠ͷ͕͋Γ·͢ ԋࢉࢠ : https://jsprimer.net/basic/operator/ σʔλܕ : https://jsprimer.net/basic/data-type/ ݅ذ
: https://jsprimer.net/basic/condition/ ϧʔϓ : https://jsprimer.net/basic/loop/ ޙͰݟ͓ͯ͘ͱྑͦ͞͏ͳͷ https://github.com/asciidwango/js-primer js-primer Ͱݕࡧ
ex. JavaScript ͔Β DOMΛ࡞Γ͍ͨ • ҰൠͷهࣄΑΓ ͳΔ͘ MDN ΛಡΉบΛ ʢݚमͱ͍͏ҙຯࠐΊͯʣ
• ௐͯΘ͔Βͳ͔ͬͨͱ͖ ԿΛͨͯ͘͠ɼͲ͏ௐ͔ͨ ڞ༗ͯ͘͠ΕΔͱخ͍͔͠
ԋश 1. JavaScript ͷجຊ 2. ԋश
ԋशͷ৺ߏ͑ • ՝ΛऴΘΒͤΔ͜ͱΛతͱ͠ͳ͍Ͱ͍ͩ͘͞ • पΓͷਓͷਐḿΛؾʹ͢Δඞཁ͋Γ·ͤΜ • ࣭͢ΔલʹࣗͳΓʹෆ໌Λਪଌͯ͠ΈΑ͏ • JavaScript ݚमલΑΓগ͠Ͱ
JavaScript Λ ॻ͚ΔΑ͏ʹͳ͍ͬͯͩ͘͞
ίʔεબ ϏΪφʔίʔε Ξυόϯευίʔε JavaScript ॻ͍ͨ͜ͱແ͍ਓ͖ `javascripting` ͱ͍͏υϦϧ ΛਐΊΔɺ͕࣌ؒ༨Ε TODO ཧΞϓϦ։ൃ
React.js / Vue.js Λ׆༻ͯ͠ΞϓϦέʔγϣϯΛ։ൃͨ͜͠ͱ͋Δਓ͖ ༩͑ΒΕͨ HTML, CSS, API αʔό ͔Β ϑϧεΫϥονͰ TODO ཧΞϓϦΛͤ͞Δ ϕʔγοΫίʔε JavaScript Λ গ͠ॻ͍ͨ͜ͱ͋Δਓ͖ લऀͷυΩϡϝϯτΛ ݩʹ ్த·Ͱ։ൃ͞Εͨ TODO ཧΞϓϦΛͤ͞Δ
ͦΕͧΕͷඪઃఆ ϏΪφʔίʔε Ξυόϯευίʔε ϕʔγοΫίʔε JavaScript Λ ಡΈ / ॻ͖ Ͱ͖ΔΑ͏ʹͳΔ
ਓͷॻ͍ͨ JavaScript ΛಡΊΔΑ͏ʹͳΓ JavaScript ͔Β DOMΛ׆༻Ͱ͖ΔΑ͏ʹͳΔ ػೳΛ࣮͢ΔͷʹՃ͑ͯ நԽΞʔΩςΫνϟύλʔϯΛ ࣗͰ࣮͢Δͷʹઓ
ϏΪφʔίʔε
४උ $ npm install @recruit-tech/javascripting -g $ javascripting ↑ ͜ΕΛ࣮ߦ
↓ Έ͍ͨͳը໘͕ͰΕ OK
ຊޠͷม͑ํ
ϕʔγοΫίʔε ϕʔγοΫίʔε Ξυόϯευίʔε
४උ • https://github.com/recruit-tech/ bootcamp-2021-js Λfork • README ʹैͬͯ ணख
ͦΕͰԋशʹ औΓΈ·͠ΐ͏ʂ