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
12k
JavaScript
2021年度リクルート エンジニアコース新人研修の講義資料です
Recruit
PRO
August 18, 2021
Tweet
Share
More Decks by Recruit
See All by Recruit
問題解決に役立つ数理工学
recruitengineers
PRO
8
2.4k
Curiosity & Persistence
recruitengineers
PRO
2
130
結果的にこうなった。から見える メカニズムのようなもの。
recruitengineers
PRO
1
280
成長実感と伸び悩みからふりかえる キャリアグラフ
recruitengineers
PRO
1
110
リクルートの オンプレ環境の未来を語る
recruitengineers
PRO
3
120
LLMのプロダクト装着と独自モデル開発
recruitengineers
PRO
1
170
新規検索基盤でマッチング精度向上に挑む! ~『ホットペッパーグルメ』の開発事例 ビジネス編
recruitengineers
PRO
2
98
新規検索基盤でマッチング精度向上に挑む! ~『ホットペッパーグルメ』の開発事例 技術編
recruitengineers
PRO
0
100
大規模プロダクトにおける フロントエンドモダナイズの取り組み紹介
recruitengineers
PRO
5
100
Other Decks in Technology
See All in Technology
Lightdashの利活用状況 ー導入から2年経った現在地_20250409
hirokiigeta
1
230
”知のインストール”戦略:テキスト資産をAIの文脈理解に活かす
kworkdev
PRO
8
3.4k
20250325_Logic Apps / Power Automate の SharePoint コネクタの裏側を知る 〜Graph APIで直接操作してみよう〜
yutakaosada
0
110
Spice up your notifications/try!Swift25
noppefoxwolf
1
110
7,000名規模の 人材サービス企業における プロダクト戦略・戦術と課題 / Product strategy, tactics and challenges for a 7,000-employee staffing company
techtekt
0
210
ソフトウェアプロジェクトの成功率が上がらない原因-「社会価値を考える」ということ-
ytanaka5569
0
140
MCP Documentation Server @AI Coding Meetup #1
yyoshiki41
1
2k
Beyond {shiny}: The Future of Mobile Apps with R
colinfay
0
210
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
180
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
3
1.8k
Multitenant 23ai の全貌 - 機能・設計・実装・運用からマイクロサービスまで
oracle4engineer
PRO
2
160
Road to SRE NEXT@仙台 IVRyの組織の形とSLO運用の現状
abnoumaru
1
450
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
35
3.2k
How GitHub (no longer) Works
holman
314
140k
GraphQLの誤解/rethinking-graphql
sonatard
70
10k
Done Done
chrislema
183
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
370
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
It's Worth the Effort
3n
184
28k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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 ʹैͬͯ ணख
ͦΕͰԋशʹ औΓΈ·͠ΐ͏ʂ