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
5
200
毎晩の 負荷試験自動実行による効果
recruitengineers
PRO
5
290
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
1k
Javaで作る RAGを活用した Q&Aアプリケーション
recruitengineers
PRO
1
190
問題解決に役立つ数理工学
recruitengineers
PRO
13
2.9k
Curiosity & Persistence
recruitengineers
PRO
2
220
結果的にこうなった。から見える メカニズムのようなもの。
recruitengineers
PRO
1
480
成長実感と伸び悩みからふりかえる キャリアグラフ
recruitengineers
PRO
1
240
リクルートの オンプレ環境の未来を語る
recruitengineers
PRO
3
500
Other Decks in Technology
See All in Technology
Intro to Software Startups: Spring 2025
arnabdotorg
0
270
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
180
GISエンジニアよ 現場に行け!
sudataka
1
140
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
3
1.6k
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
140
Rethinking Incident Response: Context-Aware AI in Practice - Incident Buddy Edition -
rrreeeyyy
0
110
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
220
Eval-Centric AI: Agent 開発におけるベストプラクティスの探求
asei
0
150
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
770
コミュニティと計画的偶発性理論 - 出会いが人生を変える / Life-Changing Encounters
soudai
PRO
4
180
20250807_Kiroと私の反省会
riz3f7
0
260
メルカリIBIS:AIが拓く次世代インシデント対応
0gm
2
430
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Done Done
chrislema
185
16k
It's Worth the Effort
3n
186
28k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Making Projects Easy
brettharned
117
6.3k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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 ʹैͬͯ ணख
ͦΕͰԋशʹ औΓΈ·͠ΐ͏ʂ