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
分散型と集中型で切り開くクラウドコスト最適化: リクルート横断プロダクトCroisのFinOps実践
recruitengineers
PRO
2
72
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
240
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
710
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
170
問題解決に役立つ数理工学
recruitengineers
PRO
13
2.8k
Curiosity & Persistence
recruitengineers
PRO
2
210
結果的にこうなった。から見える メカニズムのようなもの。
recruitengineers
PRO
1
460
成長実感と伸び悩みからふりかえる キャリアグラフ
recruitengineers
PRO
1
220
リクルートの オンプレ環境の未来を語る
recruitengineers
PRO
3
410
Other Decks in Technology
See All in Technology
生成AIを活用した野球データ分析 - メジャーリーグ編 / Baseball Analytics for Gen AI
shinyorke
PRO
1
100
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
1
250
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
150
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
260
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
320
robocopy の怖い話/scary-story-about-robocopy
emiki
0
390
複数のGemini CLIが同時開発する狂気 - Jujutsuが実現するAIエージェント協調の新世界
gunta
13
3.7k
機械学習を「社会実装」するということ 2025年夏版 / Social Implementation of Machine Learning July 2025 Version
moepy_stats
1
1.4k
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
170
Jitera Company Deck / JP
jitera
0
240
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
270
Step Functions First - サーバーレスアーキテクチャの新しいパラダイム
taikis
1
280
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Bash Introduction
62gerente
613
210k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
BBQ
matthewcrist
89
9.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Automating Front-end Workflow
addyosmani
1370
200k
Unsuck your backbone
ammeep
671
58k
How STYLIGHT went responsive
nonsquared
100
5.7k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Rails Girls Zürich Keynote
gr2m
95
14k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
GitHub's CSS Performance
jonrohan
1031
460k
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 ʹैͬͯ ணख
ͦΕͰԋशʹ औΓΈ·͠ΐ͏ʂ