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
우아한 자바스크립트 개발
Search
nigayo
April 13, 2018
Technology
11
7.1k
우아한 자바스크립트 개발
자바스크립트 코딩을 좀더 우아하게 하는 방법을 고민합니다.
nigayo
April 13, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
0
100
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
WAF に頼りすぎない AWS WAF 運用術 meguro sec #1
izzii
0
460
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
SCSAから学ぶセキュリティ管理
masakamayama
0
140
アジャイル開発とスクラム
araihara
0
160
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
290
エンジニアの育成を支える爆速フィードバック文化
sansantech
PRO
3
660
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Fireside Chat
paigeccino
34
3.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Statistics for Hackers
jakevdp
797
220k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
The Pragmatic Product Professional
lauravandoore
32
6.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
BBQ
matthewcrist
86
9.5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Practical Orchestrator
shlominoach
186
10k
Transcript
ইೠ߄झ݀ѐߊ ٘झ௪٘ ਮࣻ
٘झ௪٘݃झఠૉझੌ࢚ 13$PEF3FWJFX
const msnia = Array.from && Array.from({length: 40}, (v,i)=>++i) || Array.apply(null,{length:40}).map(Function.call,
Number).map((v)=> ++v); எ࠭౭j
֙ IUUQTXXXTMJEFTIBSFOFUKJTVZPVODMFBOGSPOUFOEEFWFMPQNFOU
ইೣۆޖੋо جইр
ܽ ܻ؊࠶_ ޥঌѢ э Բ х࢚ೞҊ र ױࣽೞӝ Ӓহח ࢚غח
ಬ ঋח ળࢎی ߓ۰ೞח
ಿઓղ ੌৈਬ ѐߊইೠ
ӒۢীبࠛҳೞҊ ইೠ߄झ݀ѐߊ
ܽ٘оޤীਃ ӒրաীೞݶऔѱೡѢэӒѪ
ই ӵ Ֆ ೧ ӵՖೠѪજ݅ ӒѪইੌࠗ࠙ ޤ۠Ѣ
߸҃ਸਤೠ٬ 6*חખ؊बೠ٠
ஹೊఠо೧ೞח٘ ߡӒহח٘ ѱоࢎۈऔѱ೧ೞח٘$ খਵ۽بߡӒহח٘
Ѿۿ
оةࢿGJSTU
Ӓۢ ࢿמन҃উॳջ ࠂೠޙઁоইפۄݶ ରରೞחѦ۽ ਃೡٸೞחѦ۽j оةࢿGJSTU
ܽ٘ۚ ઁөਬೞחࢲ࠺झীਃ যڃӝמ୶оؼભ ࢎਊחযڃࢎۈٜભ যڃജ҃ীࢲزೞભ ־о۽ਬࠁࣻೠؘਃ
դউೠ
Ӓী ܽࢸ҅ ׯইפջ
ࢎਊೞחଃ٘ܳݢҳഅೞӝ const modal = new Modal({..}); const slider = new
Slider({..}); const service = new ServiceMain(); service.addPlugin(modal, slider); service.on({//do something}); য࢝ೞঋਸٸөೠ ݈ ੌೠѢ
ࢸ҅ѐߊೠ Ӓ۠࠺ਯহ ࢎҊܴীݏ٣ੋೞӝ рױೞҊ ݺഛೠҳઑоաৢٸө҅ࣘࢸ҅
ೣࣻࣻળࢸ҅ ܴ݅ੜਵݶррࢸ҅ ࢸ҅оউજਵݶજܴաৢࣻহ ۄఠ৬߈ജী ҳഅറীחࢸ҅ഥҊ جইࠁפܴҗ߈ജ׳ۄj
GPP ઃ ־оܴખয
WTDPEFীࢎ۞Ӓੋਃೞ
ҳੋ NFBOJOH ܳࠗৈೞ time => currentTime data => addressData
ҳੋ NFBOJOH ܳࠗৈೞ const splitted = input.split('$')[0]; const studentName =
input.split('$')[0];
ೣࣻ sޖਸೞs calculate => calculateNextValue
HFU999 HFUޤӡযঠ ࢚ೡࣻחߧਤীࢲزೞب۾
ডযইצডযبডয async function async() { const int = 3; var
array = await resolveAfter2Seconds(); console.log(array); }
circle = 3.14 * r * r; d = _erx
* 999; হחंחઁߊj
//ೣࣻࢶ function execSomething({ width, height }) { console.log(width, height); }
//ࠗܰӝ execSomething({ width: 20, height: 400, maxNumber: 300, minNumber: 100 }); PCKFDUMJUFSBMܳਊೠݒѐ߸ࣻ׳
ಞউೠ٘ ೠ׀хҊ੍ח
ӛࢶ٘դӛੋੋр if(! (typeof data === “string”)) else … )
ઑѤޙೣࣻܳજই೧ਃ if( n % 1 === 0 ) { console.log(“ࣻ
”) } if( isInt(n) ) { console.log(“ࣻ ”) } +
ࠛਃೠݒೝহগӝ var todo = { "todo" : “todo", "done" :
“done”, , :- }
ܻ݅࠺ methodA(obj.methodA()[3], obj.methodB()[2]);
ա־ݶӝࢄߓоظਃ const data = []; [1,2,3,4,5].forEach((v,i) => { if(v%2) {
data.push(v); console.log(`${v} is added`); } }); [1,2,3,4,5].filter(v => v%2).forEach(v=>console.log(`${v} is added`)); ߹۽ જই
ೠ ܻ࠙աܻ࠙ݽইفӝ ݃աܻ࠙೧ঠೡө
эੑ۱ূ טэ۱ਵ۽߈ജ 3FGFSFOUJBMUSBOTQBSFODZ average([10,20,30,40]); //25 పझоएਕѤؒ
࢚కܳऔѱ࢚ೞӝ оәJNNVUBCMF let arr = [5,1,23,52,2]; const sortedArr = [...arr].sort((a,b)
=> a-b); console.log(arr, sortedArr);
ࢎҊܴਵ۽زೞחѤજ DIBJOJOH DPNQPTJUJPO const ArrayParser = str => { return
pipe(splited, _map(trimed), _map(removeBracket), resultToObj)(str) }
୭Ӕળਵ۽؊উೞҊಞউೠ٘ܳ DPOTUҗMFUਵ۽ਤӝ EFGBVMUQBSBNFUFS۽r]]sೞӝ BSSPXGVODUJPOਵ۽рױҊରೣࣻഅೞӝ &4
function Animal(name) { this.name = name; } Animal.prototype.speak = function()
{ console.log(this.name + ' makes a noise.'); } function Dog(name) { Animal.call(this,name); } Dog.prototype = Object.create(Animal.prototype); Dog.prototype.speak = function() { console.log(this.name + ' barks.'); } var myDog = new Dog("ൟو"); myDog.speak(); class Animal { constructor(name) { this.name = name; } speak() { console.log(this.name + ' makes a noise.'); } } class Dog extends Animal { speak() { console.log(this.name + ' barks.'); } } var d = new Dog('ൟو'); d.speak(); Ӓؘ۠ QSPUPUZQFঌҊॳӝਃ` ׳ೞ
addEventListener('fetch', event => { event.respondWith(async function() { const cache =
await caches.open(‘v1'); const cachedResponse = await cache.match(event.request); if (cachedResponse) { return cachedResponse;} const fetchedResponse = await fetch(event.request); const fetchObj = await cache.put(event.request, fetchedResponse.clone()); return fetchedResponse; }()); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.open('v1').then(function(cache) { return cache.match(event.request).then(function (response) { return response || fetch(event.request).then(function(response) { cache.put(event.request, response.clone()); return response; }); }); }) ); }); ҡଳই ؊જই 0 оә؊աইࠁחޙߨࢎਊ
٘ࣻয۵ݶ tӒېܻীѲࢳয” ঌӝয۰۽ਸഅ ۽Ӓ۔ܴഅ ҊѢܻ৬ೠ҅١хਸӝ ܲѐߊীѱ׳೧חݒࢎ೦
ࠂೞפफఠۄ ੌࠗ۞ۧѱҊщա
function run(arg) { if(arg !== 10) return; //do something… }
ইצѤ ࡈܻ߈ജೞӝ ߈ࠂޙীࢲחࡈܻDPOUJOVF FMTFޙبਃহ
for (let i = range - 1; i < d.length;
i++) { let sum = 0; for (let j = (i - range + 1); j <= (i); j++) { sum += d[j]; } result.push(sum); } for(var i=0; i<range; i++) { sum += d[i]; } for(var j=i-1; j<d.length; j++) { if(j === (range-1)) { console.log(j + "ө "+ range + "ѐ : ", sum); continue; } let start = j-(range); sum += d[j] - d[start]; console.log(j + 1 + "ө" + range + "ѐ : ", sum); } …. Ӓրշف݈ӝ ߹۽ જই ଵҊߓৌ<j/>ө ୭Ӕ.ѤಣӐਸҳೞח۽Ӓ۔
ࠂೞݶ ա־ࣁਃ return Array.from && Array.from({length: 40}, (v,i)=>++i) || Array.apply(null,{length:
40}).map(Function.call, Number).map((v)=> ++v); ٣ߡӦएਕחѤؒ
ࠂೠ֗ࢳਸऀѹߡܻӝ const checking =/^(([^<>()\[\]\\.,;:\s@“]+(\.[^<>()\ [\]\\.,;:\s@“]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\. [0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z] {2,}))$/.test(str); ࢎਊغחѤؒ const validEmail
= isValidEmail(eMail); ࣗࢎ
attr = (el, ...attr) =>(attr.some((k, i)=>{ eif(i % 2) return;
econst v = attr[i + 1]; eif(typeof el[k] == 'function') el[k](...(Array.isArray(v)? v :[v])); eelse if(k[0] == '@') el.style[k.substr(1)] = v; eelse el[k] = v; }), el); //ࢎਊ attr(sel(`#btn1`), e'@background', 'red', //झఋੌ e'innerHTML', 'write', //ࣘࢿ e'addEventListener', ['click', _=>post()] //߮ ); য٣ࢲࠌ؊ۄ ࠂೠ֗ࢳਸऀѹߡܻӝ
ёҙ҅ܳాೠઑѤޙহগӝ const moveCharacter = ({character, cmd, step}) => { //actionsਸ
ҙ҅۽ ࢸ೧فӝ. const Actions = { run(character,step) { return `${character} run ${step} meter`; }, jump(character, step) { return `${character} jump ${step} meter`; }, swim(character,step) { return ` ${character} swim ${step} meter`; } }; return Actions[cmd] && Actions[cmd](character, step); } moveCharacter({character:"crong", cmd:"jump", step:300}); moveCharacter({character:"codesquad", cmd:"run", step:10}); moveCharacter({character:"crong", cmd:"swim", step:1000});
ੌҙؽ ցоযڌѱૢդ࢚ػפө
୭ࣗೠ٬ஶ߮࣌ਬೞӝ য٣ীޙܳॶ @৬חઁॶ &4 &4
jӝఋ١١ OBNJOHSVMF݅ੜٜযبޤ
߈ࠂܻܳ݃ҳ߈ࠂೞ݈ tGPSGPS&BDISFEVDFNBQGJMUFSGPSPGXIJMFju ޖਸઁॶѪੋо DIBJOJOHਵ۽അೡѪੋо Ҋରೣࣻࢶয٣ীࢲೡѪੋо
फযبਸਤ೧ ݏ୶ۄ
001 ୶࢚ച ङച ࢚ࣘ ഋࢿjޖࢲߡ
40-*% ੜݽܰѷਵݶ ߸҃ীੜೞחٜ٘ܳ݅যࠁ
ېझҳઑܳױࣽೞѱਬ ࠂೠ࢚ࣘjஞݎೠ JNBHFIUUQNPOLFZTJNBHJOBSZSFBMJUJFTDPNJNBHFTGG+BWBHJG
ٸۿ ࢚ࣘन NJYJOաࢿ DPNQPTJUJPO //Super class const Character =
class { constructor(name) { this.name = name; } } //methods function walk() { console.log(this.name, "is walking")} function run() { console.log(this.name, "is running")} function jump() { console.log(this.name, "is jumping")} function swim() { console.log(this.name, "is swimming:")} function fly() { console.log(this.name, "is flying")} let man = new Character("caly"); walker = Object.assign(man, {walk, run}); let spyderMan = new Character("robert"); walker = Object.assign(spyderMan, {walk, run, jump}); let ironMan = new Character("caly"); walker = Object.assign(walker, {walking}, {running}, {jumping}, {fly}); spyderMan.run();
ࢲ࠳ӝמ߄Ոٜ ݫੋӝמӒ۽ ઓࢿਸੑೞҊ ࠺तೠزੌҙػ"1*۽ز %* 0$1 MPDBMTUPSBHF JOEFYFE%# const A
= class { … getDage(data) { //ࢲ࠳ӝמ ݽف getDataܳ ࢎਊ return this.repo.getData(); } } const a = new A(new idxDBStrorage());
ࣻоইפݶ ২࣌ਵ۽ઁҕ var options = { tooltip: { grouped: true,
template: function(category, items, categoryTimestamp) { var head = '<div>' + category + '</div>', body = tui.util.map(items, function(item) { return '<div>' + item.value + ':' + item.legend + '</div>' }),join(''); return head + body; } } }; tui.chart.lineChart(container, data, options); DPEFIUUQTHJUIVCDPNOIOFOUUVJDIBSUCMPCQSPEVDUJPOEPDTXJLJGFBUVSFTUPPMUJQNEFYBNQMF
ېझী উ݃۲ೞӝ const privateMethods = { privateMethod () { console.log(this.say);
} } export default class Service { constructor () { this.say = "Hello"; } publicMethod () { privateMethods.privateMethod.call(this); } } DPEFIUUQTNFEJVNDPN!EBWJESIZTXIJUFQSJWBUFNFNCFSTJOFTECDDEB 4ZNCPMTਸਊೡࣻبೣ
ী۞ܻ ѐߊٜীѱо٘ܳ೧ࠁ
ী۞ܻڙڙೠݒ
ࢎਊۄ࠳۞ۄݶ DVTUPNFSSPSبݧ class MyError extends Error { constructor(message) { super(message);
this.message = message; this.name = '[FOO Service Error]'; } } class FooTypeError extends MyError { constructor(message) { super(message); this.message = message; this.name = '[FOO Service Type Error]'; if (Error.captureStackTrace) { Error.captureStackTrace(this, FooTypeError)} } } function setName(name) { if(typeof name !== "string") throw new FooTypeError("setName() : string ఋੑ݅ ೲਊפ"); //do something } function run() { try { setName(12345); }catch (e) { if(e instanceof MyError) { console.log(` ${e.stack}`); } else { console.log(e); } } } run(); VM922:28 [FOO Service Type Error]: setName() : string ఋੑ݅ ೲਊפ
Ѥ୷ ܻಂష݂ইѤ୷җܰ
ࠂೠ٘оաয়ӝী ૣӝܻಂష݂ ࢸ҅ ѐߊ ܻಂష݂ ࢸ҅ ѐߊ ܻಂష݂ ࢸ҅ ѐߊ
ܻಂష݂ ࢸ҅ ѐߊ ಂష݂
ܻಂష݂दࠂਸহগחѪࠗఠ JNBHFIUUQXXXTFFEPGUPNPSSPXDPNXQDPOUFOUVQMPBETDMPOFKQH ❌ ❌ ❌
ӝ݅ৈաоب߈ࢿҕ✌ ېझ ೣࣻ
৻۽ੜޅೞח ੋݒѐ߸ࣻੜॳӝ ё ֎झಕझ ېझࢎਊ ߸ࣻઁѢ
ղࠗܳࠁഐೞۄ const _ = (function CodeSquadUtil() { let innerValue =
""; const print = function(msg) {console.log(msg)} const min = function() { return 'min'}; const sumBy = function() {}; const round = function() {}; return {min, sumBy, round} })(); console.log(_.min());
ݯߡ߸ࣻח߸ࣻ৬ޤоܲо class Todo { constructor(id, task){ this.id = id; this.task
= task; this.state = ‘todo; this.time = {}; this.Seconds = 1000; this.resultList = 1000; this.lastTime = 1000; this.buffer = 1000; } update(state){ this.state = state; } …
ۄ࠳۞ܻо٘
WBOJMMB"1* হחѪٜ݅যࠁӝ ۄ࠳۞ܻॳӝ
class smartCollection extend Array { exec() { …} } Ѥ٧ࣻҊ
Ѥ٘۰ঠೞחѤইפ OBUJWF"1*ա ۄ࠳۞ܻחખ؊উೞѱഛೞӝ
ۨਕоܻ٘ܳܽೞѱ೧ঋ؊ۄ MJGFDZDMF߸ചܳળ3FBDU MJGFDZMFਸٜ݅ਵա بೠѪۢੜॳޅೞ؊ۄj
જبҳبॳӝաܴ 'SBNFXPSLח୭ࣗೠࣻળਸਬ೧ળ ࠺زӝܻחযוदীೡѪੋо যڌѱUFNQMBUJOHসਸೡѪੋо ܴਸযڌѱਸѪੋо ஹನքӝחযוب۽ೡѪੋо
ؘఠܻחযڃݫࢲ٘ܳॳݶࢲܻೡѪੋо ஹನքрؘఠ׳যڌѱೡѪੋо ۨਕоܻ٘ܳܽೞѱ೧ঋ؊ۄ
݄݃ਵ۽
ܽ٘חթਸߓ۰ೞח٘ Ӓؘ۠ ѾҴ աܳߓ۰ೞח٘ӝبೞ
tܽ٘חѐߊޙചѾҗޛ Րহࢸٙೞۄ աܳਤ೧ u ܻ࠭ޙച ಕয۽Ӓې߁ ೣԋࢿೞӝ ಿࢶ
݆ଵҊ೮Ҋ ഴܯೠܐٜ IUUQTHJUIVCDPNSZBONDEFSNPUUDMFBODPEFKBWBTDSJQU IUUQTHJUIVCDPNBJSCOCKBWBTDSJQU
хࢎפ ٘झ௪٘ ਮࣻ DSPOH!DPEFTRVBELS