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
20250130_『SUUMO』の裏側!第2弾 ~機械学習エンジニアリング編
recruitengineers
PRO
1
460
Asset Centric な データ変換パイプラインの攻略法
recruitengineers
PRO
1
140
Kotlin Multiplatformのポテンシャル
recruitengineers
PRO
2
190
デザイン初め新年会2025_川端_PdM Days2025
recruitengineers
PRO
0
59
Azure Functions HTTPトリガーにおけるタイムアウトでハマったこと
recruitengineers
PRO
2
360
実務につなげる数理最適化
recruitengineers
PRO
7
990
うちにも入れたいDatadog
recruitengineers
PRO
2
1.8k
リクルートのデータ基盤 Crois 年3倍成長!1日40,000コンテナの実行を支える AWS 活用とプラットフォームエンジニアリング
recruitengineers
PRO
3
540
Splunk Enterpriseで S3のデータを直接検索してみた!
recruitengineers
PRO
2
300
Other Decks in Technology
See All in Technology
Fin-JAWS第38回reInvent2024_全金融系セッションをライトにまとめてみた
mhrtech
1
160
Power BI は、レポート テーマにこだわろう!テーマのティア表付き
ohata_ds
0
140
[JAWS-UG栃木]地方だからできたクラウドネイティブ事例大公開! / jawsug_tochigi_tachibana
biatunky
0
200
[2025クラウドガバナンスはこう変わる!マルチアカウント運用のre:Invent最新情報と活用例] re:Invent 2024 から見る AWS マルチアカウントガバナンスのこれまでとこれから
0nihajim
0
110
日本語プログラミングとSpring Bootアプリケーション開発 #kanjava
yusuke
2
370
Amazon GuardDuty Malware Protection for Amazon S3のここがすごい!
ryder472
1
100
アーキテクチャわからん、の話
shirayanagiryuji
0
260
AIをプロダクトに実装するならAPIで分離しよう 〜タクシーアプリ『GO』のアーキテクチャ実例紹介〜
74th
2
130
Women in Agile
kawaguti
PRO
3
190
SCSAから学ぶセキュリティ管理
masakamayama
0
130
ろう・難聴者のコミュニケーションを円滑化する取り組み
chiemi627
0
100
A Hidden Pitfall of K8s DNS with Spring Webflux
musaprg
0
220
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
290
Optimising Largest Contentful Paint
csswizardry
33
3.1k
Scaling GitHub
holman
459
140k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Writing Fast Ruby
sferik
628
61k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Git: the NoSQL Database
bkeepers
PRO
427
64k
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 ʹैͬͯ ணख
ͦΕͰԋशʹ औΓΈ·͠ΐ͏ʂ